/* ============================================================================
   FHA — Section 4 : PRODUCTS
   Loaded AFTER section2.css (but BEFORE section3.css) and extends the locked
   S2/S3 system. Pages carry body classes `s2 s3 s4` so the title tiers, glass,
   flex chain and fit laws apply unchanged; this sheet adds only what Section 4
   genuinely introduces.

   Body classes are s4-<page> (s4-giftcards, s4-brands, ...) — NOT the legacy
   .product-gift-cards / .product-brands names. style.css still carries the
   pre-redesign blocks keyed on those; the filenames keep the live URLs, the
   body classes step around the whole specificity trap instead of fighting it
   a fourth time.

   SPECIFICITY LAW (bitten five times now): the cloned shell keeps legacy body
   classes AND the s2/s3 classes, so section2.css's masthead width clamp and
   section3.css's masthead height law both match these pages at (0,5,1) — and
   section3.css loads AFTER this sheet. Every rule here that overrides an
   S2/S3 masthead/title declaration therefore carries the page class
   (.s4-giftcards etc.) for +1 class of specificity. Verified by reading
   computed values back, per the law. */

@media (min-width: 992px) {

  /* ---- masthead: Product COLLABORATIONS -------------------------------
     Same render-height law as every section: clamp(89.6px, 7.1168vw, 120px).
     The Coldiac-anchor is MEASURED: COLLABORATIONS caps centre sits at 54.89%
     of the recolored art, so the lockup shifts -4.89% to put the readable word
     on the column axis (CATALOG needed -16.43%, PORTRAIT 0).
     width AUTO + max-width NONE on BOTH the box and the img: section2.css pins
     the masthead box to clamp(224px,17.792vw,300px), and inside that a 3.361-
     aspect art can only reach 76px tall — 26px under the law. */
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .brand-logo *,
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .brand-logo img,
  .s4.s4-brands.theme-teal .banner .banner-detail-container .brand-logo *,
  .s4.s4-brands.theme-teal .banner .banner-detail-container .brand-logo img,
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .brand-logo *,
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .brand-logo img,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .brand-logo *,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .brand-logo img {
    width: auto; height: clamp(89.6px, 7.1168vw, 120px);
    max-width: none; object-fit: contain; margin-left: 0; margin-right: 0;
    /* the Coldiac-anchor shift belongs on the IMG ALONE — the `*` selector
       also matches the wrapping <a>, so the -4.89% applied twice and put
       COLLABORATIONS 16.8px LEFT of the title axis. Steven caught it. */
    transform: none; }
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .brand-logo a > img,
  .s4.s4-brands.theme-teal .banner .banner-detail-container .brand-logo a > img,
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .brand-logo a > img,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .brand-logo a > img {
    transform: translateX(-4.89%); }
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .brand-logo,
  .s4.s4-brands.theme-teal .banner .banner-detail-container .brand-logo,
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .brand-logo,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .brand-logo {
    width: auto; max-width: none; margin: 0 auto 1.7vw; justify-content: center; }

  /* ---- page title + script, optical-core matched ----------------------
     Per-page render heights so every title lands on the 21.6px cap core and
     every script on the 20.12px core (Steven's sub is the section-wide
     reference — the Section 3 law). Numbers printed by build_s4_assets.py. */
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(19.6px, 1.9653vw, 29.5px);
    max-width: none; object-fit: contain; }
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(34.4px, 3.2602vw, 49.2px);
    max-width: none; object-fit: contain; }
  .s4.s4-brands.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(20.06px, 2.0077vw, 30.1px);
    max-width: none; object-fit: contain; }
  .s4.s4-brands.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s4.s4-brands.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(33.7px, 3.1927vw, 48.2px);
    max-width: none; object-fit: contain; }
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(19.4px, 1.9471vw, 29.2px);
    max-width: none; object-fit: contain; }
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(33.3px, 3.1555vw, 47.6px);
    max-width: none; object-fit: contain; }
  .s4.s4-shop.theme-teal .banner .banner-detail-container .menu-log img {
    width: auto; height: clamp(20.3px, 2.0357vw, 30.6px);
    max-width: none; object-fit: contain; }
  .s4.s4-shop.theme-teal .banner .banner-detail-container .details .our-mission-img *,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .details .our-mission-img img {
    width: auto; height: clamp(33.6px, 3.1787vw, 47.9px);
    max-width: none; object-fit: contain; }

  /* ---- the CTA parity restatement (the S3 lesson, at full depth) ------- */
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .action *,
  .s4.s4-brands.theme-teal .banner .banner-detail-container .action *,
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .action *,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .action * {
    width: 100%; max-width: max(23.37vw, 262px); line-height: 1.5;
    text-decoration: none; text-align: center; }
  .s4.theme-teal .banner .banner-detail-container .details .action {
    margin-bottom: 1.042vw; }

  /* ---- gift card page ---------------------------------------------------
     The card is the hero of the column (pxd order: title, script, CARD, copy,
     CTA). His art as-is, the standard crisp lift under it. */
  .s4 .s4card { margin: clamp(3px,.5vh,6px) 0 clamp(8px,1.2vh,12px); text-align: center; }
  /* the card yields FIRST on short viewports — copy and CTA never clip */
  .s4 .s4card img { width: auto; max-width: 90%; height: auto;
    /* the card yields to the round-2 larger copy (43/44 text bump) */
    max-height: clamp(138px, 18.2vh, 202px); display: block; margin: 0 auto;
    filter: drop-shadow(0 4px 8px rgba(2,24,38,.35)); }
  /* copy: the Section 2 details-disc voice, centered, live text */
  .s4.theme-teal .banner .banner-detail-container .details .s4copy p {
    color: var(--fha-bright); font-family: 'Raleway', sans-serif; font-weight: 500;
    font-size: clamp(12px, .88vw, 14px); line-height: 1.42; text-align: center;
    margin: 0 0 .6em; text-wrap: pretty; text-shadow: 0 1px 1px rgba(2,44,68,.5); }
  .s4.theme-teal .banner .banner-detail-container .details .s4copy p.lead {
    font-family: 'Playfair Display', serif; font-weight: 600; color: #fff;
    font-size: clamp(14px, 1.12vw, 18px); line-height: 1.3; margin-bottom: .55em; }
  .s4.theme-teal .banner .banner-detail-container .details .s4copy em {
    font-style: italic; color: var(--fha-pale); }
  .s4 .s4copy p:last-child { margin-bottom: 0; }
  /* Steven round 2: "Pages 43 & 44: increase the overall text size."
     Page-scoped (+1 class) so BRANDS' tight fit is untouched. */
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .s4copy p,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .details .s4copy p {
    font-size: clamp(13.5px, .99vw, 15.5px); line-height: 1.34; }
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .s4copy p.lead,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .details .s4copy p.lead {
    font-size: clamp(15.5px, 1.26vw, 19px); }

  /* script sits a touch tighter over the card than the S2 default */
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .our-mission-img {
    margin-top: 2px; margin-bottom: clamp(6px, .65vw, 12px); }

  /* favorites: tighter under the page script so the spotlight rides higher
     (Steven: "creating a little less distance between the tile carousel and
     the page title") */
  .s4.s4-favorites.theme-teal .banner .banner-detail-container .details .our-mission-img {
    margin-top: 2px; margin-bottom: clamp(3px, .4vw, 7px); }

  /* centre the group in the scroll box on tall viewports, the NEXT GEN way */
  .s4 .s4main { display: flex; flex-direction: column; justify-content: center;
    flex: 1 1 auto; min-height: 0; }

  /* ---- SHOP: two peel portals side by side ------------------------------
     pxd: portals 400u square at x350-750 / x800-1200 (850u span of the 1050u
     content rect = 81%, gap 50/850 = 5.9%). His curtain exports are the 751px
     inner curtain of the 800px portal box (~3.1% inset, same as 41). */
  .s4 .s4portals { display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 5.9%; width: 81%; margin: 0 auto clamp(10px,1.6vh,16px); }
  .s4 .s4shop .s4copy { margin-bottom: clamp(10px, 1.6vh, 16px); }
  .s4 .s4shop .s4after { margin-top: 0; }
  .s4 .s4shop .s4after .outro { color: var(--fha-pale); }


  /* ---- FAVORITES: the Spotlight Tile Viewer Module ----------------------
     pxd geometry: grid tiles 400u at x350-1200 (81% of the 1050u rect);
     spotlight frame 850u with the 750u tile inset 5.88%; icon boxes at their
     measured positions; nav strip 111u; script 124u; button 863.5u + 100u
     slider. The drop-down OVERLAYS downward (the S2 slot behavior) so the
     column height never moves. Timings per the spec: expand 480ms, slide
     420ms, flip 400ms, grid return 520ms staggered. */
  .s4 .favMod { position: relative; }
  .s4 .favGrid { display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1.3vh, 14px) 5.9%; width: min(79%, 33.5vh);
    margin: 0 auto; }
  /* grid cells are aqua-gradient-framed buttons in his art -> LIQUID GLASS */
  .s4 .favCell { padding: 4.5%; border: 1px solid var(--fha-glass-edge, rgba(255,255,255,.35));
    border-radius: 2px; background: var(--fha-glass, rgba(235,248,249,.22));
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: var(--fha-glass-lift, inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(2,24,38,.25));
    cursor: pointer; transition: transform .2s ease; }
  .s4 .favCell:hover { transform: scale(1.035); }
  .s4 .favCell img { width: 100%; height: auto; display: block;
    filter: drop-shadow(0 2px 5px rgba(2,24,38,.3)); }

  .s4 .favSpot { display: flex; flex-direction: column; align-items: center; }
  .s4 .favSlide { display: flex; flex-direction: column; align-items: center;
    width: 100%; }

  .s4 .favTitle img { width: auto; height: clamp(25px, 4.3vh, 40px);
    max-width: 92%; object-fit: contain; display: block; margin: 0 auto clamp(6px,1.1vh,11px); }

  .s4 .favCard { width: min(66%, 28.2vh); aspect-ratio: 1;
    perspective: 900px; container-type: inline-size;
    position: relative; z-index: 1; }
  .s4 .favRow { position: relative; width: 100%; display: flex;
    justify-content: center; perspective: 1000px; }
