/** Shopify CDN: Minification failed

Line 393:9 Expected identifier but found whitespace
Line 406:78 Unterminated string token
Line 408:76 Unterminated string token

**/

/* ==== css-products-p3.css ==== */
@media (max-width: 600px) {
  /* chips 111x111 @ 71,70 and 201,70; menu @ 1978,70; logo 868,93 360x65;
     counter "08 / 10" @ 1784,70 at 34.15 */
  body.products .mhdr { left: 3.2870vw; top: 3.2407vw; gap: 0.8796vw; }
  body.products .mhdr-btn { width: 5.1389vw; height: 5.1389vw; border-radius: 0.3704vw; }
  body.products .mhdr-btn svg { width: 2.2685vw; height: 2.2685vw; }
  body.products .hamburger-btn { left: 91.5741vw; top: 3.2407vw; width: 5.1389vw; height: 5.1389vw;
                             border-radius: 0.3704vw; gap: 0.4167vw; }
  body.products .hamburger-btn .bars span { width: 2.3611vw; height: 0.2315vw; }
  /* the mobile-black plate used to be solid #383838 here; the glass material
     above now applies at BOTH breakpoints, so nothing overrides it */
  body.products .wordmark { left: 40.1852vw; top: 4.3056vw; width: 16.6667vw; height: 3.0093vw; }
  body.products .back-link { display: none; }
  body.products .comp-number {
    left: 82.5926vw; top: 3.2407vw; font-size: 1.5810vw; opacity: 0.5;
    letter-spacing: 0.18em; color: #fff; transform: none; right: auto;
  }
  body.products[data-theme="white"] .comp-number { color: #000; }
}

/* -------------------------------- FOOTER ---------------------------------
   The footer's own top edge already lands on Figma's y (5255 desktop /
   50536 mobile) from normal flow, but its INTERIOR comes from chrome.css's
   generic grid, which is not this frame's layout. Everything below pins the
   columns, rows and wordmark to the frames' own coordinates.
   Desktop rows: headings 5260 / 5656; items 5335, 5392 and 5730, 5790, 5853.
   Columns: 763, 1098 (products col 2), 1467, 2169, 2778, 2870.
   ------------------------------------------------------------------------ */
body.products footer.footer { position: relative; padding: 0; margin: 0; overflow: visible; }
body.products .footer-inner { position: relative; width: 100%; max-width: none; height: 100%;
                               display: block; padding: 0; margin: 0; }body.products .footer-col { position: absolute; }
body.products .footer-col h4 { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap;
   font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 700; }
body.products .footer-col ul,
body.products .footer-col .footer-products-grid { position: absolute; left: 0; margin: 0; padding: 0;
   list-style: none; display: block; gap: 0; }
body.products .footer-col li { position: absolute; left: 0; white-space: nowrap; }
body.products .footer-col a,
body.products .footer-col li { font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 500;
   text-decoration: none; }
body.products .footer-closer { position: absolute; margin: 0; padding: 0; }
body.products .footer-closer p { margin: 0; white-space: nowrap; font-weight: 300;
   font-family: "IBM Plex Sans", system-ui, sans-serif; }
body.products .footer-closer em { font-style: normal; }
body.products .footer-wordmark { position: absolute; margin: 0; padding: 0; }
body.products .footer-wordmark img { width: 100%; height: 100%; object-fit: fill; display: block; }
@media (min-width: 601px) {
  body.products footer.footer { height: 41.3281vw; }
  body.products .footer-col h4 { font-size: 0.4688vw; letter-spacing: 0.11em; line-height: 1.33; }
  body.products .footer-col li,
  body.products .footer-col a { font-size: 0.4688vw; letter-spacing: 0.19em; line-height: 1.33; }  body.products .footer-closer { left: 39.7396vw; top: 20.2344vw; }
  body.products .footer-closer p { font-size: 1.3021vw; line-height: 1; }
  /* wordmark: the two themes use different art at different boxes */
  body.products .footer-wordmark { left: 19.8698vw; top: 26.5625vw;
     width: 60.2344vw; height: 9.8698vw; }
  body.products[data-theme="black"] .footer-wordmark { left: 14.5312vw; top: 23.1250vw;
     width: 71.0938vw; height: 16.6667vw; }
}

@media (max-width: 600px) {
  body.products footer.footer { height: 201.3426vw; }
  body.products .footer-col h4 { font-size: 2.6208vw; letter-spacing: 0.11em; line-height: 1.36; }
  body.products .footer-col li,
  body.products .footer-col a { font-size: 2.8083vw; letter-spacing: 0.10em; line-height: 1.27; }  body.products .footer-closer { left: 28.7500vw; top: 164.4444vw; }
  body.products .footer-closer p { font-size: 2.7778vw; line-height: 1; }
  body.products .footer-wordmark { left: 6.8056vw; top: 174.5370vw;
     width: 84.2130vw; height: 13.7963vw; }
  body.products[data-theme="black"] .footer-wordmark { left: -0.5556vw; top: 174.7222vw;
     width: 99.1204vw; height: 23.2407vw; }
}

/* footer colour: Figma's white frame draws the whole footer in #000, the black
   frame in #fff with the secondary links at 50% (desktop) / 80% (mobile). */
body.products .footer-col h4,
body.products .footer-closer p { color: #fff; }
body.products .footer-col a { color: rgba(255,255,255,0.5); }
body.products[data-theme="white"] .footer-col h4,
body.products[data-theme="white"] .footer-closer p { color: #000; }
body.products[data-theme="white"] .footer-col a { color: #000; }
@media (max-width: 600px) {
  body.products .footer-col a { color: rgba(255,255,255,0.8); }
  body.products[data-theme="white"] .footer-col a { color: #000; }
}

/* ---- three corrections found by measuring the built footer ---------------
   1. chrome.css renders the orange "+" as `.footer-col h4::before`, a flex
      item with a gap. Figma puts the "+" at the column origin and the heading
      TEXT 37 design px in on desktop / 67 on mobile (44 / 83 for the slogan),
      so the ::before is given exactly that width instead of being left to
      size itself.
   2. footer-mobile.css hangs margin-top on four .footer-col rules (12.9vw,
      15vw, -15.59vw) to drive its own stacked order. Margin still offsets an
      absolutely-positioned box, so those margins were dragging the columns
      283-344 design px off Figma. Zeroed here only.
   3. .footer-wordmark picture was left `static` and unsized, so the img's
      height:100% resolved against nothing and the wordmark came out 214
      design px too tall.
   ------------------------------------------------------------------------ */
body.products .footer-col { margin: 0 !important; }
body.products .footer-col h4 { gap: 0; align-items: baseline; }
body.products .footer-col h4::before { display: inline-block; flex: 0 0 auto; opacity: 1; }
body.products .footer-wordmark picture { display: block; width: 100%; height: 100%; }

/* ==== css-products-p4.css ==== */
@media (min-width: 601px) {
  body.products .footer-col h4::before { width: 0.9635vw; }}
@media (max-width: 600px) {
  body.products .footer-col h4 { margin-bottom: 0; }
  body.products .footer-col h4::before { width: 3.1019vw; }}

/* ---- themed wordmark ----------------------------------------------------
   The footer ships BOTH lockups (.themed--white / .themed--black) and the
   home page picks between them in home.css, which is scoped to body.home.
   Without an equivalent here both rendered at once and shared the flex row,
   which is why the black lockup measured 2640 design px wide instead of 2730.
   ------------------------------------------------------------------------ */
body.products .footer-wordmark .themed--white { display: none; }
body.products .footer-wordmark .themed--black { display: block; }
body.products[data-theme="white"] .footer-wordmark .themed--white { display: block; }
body.products[data-theme="white"] .footer-wordmark .themed--black { display: none; }
body.products .footer-wordmark { display: block; }

/* Figma's footer carries ONE closing line -- "A radically original
   composition." The inherited markup adds a second, "+ FOUR SECTIONS - ONE
   LINE - BUILT TO KEEP UP", which no frame contains. */
body.products .footer-closer-line { display: none; }
/* chrome.css caps the footer lockup at `max-width: 1320px` on both the
   <picture> and the <img>. 1320 CSS px is exactly 2640 design px at a 1920
   viewport, so the BLACK desktop wordmark -- whose Figma box is 2730 wide --
   was the only one of the four that got clipped (white 2313 and both mobile
   boxes fall under the cap). Released here; the box is set explicitly above. */
body.products .footer-wordmark picture,
body.products .footer-wordmark img { max-width: none; margin: 0; height: 100%; }

/* The closing line is TWO colours in every frame -- Figma's own text segments:
     "A radically original "  #000 on white / #fff on black
     "composition."           #ff5d01
   (the full stop belongs to the orange run). */
body.products .footer-closer em { font-style: normal; color: #ff5d01; }

/* chrome.css ships .hamburger-btn as a mobile-only control (hidden >=601px) and
   pins it to its own corner. Figma puts it at 3757,28 on desktop and 1978,70 on
   mobile, and item E of the change-set wants it visible and glass in all four
   states -- so it is un-hidden here and its `inset` overridden. `inset` is a
   SHORTHAND: setting left/top without it would leave chrome.css's right/bottom
   in force and the chip would stretch. */
body.products .hamburger-btn {
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center;
  position: fixed; right: auto; bottom: auto;   /* NOT `inset: auto` -- that is a
     shorthand and would wipe the left/top set in the media queries above, which
     is exactly what it did on the first attempt (chip landed at 0,6842). */
  min-width: 0; min-height: 0; padding: 0; cursor: pointer;
}
body.products .hamburger-btn .bars {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: inherit;
}
body.products .hamburger-btn .bars span { display: block; border-radius: 2px; }
/* ---- Desktop footer: adopt the PDP treatment -----------------------------
   User: "the footer is not the same footer as we use on any desktop pdp black
   version." Correct -- measuring products.html against the POVA Curve PDP at
   1920/black showed the footer was built to the Product Page FRAME (IBM Plex
   Sans, links at 50% and weight 500, a hairline border-top, and a 71.09vw
   wordmark) while every PDP renders chrome.css's own treatment (Roboto Mono,
   full-white links at weight 400 and 0.7 opacity, no border, 60.234vw wordmark).

   What changes here is the TREATMENT, copied from curve-desktop.css L554-620 +
   its black block L117-125. The column positions stay on Figma's Product Page
   coordinates, because each PDP positions its footer from its OWN frame -- Curve
   uses 19.635/37.961/56.252/74.507vw, this page 19.870/38.203/56.484/74.740 --
   so there is no single "PDP column position" to copy, and the two are within
   0.25vw of each other anyway.

   Applied to BOTH themes: the font family, weight and wordmark scale are not
   theme-specific, so fixing only black would leave white reading differently
   from every other page. Mobile is untouched -- it already uses the canonical
   footer-mobile.css.
   ------------------------------------------------------------------------- */
@media (min-width: 601px) {
  body.products .footer { border-top: 0; background: transparent; }
  body.products .footer::before { content: none !important; }

  /* type: back to the shared defaults the PDPs render */
  body.products .footer-col h4 {
    font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.11em;
  }
  body.products .footer-col li,
  body.products .footer-col a,
  body.products .footer-subscribe input {
    font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.19em;
  }
  body.products .footer-closer p { font-family: Inter, system-ui, sans-serif; }
  /* colour: PDP uses full ink at 0.7 on the links, not a 50% tint */
  body.products .footer-col h4,
  body.products .footer-slogan h4,
  body.products .footer-closer p { color: #000; }
  body.products .footer-col a,
  body.products .footer-col li,
  body.products .footer-subscribe input { color: #000; opacity: 0.7; }
  body.products .footer-col a:hover { opacity: 1; }
  body.products[data-theme="black"] .footer-col h4,
  body.products[data-theme="black"] .footer-slogan h4,
  body.products[data-theme="black"] .footer-closer p { color: #ffffff; }
  body.products[data-theme="black"] .footer-col a,
  body.products[data-theme="black"] .footer-col li,
  body.products[data-theme="black"] .footer-subscribe input { color: #ffffff; opacity: 0.7; }
  /* wordmark: the PDP box -- 60.234vw wide, height auto, on the column left.
     Aligned to THIS page's column (19.8698vw) rather than Curve's 19.635vw so
     it lines up with the columns above it. */
  body.products .footer-wordmark,
  body.products[data-theme="black"] .footer-wordmark {
    left: 19.8698vw; width: 60.234vw; height: auto;
  }
  body.products .footer-wordmark picture,
  body.products .footer-wordmark img { width: 100%; height: auto; max-width: none; margin: 0; }
}

/* ==========================================================================
   DESKTOP FOOTER = the PDP footer, ported verbatim
   --------------------------------------------------------------------------
   User: "use the exactly same footer that we used in other desktop pdp."
   Measured across all eight PDPs first: their black desktop footers are NOT
   identical to each other -- there are three, and they track build order:
     A  Curve, POVA 7, 6 Pro, 5 Pro   h810  cols x377  logo 1156 @510   <- newest
     B  Curve 2, 7 Pro                h1015 cols x382  logo 1156 @716
     C  POVA 8 Pro, POVA 8            h1015 cols x382  logo 1365 @650   <- oldest
   A is the current treatment (the last four built, including POVA Curve, the
   final PDP), so A is what this ports -- from curve-desktop.css L554-620 and its
   black block L779 / L117-125.

   Everything below is a DESKTOP override of the Figma-derived footer defined
   earlier in this file. The earlier rules laid the rows out with absolute
   positioning on the Product Page frame's coordinates; the PDP footer is a flow
   layout, so those have to be reset explicitly (position/top/left/width), not
   just re-valued -- otherwise the absolute rows survive underneath.
   MOBILE IS UNTOUCHED: it keeps the Product Page coordinates and the canonical
   footer-mobile.css, exactly as before.
   ========================================================================== */

/* ==== css-products-p5.css ==== */
@media (min-width: 601px) {
  /* `footer.footer`, not `.footer` -- the Figma-derived rule earlier in this file
     uses `body.products footer.footer` (0,2,2), which out-specifies
     `body.products .footer` (0,2,1). Written as `.footer` the height silently
     stayed at the frame's 41.328vw and the footer measured 793 instead of 810. */
  body.products footer.footer {
    position: relative; height: 42.188vw; padding: 0; border-top: 0;
    background: transparent !important; overflow: visible; z-index: 4; margin-top: 0;
  }
  body.products .footer::before { content: none !important; }
  body.products .footer-inner,
  body.products .footer-top,
  body.products .footer-mid { display: contents; }
  body.products .footer-col { position: absolute; width: auto; }
  /* rows back to flow -- undoing the absolute layout used for the frame build */
  body.products .footer-col h4 {
    position: static; left: auto; top: auto;
    font-size: 0.469vw; letter-spacing: 0.11em; font-weight: 700;
    margin: 0 0 1.16vw; gap: 0.29vw;
    line-height: inherit;   /* the PDP sets none; pinning it made the heading 12px
                               instead of 14 and pulled the link rows 6px up */
  }
  body.products .footer-col h4::before { width: auto; color: var(--pova-orange); }
  body.products .footer-col ul {
    position: static; left: auto; top: auto; width: auto;
    display: flex; flex-direction: column; gap: 0.927vw;
  }
  body.products .footer-col li {
    position: static; left: auto; top: auto;
    font-size: 0.469vw; letter-spacing: 0.19em; font-weight: 400;
  }
  body.products .footer-col a { font-size: 0.469vw; letter-spacing: 0.19em; font-weight: 400; }
  /* closer 1517,14377 and the dark POVA logo 754,14619.54 2313x378.91 */
  body.products .footer-closer {
    position: absolute; left: 39.505vw; top: 20.234vw; margin: 0; padding: 0; border: 0;
    text-align: left; font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 300;
    font-size: 1.302vw; line-height: 1;
  }
  body.products .footer-closer p { margin: 0; font-size: inherit; font-family: inherit; }
  body.products .footer-closer em { font-style: normal; color: var(--pova-orange); }
  body.products .footer-wordmark,
  body.products[data-theme="black"] .footer-wordmark {
    position: absolute; left: 19.635vw; top: 26.551vw; width: 60.234vw; height: auto;
    margin: 0; padding: 0; display: block;
  }
  body.products .footer-wordmark picture,
  body.products .footer-wordmark img {
    width: 100%; max-width: none; height: auto; margin: 0; filter: none;
  }

  /* ink -- PDP white frame is #000, black frame #fff, links at 0.7 */
  body.products .footer-col h4,
  body.products .footer-slogan h4,
  body.products .footer-closer,
  body.products .footer-subscribe button { color: #000; }
  body.products .footer-col li,
  body.products .footer-col a,
  body.products .footer-subscribe input { color: #000; opacity: 0.7; }
  body.products .footer-col a:hover { opacity: 1; }  body.products[data-theme="black"] .footer-col h4,
  body.products[data-theme="black"] .footer-slogan h4,
  body.products[data-theme="black"] .footer-closer,
  body.products[data-theme="black"] .footer-subscribe button { color: #ffffff; }
  body.products[data-theme="black"] .footer-col li,
  body.products[data-theme="black"] .footer-col a,
  body.products[data-theme="black"] .footer-subscribe input { color: #ffffff; opacity: 0.7; }}
/* The frame build pinned `line-height: 1.33` on the footer rows; the PDPs set
   none and inherit. That was the last 1px on the link rows. */
@media (min-width: 601px) {
  body.products .footer-col li,
  body.products .footer-col a,
  body.products .footer-subscribe input { line-height: inherit; }
}

/* ==========================================================================
   DESKTOP HOVER -- name appears, device pops up
   --------------------------------------------------------------------------
   User: "the name should appear and device should popup when cursor goes to
   that image ... phone version should be 100% intact as is."

   Values are the site's existing convention, lifted from home.css so this
   behaves like the home instruments rather than inventing a new interaction:
     label   opacity 0 -> 1, translateY(6px) -> 0   (home.css L139-153)
     device  scale(1.04) + a deeper drop-shadow      (home.css L98-107, L82-87)
     item    z-index 10 while hovered, so the lifted device sits above its
             neighbours -- the products overlap on this layout
   `--t-med` / `--t-slow` / `--ease-out` come from tokens.css, already loaded.

   :focus-visible mirrors :hover so the labels are reachable by keyboard -- the
   linking cards are <a>, and hiding their text behind a pointer-only state
   would otherwise make them unreadable without a mouse.

   ENTIRELY inside min-width:601px. Mobile keeps labels permanently visible and
   gets no transform -- including p01, whose 25% lift is a mobile-only transform
   on the same <picture> element and must not be touched.
   ========================================================================== */
@media (min-width: 601px) {
  body.products .cat-item .cat-label {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
    pointer-events: none;
  }
  body.products .cat-item:hover .cat-label,
  body.products .cat-item:focus-visible .cat-label {
    opacity: 1;
    transform: translateY(0);
  }

  body.products .cat-item picture {
    transition: filter var(--t-med) var(--ease-out), transform var(--t-slow) var(--ease-out);
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
  }
  body.products .cat-item:hover picture,
  body.products .cat-item:focus-visible picture {
    transform: scale(1.04);
    filter: drop-shadow(0 50px 80px rgba(0, 0, 0, 0.7));
  }
  body.products .cat-item:hover,
  body.products .cat-item:focus-visible { z-index: 10; }
  body.products .cat-item:focus-visible { outline: none; }

  /* the white page needs a lighter shadow -- the home one is tuned for #000 */
  body.products[data-theme="white"] .cat-item picture {
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.18));
  }
  body.products[data-theme="white"] .cat-item:hover picture,
  body.products[data-theme="white"] .cat-item:focus-visible picture {
    filter: drop-shadow(0 50px 80px rgba(0, 0, 0, 0.28));
  }
}

/* Respect a reduced-motion preference: the label still appears, the pop does not. */
@media (min-width: 601px) and (prefers-reduced-motion: reduce) {
  body.products .cat-item .cat-label { transition: opacity var(--t-med) var(--ease-out); transform: none; }
  body.products .cat-item:hover picture,
  body.products .cat-item:focus-visible picture { transform: none; }
}

/* ---- black-theme header chips: make the glass actually blend --------------
   User: on the black page the three header icons read as flat grey boxes, not

/* ==== css-products-p6.css ==== */
   glass. Confirmed by measuring the rendered pixels -- chip #1b1b1b on a #000
   page, a +27 lift, and identical on every black desktop page on the site.

   Cause: `backdrop-filter` refracts what is BEHIND the element, and behind
   these chips is uniform black. Blurring uniform black returns uniform black
   and saturating greyscale returns greyscale, so the blur contributes nothing
   and only the 10% white plate is left.

   Why white looks right: 30% white over #f6f6f6 lands on 248.7, a lift of just
   +2.7 -- the chip nearly disappears and its hairline border defines it. The
   black theme lifted +25.5, about 10x more prominent. Same rule, opposite
   result.

   Fix: derive the black alpha from the white theme's own contrast rather than
   picking a number -- 2.7/255 = 0.011. The chip now sits ~3/255 off the page,
   matching white's relationship, the border does the defining, and the blur
   finally has the background grid to refract instead of flat black.
   Border and blur are unchanged. products.html ONLY -- the seven PDPs have the
   identical issue and are deliberately left alone pending your go-ahead.
   ------------------------------------------------------------------------ */
body.products[data-theme="black"] .mhdr-btn,
body.products[data-theme="black"] .hamburger-btn {
  background: rgba(255, 255, 255, 0.011);
}

/* ...and the outline, for the same reason. With the plate gone the border is
   the only thing left, and it was carrying 1.6x the white theme's weight:
     black  rgba(255,255,255,0.22) over #000    -> contrast 56
     white  rgba(0,0,0,0.14)       over #f6f6f6 -> contrast 34
   It measured heavier still once the fill dropped (58 vs the PDP's 45), because
   the grey plate had been softening it from behind. Derived the same way as the
   fill -- match white's own contrast: 34.4/255 = 0.135. */
body.products[data-theme="black"] .mhdr-btn,
body.products[data-theme="black"] .hamburger-btn {
  border-color: rgba(255, 255, 255, 0.135);
}

/* ---- Cursor halo, tinted by the hovered product (desktop) ----------------
   Re-enables `.field` on this page, the same way pdp-halo.css does for the
   PDPs. Earlier in this file `.field` is hidden, because the frames carry no
   radial field -- that stays true for MOBILE, which is untouched below.

   Why it needs re-enabling rather than just working: chrome.css puts `.field`
   at z-index:-1 and this page paints an opaque background on the BODY, which
   occludes anything at -1. So the halo sits at z-index 0 -- above the body
   canvas and its grid, below all content (which is given z-index 1 here).
   chrome.css also draws a CAD grid on `.field::before`; this page already has
   its own grid, so that is dropped.

   --field-halo-x/y are driven by field.js (already loaded, tracks the pointer
   on any page). --field-halo-color / --field-halo-strength are set by the
   inline handler in products.html from each card's data-halo. Both are
   @property-registered in tokens.css, so the colour cross-fades instead of
   snapping when moving between products.
   ------------------------------------------------------------------------ */
@media (min-width: 601px) and (hover: hover) {
  body.products .field {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(
        circle 1100px at var(--field-halo-x, 50%) var(--field-halo-y, 40%),
        color-mix(in oklab, var(--field-halo-color, #FF5D01) calc(var(--field-halo-strength, 0.12) * 100%), transparent) 0%,
        color-mix(in oklab, var(--field-halo-color, #FF5D01) calc(var(--field-halo-strength, 0.12) * 30%), transparent) 30%,
        transparent 65%
      );
    transition:
      --field-halo-color var(--t-slow, .6s) var(--ease-out, ease),
      --field-halo-strength var(--t-med, .35s) var(--ease-out, ease);
  }
  body.products .field::before,
  body.products .field::after { content: none !important; }

  /* content must sit above the halo layer */
  body.products .cat { z-index: 1; }
  body.products .mhdr,
  body.products .wordmark,
  body.products .hamburger-btn,
  body.products .back-link,
  body.products .comp-number { z-index: 90; }
}

/* ==== css-products-extra.css ==== */
/* ==========================================================================
   FALLBACK GRID -- .cat-extra
   --------------------------------------------------------------------------
   Any active product not in the bespoke map in body-page.products.liquid lands
   here (see that file). Empty today, so this whole block is inert and the
   scatter canvas above is unchanged. When a newly published product appears, it
   shows in a simple centered flow grid below the canvas, before the footer --
   its Shopify image contain-fit in a phone-tall cell, same label + halo
   behaviour as the mapped tiles. Not part of the Figma frame; a deliberate
   graceful fallback until the product is given bespoke art + a slot.
   ========================================================================== */
body.products .cat-extra {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 3.5vw 4vw;
  width: 100%;
  box-sizing: border-box;
  padding: 4vw clamp(24px, 6vw, 96px) 8vw;
}
/* extra cards opt OUT of the absolute scatter positioning */
body.products .cat-item--extra {
  position: relative;
  left: auto; top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4vw;
  width: 18vw;
  text-decoration: none;
}
body.products .cat-item--extra picture {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 26vw;
}
body.products .cat-item--extra img {
  width: 100%; height: 100%;
  object-fit: contain;   /* NOT the bespoke object-fit:fill -- no per-node crop box here */
  object-position: bottom center;
  display: block; max-width: none; max-height: none;
}
/* label sits statically under the render (the mapped tiles place it absolutely) */
body.products .cat-item--extra .cat-label {
  position: relative;
  left: auto; top: auto;
  display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; text-align: center;
}
body.products .cat-item--extra .cat-label .n,
body.products .cat-item--extra .cat-label .t {
  position: relative; left: auto; top: auto;
}
@media (min-width: 601px) {
  body.products .cat-item--extra .cat-label .n { font-size: 0.9vw; line-height: 1.3; }
  body.products .cat-item--extra .cat-label .t { font-size: 0.65vw; line-height: 1.21; }
}
@media (max-width: 600px) {
  body.products .cat-extra { gap: 8vw 6vw; padding: 10vw 6vw 16vw; }
  body.products .cat-item--extra { width: 42vw; }
  body.products .cat-item--extra picture { height: 62vw; }
  body.products .cat-item--extra .cat-label .n { font-size: 3.7vw; line-height: 1.3; }
  body.products .cat-item--extra .cat-label .t { font-size: 2.55vw; line-height: 1.21; }
}