/* ─────────────────────────────────────────────────────────────────────────
   Pinche Gavacho — mobile layer.

   Loads after the compiled stylesheet and offline-mirror.css, so it is the
   last word below the site's `lg` breakpoint (64rem / 1024px). Nothing here
   touches desktop: every rule is inside a max-width query.

   The capture was taken in a 1512px viewport, so a number of desktop-only
   inline styles (ScrollTrigger pin spacers, the header logo's `height:auto`)
   are frozen into the HTML. Those need `!important` to unwind — that is the
   only reason it appears below.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Document-level guards ─────────────────────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1023.98px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  /* Rubber-band scrolling on iOS otherwise reveals the page background. */
  body {
    overscroll-behavior-x: none;
  }

  /* Touch feedback is handled by the site's own states. */
  a,
  button,
  [role="button"],
  [data-slider-arrow],
  [data-pack-option] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── 2. Header logo ───────────────────────────────────────────────────── */
/* The anchor is `w-auto h-20` below `lg`, but the capture froze an inline
   `height:auto` onto it. With the anchor unsized and the image `w-full`,
   the logo fell back to its intrinsic 1429×1780 and covered the viewport on
   every page. Size the anchor, and let the image derive from it. */

@media (max-width: 1023.98px) {
  header[data-nav] [data-logo] {
    width: auto !important;
    height: 3.5rem !important;
    max-width: 45vw;
  }

  header[data-nav] [data-logo] img {
    width: auto !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
  }
}

@media (max-width: 639.98px) {
  header[data-nav] [data-logo] {
    height: 3.25rem !important;
  }
}

/* ── 2b. Mobile navigation bar ────────────────────────────────────────── */
/* `[data-global-nav]` is the get-sauce / cart / hamburger row — the entire
   navigation below `lg`, where `[data-desktop-nav]` is hidden. Its captured
   `-150px` start state is now cleared by the shared navigation intro. */

@media (max-width: 1023.98px) {
  header[data-nav] [data-global-nav] {
    will-change: transform, opacity;
  }

  header[data-nav] [data-global-nav] > * {
    pointer-events: auto;
  }

  /* The row is `h-12`; give the cart and hamburger a full 48px target. */
  header[data-nav] [data-cart-button],
  header[data-nav] [data-hamburger] {
    min-width: 48px;
    min-height: 48px;
  }

  /* `grow` lets the get-sauce CTA eat the whole bar, crowding the logo against
     it. Sized to its label there is room for all four elements. */
  header[data-nav] [data-global-nav] > a {
    flex: 0 1 auto;
  }

  header[data-nav] [data-global-nav] > a > div {
    flex-grow: 0;
    white-space: nowrap;
  }

  header[data-nav] > div {
    gap: 0.75rem;
  }
}

/* ── 2c. Header scrim ─────────────────────────────────────────────────── */
/* The header is fixed and transparent. Over the hero that is the intent, but
   once the page scrolls, body copy runs underneath the nav pills and becomes
   unreadable. Fade a scrim in behind them past the first scroll. */

@media (max-width: 1023.98px) {
  header[data-nav]::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(4.5rem + env(safe-area-inset-top));
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: linear-gradient(
      to bottom,
      var(--color-background) 0%,
      var(--color-background) 55%,
      transparent 100%
    );
  }

  body[data-mobile-scrolled] header[data-nav]::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  header[data-nav]::before {
    transition: none;
  }
}

/* ── 3. ScrollTrigger pin spacers ─────────────────────────────────────── */
/* Frozen at desktop: `width:1512px; height:3010px; padding:0 0 2313px`, plus a
   `transform: translate(0, 2313px)` on the pinned child. That forced the whole
   /about document to 1512px wide and left multi-screen voids on the homepage.
   Below `lg` these sections lay out in normal flow instead. */

/* The ingredient stack is exempt: it pins on a phone too, exactly as it does on
   desktop and as the reference site does. `[data-mobile-pin-keep]` is set by
   mobile.js before first paint. Unwinding it here is what collapsed the cards
   into their final pile with no runway to travel from. */

@media (max-width: 1023.98px) {
  .pin-spacer:not([data-mobile-pin-keep]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .pin-spacer > *:not([data-mobile-pin-keep]) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }
}

/* ── 3b. Ingredient pile spacing ──────────────────────────────────────── */
/* The capture froze the desktop pile at 80px per card. The reference tightens
   that to 60px on a phone, so the four headers read as one stack rather than a
   ladder that runs off the fold. Inline `top` values, hence `!important`. */

@media (max-width: 1023.98px) {
  [data-mobile-pin-keep] [data-card]:nth-of-type(2) { top: 60px !important; }
  [data-mobile-pin-keep] [data-card]:nth-of-type(3) { top: 120px !important; }
  [data-mobile-pin-keep] [data-card]:nth-of-type(4) { top: 180px !important; }
}