/* the sliding-carousel impressions — Steven: "a faint gradient impression
     of the last 1/4 of tile 1 ... to the left, and ... the first quarter of
     tile three ... to the right", full tile scale, fading out on a gradient.
     Sized against the CARD (they live inside it), clipped to a quarter, the
     art masked so it melts away from the spotlight. Tap to slide. */


  .s4 .favNav { display: flex; flex-direction: column; align-items: center;
    gap: clamp(2px,.5vh,5px); margin-top: clamp(5px,.9vh,9px); }
  .s4 .favCtl { position: relative; border: 0; background: none; cursor: pointer;
    padding: 0 6px; height: clamp(13px,2vh,17px); }
  .s4 .favCtl img { height: 100%; width: auto; display: block;
    transition: opacity .15s ease; }
  .s4 .favCtl img.p { position: absolute; left: 6px; top: 0; opacity: 0; }
  .s4 .favCtl:hover img.p, .s4 .favCtl:active img.p,
  .s4 .favCtl.held img.p { opacity: 1; }
  .s4 .favNav > .favCtl { display: inline-block; }
  .s4 .favNav { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .s4 .favDots { display: flex; gap: max(0px, calc(clamp(8px,1.35vh,13px) - 8px)); width: 100%;
    justify-content: center; margin-top: clamp(3px,.6vh,6px); }
  .s4 .favDot { width: calc(clamp(8px,1.35vh,12px) + 8px); aspect-ratio: 1; border-radius: 50%;
    border: 0; padding: 4px; cursor: pointer;
    background: linear-gradient(135deg, #A2E7E8, #4DB1B1);
    background-clip: content-box;
    transition: opacity .3s ease, filter .2s ease; }
  .s4 .favDot.on { filter: drop-shadow(0 2px 3px rgba(2,24,38,.55)); }

  /* the pairing CTA is the s2slot component (the Consultation / Dry Cut
     treatment) inside .favSvc — "slightly narrower for visual balance". */
  .s4 .favSvc { position: relative; width: 88%; margin-top: clamp(9px,1.5vh,14px); }
  /* no glass band (Steven: "doesn't necessarily have to have a glass
     background... but it does need to be brighter") — the ink itself moved
     up to #E7F4F4 and the lift shadow firmed for visibility */
  .s4 .favScript { padding: clamp(2px,.4vh,4px) 0;
    margin-bottom: clamp(3px,.6vh,6px); }
  /* Steven round 7: "increased significantly... I'm fine with the three
     words filling up the width of the CTA button" — height doubled, the
     width guard lets the longer scripts run the button's full width */
  .s4 .favScript img { display: block; margin: 0 auto;
    width: auto; height: clamp(24px, 4.2vh, 40px); max-width: 92%;
    object-fit: contain; filter: drop-shadow(0 1px 0.5px rgba(2,24,38,.7)); } /* r13 shadow law */
  .s4 .favSvc .s2slot { margin-bottom: 0; }
  .s4 .favDD p { margin: 0; font-family: 'Raleway', sans-serif; font-weight: 500;
    color: var(--fha-bright, #C1D7D7); font-size: clamp(10px,1.5vh,12.5px);
    line-height: 1.35; text-align: center; text-shadow: 0 1px 1px rgba(2,44,68,.5); }

  /* ---- BRANDS: the 2x2 peel grid ---------------------------------------
     pxd geometry: tiles 320u square, 130u x-gap, 100u y-gap; the grid spans
     x390-1160 = 770u of the 1050u content rect -> width 73.3% centred,
     column gap 130/770 = 16.9% of the grid, row gap 100u = 2.57vw. The grid
     is the positioning context for the Why lightboxes, which span BOTH lower
     tiles exactly (his cards are 1540x642 = the full grid width x one row). */
  .s4 .s4brands .s4copy { margin-bottom: clamp(8px, 1.2vh, 13px); }
  /* the intro leads a touch tighter on BRANDS so the enlarged grid fits */
  .s4.theme-teal .banner .banner-detail-container .details .s4brands .s4copy p {
    line-height: 1.36; margin-bottom: .5em; }
  /* Steven round 2: "reduce the space between the couplet script
     'Exclusively..' and the header paragraph" */
  .s4.s4-brands.theme-teal .banner .banner-detail-container .details .our-mission-img {
    margin-top: 2px; margin-bottom: clamp(3px, .35vw, 6px); }
  /* tiles enlarged AGAIN per Steven (round 1: 71.5 -> 77.3; round 2 asks
     bigger still): 82%, funded by the tighter script gap above */
  .s4 .s4grid { position: relative; display: grid;
    grid-template-columns: 1fr 1fr; column-gap: 16.9%;
    row-gap: clamp(14px, 1.8vw, 27px);
    width: 82%; margin: 0 auto; }

}

/* short-viewport tier — the card and copy give ground together so the CTA
   and Questions never move off their anchors (his ~830px window included) */
@media (min-width: 992px) and (max-height: 880px) {
  .s4 .s4grid { width: 67.8%; row-gap: clamp(8px, 1vw, 14px); }
  .s4 .s4brands .s4copy { margin-bottom: 6px; }
  .s4.s4-brands.theme-teal .banner .banner-detail-container .details .our-mission-img {
    margin-bottom: 2px; }
  .s4 .s4card img { max-height: 14.4vh; }
  .s4 .s4card { margin-bottom: clamp(6px,1vh,10px); }
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .our-mission-img {
    margin-bottom: 4px; }
  .s4.theme-teal .banner .banner-detail-container .details .s4copy p {
    font-size: clamp(11px, .78vw, 12.5px); line-height: 1.35; margin-bottom: .55em; }
  .s4.theme-teal .banner .banner-detail-container .details .s4copy p.lead {
    font-size: clamp(12.5px, .98vw, 15px); }
  /* the 43/44 text-size bump, short-tier proportion */
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .s4copy p,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .details .s4copy p {
    font-size: clamp(12.5px, .92vw, 14.5px); line-height: 1.28; }
  .s4.s4-giftcards.theme-teal .banner .banner-detail-container .details .s4copy p.lead,
  .s4.s4-shop.theme-teal .banner .banner-detail-container .details .s4copy p.lead {
    font-size: clamp(14px, 1.16vw, 17px); }
}


/* ---- the peel component + Why lightboxes: SHARED desktop + mobile ------- */
.s4 .peel { position: relative; aspect-ratio: 1; overflow: hidden;
  /* his b/a exports' extra canvas is transparent — clipping at the box loses
     nothing and keeps stray export margins out of the scroll-height math */ }
.s4 .peel .backstage { position: absolute; inset: 0; }
.s4 .peel .backstage img { width: 100%; height: 100%; display: block; }
/* BRANDS backstage — Steven's law: the aqua-gradient panel becomes LIQUID
   GLASS; the baked art is replaced by live chrome/pearl icons (below) */
.s4 .peel .backstage.glass { border-radius: 2px;
  background: var(--fha-glass, rgba(235,248,249,.22));
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--fha-glass-edge, rgba(255,255,255,.35));
  box-shadow: var(--fha-glass-lift, inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(2,24,38,.25)); }
.s4 .peel .hit { position: absolute; display: block; background: none;
  border: 0; padding: 0; cursor: pointer; border-radius: 3px; }
.s4 .peel .hit:focus-visible { outline: 2px solid var(--fha-aqua, #A2E7E8); }
/* the icon pair inside each hit: chrome/pearl at rest, his aqua on hover */
.s4 .peel .hit .bic { position: absolute; object-fit: contain;
  transition: opacity .15s ease; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(2,24,38,.3)); }
.s4 .peel .hit .bic.p { opacity: 0; }
.s4 .peel .hit:hover .bic.p, .s4 .peel .hit:active .bic.p,
.s4 .peel .hit:focus-visible .bic.p { opacity: 1; }
/* the curtain: full-cover button carrying his `a` state art. The curl is an
   animated diagonal clip riding from the folded corner (bottom-right). */
.s4 .peel .curtain { position: absolute; inset: 0; display: block;
  padding: 0; border: 0; background: none; cursor: pointer; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path .42s cubic-bezier(.55,.06,.35,.96); }
/* his `a` exports are the 600px INNER card of the 640px button box:
   3.125% inset each side (pxd inner 400-700 vs box 390-710). The `b` export
   is the SAME card with the folded-corner cue drawn in place (its extra
   canvas is fully transparent) — it rides on top and fades in on hover. */
.s4 .peel .curtain img { position: absolute; left: 3.125%; top: 3.125%;
  width: 93.75%; height: auto; display: block;
  filter: drop-shadow(0 3px 6px rgba(2,24,38,.3)); }
/* hover is a full CROSSFADE, not a stack: the `b` art's folded corner has a
   transparent notch that must reveal the GLASS backstage — with `a` still
   opaque beneath it, the notch showed the white card instead (Steven: "you
   still see white underneath the peeled back corner when you're supposed to
   just see the glass background"). */
.s4 .peel .curtain img.cb { opacity: 0; transition: opacity .18s ease; }
.s4 .peel .curtain img.ca { transition: opacity .18s ease; }
.s4 .peel .curtain:hover img.cb,
.s4 .peel .curtain:focus-visible img.cb { opacity: 1; }
.s4 .peel .curtain:hover img.ca,
.s4 .peel .curtain:focus-visible img.ca { opacity: 0; }
/* the bag press state (44): his drop-shadow export, shown on hover/press */
.s4 .peel .hit.bag { overflow: visible; }
.s4 .peel .hit.bag .bagPress { position: absolute; left: -3.5%; top: -3%;
  width: 107%; height: auto; opacity: 0; transition: opacity .15s ease;
  pointer-events: none; }
.s4 .peel .hit.bag:hover .bagPress,
.s4 .peel .hit.bag:active .bagPress,
.s4 .peel .hit.bag:focus-visible .bagPress { opacity: 1; }
.s4 .peel.open .curtain {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
/* fold highlight riding the crease while the curl runs */
.s4 .peel .curtain::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 46%,
    rgba(255,255,255,.55) 50%, rgba(2,44,68,.35) 54%, transparent 58%);
  opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.s4 .peel.open .curtain::after { opacity: 1; }
.s4 .peel .curtain:hover img { filter: drop-shadow(0 4px 9px rgba(2,24,38,.4)); }
@media (prefers-reduced-motion: reduce) {
  .s4 .peel .curtain { transition: opacity .32s ease;
    clip-path: none !important; }
  .s4 .peel.open .curtain { opacity: 0; }
}
/* ---- the Why lightboxes: his PNG quote cards, spanning both lower tiles */
.s4 .whyBox { position: absolute; z-index: 6;
  left: 0; right: 0; bottom: 0; top: auto;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transform: scale(.94);
  transition: opacity .28s ease, transform .28s ease; pointer-events: none; }
.s4 .whyBox.in { opacity: 1; transform: none; pointer-events: auto; }
.s4 .whyBox img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 5px 12px rgba(2,24,38,.5)); }
/* X hit measured off the pxd: x1109.5-1137.5 y929-975.5 in the 770x321 card */
.s4 .whyBox .whyX { position: absolute; top: 1.5%; right: 2.4%;
  width: 5.5%; height: 16%; background: none; border: 0; cursor: pointer; }


