.usnacks-buybox--plan-picker {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .quantity-note strong,
  .quantity-note b {
    color: #00592D;
  }

  /* Discount message animation */
  .discount-message {
    overflow: hidden;
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
  }

  /* Radio circle inner dot - requires pseudo-element */
  .plan-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--brand-strongest, #00351b);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .plan-btn.selected .plan-radio::after {
    opacity: 1;
  }

  /* Number input spinner removal */
  .quantity-input::-webkit-outer-spin-button,
  .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .quantity-input {
    -moz-appearance: textfield;
  }

  /* Empty state for compare price */
  .add-to-cart-compare-price:empty {
    display: none;
  }

  /* States that require JS class toggles */
  .sugar-btn.active {
    border-color: #000;
    background: #000;
    color: #fff;
  }

  .variant-config {
    display: none;
  }

  .variant-config.active {
    display: block;
  }

  .plan-btn.selected {
    border-color: var(--brand-strongest, #00351b);
    background: var(--brand-selected-bg, #daece3);
  }

  .plan-btn.selected .plan-radio {
    border-color: var(--brand-strongest, #00351b);
  }

  /* Sold-out plan card. Replaces the Tailwind `disabled:opacity-50 disabled:cursor-not-allowed`
     variants that no longer apply now the cards are <div role="radio">s (D8). The JS gate checks
     `data-available`, not this attribute, so behavior is unchanged. */
  .plan-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .otp-text-link {
    margin-top: -16px;
    margin-bottom: -16px;
  }

  .quantity-selector.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .add-to-cart-btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
  }

  .add-to-cart-btn {
    background-color: var(--brand-primary, #007E40);
  }

  .add-to-cart-btn:hover {
    background-color: color-mix(in srgb, var(--brand-primary, #007E40) 90%, black);
  }

  .add-to-cart-btn:disabled {
    background-color: var(--color-gray-strong, #b9bdc7);
    cursor: not-allowed;
    pointer-events: none;
  }

  .plan-discount-tag {
    background-color: var(--brand-strongest, #00351b);
  }

  .monthly-eyebrow {
    background-color: var(--brand-strongest, #00351b);
  }

  /* Intelligems: ATC inside plan cards */
  .plan-atc-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
    margin-top: 0;
  }

  .plan-btn.selected .plan-atc-wrapper {
    max-height: 80px;
    opacity: 1;
    margin-top: 12px;
  }

  .plan-atc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.5rem;
    border: 1px solid black;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--brand-primary, #007E40);
  }

  .plan-atc-btn:hover {
    background-color: color-mix(in srgb, var(--brand-primary, #007E40) 90%, black);
  }

  .plan-atc-btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
  }