/* ── 4. Gutters ───────────────────────────────────────────────────────── */
/* `p-container` is a 5px inset — fine at 1512px, but on a phone body copy and
   headings ran into both edges. Widen it, and respect the notch in landscape. */

@media (max-width: 1023.98px) {
  .p-container {
    padding-inline: 1.25rem;
    padding-inline: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  /* Nested containers would otherwise double the inset. */
  .p-container .p-container {
    padding-inline: 0;
  }

  /* `px-col-3` is three grid columns of padding a side — half the screen on a
     phone, which is not enough measure for longer product names. */
  [data-bundles-title] {
    padding-inline: 1rem;
  }
}

/* The About page is a direct motion/layout match of the live reference. Its
   mobile composition uses the original 5px gutter and 120px story intervals. */
@media (max-width: 1023.98px) {
  body.about-motion-page .p-container {
    padding-inline: 5px;
  }

  body.about-motion-page main > section:nth-child(2) {
    margin-top: 120px;
  }

  body.about-motion-page main > section.mt-30 {
    margin-top: 120px;
  }
}

/* Prevent the removed About-page promo from flashing before initialization. */
main[data-page-content] > section:has(img[alt="Video thumbnail"]) {
  display: none !important;
}

@media (min-width: 1024px) {
  main[data-page-content] [data-bottle-sequence] {
    width: 11rem !important;
  }
}

/* ── 5. Vertical rhythm ───────────────────────────────────────────────── */
/* The section gaps are tuned for a tall desktop canvas. On a phone they read
   as dead scroll, so scale the largest ones back. */

@media (max-width: 1023.98px) {
  .mt-40 { margin-top: 5rem; }
  .mt-38 { margin-top: 4.5rem; }
  .mt-30 { margin-top: 4rem; }
  .mt-25 { margin-top: 3.5rem; }
  .sh\:pb-40 { padding-bottom: 4rem; }
  .sh\:pb-20 { padding-bottom: 2.5rem; }
}

/* ── 6. Touch targets ─────────────────────────────────────────────────── */
/* Footer nav rows measured 36px and the credit link 24px. 44px is the floor. */

@media (max-width: 1023.98px) {
  footer a,
  footer [role="button"] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  [data-menu] a,
  [data-menu] button,
  [data-menu-items] a {
    min-height: 48px;
  }

  [data-pack-option] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Quantity steppers ship as 32px squares. */
  button.w-8.h-8 {
    min-width: 44px;
    min-height: 44px;
  }

  /* The contact email is a 36px-tall inline link, so it needs height to make a
     44px target. It used to get that with `display: inline-flex; align-items:
     center`, which was wrong: the link holds two split-text `.line` blocks —
     the address and the hand-drawn underline that sits beneath it — and a flex
     row laid them out side by side. The underline ended up to the right of the
     address, squeezed to 74x1px, and the pair filled the container so the whole
     thing sat hard left instead of centred. Desktop keeps them stacked as
     blocks, 414px wide apiece.

     `min-height` alone does the same job on the inline-block the markup already
     asks for, and leaves the stacking alone. */
  [data-email] {
    min-height: 44px;
  }

  /* The logo lockup is portrait, so height sizing leaves it under 40px wide. */
  header[data-nav] [data-logo] {
    min-width: 44px;
  }
}

/* Review-card labels ship at 10.4px and 11.5px — too small to read on a
   phone. Their rules live in an inline <style> block further down the
   document than this file's <link>, so they need the extra class to win. */
@media (max-width: 1023.98px) {
  .pg-review-card .pg-review-dots,
  .pg-review-card .pg-verified {
    font-size: 12px;
  }
}

/* ── 7. Carousel arrows ───────────────────────────────────────────────── */
/* Round arrow buttons were centred on the section edges, so half of each sat
   outside the viewport and could not be tapped. */

@media (max-width: 1023.98px) {
  section[data-home-hero] {
    min-height: calc(var(--pg-vh, 1vh) * 88) !important;
  }

  section[data-home-hero] [data-top-bar="true"] {
    gap: 0.75rem;
  }

  section[data-home-hero] [data-top-bar="true"] > p:first-of-type span {
    white-space: nowrap;
  }

  section[data-home-hero] [class*="h-[60vh]"][class*="mt-26"] {
    margin-top: 1.5rem !important;
  }

  section[data-home-hero] [data-slider-arrow="true"] {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    z-index: 35;
  }

  section[data-home-hero] [data-slider-arrow="true"]:first-of-type {
    left: 1.25rem !important;
    right: auto !important;
  }

  section[data-home-hero] [data-slider-arrow="true"]:last-of-type {
    right: 1.25rem !important;
    left: auto !important;
  }

  [data-slider-arrow] {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  [data-slider-arrow]:first-of-type {
    margin-left: 0.25rem;
  }

  [data-slider-arrow]:last-of-type {
    margin-right: 0.25rem;
  }
}

@media (max-width: 639.98px) {
  section[data-home-hero] [data-top-bar="true"] {
    flex-direction: column;
    gap: 0.35rem;
  }

  section[data-home-hero] [data-top-bar="true"] > p {
    height: auto;
  }
}

/* ── 8. Forms ─────────────────────────────────────────────────────────── */
/* iOS Safari zooms the viewport when a focused input is under 16px. */

@media (max-width: 1023.98px) {
  input,
  textarea,
  select {
    font-size: max(16px, 1rem);
  }

  input,
  textarea {
    min-height: 48px;
  }

  button,
  [type="submit"] {
    touch-action: manipulation;
  }
}

/* ── 9. Motion cost ───────────────────────────────────────────────────── */
/* Large blurred drop-shadows and permanent `will-change` layers are the two
   things that cost the most on a phone GPU. Neither reads at this size. */

@media (max-width: 767.98px) {
  .pg-hero-float-bottle,
  .pg-hero-float-accent {
    filter: none;
  }

  .pg-hero-float-bottle__drift {
    will-change: auto;
  }
}

/* ── 10. Safe areas ───────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
  footer {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  [data-menu],
  [data-cart] {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 10b. "Why Pinche Gavacho" reasons wheel ──────────────────────────── */
/* Flattened into a stacked column — see the note in mobile.js. Every rule is
   `!important` because animations.js keeps writing the desktop wheel geometry
   into these elements' inline styles on each scroll event. */

@media (max-width: 1023.98px) {
  [data-mobile-wheel-frame] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  [data-mobile-wheel] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 2.75rem;
  }

  [data-mobile-wheel-rim] {
    display: none !important;
  }

  [data-mobile-reason] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    opacity: 1 !important;
    gap: 1rem !important;
  }

  /* Desktop pins these to fixed pixel boxes (703×212 copy, 91px title). */
  [data-mobile-reason] [data-reason-title],
  [data-mobile-reason] [data-reason-title] h3,
  [data-mobile-reason] [data-reason-copy] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  [data-mobile-reason] [data-reason-copy] {
    width: 100% !important;
    max-width: 34rem !important;
    margin-inline: auto !important;
  }

  /* The copy is rebuilt as four hard-wrapped desktop lines. Inline them so the
     text reflows to the phone's measure instead of breaking mid-sentence. */
  [data-mobile-reason] [data-reason-copy] .line,
  [data-mobile-reason] [data-reason-copy] .line > p {
    display: inline !important;
    width: auto !important;
    height: auto !important;
  }

  /* 28px is oversized for this measure on a phone — five and six line
     paragraphs across the full width. Bring it down.

     The leading has to come with it. It ships as a ratio of 1.1, so the face
     asks for ~1.21em to draw an ascender and a descender and overflows its own
     line box at every size — shrinking the type alone just scales the problem
     down. That overflow is what was being cut: this wheel sits inside a section
     with `overflow: hidden`, and WebKit clips a composited subtree to its line
     boxes rather than its ink, so each line lost the tops of its glyphs on iOS
     while Blink and desktop WebKit painted the spill happily.

     1.3 gives 28.6px against the ~26.7px the face needs at 22px, so the ink
     fits inside the box and there is nothing left to clip. */
  [data-mobile-reason] [data-reason-copy],
  [data-mobile-reason] [data-reason-copy] .line,
  [data-mobile-reason] [data-reason-copy] .line > p {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
  }

  /* `text-300` is a 200px display numeral. */
  [data-mobile-reason] [data-reason-number] {
    font-size: 5.5rem !important;
    line-height: 1 !important;
  }

  /* Scroll drove the rotation; there is nothing for them to advance now. */
  [data-why-pinche-gavacho] [data-slider-arrow] {
    display: none !important;
  }
}