/* [hidden] must beat the module's own display rules, everywhere */
.favMod [hidden] { display: none !important; }

/* ---- the grid <-> spotlight SWING: SHARED desktop + mobile ---------------
   Steven: "some sort of animation or transition from the six tiles to some
   sort of swinging carousel. I'll trust your judgment." The choreography:
   the clicked tile LAUNCHES forward off the grid (toward the viewer) while
   its five neighbours tip away on an X-hinge, staggered; the spotlight then
   swings in on a Y-hinge and settles past centre like a card turned to face
   you. Slide-to-slide nav carries the same Y-swing, so the module reads as a
   carousel rotating about a vertical axis. Reverse choreography going back:
   the spotlight swings away and the six tiles tip back in, staggered. */
.s4 .favMod { perspective: 1200px; }
.s4 .favGrid { perspective: 1100px; }
/* Steven's row refinement: "tiles one and two slide down into the carousel
   and slides five and six slide up into the carousel" — the grid CONVERGES
   vertically on the spot where the carousel forms: top row falls in, bottom
   row rises in, the middle row melts in place. Reverse choreography going
   back: the rows peel apart from the carousel to their grid spots. */
.s4 .favGrid.fading .favCell {
  animation: favTipMid .42s cubic-bezier(.5,.05,.75,.6) forwards; }
