/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css (v380) — the small-screen corrections, in one place.

   Loaded LAST so it wins without !important. Everything here is a measured fix from the
   390/360/820 audit, not a preference. Desktop is never touched: every rule sits inside a
   max-width query.

   One deliberate exception to the house rem standard: tap targets are given in px. A tap
   target is a physical-finger constraint (~9mm), not a typographic one, and the site's root
   font is fluid — clamp(13px, 0.3vw + 11.7px, 20px) — so at 390px the root is 13px and
   "2.75rem" computes to 36px, not 44px. Using rem here would quietly under-size the very
   thing being fixed.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:60rem){

  /* ── header: hit areas to 44px WITHOUT moving anything ──
     Measured: burger 20×17, each icon 23×23, the wordmark link only 12px tall. The icon glyph box
     is 17.5px, so 11px padding only reached 39.5px — 14px takes it to 45.5px. Padding plus a
     matching negative margin grows the touch box while leaving the visual box where it is, so
     the header layout is identical and five icons still fit across 390px. */
  .h2-ico,.h2-burger,.menu-btn{padding:14px;margin:-14px;box-sizing:content-box}
  .h2-home{padding:16px 6px;margin:-16px -6px;display:inline-block}
  .h2-right{gap:.35rem}

  /* drawer close buttons were 29px tall */
  .menu-close,.cart-close{min-height:44px}

  /* ── primary CTAs: 38px tall measured, and their label was under 9px ── */
  .cta,.cta2,.pv-buynow,.clm-cta{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .cta,.cta2{font-size:.72rem}

  /* ── accordion headers: 32–40px measured, 20+ per product page ── */
  .pv-acc-h,.pv-acc2-h,.fq-sec > summary,.fq-q > summary{min-height:44px}

  /* ── the smallest text on the site. 7.15px (.h2-count) and 8.13px (.ow-num) are below the
     point where a label is readable on a phone; lift the floor without disturbing the scale. ── */
  .h2-count{font-size:.62rem}
  .ow-num{font-size:.66rem}
  .cart-head,.cart-hint,.cart-foot{font-size:.72rem}

  /* ── product-page body copy measured 9.36px against 12.19–12.35px everywhere else:
     the one genuine outlier in the site's type scale on mobile. ── */
  .pv-desc{font-size:.86rem;line-height:1.75}
  .pv-act span{font-size:.78rem}

  /* ── mu-card content was 313–340px inside a 289–316px box, so it was being clipped ── */
  .mu-card{min-width:0}
  .mu-card > *{max-width:100%}
}

/* ── tablet: the homepage hero composition is 978px wide inside an 820px stage,
   so ~160px of it was clipped. Let it scale down instead of being cut. ── */
@media (min-width:34.0625rem) and (max-width:60rem){
  .hero2{overflow:hidden}
  .hero2 > .h2-stage,.hero2 > .h2-wrap{max-width:100%}
}

/* ── phones (<640px, the same breakpoint hero2.js uses): descriptor + EPOS / OUD / CRISTALLO
   selector bottom-left, buy panel bottom-right, both bottoms at 2.5% so the selector's bottom
   edge sits on BUY NOW's bottom edge (founder, 18 Sep). hero2.js lifts the bottle on phones,
   so both blocks sit in the clear band beneath it. The ring donut goes: no room beside the bottle. ── */
@media (max-width:39.9375rem){
  .h2-info{bottom:2.5%;left:5%;max-width:50%;gap:.5rem}
  .h2-desc{margin-left:0;max-width:100%;line-height:1.5}   /* stays .8rem (10.4px): .72rem measured 9.36px, under the 390 audit floor */
  .h2-buy{right:5%;bottom:2.5%;width:11rem}
  .h2-donut{display:none}
  .h2-amt{font-size:11px}              /* hero2.css clamp floors at .6rem = 7.8px on the 13px phone root */
  .h2-size,.h2-bar{font-size:10px}
}

/* ── the curved "THIS ✧ IS ✧ MONZZARO" band ──
   The band is an SVG with a fixed viewBox="0 0 1440 120", so it scales to the container:
   at 390px that is 27%, which shrank 75-unit type to about 20px on screen. Raising the
   font-size cannot fix it — the viewBox is only 120 units tall, so larger type is clipped
   by the box rather than drawn bigger.
   Instead the SVG keeps its 1440px intrinsic width (type renders at its desktop size) and
   the band is shifted so the visible window sits on the MIDDLE of the arc, where the curve
   is deepest. The band already has overflow:hidden, and the negative margin keeps the
   overflow out of the document, so page width is unaffected. */
@media (max-width:60rem){
  .curved-band{height:13.75rem;justify-content:flex-start}
  .curved-svg{width:1440px;flex:0 0 1440px;margin-left:calc((100vw - 1440px) / 2)}
}

/* the band's type: site.css sizes it clamp(3rem,6vw,6rem), which reads ~86px at 1440 but only
   3rem (~39px) once the SVG is drawn 1:1 on a phone. Set it in px — at 1:1 a user unit IS a px —
   so the phone shows the same size of lettering as the desktop, and give the arc room to dip. */
@media (max-width:60rem){
  .curved-svg{font-size:82px}
  .curved-band{height:17rem}
}
/* v392: that window started at the TOP of the viewBox, but on a phone the visible slice of the arc
   (path M-100,40 Q500,440 1540,40, x 525-915 at 390px, 310-1130 at 820px) has its baseline at
   y 170-240, lettering y ~110-250. 17rem (221px) cut the letters' feet and left ~150px of white
   above. Lift the drawing 100px and show y 100-260: whole letters, no dead band. 1:1 px here. */
@media (max-width:60rem){
  .curved-band{height:160px}
  .curved-svg{margin-top:-100px}
}