@media (max-width: 639.98px) {
  [data-mobile-reason] [data-reason-number] {
    font-size: 4.5rem !important;
  }
}

/* ── 10d. Product hero notch ──────────────────────────────────────────── */
/* The hero card is clipped by an SVG `clipPath` with `userSpaceOnUse` units,
   so its 741×780 path does not scale with the element. The notch exists to let
   the header logo tuck into the card's top-left corner on desktop; on a phone
   the logo sits well above the hero, and the unscaled path just carved a black
   step out of the bottle shot. */

@media (max-width: 1023.98px) {
  [data-hero-slider] {
    clip-path: none !important;
  }
}

/* ── 10e. Split-text body copy ────────────────────────────────────────── */
/* Body copy is pre-split into `.line` blocks at the widths it had in a 1512px
   capture, so on a phone each fragment starts a new block and sentences break
   mid-clause ("… in the lab (a.k.a." / "his kitchen) like the RZA …").
   Inlining them lets the text reflow to the phone's measure. animations.js
   staggers these lines with y-offsets, which inline boxes ignore — the opacity
   half of that reveal still plays, and correct line breaks are worth more than
   the slide at this size.

   Titles are deliberately excluded: their line breaks are the design.

   Not every split-text block carries a `[data-gsap-text*]` hook, though. Two
   body-copy blocks have their own reveal attributes and so were missed here,
   which left every desktop line re-wrapping on its own and stranding the tail
   word — "… Slap it on" broke with "on" alone on a line. Swept the markup for
   `.line` hosts that stay `display: block` and actually wrap: these two are the
   whole set outside the titles above. */