.s4 .favGrid.fading .favCell:nth-child(1),
.s4 .favGrid.fading .favCell:nth-child(2) {
  animation-name: favTipDown; }
.s4 .favGrid.fading .favCell:nth-child(5),
.s4 .favGrid.fading .favCell:nth-child(6) {
  animation-name: favTipUp; }
.s4 .favGrid.fading .favCell:nth-child(2) { animation-delay: .04s; }
.s4 .favGrid.fading .favCell:nth-child(3) { animation-delay: .07s; }
.s4 .favGrid.fading .favCell:nth-child(4) { animation-delay: .1s; }
.s4 .favGrid.fading .favCell:nth-child(5) { animation-delay: .04s; }
.s4 .favGrid.fading .favCell:nth-child(6) { animation-delay: .08s; }
.s4 .favGrid.fading .favCell.launch {
  animation-name: favLaunch;
  animation-duration: .46s; animation-timing-function: cubic-bezier(.45,.05,.55,.95);
  animation-delay: 0s; z-index: 2; }
@keyframes favTipDown { to { opacity: 0;
  transform: translateY(85%) scale(.9); } }
@keyframes favTipUp { to { opacity: 0;
  transform: translateY(-85%) scale(.9); } }
@keyframes favTipMid { to { opacity: 0; transform: scale(.88); } }
@keyframes favLaunch {
  55% { opacity: 1; }
  to { opacity: 0; transform: translateZ(300px) rotateY(-12deg); } }
