/* ═══════════════════════════════════════════════════════════════
   ANO DREAMS — responsive-core.css
   Mobile/iPhone + Android polish for GLOBAL CHROME, FORM ATOMS &
   PAGE SCAFFOLD only. Loaded AFTER anodreams.css.

   Scope rules:
   • Desktop (>768px) is intentionally LEFT UNTOUCHED.
   • Overrides live inside @media (max-width:768px) / (max-width:480px).
   • EXTENDS the base @media blocks (880 / 560 / 480) — never duplicates
     or contradicts them. Where the base already handles something
     (e.g. hiding .nav__links, .row-2→1fr at 560px) we only fill gaps.
   • Other agents own catalog / product-detail / checkout / account
     bespoke components — NOT styled here.
   ═══════════════════════════════════════════════════════════════ */


/* ── 0 · Global primitives (safe, unconditional) ─────────────────
   Hardens against horizontal overflow on every viewport. The base
   already sets these on html/body & img; we reinforce body and widen
   the media reset to svg/video so embeds can never blow out the page. */
html,
body{ overflow-x:hidden; }
img,
svg,
video,
canvas{ max-width:100%; height:auto; }
/* keep object-fit media (cover thumbnails) crisp — don't force height:auto on them */
img[width],
img[height],
.product__img,
.qv-media img,
.mc-thumb img,
.mc-rec-thumb img,
.ss-item img{ height:auto; }
.product__img,
.qv-media img,
.mc-thumb img,
.mc-rec-thumb img,
.ss-item img{ height:100%; }


/* ═══════════════════════════════════════════════════════════════
   PHONE & SMALL TABLET  —  max-width:768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── 1 · Page scaffold ─────────────────────────────────────────
     Tighter gutters + shorter vertical rhythm so content breathes
     on a narrow screen without feeling cramped. */
  .wrap{ padding-inline:16px; }
  .section{ padding:clamp(40px,8vw,64px) 0; }
  .section--tight{ padding:clamp(28px,6vw,48px) 0; }

  /* Type scale — nudge the big display sizes down a touch for balance
     (clamps already shrink; this trims the upper bound on phones). */
  .h-hero{ font-size:clamp(2.6rem,13vw,4.2rem); }
  .h-1{ font-size:clamp(1.9rem,7vw,2.6rem); }
  .h-2{ font-size:clamp(1.4rem,5.5vw,2rem); }
  .lead{ font-size:1.02rem; }
  .eyebrow{ font-size:.66rem; letter-spacing:.32em; }

  /* Panels (auth cards, generic surfaces) — trim inner padding. */
  .panel{ padding:clamp(20px,5vw,30px); }
  .sec-head{ margin-bottom:32px; }


  /* ── 2 · Navbar (global chrome) ────────────────────────────────
     Base hides .nav__links and shows .burger at 880px already, so by
     768px the burger layout is active. We only refine spacing & make
     every interactive target finger-friendly (≥44px). */
  .nav{ padding:14px 0; }
  .nav.scrolled{ padding:10px 0; }
  .nav__inner{ gap:10px; }
  .nav__links{ display:none; }            /* safety: stay hidden on phones */
  .burger{ display:grid; }                /* safety: ensure burger visible */

  /* Brand slightly smaller so it never collides with the action row. */
  .brand{ font-size:1.45rem; }

  /* Tighter gutter for the nav row specifically. */
  .nav .wrap.nav__inner{ padding-inline:16px; }

  /* Action icons: comfortable, evenly spaced tap targets. */
  .nav__actions{ gap:8px; }
  .nav__actions .icon-btn{
    width:44px; height:44px;
  }
  .icon-btn .ico{ width:21px; height:21px; }
  /* keep the cart count legible & clear of the icon edge */
  .cart-badge{ top:-3px; right:-3px; }


  /* ── 3 · Mobile menu panel ─────────────────────────────────────
     Base renders it full-screen & centered. Make the links generous,
     genuinely tappable rows (≥48px) and add safe-area padding so the
     last items clear iPhone notch / home indicator. */
  .mobile-menu{
    gap:4px;
    padding:88px 28px calc(40px + env(safe-area-inset-bottom));
    justify-content:flex-start;          /* start under the navbar, scroll if long */
    overflow-y:auto;
  }
  .mobile-menu a{
    font-size:2rem;
    line-height:1.2;
    min-height:56px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }


  /* ── 4 · Search overlay (global chrome) ────────────────────────
     Full-screen sheet, big input, large tappable suggestions. */
  .search-overlay{
    bottom:0;                             /* cover full height on phones */
    padding-bottom:max(28px,env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  /* the form is inline-styled in header.php (padding-top:90px) — keep its
     gutter consistent with the rest of the page */
  .search-overlay form.wrap{ padding-inline:16px; }
  .search-overlay .input{
    font-size:16px;                       /* prevent iOS focus-zoom */
    padding-top:10px; padding-bottom:10px;
  }
  .search-suggest{ max-height:none; }     /* let the whole sheet scroll */
  .ss-item{ padding:12px; min-height:44px; gap:12px; }
  .ss-name{ font-size:1rem; }


  /* ── 5 · Footer ────────────────────────────────────────────────
     Base goes 4→2 cols at 880px and 1 col at 560px. Between 561–768
     we want a clean 2-col layout, and the newsletter/brand blocks
     should span full width. Legal links wrap as comfy tap targets. */
  .footer{ padding-top:48px; margin-top:40px; }
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:28px 24px;
  }
  /* brand intro + newsletter read better full-width */
  .footer__brand,
  .footer__grid > div:last-child{ grid-column:1 / -1; }
  .footer__brand p{ max-width:46ch; }

  /* newsletter row: input stays usable, send button stays square */
  .news-form .input{ font-size:16px; }

  /* bottom bar: stack copyright above the legal links, give the
     legal links real spacing & tap height */
  .footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  }
  .footer__bottom .flex.gap{ gap:6px 18px; }
  .footer__bottom a{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:2px 0;
  }


  /* ── 6 · Mini-cart drawer (global chrome) ──────────────────────
     Wider on phones, big close target, scrollable body, safe-area. */
  .mc-drawer{
    width:min(420px,100vw);
  }
  .mc-head{
    padding:18px 16px calc(18px + env(safe-area-inset-top));
    font-size:1.05rem;
  }
  .mc-head .mc-close{ width:44px; height:44px; }
  .mc-head .mc-close .ico{ width:18px; height:18px; }
  .mc-body{
    padding:16px 16px calc(24px + env(safe-area-inset-bottom));
  }


  /* ── 7 · Quick-view modal (global chrome) ──────────────────────
     The base already single-columns .qv at 640px. Here we make the
     shell near-full-screen on phones with a big, always-reachable
     close button and a scrollable body. */
  .qv-overlay{ padding:0; place-items:stretch; }
  .qv-modal{
    width:100%;
    max-width:100%;
    max-height:100dvh;
    min-height:100dvh;
    border-radius:0;
    border:none;
  }
  .qv-close{
    width:44px !important;               /* override inline 38px from header */
    height:44px !important;
    top:max(12px,env(safe-area-inset-top)) !important;
  }
  .qv-content{
    padding-bottom:env(safe-area-inset-bottom);
  }


  /* ── 8 · Advisor widget (global chrome) ────────────────────────
     Panel goes near-full-screen so the chat is usable; FAB lifts
     above the iPhone home indicator. */
  .advisor-fab{
    bottom:calc(18px + env(safe-area-inset-bottom));
    right:18px;
    width:56px; height:56px;
  }
  .advisor-panel{
    right:0; left:0; bottom:0;
    width:100vw;
    height:88dvh;
    max-height:88dvh;
    border-radius:18px 18px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    transform-origin:bottom center;
  }
  .advisor-head .advisor-close{ width:44px; height:44px; }
  .advisor-foot .input{ font-size:16px; }   /* no iOS zoom while chatting */


  /* ── 9 · Form atoms (OWNED HERE — global) ──────────────────────
     16px font kills iOS auto-zoom on focus; full-width, ≥44px tall,
     comfy padding. Buttons get a comfy height and standalone primary
     buttons go full-width where it reads naturally. */
  .input,
  .select,
  .textarea{
    font-size:16px;
    width:100%;
    min-height:48px;
    padding:13px 15px;
  }
  .textarea{ min-height:120px; }
  .field{ margin-bottom:16px; }

  /* buttons: comfortable touch height */
  .btn{ min-height:48px; }
  .btn--sm{ min-height:42px; }
  .btn--block{ width:100%; }

  /* full-width standalone primary buttons inside panels/fields read
     better on phones — scoped so inline button rows aren't disturbed */
  .panel .btn--chrome,
  .panel .btn--gold,
  .field + .btn--chrome,
  .field + .btn--gold{ width:100%; }

  /* multi-column form rows collapse to a single column.
     (.row-2 base-collapses at 560px; this closes the 561–768 gap.
      .split base-collapses at 880px so it's already single here —
      restated for intent / safety.) */
  .row-2,
  .split{ grid-template-columns:1fr; }


  /* ── 10 · Cookie banner ────────────────────────────────────────
     #cookieBar is inline-styled in footer.php. Keep it a slim bottom
     strip (never a full-screen takeover), stack text over buttons,
     and make the buttons easy to hit above the home indicator. */
  #cookieBar{
    padding:14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }
  #cookieBar .wrap{
    flex-direction:column;
    align-items:stretch !important;
    gap:12px;
  }
  #cookieBar .flex.gap{ width:100%; }
  #cookieBar .flex.gap .btn{ flex:1; min-height:46px; }

}


