/* ═══════════════════════════════════════════════════════════════
   ANO DREAMS — responsive-checkout.css
   Mobile/phone refinements for CART (cart.php) + CHECKOUT (checkout.php)
   ───────────────────────────────────────────────────────────────
   Loads AFTER anodreams.css → wins on specificity (no !important unless
   unavoidable). Touches ONLY the cart/checkout-specific bespoke layout:
   the .split summary/form columns, the cart line-item .card rows, the
   qty steppers, the #payPills payment rows, the coupon/points/gift
   forms and the sticky pay CTA. Desktop (>768px) is left untouched.

   Scoping notes (real selectors, verified against the markup):
   · Cart line items  = `.split > .reveal > .card` (direct children of the
     left column in the cart's `.split`; catalog cards live in `.grid`,
     so they are NOT matched).
   · Summary panels   = `.split .panel[data-d="1"]` (the sticky sidebar in
     BOTH cart.php and checkout.php).
   · Payment options  = `#payPills .pill` (checkout only).
   The global stack of `.split` → single column already happens at
   ≤880px in anodreams.css, so inside these breakpoints both pages are
   already one column — here we only TUNE order, spacing & reachability.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   ≤768px — phones & small tablets
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── 1 · CHECKOUT / CART column order ──────────────────────────
     `.split` is already single-column here. We make the form/items
     column come first and the summary (with the pay CTA) sit right
     below it — the natural "fill in → review → pay" reading order.
     The left column in both pages is the FIRST `.reveal`; the
     summary panel carries data-d="1". Use explicit order to be safe
     even if source order ever shifts. */
  .split > .reveal{ order:1; }
  .split .panel[data-d="1"]{ order:2; }

  /* The summary is a desktop sticky sidebar (top:100px). On phones a
     top-stick is pointless (it's already in normal flow); neutralise
     it so it scrolls naturally and the sticky PAY BUTTON inside it can
     own the bottom edge instead. */
  .split .panel[data-d="1"]{
    position:static;
    top:auto;
  }

  /* Comfortable summary panel: a touch less padding, full width,
     and give breathing room above it once stacked. */
  .split .panel[data-d="1"]{
    padding:22px 18px;
    margin-top:22px;
  }

  /* Totals rows stay legible: prevent the label/value flex rows from
     letting a long coupon/gift label shove the price off-screen. */
  .split .panel[data-d="1"] .flex.between{
    gap:12px;
    align-items:baseline;
  }
  .split .panel[data-d="1"] .flex.between > span:first-child{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .split .panel[data-d="1"] .flex.between > span:last-child{
    flex:none;
    white-space:nowrap;
    text-align:right;
  }

  /* Order-summary line-item scroller (checkout): cap height to the
     viewport rather than a fixed 260px so short carts don't reserve
     dead space and long carts stay scrollable without page overflow. */
  .split .panel[data-d="1"] > .mt-2[style*="overflow"]{
    max-height:min(240px,38vh);
  }
  .split .panel[data-d="1"] > .mt-2[style*="overflow"] .flex.between{
    gap:10px;
  }

  /* ── 2 · CART line items ───────────────────────────────────────
     Desktop row = [thumb | name+qty+price+remove]. On phones keep the
     thumb on the left but let the detail column breathe; guarantee no
     horizontal overflow even with very long product names. */
  .split > .reveal > .card{
    gap:14px;
    padding:14px;
    align-items:flex-start;          /* top-align thumb with the title */
  }
  /* thumb: the leading <a>; slightly smaller, never shrinks */
  .split > .reveal > .card > a:first-child{
    width:74px !important;           /* overrides inline width:88px */
    height:92px !important;          /* overrides inline height:108px */
  }
  /* detail column already has flex:1;min-width:0 — reinforce wrapping */
  .split > .reveal > .card > div{
    min-width:0;
  }
  .split > .reveal > .card .product__name{
    font-size:1rem;
    line-height:1.3;
    overflow-wrap:anywhere;          /* long unbroken names won't overflow */
  }
  .split > .reveal > .card .product__sub{
    overflow-wrap:anywhere;
  }

  /* The qty-form / price-remove row: allow it to wrap on narrow
     phones so the price+remove drop under the stepper instead of
     squeezing. Keeps both groups fully tappable. */
  .split > .reveal > .card .flex.between.items-center{
    flex-wrap:wrap;
    gap:12px;
    row-gap:12px;
  }

  /* ── 3 · QUANTITY controls (≥44px tap targets) ────────────────
     Inline styles set the .pill steppers to width:38px;padding:8px.
     Bump to a comfortable ≥44px square with a clear, centered +/−. */
  .split > .reveal > .card form .pill{
    width:44px !important;           /* overrides inline width:38px */
    height:44px;
    min-width:44px;
    padding:0 !important;            /* overrides inline padding:8px */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    line-height:1;
  }
  /* the qty number between the buttons: a bit wider so two-digit
     quantities stay centred and legible */
  .split > .reveal > .card form > span{
    min-width:34px;
    font-size:1rem;
  }

  /* Remove (trash) icon-btn: keep it reachable; nudge to ≥44px.
     Scoped to the cart card so the global 36px icon-btns elsewhere
     are untouched. */
  .split > .reveal > .card .icon-btn{
    width:44px !important;
    height:44px !important;
  }
  .split > .reveal > .card .icon-btn .ico{
    width:18px;
    height:18px;
  }

  /* ── 5a · STICKY PAY CTA — cart "Zur Kasse" ────────────────────
     CSS-only: make the primary block buttons inside the summary panel
     sticky to the viewport bottom while the panel is in view. Because
     the panel is in normal flow (not a scroll container) on mobile,
     a sticky child pins to the bottom edge and is always thumb-reach-
     able as the user scrolls the order. A subtle backdrop + shadow
     lifts it off the content behind. Scoped to the summary panel so no
     other .btn--block on the site is affected. */
  .split .panel[data-d="1"] .btn--block.btn--chrome,   /* cart  → Zur Kasse */
  .split .panel[data-d="1"] .btn--block.btn--gold{     /* checkout → Bestellen */
    position:sticky;
    bottom:12px;
    z-index:20;
    width:100%;
    padding-top:15px;
    padding-bottom:15px;
    font-size:1rem;
    box-shadow:0 12px 30px -6px rgba(0,0,0,.7),
               0 0 0 6px var(--ad-night);  /* halo separates it from text behind */
  }
  /* keep the "Weiter shoppen" / legal note clear of the stuck CTA */
  .split .panel[data-d="1"] .btn--block.btn--ghost{
    position:relative;
    z-index:1;
    width:100%;
  }

  /* ── 4 · PAYMENT-METHOD options (full-width tappable rows) ──────
     #payPills is already column-stacked inline. Make each label a
     generous, full-width tap row with comfortable radio + label. */
  #payPills .pill{
    width:100%;
    min-height:54px;
    padding:14px 16px;
    border-radius:14px;
    gap:14px;
  }
  #payPills .pill span{
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1.25;
  }
  /* enlarge the radio for finger accuracy */
  #payPills .pill input[type="radio"]{
    width:22px;
    height:22px;
    flex:none;
  }

  /* ── 6 · Coupon / points / gift-card forms (stack & full-width) ─
     These live inside the summary panel as `.flex.gap` (input + apply)
     or `.flex.between` (active/remove). Stack the input over the apply
     button and make both full-width & tappable. */
  .split .panel[data-d="1"] form.flex.gap{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .split .panel[data-d="1"] form.flex.gap .input{
    width:100%;
    padding:13px 14px;
  }
  .split .panel[data-d="1"] form.flex.gap .btn{
    width:100%;
    min-height:46px;
  }
  /* active-code / redeemed rows (remove buttons) stay legible & tappable */
  .split .panel[data-d="1"] form.flex.between .btn--sm{
    min-height:40px;
    padding:8px 14px !important;     /* overrides tight inline 6px/12px */
  }
  .split .panel[data-d="1"] form.flex.between .icon-btn{
    width:38px !important;
    height:38px !important;
  }

  /* ── 7 · EMPTY-CART state (centered & comfortable) ─────────────
     The empty state is `.panel.center` on cart.php. Tidy spacing and
     a full-width CTA so the single action is obvious on a phone. */
  .panel.center{
    padding:54px 24px !important;    /* overrides inline 70px 30px */
  }
  .panel.center .btn{
    width:100%;
    max-width:320px;
  }
}