.s4 .favGrid.reenter .favCell { animation: favBackMid .5s ease backwards; }
.s4 .favGrid.reenter .favCell:nth-child(1),
.s4 .favGrid.reenter .favCell:nth-child(2) {
  animation-name: favBackDown; }
.s4 .favGrid.reenter .favCell:nth-child(5),
.s4 .favGrid.reenter .favCell:nth-child(6) {
  animation-name: favBackUp; }
.s4 .favGrid.reenter .favCell:nth-child(2) { animation-delay: .06s; }
.s4 .favGrid.reenter .favCell:nth-child(3) { animation-delay: .1s; }
.s4 .favGrid.reenter .favCell:nth-child(4) { animation-delay: .14s; }
.s4 .favGrid.reenter .favCell:nth-child(5) { animation-delay: .06s; }
.s4 .favGrid.reenter .favCell:nth-child(6) { animation-delay: .1s; }
@keyframes favBackDown { from { opacity: 0;
  transform: translateY(85%) scale(.9); } }
@keyframes favBackUp { from { opacity: 0;
  transform: translateY(-85%) scale(.9); } }
@keyframes favBackMid { from { opacity: 0; transform: scale(.88); } }
.s4 .favSpot { perspective: 1100px; }
.s4 .favSpot.enter {
  animation: favSwingIn .58s cubic-bezier(.3,1.25,.44,1) backwards; }
