/* =============================================================================
   The cart, the drawer and checkout on a phone — 2026-10-23.

   Operator: "production is shit on my phone ... 83% of our customers visit
   with the phone ... fucking test it". Every rule here answers one defect
   measured at 390x844 in test/system/cart_and_checkout_read_on_a_phone_test.rb.

   Loaded by every brand layout AFTER the brand sheet and brand_partials, so
   a rule here wins an equal-specificity tie on source order. Every rule
   names its block root (the brand body class or the block), and anchors
   carry `a.`. No colours are set here: paint stays with the brand sheets
   and shared/brand_partials.css. Desktop is untouched — every layout rule
   sits inside the phone query.
   ============================================================================= */

/* ── The closed drawer casts no shadow ────────────────────────────────────
   A closed panel sits at translateX(100%), just past the right edge, and
   its `box-shadow: -4px 0 24px` reached 20px back into the viewport: a
   grey strip down the right of every BacWater page, at every width. The
   shadow belongs to the open drawer only. */
.bacwater-cart-drawer:not(.bacwater-cart-drawer--open) .bacwater-cart-drawer__panel,
.peprally-cart-drawer:not(.peprally-cart-drawer--open) .peprally-cart-drawer__panel,
.glam-cart-drawer:not(.glam-cart-drawer--open) .glam-cart-drawer__panel,
.mypeptides-cart-drawer:not(.mypeptides-cart-drawer--open) .mypeptides-cart-drawer__panel,
.surfpeptides-cart-drawer:not(.surfpeptides-cart-drawer--open) .surfpeptides-cart-drawer__panel {
  box-shadow: none;
}

/* "1–2 business days" is one phrase; a line break at the dash reads as
   "1–" then "2 business days". */
.sr-nowrap { white-space: nowrap; }

@media (max-width: 767.98px) {
  /* ── The summary spans the phone ────────────────────────────────────────
     The container's gutter plus the summary's own padding left ~48px of
     nothing each side, and squeezed "ORDER SUMMARY" and the checkout
     button onto two lines. Full-bleed, 16px inside. */
  body.peprally .peprally-cart__summary,
  body.bacwater .bacwater-cart__summary,
  body.mypeptides .mypeptides-cart__summary,
  body.surfpeptides .surfpeptides-cart__summary,
  body.glam .glam-cart .functionCart {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 16px;
    padding-right: 16px;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
  }
  body.glam .glam-cart .functionCart > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  body.peprally .peprally-cart__summary .peprally-cart__summary-heading,
  body.bacwater .bacwater-cart__summary .bacwater-cart__summary-heading,
  body.mypeptides .mypeptides-cart__summary .mypeptides-cart__summary-heading,
  body.surfpeptides .surfpeptides-cart__summary .surfpeptides-cart__summary-heading {
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ── One line, thumb-tall, full width ───────────────────────────────────
     PepRally's CTA carries the theme's `.button` classes, whose phone type
     scale made "PROCEED TO CHECKOUT" a two-line, 124px slab. The theme rules
     it must beat are `!important`, so these are too. */
  body.peprally .peprally-cart__summary a.peprally-cart__checkout-btn.button,
  body.peprally .peprally-cart__summary a.peprally-cart__checkout-btn,
  body.bacwater .bacwater-cart__summary a.bacwater-cart__checkout-btn,
  body.mypeptides .mypeptides-cart__summary a.mypeptides-cart__checkout-btn,
  body.surfpeptides .surfpeptides-cart__summary a.surfpeptides-cart__checkout-btn,
  body.glam .glam-cart .functionCart a.glam-cart__checkout-btn {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 52px;
    height: auto !important;
    padding: 14px 12px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
  }

  /* ── The promo field reads whole ────────────────────────────────────────
     Beside the Apply button the field had ~100px, and "Squad or credit
     code" was cut to "Squad or cre". Stacked: the field takes the width,
     the button sits under it. */
  .sr-widget.sr-widget--coupon .sr-widget__form {
    flex-direction: column;
    align-items: stretch;
  }
  .sr-widget.sr-widget--coupon button.sr-widget__button {
    width: 100%;
  }

  /* ── The drawer's totals follow the items ───────────────────────────────
     The item list was `flex: 1`, so with one item the totals and the
     checkout button sat at the bottom of the screen with a gap of nothing
     above them. The list keeps its scroll when it is long. */
  .peprally-cart-drawer__list,
  .bacwater-cart-drawer__list,
  .glam-cart-drawer__list,
  .mypeptides-cart-drawer__list,
  .surfpeptides-cart-drawer__list {
    flex: 0 1 auto !important;
    min-height: 0;
  }
}

/* ── BacWater's one footer carries the contact address — 2026-10-23 ───────
   The address moved here from the retired three-column Vela footer, where
   it rendered at ~8px on a phone. Ink from the brand's own link rule. */
body.bacwater .brand-footer .brand-footer__contact {
  font-size: 14px;
  margin: 0 0 16px;
}