/* ════════════════════════════════════════════════════════════════
   ≤480px — small phones (tighten further)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:480px){

  /* Summary panel: edge-to-edge feel, smaller inner padding */
  .split .panel[data-d="1"]{
    padding:18px 14px;
    border-radius:18px;
  }

  /* Cart line item: on the smallest screens, stack the thumb above
     the details so long names + the qty/price row get full width and
     can never cause horizontal overflow. */
  .split > .reveal > .card{
    flex-direction:column;
    gap:12px;
  }
  .split > .reveal > .card > a:first-child{
    width:100% !important;
    height:200px !important;         /* wide hero thumb on tiny screens */
  }
  .split > .reveal > .card > a:first-child img{
    object-position:center;
  }
  /* with full width available, let qty + price sit on one tidy row */
  .split > .reveal > .card .flex.between.items-center{
    flex-wrap:nowrap;
  }

  /* Totals: slightly smaller so big numbers never wrap awkwardly */
  .split .panel[data-d="1"] .flex.between[style*="1.25rem"]{
    font-size:1.15rem;
  }

  /* Pay CTA hugs the bottom a touch tighter on small phones */
  .split .panel[data-d="1"] .btn--block.btn--chrome,
  .split .panel[data-d="1"] .btn--block.btn--gold{
    bottom:10px;
  }

  /* Payment rows: keep the inline "via Stripe" hint readable */
  #payPills .pill span small{
    font-size:.72rem;
  }

  /* Empty-cart icon a little smaller in the centered panel */
  .panel.center{
    padding:44px 18px !important;
  }
}