@keyframes favSwingIn {
  from { opacity: 0; transform: rotateY(-32deg) translateX(6%) scale(.9); }
  55%  { opacity: 1; } }
.s4 .favSpot.exit {
  animation: favSwingOut .34s cubic-bezier(.5,.05,.8,.5) forwards; }
@keyframes favSwingOut { to { opacity: 0;
  transform: rotateY(28deg) translateX(-4%) scale(.93); } }
/* slide-to-slide: the carousel swing about the vertical axis */
.s4 .favSlide.inR { animation: slIn .42s cubic-bezier(.3,1.15,.5,1); }
.s4 .favSlide.inL { animation: slInL .42s cubic-bezier(.3,1.15,.5,1); }
.s4 .favSlide.outL, .s4 .favSlide.outR { display: none; }
#fhaMobile.s4m .favSlide.outL, #fhaMobile.s4m .favSlide.outR { display: none; }
@keyframes slIn  { from { opacity: 0;
  transform: translateX(13%) rotateY(-22deg); } }
@keyframes slInL { from { opacity: 0;
  transform: translateX(-13%) rotateY(22deg); } }
@media (prefers-reduced-motion: reduce) {
  .s4 .favGrid.fading .favCell, .s4 .favGrid.reenter .favCell,
  .s4 .favSpot.enter, .s4 .favSpot.exit,
  .s4 .favSlide.inR, .s4 .favSlide.inL { animation: none; }
  .s4 .favGrid.fading { opacity: 0; }
  .s4 .favSpot.exit { opacity: 0; }
}

/* ---- FAVORITES flip-card internals: SHARED desktop + mobile (body carries .s4, so these match inside #fhaMobile too) */
.s4 .favFlip { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .4s ease-in-out; }
.s4 .favFlip.flipped { transform: rotateY(180deg); }
.s4 .favFace { position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 2px;
  /* LIQUID GLASS (Steven's law): the aqua-gradient tile frames become the
     bio's glass — bg, blur, edge, lift all from the locked recipe */
  background: var(--fha-glass, rgba(235,248,249,.22));
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--fha-glass-edge, rgba(255,255,255,.35));
  box-shadow: var(--fha-glass-lift, inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(2,24,38,.25)); }