@media (max-width: 1023.98px) {
  [data-gsap-text] > .line,
  [data-gsap-text-on-scroll] > .line,
  [data-natural-stuff-reveal] > .line,
  [data-description] > .line {
    display: inline !important;
  }
}

/* ── 10c. Product CTA rows ────────────────────────────────────────────── */
/* `Add to cart` + price in one `justify-between` row. At 150px per cell the
   two labels overflowed the pill and the price spilled outside its border. */

@media (max-width: 767.98px) {
  [data-mobile-cta-row] {
    gap: 0.5rem;
  }

  [data-mobile-cta-row] button,
  [data-mobile-cta-row] a > div {
    padding-inline: 0.75rem;
    font-size: 0.9375rem;
  }

  [data-mobile-cta-row] [class*="justify-between"] {
    gap: 0.375rem;
    min-width: 0;
  }

  /* Let the label take the squeeze rather than the price. */
  [data-mobile-cta-row] [class*="justify-between"] > :first-child {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Below ~360px the two pills cannot both hold their labels side by side. */
@media (max-width: 359.98px) {
  [data-mobile-cta-row] {
    grid-template-columns: 1fr;
  }
}

/* ── 10f. "Hot takes" heading indent ──────────────────────────────────── */
/* `.pg-reviews-heading` carries `padding-left: clamp(5.5rem, 14vw, 13rem)`,
   which offsets the kicker and the HOT/TAKES lockup under the wide half of the
   two-column reviews header. Below 767px that grid collapses to `1fr` and the
   offset has nothing left to align to — it just clamped to its 5.5rem floor and
   pushed the block 88px in from the gutter, out of step with every other line
   in the section. Match the breakpoint the grid collapses at.

   Two classes so this outweighs the single-class rule in the document's inline
   <style>, which comes after this file's <link> and would otherwise win on
   source order alone. */

@media (max-width: 767px) {
  .pg-reviews .pg-reviews-heading {
    padding-left: 0;
  }
}

/* ── 10g. About story offset ──────────────────────────────────────────── */
/* `[data-food-text]` ships from the capture with `transform: translate(0, 404px)`
   baked into its style attribute — a mid-scroll parallax value frozen at 1512px.
   Nothing re-drives it at runtime, so it is permanent.

   At `lg` its column is a `flex-row` sibling and the offset staggers the text
   against the neighbouring column, which is the intended composition. Below
   `lg` that row stacks into a single column, so the offset stopped aligning to
   anything: it left the text's own 309px box empty and pushed the paragraph
   that far down the page. Inline style, hence `!important`. */

@media (max-width: 1023.98px) {
  [data-food-text] {
    transform: none !important;
    translate: none !important;
  }
}

/* ── 11. About filmstrip ──────────────────────────────────────────────── */
/* Desktop drives this horizontally from a pinned ScrollTrigger. With the pin
   unwound (§3) it becomes a native swipe strip. `mobile.js` clears the frozen
   drag transform that the capture baked in. */

@media (max-width: 1023.98px) {
  [data-mobile-filmstrip] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The row ships with Tailwind's `touch-pan-y`, i.e. `touch-action: pan-y`,
       which tells the browser to accept vertical panning on this element and
       nothing else — so the strip was scrollable programmatically but refused
       every sideways drag. Equal specificity with `[data-mobile-filmstrip]`, and
       the compiled sheet loads after this file, so it needs the weight to win.
       `pan-x pan-y` keeps vertical page scrolling working through the strip. */
    touch-action: pan-x pan-y !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
    margin-inline: -1.25rem;
  }

  [data-mobile-filmstrip]::-webkit-scrollbar {
    display: none;
  }

  [data-mobile-filmstrip] > * {
    scroll-snap-align: center;
    flex: 0 0 auto;
  }
}