/* ═══════════════════════════════════════════════════════════════
   SMALL PHONES  —  max-width:480px
   Extra tightening on top of the 768px rules above.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:480px){

  /* ── Scaffold & type ───────────────────────────────────────── */
  .wrap{ padding-inline:14px; }
  .section{ padding:clamp(32px,9vw,52px) 0; }
  .h-1{ font-size:clamp(1.7rem,8vw,2.2rem); }
  .h-2{ font-size:clamp(1.3rem,6vw,1.7rem); }
  .panel{ padding:18px; }

  /* ── Navbar ─────────────────────────────────────────────────── */
  .brand{ font-size:1.3rem; }
  .nav__actions{ gap:6px; }
  /* base already drops cart grid to a single col here — keep the
     nav action icons at a solid 44px (no shrinking below the target) */
  .nav__actions .icon-btn{ width:44px; height:44px; }

  /* ── Mobile menu: a hair smaller so long menus fit ──────────── */
  .mobile-menu a{ font-size:1.8rem; min-height:52px; }

  /* ── Footer: single column, left-aligned & clean ────────────── */
  .footer__grid{ grid-template-columns:1fr; gap:26px; }
  .footer__brand,
  .footer__grid > div:last-child{ grid-column:auto; }   /* every block already full-width */

  /* ── Mini-cart: edge-to-edge ────────────────────────────────── */
  .mc-drawer{ width:100vw; }

  /* ── Quick-view close stays generous ────────────────────────── */
  .qv-close{ top:max(10px,env(safe-area-inset-top)) !important; right:10px !important; }

  /* ── Form atoms keep 16px (reaffirm) ────────────────────────── */
  .input,
  .select,
  .textarea{ font-size:16px; }

}