.s4 .favLogo { position: absolute; left: 50%; transform: translateX(-50%);
  top: 3%; height: 9.5%; width: auto; max-width: 36%; object-fit: contain; }
.s4 .favBack { transform: rotateY(180deg); }
.s4 .favProd { position: absolute; left: 5%; top: 5%;
  width: 90%; height: 90%; object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(2,24,38,.3)); }
.s4 .favIc { position: absolute; width: 11.5%; aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.s4 .favIc img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity .14s ease; }
.s4 .favIc img.p { opacity: 0; }
.s4 .favIc:hover img.p, .s4 .favIc:active img.p,
.s4 .favIc:focus-visible img.p { opacity: 1; }
.s4 .icGrid { left: 9.5%;  bottom: 7.5%; }
.s4 .icQ    { right: 9.5%; bottom: 7.5%; width: 8.5%; }
.s4 .icShop { left: 9.5%;  bottom: 7.5%; width: 9.5%; }
.s4 .icFlip { right: 9.5%; bottom: 7.5%; width: 10%; }
/* the 5W live text — sized against the CARD (container units) so it fits
   the panel at every render size, the way his baked text does */
.s4 .fav5w { position: absolute; left: 7%; width: 86%; top: 13%;
  height: 71%; margin: 0; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; justify-content: center; }
.s4 .fav5w dt { font-family: 'Playfair Display', serif; font-weight: 700;
  /* pearl, matched to the brightened logos — Steven: "brighter but not
     necessarily chrome, not necessarily bright white and certainly not aqua
     because they get lost" */
  color: #DCE7EA; font-size: clamp(9px, 1.45vh, 13px); font-size: 4.75cqw;
  letter-spacing: .05em; line-height: 1.12; text-shadow: 0 1px 2px rgba(2,24,38,.6); }
.s4 .fav5w dd { font-family: 'Raleway', sans-serif; font-weight: 600;
  color: var(--fha-bright, #E7F4F4); font-size: clamp(8px, 1.3vh, 11.5px); font-size: 3.78cqw;
  line-height: 1.12; margin: 0 0 .17em; text-shadow: 0 1px 1px rgba(2,44,68,.5); }
.s4 .fav5w dd:last-child { margin-bottom: 0; }

/* ---- mobile: the pane --------------------------------------------------- */

/* the edge slivers — COMPONENT CORE, shared by the desktop module and the
   mobile pane (round-9 law: never scope card-relative component rules to a
   viewport — the mobile peeks rendered as unpositioned full-size tiles). */
.s4 .favPeek { position: absolute; top: 7%; height: 86%; width: 25%;
  border: 0; padding: 0; background: none; cursor: pointer;
  overflow: hidden; z-index: 0; opacity: .5;
  transition: opacity .22s ease; }
.s4 .favPeek img { position: absolute; top: 0; height: 100%; width: 400%;
  object-fit: contain; filter: drop-shadow(0 2px 5px rgba(2,24,38,.3)); }
.s4 .favPeek.pkL { left: -28%;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.9), transparent 94%);
  mask-image: linear-gradient(to left, rgba(0,0,0,.9), transparent 94%); }
.s4 .favPeek.pkL img { right: 0; }
.s4 .favPeek.pkR { right: -28%;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 94%);
  mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 94%); }
.s4 .favPeek.pkR img { left: 0; }
.s4 .favPeek:hover { opacity: .85; }

#fhaMobile.s4m .ptitle { max-height: 26px; max-width: 96%; } /* r12: hug the ink */
#fhaMobile.s4m .psub { max-height: 34px; max-width: 96%; } /* r12: hug the ink */
#fhaMobile.s4m .s4card { margin: 2px 0 12px; }
#fhaMobile.s4m .s4card img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 3px 6px rgba(2,24,38,.35)); }
#fhaMobile.s4m .s4copy p { color: var(--fha-bright); font-family: 'Raleway', sans-serif;
  font-weight: 500; font-size: 13.5px; line-height: 1.5; text-align: center;
  margin: 0 0 .7em; text-shadow: 0 1px 1px rgba(2,44,68,.5); }
#fhaMobile.s4m .s4copy p.lead { font-family: 'Playfair Display', serif; font-weight: 600;
  color: #fff; font-size: 16px; line-height: 1.3; margin-bottom: .55em; }
#fhaMobile.s4m .s4copy em { font-style: italic; color: var(--fha-pale); }

/* the rolling header: Fairchild Hair Artistry <-> Product COLLABORATIONS.
   Art aspect 3.361; COLLABORATIONS caps centre at 54.89% of art width.
   Unsettled 70px face is screen-centred (w 235.3 -> half 117.7); settled 62px
   face anchors the caps centre on the shared 218.8px axis:
   62*3.361 = 208.4 wide, caps at 114.4 -> margin-left 218.8-114.4 = 104.4px. */
#fhaMobile.s4m .scriptWrap img.secFace { height: 70px; width: auto;
  margin-left: calc(50% - 117.7px); }
#fhaMobile.s4m.settled .scriptWrap img.secFace { height: 62px; margin-left: 104.4px; }

#fhaMobile.s4m .s4grid { position: relative; display: grid;
  grid-template-columns: 1fr 1fr; column-gap: 12%; row-gap: 26px;
  width: 88%; margin: 6px auto 10px; }
#fhaMobile.s4m .s4brands .s4copy { margin-bottom: 12px; }

#fhaMobile.s4m .favGrid { display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 5.9%; width: 84%; margin: 2px auto 10px; } /* r13d: tighter rows */
#fhaMobile.s4m .favCell { padding: 3.2%; /* r13d: tighter frame */ border: 1px solid rgba(255,255,255,.35);
  border-radius: 2px; background: rgba(235,248,249,.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(2,24,38,.25); }
#fhaMobile.s4m .favCell img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 2px 5px rgba(2,24,38,.3)); }
#fhaMobile.s4m .favSpot { display: flex; flex-direction: column; align-items: center; }
#fhaMobile.s4m .favSlide { display: flex; flex-direction: column; align-items: center; width: 100%; }
#fhaMobile.s4m .favTitle img { width: auto; height: 31px; max-width: 94%;
  object-fit: contain; display: block; margin: 0 auto 8px; }
#fhaMobile.s4m .favRow { position: relative; width: 100%; display: flex;
  justify-content: center; perspective: 1000px; }
#fhaMobile.s4m .favCard { width: 72%; aspect-ratio: 1; perspective: 900px; container-type: inline-size; }
#fhaMobile.s4m .favPeek { width: 18%; }
#fhaMobile.s4m .favPeek.pkL { left: -19%; }
#fhaMobile.s4m .favPeek.pkR { right: -19%; }
#fhaMobile.s4m .favPeek img { width: 555%; }
#fhaMobile.s4m .favNav { display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; gap: 4px; margin-top: 6px; }
#fhaMobile.s4m .favDots { display: flex; gap: 3px; width: 100%;
  justify-content: center; margin-top: 4px; }
#fhaMobile.s4m .favDot { width: 19px; aspect-ratio: 1; border-radius: 50%;
  border: 0; padding: 4px; background: linear-gradient(135deg, #A2E7E8, #4DB1B1);
  background-clip: content-box; transition: opacity .3s ease, filter .2s ease; }
#fhaMobile.s4m .favDot.on { filter: drop-shadow(0 2px 3px rgba(2,24,38,.55)); }
#fhaMobile.s4m .favCtl { position: relative; border: 0; background: none;
  padding: 8px 10px; height: 31px; }
#fhaMobile.s4m .favCtl img { height: 100%; width: auto; display: block;
  transition: opacity .15s ease; }
#fhaMobile.s4m .favCtl img.p { position: absolute; left: 10px; top: 8px; opacity: 0; }
#fhaMobile.s4m .favCtl:active img.p, #fhaMobile.s4m .favCtl.held img.p { opacity: 1; }
#fhaMobile.s4m .favSvc { position: relative; width: 94%; margin-top: 16px; }
#fhaMobile.s4m .favScript { padding: 3px 0; margin-bottom: 5px; }
#fhaMobile.s4m .favScript img { display: block; margin: 0 auto; width: auto;
  height: 28px; max-width: 92%; object-fit: contain;
  filter: drop-shadow(0 1px 0.5px rgba(2,24,38,.7)); } /* r13 shadow law */
#fhaMobile.s4m .favSvc .s2slot { margin-bottom: 0; }

/* ==== r13: the 42 mobile choreography — opening a tile DOCKS the current
   product's suggested service in the CTA slot (bottom-anchored, so its
   accordion grows UPWARD, never down into the Connect bar); the page title
   + couplet stay above the module (the tuck was retired, his call) ====== */
@media (max-width: 991px) {
#fhaMobile.s4m .svcDock .favSvc { width: 100%; margin: 0; }
#fhaMobile.s4m.ctuck .psub { margin-top: -48px; }  /* 34px script + margin */
/* r13d: SE-class short phones — the grid narrows a step so all six tiles
   still clear the fold */
/* r13d: height-aware grid clamp — on short or squat viewports the grid
   narrows just enough that all six tiles clear the fold (84% governs on
   ordinary phones; the dvh term takes over when height is the constraint) */
#fhaMobile.s4m .favGrid { width: min(84%, calc((100dvh - 380px) / 1.62)); } /* r13e: couplet stays in grid view */
}