/* reset.css - a small modern reset (box sizing, margins, media defaults). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
/* a picture (1.2.0: an AVIF source and its img) has no box of its own: the img lays out as if it stood alone */
picture { display: contents; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* tokens.css - generated from the Figma design's variables and text styles by the design repository's scripts/tokens-v7.py (regenerate it there rather than editing it).
   Figma version 2416022974571367465, saved 2026-10-30.
   Fluid values are one clamp() each, exact at the design's widths (390, 768, 1440, 1920) and linear between;
   stepped values change at the layouts' breakpoints (768, 1024, 1600). */

/* Fallback faces: a font already on the visitor's machine, scaled to the kit face's average width, so text laid
   out before the kit arrives wraps where the kit's will and little moves when it lands. Every type token sets
   its line height, so only width is matched. No font file is loaded. */
@font-face { font-family: "ss-display-segoe"; src: local("Segoe UI Bold"); font-weight: 700; size-adjust: 69.47%; }
@font-face { font-family: "ss-display-roboto"; src: local("Roboto Bold"); font-weight: 700; size-adjust: 70.75%; }
@font-face { font-family: "ss-body-segoe"; src: local("Segoe UI"); font-weight: 400; size-adjust: 104.98%; }
@font-face { font-family: "ss-body-segoe"; src: local("Segoe UI Bold"); font-weight: 700; size-adjust: 102.02%; }
@font-face { font-family: "ss-numeral-segoe"; src: local("Segoe UI Semibold"); font-weight: 600; size-adjust: 93.41%; }
@font-face { font-family: "ss-numeral-roboto"; src: local("Roboto Medium"); font-weight: 600; size-adjust: 95.28%; }

:root {
  /* Inks: the twelve Ink variables of V7 */
  --ink-field: #000000;
  --ink-paper: #F0F0F0;
  --ink-red-ink: #FF0004;
  --ink-red-deep: #BC0100;
  --ink-red-photo: #982018;
  --ink-yellow: #FFEE00;
  --ink-paper-dim: #B8B8B8;
  --ink-paper-faint: #8A8A8A;
  --ink-field-dim: #4A4A4A;
  --ink-field-faint: #6B6B6B;
  --ink-rule-paper: #C8C8C8;
  --ink-rule-field: #333333;
  --ink-field-30: #0000004D;
  --ink-paper-35: #F0F0F059;
  /* Colours kept as drawn, outside the inks */
  --ink-keyline: #F0EBDB; /* the hero card's keyline */
  --ink-burst: #F1E9D2; /* the sale bursts' cream */
  --ink-door-rule: #B8A800; /* the door card's rule */
  --ink-punch-hole: #420003; /* the signup coupon's punch holes */
  /* Spacing: the Spacing variables */
  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* Type families, through the Adobe Fonts kit (Arial never appears in the design, so no fallback names it);
     after the kit, the same design where the machine has it, then the size-adjusted fallback faces above */
  --font-display: "futura-pt-condensed", "Futura PT Cond", "ss-display-segoe", "ss-display-roboto", sans-serif; /* Futura PT Condensed: headlines, labels, the marquee */
  --font-product: "futura-pt", "Futura PT", "Futura", sans-serif; /* Futura PT: product names (Demi) */
  --font-archive: "rockwell", "Rockwell Std", "Rockwell", serif; /* Adobe's Rockwell Std: character and archive text (the local Rockwell measures the same width) */
  --font-body: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Helvetica Neue", "ss-body-segoe", sans-serif; /* body copy and specs */
  --font-numeral: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", "ss-numeral-segoe", "ss-numeral-roboto", sans-serif; /* prices and numerals */
  /* The page's content column: the margin is fluid (20, 32, 80, 120 px), the column stops at 1,680 px */
  --content-max: 105rem;
  --page-margin: max(var(--gutter), (100vw - var(--content-max)) / 2);
  /* The stacking order, low to high */
  --z-base: 0; --z-raised: 1; --z-overlay: 10; --z-sticky: 50; --z-header: 90; --z-menu: 92; --z-drawer: 95; --z-dialog: 98; --z-skip: 100;
  /* Motion: an entrance decelerates (--ease-out), a change there and back eases both ways (--ease-in-out),
     an exit accelerates away (--ease-in); the band reveal rises over --motion-reveal, its items --motion-stagger apart,
     a panel settles over --motion-panel, a hover fades in and out over --motion-hover (a change there and back), an
     accordion unfolds over --motion-unfold, one photograph crossfades into the next over --motion-crossfade, and a count
     the customer changes turns its digits over --motion-roll, a pump's dial on the in-and-out curve (1.2.0). A drawer
     or a side panel travels hundreds of pixels, too far for those curves (they would cover a third of it in one frame):
     it slides in over --motion-slide-in on --ease-slide-in, a sheet's curve that builds up and then settles long, and
     out over --motion-slide-out on --ease-slide-out, an even acceleration */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-slide-in: cubic-bezier(0.32, 0.72, 0, 1); --ease-slide-out: cubic-bezier(0.3, 0, 1, 1);
  --motion-reveal: 600ms; --motion-stagger: 70ms; --motion-panel: 160ms; --motion-hover: 150ms; --motion-unfold: 200ms;
  --motion-slide-in: 400ms; --motion-slide-out: 250ms; --motion-crossfade: 300ms; --motion-roll: 300ms;
  /* The hero card's tape: duct tape's own colours, drawn in code */
  --tape-duct-1: #E2E5E8; --tape-duct-2: #C1C5CA; --tape-duct-3: #A9ADB2; --tape-duct-4: #C2C5C9; --tape-duct-5: #D9DCE0;
  /* The Breakpoints variables: fluid (one clamp) or stepped (the media queries below) */
  --gutter: clamp(1.25rem, max(max(calc(0.4762rem + 3.1746vw), calc(-1.4286rem + 7.1429vw)), calc(-2.5rem + 8.3333vw)), 7.5rem); /* 20 / 32 / 80 / 120 */
  --door-gap: clamp(1.75rem, min(calc(0.9762rem + 3.1746vw), 2.5rem), 2.5rem); /* 28 / 40 / 40 / 40 */
  --tile-gap: 0.75rem; /* 12 / 12 / 12 / 12 */
  --band-head: clamp(2.25rem, min(min(calc(1.7341rem + 2.1164vw), calc(1.8929rem + 1.7857vw)), 3.5rem), 3.5rem); /* 36 / 44 / 56 / 56 */
  --space-s: clamp(1.25rem, min(min(calc(0.8631rem + 1.5873vw), calc(1.125rem + 1.0417vw)), 2.0625rem), 2.0625rem); /* 20 / 26 / 33 / 33 */
  --space-m: clamp(2.5rem, min(min(calc(1.7262rem + 3.1746vw), calc(2.25rem + 2.0833vw)), 4.125rem), 4.125rem); /* 40 / 52 / 66 / 66 */
  --space-l: clamp(3.5rem, min(min(calc(2.3393rem + 4.7619vw), calc(3.2679rem + 2.8274vw)), 5.8125rem), 5.8125rem); /* 56 / 74 / 93 / 93 */
  --band-gap: clamp(2rem, min(calc(1.2262rem + 3.1746vw), 2.75rem), 2.75rem); /* 32 / 44 / 44 / 44 */
  --v7-type-84-66-55: clamp(3.4375rem, min(min(calc(2.7282rem + 2.9101vw), calc(2.8393rem + 2.6786vw)), 5.25rem), 5.25rem); /* 55 / 66 / 84 / 84 */
  --v7-type-40-34-30: clamp(1.875rem, min(min(calc(1.6171rem + 1.0582vw), calc(1.6964rem + 0.8929vw)), 2.5rem), 2.5rem); /* 30 / 34 / 40 / 40 */
  --v7-type-36-31-24: clamp(1.5rem, min(min(calc(1.0486rem + 1.8519vw), calc(1.5804rem + 0.744vw)), 2.25rem), 2.25rem); /* 24 / 31 / 36 / 36 */
  --v7-type-36-31-27: clamp(1.6875rem, min(min(calc(1.4296rem + 1.0582vw), calc(1.5804rem + 0.744vw)), 2.25rem), 2.25rem); /* 27 / 31 / 36 / 36 */
  --v7-type-34-29-22: clamp(1.375rem, min(min(calc(0.9236rem + 1.8519vw), calc(1.4554rem + 0.744vw)), 2.125rem), 2.125rem); /* 22 / 29 / 34 / 34 */
  --v7-type-34-29-26: clamp(1.625rem, min(min(calc(1.4315rem + 0.7937vw), calc(1.4554rem + 0.744vw)), 2.125rem), 2.125rem); /* 26 / 29 / 34 / 34 */
  --v7-type-30-26-22: clamp(1.375rem, min(min(calc(1.1171rem + 1.0582vw), calc(1.3393rem + 0.5952vw)), 1.875rem), 1.875rem); /* 22 / 26 / 30 / 30 */
  --v7-type-26-23-21-35: clamp(1.3125rem, max(min(calc(1.1835rem + 0.5291vw), calc(1.2232rem + 0.4464vw)), calc(-0.0625rem + 1.875vw)), 2.1875rem); /* 21 / 23 / 26 / 35 */
  --v7-type-26-23-21: clamp(1.3125rem, min(min(calc(1.1835rem + 0.5291vw), calc(1.2232rem + 0.4464vw)), 1.625rem), 1.625rem); /* 21 / 23 / 26 / 26 */
  --v7-type-24-23-19-32: clamp(1.1875rem, max(min(calc(0.9296rem + 1.0582vw), calc(1.3661rem + 0.1488vw)), calc(0rem + 1.6667vw)), 2rem); /* 19 / 23 / 24 / 32 */
  --v7-type-24-22-19: clamp(1.1875rem, min(min(calc(0.994rem + 0.7937vw), calc(1.2321rem + 0.2976vw)), 1.5rem), 1.5rem); /* 19 / 22 / 24 / 24 */
  --v7-type-22-16-14: clamp(0.875rem, min(max(calc(0.746rem + 0.5291vw), calc(0.5714rem + 0.8929vw)), 1.375rem), 1.375rem); /* 14 / 16 / 22 / 22 */
  --v7-type-22-20-18: clamp(1.125rem, min(min(calc(0.996rem + 0.5291vw), calc(1.1071rem + 0.2976vw)), 1.375rem), 1.375rem); /* 18 / 20 / 22 / 22 */
  --v7-type-21-21-17: clamp(1.0625rem, min(calc(0.8046rem + 1.0582vw), 1.3125rem), 1.3125rem); /* 17 / 21 / 21 / 21 */
  --v7-type-20-18-16: clamp(1rem, min(min(calc(0.871rem + 0.5291vw), calc(0.9821rem + 0.2976vw)), 1.25rem), 1.25rem); /* 16 / 18 / 20 / 20 */
  --v7-type-20-16-14: clamp(0.875rem, min(max(calc(0.746rem + 0.5291vw), calc(0.7143rem + 0.5952vw)), 1.25rem), 1.25rem); /* 14 / 16 / 20 / 20 */
  --v7-type-18-18-16: clamp(1rem, min(calc(0.871rem + 0.5291vw), 1.125rem), 1.125rem); /* 16 / 18 / 18 / 18 */
  --v7-type-17-15-14: clamp(0.875rem, min(max(calc(0.8105rem + 0.2646vw), calc(0.7946rem + 0.2976vw)), 1.0625rem), 1.0625rem); /* 14 / 15 / 17 / 17 */
  --v7-type-15-15-10: clamp(0.625rem, min(calc(0.3026rem + 1.3228vw), 0.9375rem), 0.9375rem); /* 10 / 15 / 15 / 15 */
  --v7-type-14-14-14-19: clamp(0.875rem, max(0.875rem, calc(-0.0625rem + 1.0417vw)), 1.1875rem); /* 14 / 14 / 14 / 19 */
  --v7-type-13-13-13-17: clamp(0.8125rem, max(0.8125rem, calc(0.0625rem + 0.8333vw)), 1.0625rem); /* 13 / 13 / 13 / 17 */
  --v7-door-min: clamp(18.75rem, max(calc(25.0992rem + -13.2275vw), 18.75rem), 21.875rem); /* 350 / 300 / 300 / 300 */
  --v7-thumb-circle: clamp(4.5rem, max(min(calc(3.4683rem + 4.2328vw), calc(5.2143rem + 0.5952vw)), calc(-0.0625rem + 6.4583vw)), 7.6875rem); /* 72 / 88 / 92 / 123 */
  --v7-hero-overlap: clamp(-39.1875rem, max(max(calc(26.7153rem + -137.037vw), calc(-38.9196rem + -0.2976vw)), -39.1875rem), -6.6875rem); /* -107 / -625 / -627 / -627 */
  --v7-hero-card-top: clamp(3.75rem, max(max(calc(25.7163rem + -45.5026vw), calc(4.0179rem + -0.2976vw)), 3.75rem), 14.625rem); /* 234 / 62 / 60 / 60 */
  --v7-doors-pt: clamp(4rem, min(max(calc(3.2262rem + 3.1746vw), calc(1.4643rem + 6.8452vw)), 7.625rem), 7.625rem); /* 64 / 76 / 122 / 122 */
  --v7-doors-cat-pb: clamp(2rem, min(calc(1.2262rem + 3.1746vw), 2.75rem), 2.75rem); /* 32 / 44 / 44 / 44 */
  --v7-doors-nav-px: clamp(0rem, min(max(0rem, calc(-0.4286rem + 0.8929vw)), 0.375rem), 0.375rem); /* 0 / 0 / 6 / 6 */
  --v7-doors-nav-rowgap: clamp(0.75rem, max(min(1.1875rem, calc(1.6875rem + -1.0417vw)), 0.75rem), 1.1875rem); /* 19 / 19 / 12 / 12 */
  --v7-sales-pt: clamp(3.5rem, min(min(calc(2.3393rem + 4.7619vw), calc(3.2679rem + 2.8274vw)), 5.8125rem), 5.8125rem); /* 56 / 74 / 93 / 93 */
  --v7-sales-row-gap: clamp(0rem, max(min(4.5rem, calc(9.6429rem + -10.7143vw)), 0rem), 4.5rem); /* 72 / 72 / 0 / 0 */
  --v7-sales-sale-size: clamp(8.6875rem, min(calc(3.7867rem + 20.1058vw), 13.4375rem), 13.4375rem); /* 139 / 215 / 215 / 215 */
  --v7-sales-new-size: clamp(7.8125rem, min(calc(3.3631rem + 18.254vw), 12.125rem), 12.125rem); /* 125 / 194 / 194 / 194 */
  --v7-sales-new-right: clamp(3.1875rem, min(max(calc(4.756rem + -0.7937vw), calc(4.4464rem + -0.1488vw)), calc(7.6875rem + -3.75vw)), 4.5625rem); /* 73 / 70 / 69 / 51 */
  --v7-sales-head-lh: clamp(1.9875rem, min(min(calc(1.2008rem + 3.2275vw), calc(2.25rem + 1.0417vw)), 3.1875rem), 3.1875rem); /* 31.8 / 44 / 51 / 51 */
  --v7-frill-gap: clamp(0.4375rem, min(min(calc(-0.0784rem + 2.1164vw), calc(0.7232rem + 0.4464vw)), 1.125rem), 1.125rem); /* 7 / 15 / 18 / 18 */
  --v7-frill-tracks-gap: clamp(-2.5625rem, max(min(calc(3.2272rem + -5.291vw), calc(3.6161rem + -6.1012vw)), calc(0.1875rem + -2.2917vw)), 1.9375rem); /* 31 / 11 / -30 / -41 */
  --v7-brands-head-gap: clamp(0.625rem, min(min(calc(0.2381rem + 1.5873vw), calc(0.9286rem + 0.1488vw)), 1.0625rem), 1.0625rem); /* 10 / 16 / 17 / 17 */
  --v7-brands-cta-top: clamp(1.3125rem, min(max(calc(0.7321rem + 2.381vw), calc(-0.2679rem + 4.4643vw)), 3.75rem), 3.75rem); /* 21 / 30 / 60 / 60 */
  --v7-brands-marks-gap: clamp(1.375rem, min(calc(0.7302rem + 2.6455vw), 2rem), 2rem); /* 22 / 32 / 32 / 32 */
  --v7-brands-fade-right: clamp(3.125rem, max(min(calc(-1.3889rem + 18.5185vw), calc(6.0714rem + 2.9762vw)), calc(-13.75rem + 25vw)), 16.25rem); /* 50 / 120 / 140 / 260 */
  --v7-social-frill-pr: clamp(2.5rem, min(min(calc(-0.2728rem + 11.3757vw), calc(0.7589rem + 9.2262vw)), calc(7.375rem + 1.875vw)), 9.625rem); /* 40 / 83 / 145 / 154 */
  --v7-social-frill-tracks-gap: clamp(-1.75rem, max(min(calc(2.1488rem + -3.1746vw), calc(2.4107rem + -3.7202vw)), calc(1.5rem + -2.7083vw)), 1.375rem); /* 22 / 10 / -15 / -28 */
  --v7-social-pt: clamp(0rem, min(max(0rem, calc(-13.3571rem + 27.8274vw)), calc(10.5625rem + 1.25vw)), 12.0625rem); /* 0 / 0 / 187 / 193 */
  --v7-social-row-gap: clamp(0rem, max(min(3.25rem, calc(6.9643rem + -7.7381vw)), 0rem), 3.25rem); /* 52 / 52 / 0 / 0 */
  --v7-social-links-gap: clamp(0.75rem, min(max(0.75rem, calc(0.4643rem + 0.5952vw)), 1rem), 1rem); /* 12 / 12 / 16 / 16 */
  --v7-social-grid-pt: clamp(1.75rem, min(min(calc(0.9762rem + 3.1746vw), calc(1.9286rem + 1.1905vw)), 3rem), 3rem); /* 28 / 40 / 48 / 48 */
  --v7-footer-pb: clamp(3.8125rem, min(calc(3.2321rem + 2.381vw), 4.375rem), 4.375rem); /* 61 / 70 / 70 / 70 */
  --v7-footer-row-gap: clamp(0rem, max(min(calc(2.0079rem + -1.0582vw), calc(3.2143rem + -3.5714vw)), 0rem), 1.75rem); /* 28 / 24 / 0 / 0 */
  --v7-footer-body-pb: clamp(0.0625rem, max(calc(21.0149rem + -43.6508vw), 0.0625rem), 10.375rem); /* 166 / 1 / 1 / 1 */
  --v7-footer-group-pr: clamp(0.25rem, min(calc(-0.5238rem + 3.1746vw), 1rem), 1rem); /* 4 / 16 / 16 / 16 */
  --v7-visit-card-pr: clamp(1.25rem, max(max(calc(0.4762rem + 3.1746vw), calc(-1.4286rem + 7.1429vw)), calc(-30.625rem + 39.5833vw)), 16.875rem); /* 20 / 32 / 80 / 270 */
  --v7-visit-strip-top: clamp(1.5rem, min(min(calc(0.9841rem + 2.1164vw), calc(1.4286rem + 1.1905vw)), 2.5rem), 2.5rem); /* 24 / 32 / 40 / 40 */
  --v7-visit-strip-pl: clamp(1.25rem, max(max(calc(0.4762rem + 3.1746vw), calc(-1.4286rem + 7.1429vw)), calc(-31.1875rem + 40.2083vw)), 17.0625rem); /* 20 / 32 / 80 / 273 */
  --v7-visit-strip-pr: clamp(1.25rem, max(max(calc(0.4762rem + 3.1746vw), calc(-1.4286rem + 7.1429vw)), calc(-30.625rem + 39.5833vw)), 16.875rem); /* 20 / 32 / 80 / 270 */
  --v7-visit-pb: clamp(0rem, max(max(calc(5.5476rem + -6.3492vw), calc(5.3571rem + -5.9524vw)), 0rem), 4rem); /* 64 / 40 / 0 / 0 */
  --v7-visit-art-pr: clamp(0rem, min(max(0rem, calc(-45.4286rem + 94.6429vw)), calc(-14.25rem + 60vw)), 57.75rem); /* 0 / 0 / 636 / 924 */
  --v7-category-grid-gap: clamp(0.75rem, min(calc(-0.5397rem + 5.291vw), 2rem), 2rem); /* 12 / 32 / 32 / 32 */
  --v7-category-grid-row: clamp(0.75rem, min(min(calc(-0.5397rem + 5.291vw), calc(0.8571rem + 2.381vw)), 3rem), 3rem); /* 12 / 32 / 48 / 48 */
  --v7-category-head-pt: clamp(1.75rem, min(min(calc(0.9762rem + 3.1746vw), calc(1.3571rem + 2.381vw)), 3.5rem), 3.5rem); /* 28 / 40 / 56 / 56 */
  --v7-category-head-pb: clamp(1.5rem, min(max(calc(1.2421rem + 1.0582vw), calc(1.1786rem + 1.1905vw)), 2.25rem), 2.25rem); /* 24 / 28 / 36 / 36 */
  --v7-category-head-gap: clamp(0.5rem, min(min(calc(0.2421rem + 1.0582vw), calc(0.6071rem + 0.2976vw)), 0.875rem), 0.875rem); /* 8 / 12 / 14 / 14 */
  --v7-type-104-81-68: clamp(4.25rem, min(min(calc(3.4117rem + 3.4392vw), calc(3.4196rem + 3.4226vw)), 6.5rem), 6.5rem); /* 68 / 81 / 104 / 104 */
  --v7-type-15-15-14: clamp(0.875rem, min(calc(0.8105rem + 0.2646vw), 0.9375rem), 0.9375rem); /* 14 / 15 / 15 / 15 */
  --v7-category-grid-pt: clamp(1.25rem, min(min(calc(0.4762rem + 3.1746vw), calc(1.4286rem + 1.1905vw)), 2.5rem), 2.5rem); /* 20 / 32 / 40 / 40 */
  --v7-category-grid-pb: clamp(2rem, min(min(calc(0.4524rem + 6.3492vw), calc(0.6429rem + 5.9524vw)), 6rem), 6rem); /* 32 / 56 / 96 / 96 */
  --v7-category-store-py: clamp(2rem, min(min(calc(1.4841rem + 2.1164vw), calc(1.9286rem + 1.1905vw)), 3rem), 3rem); /* 32 / 40 / 48 / 48 */
  --v7-category-store-gap: clamp(1.25rem, min(max(calc(0.4762rem + 3.1746vw), calc(0.2857rem + 3.5714vw)), 3.5rem), 3.5rem); /* 20 / 32 / 56 / 56 */
  --v7-product-pdp-gap: clamp(2.5rem, min(max(2.5rem, calc(-0.7857rem + 6.8452vw)), calc(0.3125rem + 5.625vw)), 7.0625rem); /* 40 / 40 / 86 / 113 */
  --v7-product-pdp-row: clamp(0rem, max(min(2.5rem, calc(5.3571rem + -5.9524vw)), 0rem), 2.5rem); /* 40 / 40 / 0 / 0 */
  --v7-product-slide-gap: 0.5rem; /* 8 / 8 / 8 / 8 */
  --v7-product-swatch: clamp(3rem, min(calc(2.4841rem + 2.1164vw), 3.5rem), 3.5rem); /* 48 / 56 / 56 / 56 */
  --v7-product-size-pt: clamp(2rem, max(calc(3.0159rem + -2.1164vw), 2rem), 2.5rem); /* 40 / 32 / 32 / 32 */
  --v7-product-recs-py: clamp(2rem, min(calc(0.9683rem + 4.2328vw), 3rem), 3rem); /* 32 / 48 / 48 / 48 */
  --v7-product-recs-gap: clamp(1rem, min(min(calc(0.4841rem + 2.1164vw), calc(0.9286rem + 1.1905vw)), 2rem), 2rem); /* 16 / 24 / 32 / 32 */
  --v7-sellers-gap: clamp(0.75rem, min(calc(-1.0556rem + 7.4074vw), 2.5rem), 2.5rem); /* 12 / 40 / 40 / 40 */
  --v7-hero-photo-inset: clamp(0rem, max(0rem, calc(-22.5rem + 25vw)), 7.5rem); /* 0 / 0 / 0 / 120 */
  --v7-frill-bubble-px: clamp(1.7812rem, min(min(calc(1.3943rem + 1.5873vw), calc(1.5134rem + 1.3393vw)), 2.7188rem), 2.7188rem); /* 28.5 / 34.5 / 43.5 / 43.5 */
  --v7-social-tile-border: clamp(0.3125rem, min(max(0.3125rem, calc(0.0982rem + 0.4464vw)), 0.5rem), 0.5rem); /* 5 / 5 / 8 / 8 */
  --v7-social-rig-top: clamp(3.5625rem, max(max(calc(10.126rem + -8.4656vw), calc(8.9196rem + -5.9524vw)), 3.5625rem), 8.0625rem); /* 129 / 97 / 57 / 57 */
  --v7-social-scene-top: clamp(0rem, max(max(calc(9.5408rem + -13.0185vw), calc(7.054rem + -7.8378vw)), 0rem), 6.3675rem); /* 101.88 / 52.67 / 0 / 0 */
  --v7-social-sign-top: clamp(0.625rem, max(max(calc(9.6505rem + -12.2355vw), calc(7.3804rem + -7.506vw)), 0.625rem), 6.6681rem); /* 106.69 / 60.44 / 10 / 10 */
  --v7-social-stack-gap: clamp(1.5rem, min(min(calc(0.9841rem + 2.1164vw), calc(1.4286rem + 1.1905vw)), 2.5rem), 2.5rem); /* 24 / 32 / 40 / 40 */
  --v7-social-kicker-gap: clamp(0.375rem, min(calc(0.246rem + 0.5291vw), 0.5rem), 0.5rem); /* 6 / 8 / 8 / 8 */
  --v7-hero-wrench-gap: clamp(0.5rem, min(min(calc(0.2421rem + 1.0582vw), calc(0.6071rem + 0.2976vw)), 0.875rem), 0.875rem); /* 8 / 12 / 14 / 14 */
  /* stepped values: the phone layout (below 768); the blocks below change them at 768, 1024 and 1600 */
  --col: 21.875rem; /* 350 / 704 / 1280 / 1680 */
  --offer-gap: 2.5rem; /* 40 / 48 / 40 / 40 */
  --nav-labels: 0; /* False / True / True / True */
  --tile-10: 0; /* False / False / True / True */
  --v7-door-win-feature: 20.125rem; /* 322 / 301 / 372 / 505 */
  --v7-door-min-feature: 18.75rem; /* 300 / 704 / 300 / 300 */
  --v7-thumb-min: 5rem; /* 80 / 160 / 148 / 150 */
  --v7-nav-first: "MENU"; /* MENU / NEW / NEW / NEW */
  --v7-hero-h: 47.5625rem; /* 761 / 763 / 763 / 763 */
  --v7-hero-photo-h: 18.3125rem; /* 293 / 687 / 687 / 687 */
  --v7-hero-card-w: 21.875rem; /* 350 / 400 / 470 / 470 */
  --v7-hero-card-pt: 4.8125rem; /* 77 / 117 / 150 / 150 */
  --v7-hero-card-pl: 1.375rem; /* 22 / 27 / 30 / 30 */
  --v7-hero-card-pr: 1.375rem; /* 22 / 25 / 30 / 30 */
  --v7-hero-card-pb: 2.6875rem; /* 43 / 58 / 46 / 46 */
  --v7-hero-card-gap: 0.6875rem; /* 11 / 16 / 16 / 16 */
  --v7-hero-badge-w: 7.7312rem; /* 123.69999694824219 / 168.8000030517578 / 211 / 205.89999389648438 */
  --v7-hero-badge-h: 5.5312rem; /* 88.5 / 120.80000305175781 / 151 / 147.39999389648438 */
  --v7-hero-bars-h: 0.375rem; /* 6 / 8 / 8 / 8 */
  --v7-hero-title-gap: 0.6875rem; /* 11 / 14 / 10 / 10 */
  --v7-hero-rule-after: 0rem; /* 0 / 6 / 6 / 6 */
  --v7-hero-action-top: 0.0625rem; /* 1 / 2 / 2 / 2 */
  --v7-hero-action-left: 0rem; /* 0 / 0 / 0 / 0 */
  --v7-hero-visit-gap: 0.6875rem; /* 11 / 14 / 14 / 14 */
  --v7-hero-visit-tail-gap: 0.6875rem; /* 11 / 8 / 4 / 4 */
  --v7-hero-badge-right: 2.175rem; /* 34.79999923706055 / 26.899999618530273 / 33.900001525878906 / 31.100000381469727 */
  --v7-hero-badge-top: 1.2812rem; /* 20.5 / 20.700000762939453 / 26.100000381469727 / 25.600000381469727 */
  --v7-doors-pb: 4.25rem; /* 68 / 113 / 268 / 192 */
  --v7-doors-cat-gap: 2rem; /* 32 / 44 / 0 / 0 */
  --v7-doors-nav-pb: 2rem; /* 32 / 45 / 18 / 44 */
  --v7-doors-sell-gap: 2rem; /* 32 / 44 / -2 / 0 */
  --v7-doors-sell-pb: 2rem; /* 32 / 44 / 40 / 44 */
  --v7-doors-nav-w: 21.875rem; /* 350 / 704 / 1280 / 1680 */
  --v7-doors-nav-gap: 0.625rem; /* 10 / 17.329999923706055 / 12 / 12 */
  --v7-doors-see-all: 1; /* True / True / True / True */
  --v7-doors-char-w: 11.25rem; /* 180 / 281 / 416 / 400 */
  --v7-doors-char-h: 6.5rem; /* 104 / 163 / 241 / 232 */
  --v7-sales-pb: 1.25rem; /* 20 / 26 / 88 / 33 */
  --v7-sales-min: 18.75rem; /* 300 / 704 / 560 / 560 */
  --v7-sales-sale-top: 3.5625rem; /* 57 / 28 / 319 / 443 */
  --v7-sales-sale-right: 4.0625rem; /* 65 / 72 / 72 / 58 */
  --v7-sales-new-top: 4.3125rem; /* 69 / 52 / 63 / 60 */
  --v7-sales-head-gap: 0.875rem; /* 14 / 6 / -1 / 10 */
  --v7-sales-action-top: 1.25rem; /* 20 / 27 / 27 / 20 */
  --v7-frill-pt: 3.875rem; /* 62 / 19 / 19 / 67 */
  --v7-frill-pr: 0.75rem; /* 12 / 43 / 110 / 156 */
  --v7-frill-pb: 8.125rem; /* 130 / 85 / 124 / 102 */
  --v7-frill-bubble-top: 2.75rem; /* 44 / 80 / 109 / 104 */
  --v7-frill-bubble-w: 16.1875rem; /* 259 / 330 / 390 / 390 */
  --v7-frill-bubble-h: 3.875rem; /* 62 / 80 / 80 / 80 */
  --v7-frill-head-w: 6.4375rem; /* 103 / 154 / 193 / 193 */
  --v7-frill-head-h: 7.875rem; /* 126 / 190 / 237 / 237 */
  --v7-frill-tracks-top: 11.75rem; /* 188 / 121 / 119 / 156 */
  --v7-frill-track-1-w: 38.8125rem; /* 621 / 900 / 1480 / 1960 */
  --v7-frill-track-2-w: 38rem; /* 608 / 880 / 1447 / 1930 */
  --v7-frill-track-h: 1.375rem; /* 22 / 32 / 52 / 69 */
  --v7-brands-pt: 4.6875rem; /* 75 / 120 / 85 / 145 */
  --v7-brands-pb: 9.125rem; /* 146 / 119 / 135 / 165 */
  --v7-brands-h2-max: 18.125rem; /* 290 / 3000 / 3000 / 3000 */
  --v7-brands-star-w: 1.25rem; /* 20 / 26 / 30 / 30 */
  --v7-brands-star-h: 1.4375rem; /* 23 / 30 / 35 / 35 */
  --v7-brands-rule-w: 17.6875rem; /* 283 / 341 / 635 / 635 */
  --v7-button-w: 13.9375rem; /* 223 / 287 / 287 / 287 */
  --v7-button-h: 3.5rem; /* 56 / 72 / 72 / 72 */
  --v7-brands-h2-w: 18.125rem; /* 290 / 500 / 636 / 636 */
  --v7-brands-window-h: 5.375rem; /* 86 / 117 / 117 / 117 */
  --v7-brands-marks-pl: 7.625rem; /* 122 / 134 / 32 / 342 */
  --v7-brands-marks-pt: 0.4375rem; /* 7 / 0 / 16 / 16 */
  --v7-brands-mark-w: 8.9375rem; /* 143 / 230 / 230 / 230 */
  --v7-brands-mark-h: 4.5625rem; /* 73 / 117 / 117 / 117 */
  --v7-brands-fade-left: 3.125rem; /* 50 / 32 / 140 / 200 */
  --v7-brands-rule-gap: 0.75rem; /* 12 / 17 / 12 / 12 */
  --v7-social-link-h: 5.625rem; /* 90 / 108 / 108 / 108 */
  --v7-social-frill-pt: 4.6875rem; /* 75 / 81 / 115 / 9 */
  --v7-social-frill-pb: 1.4375rem; /* 23 / 68 / 11 / 24 */
  --v7-social-frill-gap: 0.625rem; /* 10 / 15 / 39 / 0 */
  --v7-social-frill-bubble-top: 2.3125rem; /* 37 / 50 / 46 / 133 */
  --v7-social-frill-bubble-w: 9.375rem; /* 150 / 191 / 191 / 191 */
  --v7-social-frill-bubble-h: 3.875rem; /* 62 / 80 / 80 / 80 */
  --v7-social-frill-head-w: 7rem; /* 112 / 140 / 159 / 235 */
  --v7-social-frill-head-h: 8.5rem; /* 136 / 170 / 193 / 286 */
  --v7-social-frill-tracks-top: 3.9375rem; /* 63 / 110 / 85 / 72 */
  --v7-social-frill-track-w: 24.375rem; /* 390 / 768 / 1526 / 1920 */
  --v7-social-row-pt: 4.25rem; /* 68 / 72 / 158 / 109 */
  --v7-social-links-w: 100%; /* 350 / 704 / 764 / 986 */
  --v7-social-link-min: 18.75rem; /* 300 / 346 / 338 / 449 */
  --v7-social-tile-min: 9.375rem; /* 150 / 200 / 230 / 300 */
  --v7-social-pb: 4.375rem; /* 70 / 78 / 152 / 72 */
  --v7-footer-col-gap: 1rem; /* 16 / 24 / 24 / 0 */
  --v7-footer-sign-w: 21.75rem; /* 348 / 260 / 394 / 394 */
  --v7-footer-mark-w: 9rem; /* 144 / 144 / 144 / 144 */
  --v7-footer-mark-h: 6rem; /* 96 / 96 / 96 / 96 */
  --v7-footer-group-w: 10.375rem; /* 166 / 197 / 197 / 321 */
  --v7-footer-col-rule: 0; /* False / False / True / True */
  --v7-footer-char-w: 21.75rem; /* 348 / 260 / 548 / 548 */
  --v7-footer-char-h: 9.3125rem; /* 149 / 115.30000305175781 / 243 / 243 */
  --v7-footer-char-pr: 5.3125rem; /* 85 / 529 / 40 / 40 */
  --v7-footer-char-pb: 2rem; /* 32 / 34 / 9 / 8 */
  --v7-visit-map-h: 11.25rem; /* 180 / 220 / 220 / 240 */
  --v7-visit-signup-copy-min: 18.75rem; /* 300 / 420 / 420 / 420 */
  --v7-visit-scene-h: 32.5rem; /* 520 / 792 / 1195 / 1173 */
  --v7-visit-interior-h: 26.125rem; /* 418 / 942 / 1266 / 1327 */
  --v7-visit-dissolve-h: 12.5rem; /* 200 / 240 / 260 / 260 */
  --v7-visit-art-x: 1rem; /* 16 / 12 / 67 / 273 */
  --v7-visit-art-y: 1.3125rem; /* 21 / 58 / 95 / 38 */
  --v7-visit-art-w: 22.875rem; /* 366 / 446 / 824 / 865 */
  --v7-visit-art-h: 32.875rem; /* 526 / 747 / 1279 / 1320 */
  --v7-visit-card-top: 31.25rem; /* 500 / 700 / 141 / 143 */
  --v7-visit-card-w: 100%; /* 350 / 704 / 580 / 628 */
  --v7-visit-card-col-min: 16.25rem; /* 260 / 300 / 300 / 300 */
  --v7-visit-art-desktop: 0; /* False / False / True / True */
  --v7-visit-art-phone: 1; /* True / True / False / False */
  --v7-category-card-min: 9.375rem; /* 150 / 240 / 240 / 300 */
  --v7-category-lede-w: 100%; /* 350 / 560 / 640 / 640 */
  --v7-category-count-in-row: 0; /* False / True / True / True */
  --v7-category-count-below: 1; /* True / False / False / False */
  --v7-category-rail: 0; /* False / True / True / True */
  --v7-category-phone-filter: 1; /* True / False / False / False */
  --v7-category-rail-all: 0; /* False / False / True / True */
  --v7-category-rail-more: 0; /* False / True / False / False */
  --v7-category-counterman-w: 9.375rem; /* 150 / 200 / 300 / 300 */
  --v7-category-counterman-h: 12.125rem; /* 194 / 259 / 388 / 388 */
  --v7-category-store-card-min: 18.75rem; /* 300 / 400 / 600 / 600 */
  --v7-category-card-max: 10.5625rem; /* 169 / 336 / 296 / 311 */
  --v7-product-gallery-w: 100%; /* 350 / 704 / 674 / 884 */
  --v7-product-side-min: 18.75rem; /* 300 / 300 / 400 / 400 */
  --v7-product-gallery-desktop: 0; /* False / False / True / True */
  --v7-product-gallery-strip: 1; /* True / True / False / False */
  --v7-product-thumb-w: 4.125rem; /* 66 / 52 / 66 / 87 */
  --v7-product-thumb-h: 5.125rem; /* 82 / 65 / 82 / 108 */
  --v7-product-thumb-gap: 0.75rem; /* 12 / 4 / 10 / 13 */
  --v7-product-hero-gap: 0.875rem; /* 14 / 12 / 24 / 31 */
  --v7-product-play: 5.25rem; /* 84 / 56 / 84 / 110 */
  --v7-product-glyph-w: 1.875rem; /* 30 / 20 / 30 / 39 */
  --v7-product-glyph-h: 2.125rem; /* 34 / 23 / 34 / 45 */
  --v7-product-transport-w: 6rem; /* 96 / 96 / 96 / 126 */
  --v7-product-transport-h: 2.125rem; /* 34 / 34 / 34 / 45 */
  --v7-product-transport-inset: 0.875rem; /* 14 / 12 / 16 / 21 */
  --v7-product-slide-w: 21.875rem; /* 350 / 276 / 350 / 350 */
  --v7-product-slide-h: 27.375rem; /* 438 / 345 / 438 / 438 */
  --v7-product-rec-min: 9.375rem; /* 150 / 300 / 240 / 350 */
  --v7-product-rec-max: 10.4375rem; /* 167 / 340 / 296 / 396 */
  --v7-sellers-card-w: 9.625rem; /* 154 / 290 / 290 / 290 */
  --v7-sellers-card-h: 19.1875rem; /* 307 / 418 / 418 / 418 */
  --v7-sellers-nuts-4: 1; /* True / True / False / False */
  --v7-sellers-arrows: 0; /* False / False / True / True */
  --v7-hero-side-fades: 0; /* False / False / False / True */
  --v7-hero-is-phone: 1; /* True / False / False / False */
  --v7-hero-is-wide: 0; /* False / True / True / False */
  --v7-social-frill-bubble-px: 2.1875rem; /* 35 / 50 / 42.5 / 42.5 */
  --v7-store-art-pt: 0rem; /* 0 / 64.5999984741211 / 17.600000381469727 / 17.600000381469727 */
  --v7-store-art-w: 16.0625rem; /* 257 / 389 / 487 / 487 */
  --v7-store-art-h: 16rem; /* 256 / 389 / 486 / 486 */
  --v7-store-map-h: 11.25rem; /* 180 / 180 / 248 / 248 */
  --v7-product-qty-w: 7.5rem; /* 120 / 120 / 136 / 136 */
  --v7-social-frill-min-h: 14.625rem; /* 234 / 319 / 319 / 319 */
  --v7-social-tiles-7-8: 1; /* True / False / True / True */
  --v7-social-tile-9: 0; /* False / False / True / True */
  --v7-social-rig-w: 16.25rem; /* 260 / 420 / 540 / 540 */
  --v7-social-rig-h: 5.4375rem; /* 87 / 140 / 180 / 180 */
  --v7-social-scene-w: 96.2962rem; /* 1540.739990234375 / 2488.889892578125 / 3200 / 3200 */
  --v7-social-scene-h: 12.0369rem; /* 192.58999633789062 / 311.1099853515625 / 400 / 400 */
  --v7-social-sign-left: 1.6437rem; /* 26.299999237060547 / 615.5999755859375 / 720 / 960 */
  --v7-social-sign-w: 4.2131rem; /* 67.41000366210938 / 108.88999938964844 / 140 / 140 */
  --v7-social-sign-h: 5.4169rem; /* 86.66999816894531 / 140 / 180 / 180 */
  --v7-social-wordmark-w: 21.875rem; /* 350 / 560 / 740 / 826 */
  --v7-social-wordmark-h: 2.9644rem; /* 47.43000030517578 / 75.88999938964844 / 100.27999877929688 / 111.93000030517578 */
  --v7-hero-wrench-w: 1.625rem; /* 26 / 36 / 44 / 44 */
  --v7-hero-wrench-h: 0.4875rem; /* 7.800000190734863 / 10.800000190734863 / 13.199999809265137 / 13.199999809265137 */
  --v7-footer-groups-gap: 1rem; /* 16 / 24 / 24 / 0 */
  --v7-footer-groups-min: 21.75rem; /* 348 / 418 / 860 / 1284 */
  --v7-hero-is-print: 0; /* False / False / False / True */
  --v7-nav-gap: 1.5rem; /* 24 / 6 / 24 / 24 */
  --v7-agegate-card-w: 100%; /* 350 / 544 / 600 / 600 */
  --v7-promo-wide: 0; /* False / True / True / True */
  --v7-promo-phone: 1; /* True / False / False / False */
}
@media (min-width: 768px) { :root {
  --col: 44rem;
  --offer-gap: 3rem;
  --nav-labels: 1;
  --v7-door-win-feature: 18.8125rem;
  --v7-door-min-feature: 100%;
  --v7-thumb-min: 10rem;
  --v7-nav-first: "NEW";
  --v7-hero-h: 47.6875rem;
  --v7-hero-photo-h: 42.9375rem;
  --v7-hero-card-w: 25rem;
  --v7-hero-card-pt: 7.3125rem;
  --v7-hero-card-pl: 1.6875rem;
  --v7-hero-card-pr: 1.5625rem;
  --v7-hero-card-pb: 3.625rem;
  --v7-hero-card-gap: 1rem;
  --v7-hero-badge-w: 10.55rem;
  --v7-hero-badge-h: 7.55rem;
  --v7-hero-bars-h: 0.5rem;
  --v7-hero-title-gap: 0.875rem;
  --v7-hero-rule-after: 0.375rem;
  --v7-hero-action-top: 0.125rem;
  --v7-hero-visit-gap: 0.875rem;
  --v7-hero-visit-tail-gap: 0.5rem;
  --v7-hero-badge-right: 1.6812rem;
  --v7-hero-badge-top: 1.2938rem;
  --v7-doors-pb: 7.0625rem;
  --v7-doors-cat-gap: 2.75rem;
  --v7-doors-nav-pb: 2.8125rem;
  --v7-doors-sell-gap: 2.75rem;
  --v7-doors-sell-pb: 2.75rem;
  --v7-doors-nav-w: 44rem;
  --v7-doors-nav-gap: 1.0831rem;
  --v7-doors-char-w: 17.5625rem;
  --v7-doors-char-h: 10.1875rem;
  --v7-sales-pb: 1.625rem;
  --v7-sales-min: 100%;
  --v7-sales-sale-top: 1.75rem;
  --v7-sales-sale-right: 4.5rem;
  --v7-sales-new-top: 3.25rem;
  --v7-sales-head-gap: 0.375rem;
  --v7-sales-action-top: 1.6875rem;
  --v7-frill-pt: 1.1875rem;
  --v7-frill-pr: 2.6875rem;
  --v7-frill-pb: 5.3125rem;
  --v7-frill-bubble-top: 5rem;
  --v7-frill-bubble-w: 20.625rem;
  --v7-frill-bubble-h: 5rem;
  --v7-frill-head-w: 9.625rem;
  --v7-frill-head-h: 11.875rem;
  --v7-frill-tracks-top: 7.5625rem;
  --v7-frill-track-1-w: 56.25rem;
  --v7-frill-track-2-w: 55rem;
  --v7-frill-track-h: 2rem;
  --v7-brands-pt: 7.5rem;
  --v7-brands-pb: 7.4375rem;
  --v7-brands-h2-max: 187.5rem;
  --v7-brands-star-w: 1.625rem;
  --v7-brands-star-h: 1.875rem;
  --v7-brands-rule-w: 21.3125rem;
  --v7-button-w: 17.9375rem;
  --v7-button-h: 4.5rem;
  --v7-brands-h2-w: 31.25rem;
  --v7-brands-window-h: 7.3125rem;
  --v7-brands-marks-pl: 8.375rem;
  --v7-brands-marks-pt: 0rem;
  --v7-brands-mark-w: 14.375rem;
  --v7-brands-mark-h: 7.3125rem;
  --v7-brands-fade-left: 2rem;
  --v7-brands-rule-gap: 1.0625rem;
  --v7-social-link-h: 6.75rem;
  --v7-social-frill-pt: 5.0625rem;
  --v7-social-frill-pb: 4.25rem;
  --v7-social-frill-gap: 0.9375rem;
  --v7-social-frill-bubble-top: 3.125rem;
  --v7-social-frill-bubble-w: 11.9375rem;
  --v7-social-frill-bubble-h: 5rem;
  --v7-social-frill-head-w: 8.75rem;
  --v7-social-frill-head-h: 10.625rem;
  --v7-social-frill-tracks-top: 6.875rem;
  --v7-social-frill-track-w: 48rem;
  --v7-social-row-pt: 4.5rem;
  --v7-social-links-w: 100%;
  --v7-social-link-min: 21.625rem;
  --v7-social-tile-min: 12.5rem;
  --v7-social-pb: 4.875rem;
  --v7-footer-col-gap: 1.5rem;
  --v7-footer-sign-w: 16.25rem;
  --v7-footer-group-w: 12.3125rem;
  --v7-footer-char-w: 16.25rem;
  --v7-footer-char-h: 7.2063rem;
  --v7-footer-char-pr: 33.0625rem;
  --v7-footer-char-pb: 2.125rem;
  --v7-visit-map-h: 13.75rem;
  --v7-visit-signup-copy-min: 26.25rem;
  --v7-visit-scene-h: 49.5rem;
  --v7-visit-interior-h: 58.875rem;
  --v7-visit-dissolve-h: 15rem;
  --v7-visit-art-x: 0.75rem;
  --v7-visit-art-y: 3.625rem;
  --v7-visit-art-w: 27.875rem;
  --v7-visit-art-h: 46.6875rem;
  --v7-visit-card-top: 43.75rem;
  --v7-visit-card-w: 100%;
  --v7-visit-card-col-min: 18.75rem;
  --v7-category-card-min: 15rem;
  --v7-category-lede-w: 35rem;
  --v7-category-count-in-row: 1;
  --v7-category-count-below: 0;
  --v7-category-rail: 1;
  --v7-category-phone-filter: 0;
  --v7-category-rail-more: 1;
  --v7-category-counterman-w: 12.5rem;
  --v7-category-counterman-h: 16.1875rem;
  --v7-category-store-card-min: 25rem;
  --v7-category-card-max: 21rem;
  --v7-product-gallery-w: 100%;
  --v7-product-thumb-w: 3.25rem;
  --v7-product-thumb-h: 4.0625rem;
  --v7-product-thumb-gap: 0.25rem;
  --v7-product-hero-gap: 0.75rem;
  --v7-product-play: 3.5rem;
  --v7-product-glyph-w: 1.25rem;
  --v7-product-glyph-h: 1.4375rem;
  --v7-product-transport-inset: 0.75rem;
  --v7-product-slide-w: 17.25rem;
  --v7-product-slide-h: 21.5625rem;
  --v7-product-rec-min: 18.75rem;
  --v7-product-rec-max: 21.25rem;
  --v7-sellers-card-w: 18.125rem;
  --v7-sellers-card-h: 26.125rem;
  --v7-hero-is-phone: 0;
  --v7-hero-is-wide: 1;
  --v7-social-frill-bubble-px: 3.125rem;
  --v7-store-art-pt: 4.0375rem;
  --v7-store-art-w: 24.3125rem;
  --v7-store-art-h: 24.3125rem;
  --v7-social-frill-min-h: 19.9375rem;
  --v7-social-tiles-7-8: 0;
  --v7-social-rig-w: 26.25rem;
  --v7-social-rig-h: 8.75rem;
  --v7-social-scene-w: 155.556rem;
  --v7-social-scene-h: 19.4444rem;
  --v7-social-sign-left: 38.475rem;
  --v7-social-sign-w: 6.8056rem;
  --v7-social-sign-h: 8.75rem;
  --v7-social-wordmark-w: 35rem;
  --v7-social-wordmark-h: 4.7431rem;
  --v7-hero-wrench-w: 2.25rem;
  --v7-hero-wrench-h: 0.675rem;
  --v7-footer-groups-gap: 1.5rem;
  --v7-footer-groups-min: 26.125rem;
  --v7-nav-gap: 0.375rem;
  --v7-agegate-card-w: 34rem;
  --v7-promo-wide: 1;
  --v7-promo-phone: 0;
} }
@media (min-width: 1024px) { :root {
  --col: 80rem;
  --offer-gap: 2.5rem;
  --tile-10: 1;
  --v7-door-win-feature: 23.25rem;
  --v7-door-min-feature: 18.75rem;
  --v7-thumb-min: 9.25rem;
  --v7-hero-card-w: 29.375rem;
  --v7-hero-card-pt: 9.375rem;
  --v7-hero-card-pl: 1.875rem;
  --v7-hero-card-pr: 1.875rem;
  --v7-hero-card-pb: 2.875rem;
  --v7-hero-badge-w: 13.1875rem;
  --v7-hero-badge-h: 9.4375rem;
  --v7-hero-title-gap: 0.625rem;
  --v7-hero-visit-tail-gap: 0.25rem;
  --v7-hero-badge-right: 2.1188rem;
  --v7-hero-badge-top: 1.6313rem;
  --v7-doors-pb: 16.75rem;
  --v7-doors-cat-gap: 0rem;
  --v7-doors-nav-pb: 1.125rem;
  --v7-doors-sell-gap: -0.125rem;
  --v7-doors-sell-pb: 2.5rem;
  --v7-doors-nav-w: 80rem;
  --v7-doors-nav-gap: 0.75rem;
  --v7-doors-char-w: 26rem;
  --v7-doors-char-h: 15.0625rem;
  --v7-sales-pb: 5.5rem;
  --v7-sales-min: 35rem;
  --v7-sales-sale-top: 19.9375rem;
  --v7-sales-new-top: 3.9375rem;
  --v7-sales-head-gap: -0.0625rem;
  --v7-frill-pr: 6.875rem;
  --v7-frill-pb: 7.75rem;
  --v7-frill-bubble-top: 6.8125rem;
  --v7-frill-bubble-w: 24.375rem;
  --v7-frill-head-w: 12.0625rem;
  --v7-frill-head-h: 14.8125rem;
  --v7-frill-tracks-top: 7.4375rem;
  --v7-frill-track-1-w: 92.5rem;
  --v7-frill-track-2-w: 90.4375rem;
  --v7-frill-track-h: 3.25rem;
  --v7-brands-pt: 5.3125rem;
  --v7-brands-pb: 8.4375rem;
  --v7-brands-star-w: 1.875rem;
  --v7-brands-star-h: 2.1875rem;
  --v7-brands-rule-w: 39.6875rem;
  --v7-brands-h2-w: 39.75rem;
  --v7-brands-marks-pl: 2rem;
  --v7-brands-marks-pt: 1rem;
  --v7-brands-fade-left: 8.75rem;
  --v7-brands-rule-gap: 0.75rem;
  --v7-social-frill-pt: 7.1875rem;
  --v7-social-frill-pb: 0.6875rem;
  --v7-social-frill-gap: 2.4375rem;
  --v7-social-frill-bubble-top: 2.875rem;
  --v7-social-frill-head-w: 9.9375rem;
  --v7-social-frill-head-h: 12.0625rem;
  --v7-social-frill-tracks-top: 5.3125rem;
  --v7-social-frill-track-w: 95.375rem;
  --v7-social-row-pt: 9.875rem;
  --v7-social-links-w: 47.75rem;
  --v7-social-link-min: 21.125rem;
  --v7-social-tile-min: 14.375rem;
  --v7-social-pb: 9.5rem;
  --v7-footer-sign-w: 24.625rem;
  --v7-footer-col-rule: 1;
  --v7-footer-char-w: 34.25rem;
  --v7-footer-char-h: 15.1875rem;
  --v7-footer-char-pr: 2.5rem;
  --v7-footer-char-pb: 0.5625rem;
  --v7-visit-scene-h: 74.6875rem;
  --v7-visit-interior-h: 79.125rem;
  --v7-visit-dissolve-h: 16.25rem;
  --v7-visit-art-x: 4.1875rem;
  --v7-visit-art-y: 5.9375rem;
  --v7-visit-art-w: 51.5rem;
  --v7-visit-art-h: 79.9375rem;
  --v7-visit-card-top: 8.8125rem;
  --v7-visit-card-w: 36.25rem;
  --v7-visit-art-desktop: 1;
  --v7-visit-art-phone: 0;
  --v7-category-lede-w: 40rem;
  --v7-category-rail-all: 1;
  --v7-category-rail-more: 0;
  --v7-category-counterman-w: 18.75rem;
  --v7-category-counterman-h: 24.25rem;
  --v7-category-store-card-min: 37.5rem;
  --v7-category-card-max: 18.5rem;
  --v7-product-gallery-w: 42.125rem;
  --v7-product-side-min: 25rem;
  --v7-product-gallery-desktop: 1;
  --v7-product-gallery-strip: 0;
  --v7-product-thumb-w: 4.125rem;
  --v7-product-thumb-h: 5.125rem;
  --v7-product-thumb-gap: 0.625rem;
  --v7-product-hero-gap: 1.5rem;
  --v7-product-play: 5.25rem;
  --v7-product-glyph-w: 1.875rem;
  --v7-product-glyph-h: 2.125rem;
  --v7-product-transport-inset: 1rem;
  --v7-product-slide-w: 21.875rem;
  --v7-product-slide-h: 27.375rem;
  --v7-product-rec-min: 15rem;
  --v7-product-rec-max: 18.5rem;
  --v7-sellers-nuts-4: 0;
  --v7-sellers-arrows: 1;
  --v7-social-frill-bubble-px: 2.6562rem;
  --v7-store-art-pt: 1.1rem;
  --v7-store-art-w: 30.4375rem;
  --v7-store-art-h: 30.375rem;
  --v7-store-map-h: 15.5rem;
  --v7-product-qty-w: 8.5rem;
  --v7-social-tiles-7-8: 1;
  --v7-social-tile-9: 1;
  --v7-social-rig-w: 33.75rem;
  --v7-social-rig-h: 11.25rem;
  --v7-social-scene-w: 200rem;
  --v7-social-scene-h: 25rem;
  --v7-social-sign-left: 45rem;
  --v7-social-sign-w: 8.75rem;
  --v7-social-sign-h: 11.25rem;
  --v7-social-wordmark-w: 46.25rem;
  --v7-social-wordmark-h: 6.2675rem;
  --v7-hero-wrench-w: 2.75rem;
  --v7-hero-wrench-h: 0.825rem;
  --v7-footer-groups-min: 53.75rem;
  --v7-nav-gap: 1.5rem;
  --v7-agegate-card-w: 37.5rem;
} }
@media (min-width: 1600px) { :root {
  --col: 105rem;
  --v7-door-win-feature: 31.5625rem;
  --v7-thumb-min: 9.375rem;
  --v7-hero-badge-w: 12.8687rem;
  --v7-hero-badge-h: 9.2125rem;
  --v7-hero-badge-right: 1.9438rem;
  --v7-hero-badge-top: 1.6rem;
  --v7-doors-pb: 12rem;
  --v7-doors-nav-pb: 2.75rem;
  --v7-doors-sell-gap: 0rem;
  --v7-doors-sell-pb: 2.75rem;
  --v7-doors-nav-w: 105rem;
  --v7-doors-char-w: 25rem;
  --v7-doors-char-h: 14.5rem;
  --v7-sales-pb: 2.0625rem;
  --v7-sales-sale-top: 27.6875rem;
  --v7-sales-sale-right: 3.625rem;
  --v7-sales-new-top: 3.75rem;
  --v7-sales-head-gap: 0.625rem;
  --v7-sales-action-top: 1.25rem;
  --v7-frill-pt: 4.1875rem;
  --v7-frill-pr: 9.75rem;
  --v7-frill-pb: 6.375rem;
  --v7-frill-bubble-top: 6.5rem;
  --v7-frill-tracks-top: 9.75rem;
  --v7-frill-track-1-w: 122.5rem;
  --v7-frill-track-2-w: 120.625rem;
  --v7-frill-track-h: 4.3125rem;
  --v7-brands-pt: 9.0625rem;
  --v7-brands-pb: 10.3125rem;
  --v7-brands-marks-pl: 21.375rem;
  --v7-brands-fade-left: 12.5rem;
  --v7-social-frill-pt: 0.5625rem;
  --v7-social-frill-pb: 1.5rem;
  --v7-social-frill-gap: 0rem;
  --v7-social-frill-bubble-top: 8.3125rem;
  --v7-social-frill-head-w: 14.6875rem;
  --v7-social-frill-head-h: 17.875rem;
  --v7-social-frill-tracks-top: 4.5rem;
  --v7-social-frill-track-w: 120rem;
  --v7-social-row-pt: 6.8125rem;
  --v7-social-links-w: 61.625rem;
  --v7-social-link-min: 28.0625rem;
  --v7-social-tile-min: 18.75rem;
  --v7-social-pb: 4.5rem;
  --v7-footer-col-gap: 0rem;
  --v7-footer-group-w: 20.0625rem;
  --v7-footer-char-pb: 0.5rem;
  --v7-visit-map-h: 15rem;
  --v7-visit-scene-h: 73.3125rem;
  --v7-visit-interior-h: 82.9375rem;
  --v7-visit-art-x: 17.0625rem;
  --v7-visit-art-y: 2.375rem;
  --v7-visit-art-w: 54.0625rem;
  --v7-visit-art-h: 82.5rem;
  --v7-visit-card-top: 8.9375rem;
  --v7-visit-card-w: 39.25rem;
  --v7-category-card-min: 18.75rem;
  --v7-category-card-max: 19.4375rem;
  --v7-product-gallery-w: 55.25rem;
  --v7-product-thumb-w: 5.4375rem;
  --v7-product-thumb-h: 6.75rem;
  --v7-product-thumb-gap: 0.8125rem;
  --v7-product-hero-gap: 1.9375rem;
  --v7-product-play: 6.875rem;
  --v7-product-glyph-w: 2.4375rem;
  --v7-product-glyph-h: 2.8125rem;
  --v7-product-transport-w: 7.875rem;
  --v7-product-transport-h: 2.8125rem;
  --v7-product-transport-inset: 1.3125rem;
  --v7-product-rec-min: 21.875rem;
  --v7-product-rec-max: 24.75rem;
  --v7-hero-side-fades: 1;
  --v7-hero-is-wide: 0;
  --v7-social-sign-left: 60rem;
  --v7-social-wordmark-w: 51.625rem;
  --v7-social-wordmark-h: 6.9956rem;
  --v7-footer-groups-gap: 0rem;
  --v7-footer-groups-min: 80.25rem;
  --v7-hero-is-print: 1;
} }

/* Type tokens: every text style the design uses, each with its line height set explicitly. */
:root {
  --t-display-18-family: var(--font-display); --t-display-18-weight: 700; --t-display-18-size: 1.125rem; --t-display-18-line: 1.125rem; --t-display-18-track: 0.045rem; --t-display-18-case: none; /* display/18 (330 uses) */
  --t-display-16-family: var(--font-display); --t-display-16-weight: 700; --t-display-16-size: 1rem; --t-display-16-line: 1.3125; --t-display-16-track: 0.05rem; --t-display-16-case: none; /* display/16 (54 uses) */
  --t-display-15-lh15-ls0p6-family: var(--font-display); --t-display-15-lh15-ls0p6-weight: 700; --t-display-15-lh15-ls0p6-size: 0.9375rem; --t-display-15-lh15-ls0p6-line: 0.9375rem; --t-display-15-lh15-ls0p6-track: 0.0375rem; --t-display-15-lh15-ls0p6-case: none; /* display/15/lh15-ls0p6 (1181 uses) */
  --t-display-14-lh21-ls0p56-family: var(--font-display); --t-display-14-lh21-ls0p56-weight: 700; --t-display-14-lh21-ls0p56-size: 0.875rem; --t-display-14-lh21-ls0p56-line: 1.3125rem; --t-display-14-lh21-ls0p56-track: 0.035rem; --t-display-14-lh21-ls0p56-case: none; /* display/14/lh21-ls0p56 (90 uses) */
  --t-display-14-lh13-ls0p56-family: var(--font-display); --t-display-14-lh13-ls0p56-weight: 700; --t-display-14-lh13-ls0p56-size: 0.875rem; --t-display-14-lh13-ls0p56-line: 0.8313rem; --t-display-14-lh13-ls0p56-track: 0.035rem; --t-display-14-lh13-ls0p56-case: none; /* display/14/lh13-ls0p56 (313 uses) */
  --t-body-16-roman-lh24-ls0-family: var(--font-body); --t-body-16-roman-lh24-ls0-weight: 400; --t-body-16-roman-lh24-ls0-size: 1rem; --t-body-16-roman-lh24-ls0-line: 1.5rem; --t-body-16-roman-lh24-ls0-track: 0em; --t-body-16-roman-lh24-ls0-case: none; /* body/16-roman/lh24-ls0 (78 uses) */
  --t-body-16-roman-lh23-ls0-family: var(--font-body); --t-body-16-roman-lh23-ls0-weight: 400; --t-body-16-roman-lh23-ls0-size: 1rem; --t-body-16-roman-lh23-ls0-line: 1.4375rem; --t-body-16-roman-lh23-ls0-track: 0em; --t-body-16-roman-lh23-ls0-case: none; /* body/16-roman/lh23-ls0 (50 uses) */
  --t-body-16-roman-lh22-ls0-family: var(--font-body); --t-body-16-roman-lh22-ls0-weight: 400; --t-body-16-roman-lh22-ls0-size: 1rem; --t-body-16-roman-lh22-ls0-line: 1.4rem; --t-body-16-roman-lh22-ls0-track: 0em; --t-body-16-roman-lh22-ls0-case: none; /* body/16-roman/lh22-ls0 (1256 uses) */
  --t-numeral-13-medium-family: var(--font-numeral); --t-numeral-13-medium-weight: 600; --t-numeral-13-medium-size: 0.8125rem; --t-numeral-13-medium-line: 1.125rem; --t-numeral-13-medium-track: 0em; --t-numeral-13-medium-case: none; /* numeral/13-medium (294 uses) */
  --t-numeral-13-medium-struck-family: var(--font-numeral); --t-numeral-13-medium-struck-weight: 600; --t-numeral-13-medium-struck-size: 0.8125rem; --t-numeral-13-medium-struck-line: 1.125rem; --t-numeral-13-medium-struck-track: 0em; --t-numeral-13-medium-struck-case: none; /* numeral/13-medium-struck (14 uses) */
  --t-v7-display-18-18-18-16-family: var(--font-display); --t-v7-display-18-18-18-16-weight: 700; --t-v7-display-18-18-18-16-size: var(--v7-type-18-18-16); --t-v7-display-18-18-18-16-line: 1; --t-v7-display-18-18-18-16-track: 0.04em; --t-v7-display-18-18-18-16-case: none; /* v7/display/18 ~ 18-18-16 (80 uses) */
  --t-v7-display-40-40-34-30-family: var(--font-display); --t-v7-display-40-40-34-30-weight: 700; --t-v7-display-40-40-34-30-size: var(--v7-type-40-34-30); --t-v7-display-40-40-34-30-line: 0.95; --t-v7-display-40-40-34-30-track: 0.04em; --t-v7-display-40-40-34-30-case: none; /* v7/display/40 ~ 40-34-30 (28 uses) */
  --t-v7-display-20-20-18-16-family: var(--font-display); --t-v7-display-20-20-18-16-weight: 700; --t-v7-display-20-20-18-16-size: var(--v7-type-20-18-16); --t-v7-display-20-20-18-16-line: 1; --t-v7-display-20-20-18-16-track: 0.04em; --t-v7-display-20-20-18-16-case: none; /* v7/display/20 ~ 20-18-16 (28 uses) */
  --t-v7-display-84-84-66-55-family: var(--font-display); --t-v7-display-84-84-66-55-weight: 700; --t-v7-display-84-84-66-55-size: var(--v7-type-84-66-55); --t-v7-display-84-84-66-55-line: 1.2822; --t-v7-display-84-84-66-55-track: 0em; --t-v7-display-84-84-66-55-case: none; /* v7/display/84 ~ 84-66-55 (23 uses) */
  --t-v7-display-40-caps-40-34-30-family: var(--font-display); --t-v7-display-40-caps-40-34-30-weight: 700; --t-v7-display-40-caps-40-34-30-size: var(--v7-type-40-34-30); --t-v7-display-40-caps-40-34-30-line: var(--v7-sales-head-lh); --t-v7-display-40-caps-40-34-30-track: 0em; --t-v7-display-40-caps-40-34-30-case: uppercase; /* v7/display/40-caps ~ 40-34-30 (50 uses) */
  --t-v7-display-34-34-29-22-family: var(--font-display); --t-v7-display-34-34-29-22-weight: 700; --t-v7-display-34-34-29-22-size: var(--v7-type-34-29-22); --t-v7-display-34-34-29-22-line: 1.2822; --t-v7-display-34-34-29-22-track: 0em; --t-v7-display-34-34-29-22-case: none; /* v7/display/34 ~ 34-29-22 (69 uses) */
  --t-v7-display-36-36-31-24-family: var(--font-display); --t-v7-display-36-36-31-24-weight: 700; --t-v7-display-36-36-31-24-size: var(--v7-type-36-31-24); --t-v7-display-36-36-31-24-line: 0.95; --t-v7-display-36-36-31-24-track: 0.04em; --t-v7-display-36-36-31-24-case: none; /* v7/display/36 ~ 36-31-24 (24 uses) */
  --t-v7-display-30-30-26-22-family: var(--font-display); --t-v7-display-30-30-26-22-weight: 700; --t-v7-display-30-30-26-22-size: var(--v7-type-30-26-22); --t-v7-display-30-30-26-22-line: 1.2667; --t-v7-display-30-30-26-22-track: 0.0167em; --t-v7-display-30-30-26-22-case: none; /* v7/display/30 ~ 30-26-22 (1 uses) */
  --t-v7-display-24-24-22-19-family: var(--font-display); --t-v7-display-24-24-22-19-weight: 700; --t-v7-display-24-24-22-19-size: var(--v7-type-24-22-19); --t-v7-display-24-24-22-19-line: 1.2917; --t-v7-display-24-24-22-19-track: 0.0333em; --t-v7-display-24-24-22-19-case: none; /* v7/display/24 ~ 24-22-19 (182 uses) */
  --t-v7-display-36-36-31-27-family: var(--font-display); --t-v7-display-36-36-31-27-weight: 700; --t-v7-display-36-36-31-27-size: var(--v7-type-36-31-27); --t-v7-display-36-36-31-27-line: 0.95; --t-v7-display-36-36-31-27-track: 0.04em; --t-v7-display-36-36-31-27-case: none; /* v7/display/36 ~ 36-31-27 (22 uses) */
  --t-v7-display-24-caps-24-23-19-32-family: var(--font-display); --t-v7-display-24-caps-24-23-19-32-weight: 700; --t-v7-display-24-caps-24-23-19-32-size: var(--v7-type-24-23-19-32); --t-v7-display-24-caps-24-23-19-32-line: 1.2632; --t-v7-display-24-caps-24-23-19-32-track: 0.0167em; --t-v7-display-24-caps-24-23-19-32-case: uppercase; /* v7/display/24-caps ~ 24-23-19-32 (178 uses) */
  --t-v7-display-56-lhauto-ls2p24-band-head-family: var(--font-display); --t-v7-display-56-lhauto-ls2p24-band-head-weight: 700; --t-v7-display-56-lhauto-ls2p24-band-head-size: var(--band-head); --t-v7-display-56-lhauto-ls2p24-band-head-line: 1.2778; --t-v7-display-56-lhauto-ls2p24-band-head-track: 0.04em; --t-v7-display-56-lhauto-ls2p24-band-head-case: none; /* v7/display/56/lhauto-ls2p24 ~ band-head (45 uses) */
  --t-v7-display-56-lh53-ls2p24-band-head-family: var(--font-display); --t-v7-display-56-lh53-ls2p24-band-head-weight: 700; --t-v7-display-56-lh53-ls2p24-band-head-size: var(--band-head); --t-v7-display-56-lh53-ls2p24-band-head-line: 0.95; --t-v7-display-56-lh53-ls2p24-band-head-track: 0.04em; --t-v7-display-56-lh53-ls2p24-band-head-case: none; /* v7/display/56/lh53-ls2p24 ~ band-head (120 uses) */
  --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-family: var(--font-display); --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-weight: 700; --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-size: var(--v7-type-26-23-21); --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-line: 1.2692; --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-track: 0.0154em; --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-case: uppercase; /* v7/display/26-caps/lhauto-ls0p4 ~ 26-23-21 (332 uses) */
  --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-family: var(--font-display); --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-weight: 700; --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-size: var(--v7-type-26-23-21-35); --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-line: 1.2692; --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-track: 0.0154em; --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-case: uppercase; /* v7/display/26-caps/lhauto-ls0p4 ~ 26-23-21-35 (80 uses) */
  --t-v7-display-15-lhauto-ls0-15-15-10-family: var(--font-display); --t-v7-display-15-lhauto-ls0-15-15-10-weight: 700; --t-v7-display-15-lhauto-ls0-15-15-10-size: var(--v7-type-15-15-10); --t-v7-display-15-lhauto-ls0-15-15-10-line: 1.2822; --t-v7-display-15-lhauto-ls0-15-15-10-track: 0em; --t-v7-display-15-lhauto-ls0-15-15-10-case: none; /* v7/display/15/lhauto-ls0 ~ 15-15-10 (106 uses) */
  --t-v7-body-17-roman-17-15-14-family: var(--font-body); --t-v7-body-17-roman-17-15-14-weight: 400; --t-v7-body-17-roman-17-15-14-size: var(--v7-type-17-15-14); --t-v7-body-17-roman-17-15-14-line: 1.2353; --t-v7-body-17-roman-17-15-14-track: 0em; --t-v7-body-17-roman-17-15-14-case: none; /* v7/body/17-roman ~ 17-15-14 (33 uses) */
  --t-v7-body-13-bold-13-13-13-17-family: var(--font-body); --t-v7-body-13-bold-13-13-13-17-weight: 700; --t-v7-body-13-bold-13-13-13-17-size: var(--v7-type-13-13-13-17); --t-v7-body-13-bold-13-13-13-17-line: 1.3846; --t-v7-body-13-bold-13-13-13-17-track: 0em; --t-v7-body-13-bold-13-13-13-17-case: none; /* v7/body/13-bold ~ 13-13-13-17 (80 uses) */
  --t-v7-archive-34-34-29-26-family: var(--font-archive); --t-v7-archive-34-34-29-26-weight: 700; --t-v7-archive-34-34-29-26-size: var(--v7-type-34-29-26); --t-v7-archive-34-34-29-26-line: 1.05; --t-v7-archive-34-34-29-26-track: 0em; --t-v7-archive-34-34-29-26-case: none; /* v7/archive/34 ~ 34-29-26 (96 uses) */
  --t-v7-archive-20-20-16-14-family: var(--font-archive); --t-v7-archive-20-20-16-14-weight: 700; --t-v7-archive-20-20-16-14-size: var(--v7-type-20-16-14); --t-v7-archive-20-20-16-14-line: 1.3; --t-v7-archive-20-20-16-14-track: 0em; --t-v7-archive-20-20-16-14-case: none; /* v7/archive/20 ~ 20-16-14 (97 uses) */
  --t-v7-archive-22-22-20-18-family: var(--font-archive); --t-v7-archive-22-22-20-18-weight: 700; --t-v7-archive-22-22-20-18-size: var(--v7-type-22-20-18); --t-v7-archive-22-22-20-18-line: 1.25; --t-v7-archive-22-22-20-18-track: 0em; --t-v7-archive-22-22-20-18-case: none; /* v7/archive/22 ~ 22-20-18 (35 uses) */
  --t-v7-archive-12-family: var(--font-archive); --t-v7-archive-12-weight: 700; --t-v7-archive-12-size: 0.75rem; --t-v7-archive-12-line: 1.1743; --t-v7-archive-12-track: 0.0375rem; --t-v7-archive-12-case: none; /* v7/archive/12 (388 uses) */
  --t-v7-archive-16-regular-family: var(--font-archive); --t-v7-archive-16-regular-weight: 400; --t-v7-archive-16-regular-size: 1rem; --t-v7-archive-16-regular-line: 1.5rem; --t-v7-archive-16-regular-track: 0.04rem; --t-v7-archive-16-regular-case: none; /* v7/archive/16-regular (28 uses) */
  --t-v7-archive-19-family: var(--font-archive); --t-v7-archive-19-weight: 700; --t-v7-archive-19-size: 1.1875rem; --t-v7-archive-19-line: 1.625rem; --t-v7-archive-19-track: 0em; --t-v7-archive-19-case: none; /* v7/archive/19 (28 uses) */
  --t-v7-archive-16-family: var(--font-archive); --t-v7-archive-16-weight: 700; --t-v7-archive-16-size: 1rem; --t-v7-archive-16-line: 1.375rem; --t-v7-archive-16-track: 0em; --t-v7-archive-16-case: none; /* v7/archive/16 (56 uses) */
  --t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-family: var(--font-archive); --t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-weight: 700; --t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-size: var(--v7-type-14-14-14-19); --t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-line: 1.1743; --t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-track: 0.0429em; --t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-case: uppercase; /* v7/archive/14-caps/lhauto-ls0p6 ~ 14-14-14-19 (680 uses) */
  --t-v7-archive-14-caps-ls0p8-family: var(--font-archive); --t-v7-archive-14-caps-ls0p8-weight: 700; --t-v7-archive-14-caps-ls0p8-size: 0.875rem; --t-v7-archive-14-caps-ls0p8-line: 1.1743; --t-v7-archive-14-caps-ls0p8-track: 0.05rem; --t-v7-archive-14-caps-ls0p8-case: uppercase; /* v7/archive/14-caps/ls0p8 (50 uses) */
}

/* global.css - the page ground, the base type and the skip link. Layouts switch only at 768, 1024 and
   1600 px (min-width); every colour comes from a token in tokens.css. */
/* The Chicago star (the badge's six points, Figma v7/star/chicago), painted as a mask over an element's own ink. */
:root { --star-chicago: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'%3E%3Cpolygon points='43.30,0 52.05,34.85 86.60,25 60.80,50 86.60,75 52.05,65.15 43.30,100 34.55,65.15 0,75 25.80,50 0,25 34.55,34.85'/%3E%3C/svg%3E"); }
html { background: var(--ink-field); color: var(--ink-paper); }
/* the bar sticks to the window's top (the header): a focus or a jump lands below its 106 px (the header's own elements
   take this back, so the keyboard's focus entering the stuck bar does not scroll the page) */
* { scroll-margin-block-start: 106px; }
/* A cropped image (a Figma CROP fill): the region --crop-x, --crop-y, --crop-w, --crop-h (fractions of the image)
   fills the frame, which positions it and clips; between 768 and 1,024 px an image with a tablet crop shows
   --crop-t-x, -y, -w and -h instead (the design crops it differently in that layout). A clip made from the
   photograph (a door's loop) carries the photograph's crop and is placed the same way. */
:is(img, video)[data-crop] {
  --cx: var(--crop-x);
  --cy: var(--crop-y);
  --cw: var(--crop-w);
  --ch: var(--crop-h);
  position: absolute;
  inset-block-start: calc(-100% * var(--cy) / var(--ch));
  inset-inline-start: calc(-100% * var(--cx) / var(--cw));
  inline-size: calc(100% / var(--cw));
  block-size: calc(100% / var(--ch));
  max-inline-size: none;
  object-fit: fill;
}
@media (min-width: 768px) {
  :is(img, video)[data-crop-tablet] { --cx: var(--crop-t-x); --cy: var(--crop-t-y); --cw: var(--crop-t-w); --ch: var(--crop-t-h); }
}
@media (min-width: 1024px) {
  :is(img, video)[data-crop-tablet] { --cx: var(--crop-x); --cy: var(--crop-y); --cw: var(--crop-w); --ch: var(--crop-h); }
}
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--ink-field);
  color: var(--ink-paper);
}
a { color: inherit; }
/* the ring is the ground's opposite: yellow on the field; a component on the yellow paper or the paper sets
   --focus-ring to the field's black */
:focus-visible { outline: 2px solid var(--focus-ring, var(--ink-yellow)); outline-offset: 2px; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink-paper);
  color: var(--ink-field);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* Text only screen readers read (a field's label where the design shows none). */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* A link inside running text: underlined, so it reads as a link without its colour. */
.text-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.text-link { transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
.text-link:hover { text-decoration-thickness: 2px; }
/* The content column: the design's margin, and the column stops at 1,680 px with the margins taking the rest. */
.page-width { padding-inline: var(--page-margin); }

/* A row that opens (Figma V7 acc__row: SPECS, v7/product/specs; SHIPPING & RETURNS): a native details, 20 px under
   a rule at a quarter of the paper, its summary 41 px tall with the plus at the right (the minus when open) in
   Rockwell at 14 px. SPECS is set in the display face, SHIPPING & RETURNS in Rockwell, as drawn. */
.accordion { border-block-start: 1px solid color-mix(in srgb, var(--ink-paper) 25%, transparent); margin-block-start: 20px; padding-block-start: 20px; }
.accordion--shipping { margin-block-start: 0; padding-block-start: 27px; }
.accordion__summary { display: flex; align-items: center; justify-content: space-between; block-size: 41px; cursor: pointer; list-style: none; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__label { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.15em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .accordion__summary:hover .accordion__label { text-decoration-color: currentColor; } }
.accordion__summary:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.accordion__label { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 0.95; letter-spacing: 0.04em; }
.accordion__label--archive { font-family: var(--font-archive); font-weight: 400; font-size: 0.875rem; line-height: 1.1743; letter-spacing: 0; }
.accordion__sign::before { content: "+"; font-family: var(--font-archive); font-size: 0.875rem; line-height: 1.1743; }
.accordion[open] .accordion__sign::before { content: "\2212"; }
.accordion__body { display: flex; flex-direction: column; gap: 20px; padding-block: 4px 8px; }
.accordion__line { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; }
/* The opening (1.1.0): a row opens and closes by its height over --motion-unfold, both ways on --ease-in-out, where the
   browser can animate to the content's height (interpolate-size; elsewhere at once, as before); the body stays
   shown until it has closed (content-visibility's discrete transition). Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-unfold) var(--ease-in-out), content-visibility var(--motion-unfold) allow-discrete; }
  .accordion[open]::details-content { block-size: auto; }
}

/* The account popover (Figma V7 header/1440/account-signed-out and -signed-in, release 1.2.1): from 768 px, 320 px
   of field in a 1 px paper keyline, hung 8 px under the bar's foot with its words under ACCOUNT's (js/ss-header.js
   measures ACCOUNT; until it does, the design's place at 1440 with CART's count, 34 px in from the content's edge).
   24 px in, 16 between its parts. Signed out: the head in the display capitals at 22 px (tracked 0.6 px), one line in
   the body face at 15 px on a line of 150 percent, and SIGN IN, the primary button across the popover at the size the
   design draws in it (56 px, the label at 19 px). Signed in: the head, the customer's address in paper-dim at 14 px,
   and three links in the display capitals at 18 px, each under a rule in the field's rule ink. It settles in over
   --motion-panel as the menus do, and appears at once under reduced motion. Never below 768, where ACCOUNT is a link. */
.account-popover {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: calc(var(--page-margin) + 34px);
  z-index: var(--z-menu);
  display: none;
  inline-size: 320px;
  padding: 24px;
  border: 1px solid var(--ink-paper);
  background: var(--ink-field);
  color: var(--ink-paper);
}
@media (min-width: 768px) { .account-popover:not([hidden]) { display: block; } }
.account-popover [hidden] { display: none; }
.account-popover__out, .account-popover__in { display: flex; flex-direction: column; gap: 16px; }
.account-popover__head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2822;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}
.account-popover__line { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; line-height: 1.5; }
/* over the button's own size (the button's stylesheet comes later in the bundle): the popover's own selector carries it */
.account-popover .account-popover__action { inline-size: 100%; block-size: 56px; }
.account-popover .account-popover__action .button__label { font-size: 1.1875rem; }
.account-popover__name { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; line-height: 1.2143; }
.account-popover__links { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.account-popover__links > li { display: flex; flex-direction: column; gap: 16px; }
.account-popover__links > li::before { content: ""; display: block; block-size: 1px; background: var(--ink-rule-field); }
.account-popover__link {
  align-self: flex-start;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2822;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  transition: text-decoration-color var(--motion-hover) var(--ease-in-out);
}
.account-popover__link:hover { text-decoration-color: currentColor; }
.account-popover__link:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .account-popover { transition: opacity var(--motion-panel) var(--ease-out), translate var(--motion-panel) var(--ease-out); }
  @starting-style { .account-popover { opacity: 0; translate: 0 -6px; } }
}

/* The age gate (Figma V7 v7/age-gate, age-gate/1440 and age-gate/390; release 1.2.1): fixed over the whole window
   at the dialog's level, the field's scrim at 85 percent (the page stays visible and unreadable), and the card in the
   middle: the field in a 2 px paper keyline, --v7-agegate-card-w wide (the full column on a phone, 544 at 768, 600 from
   1,024), 48 px in at the top and 40 elsewhere, its parts centred 24 px apart. The badge in white (132 by 88); ADULTS
   ONLY in the display capitals at the v7/type/84-66-55 size, tracked 1.5 px; the line in the body face at 18 on 27;
   the two choices side by side where each has 220 px and one above the other where not; the remembering line in
   paper-dim at 13 px. The card settles in over --motion-panel (the menus' rise) and leaves on the same curve reversed;
   under reduced motion it neither moves nor fades. */
.age-gate { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: var(--gutter); overflow-y: auto; }
.age-gate[hidden] { display: none; }
.age-gate__scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink-field) 85%, transparent); }
.age-gate__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  inline-size: var(--v7-agegate-card-w);
  max-inline-size: 100%;
  padding: 48px 40px 40px;
  border: 2px solid var(--ink-paper);
  background: var(--ink-field);
  color: var(--ink-paper);
  text-align: center;
}
.age-gate__badge { display: block; inline-size: 132px; block-size: auto; }
.age-gate__head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--v7-type-84-66-55);
  line-height: 1.2822;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
}
.age-gate__line { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 1.125rem; line-height: 1.5; }
/* the words take the card's width, centred, as the design's boxes do; the badge keeps its own, centred */
.age-gate__head, .age-gate__line, .age-gate__remember { align-self: stretch; }
.age-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; align-self: stretch; }
.age-gate__actions > .button { flex: 1 1 220px; inline-size: auto; }
.age-gate__remember { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; line-height: 1.2143; }
@media (prefers-reduced-motion: no-preference) {
  /* the gate stays drawn while its parts leave (display waits for them: allow-discrete) */
  .age-gate { transition: display var(--motion-panel) allow-discrete; }
  .age-gate__scrim { transition: opacity var(--motion-panel) var(--ease-out); }
  .age-gate__card { transition: opacity var(--motion-panel) var(--ease-out), translate var(--motion-panel) var(--ease-out); }
  .age-gate[hidden] .age-gate__scrim { opacity: 0; transition-timing-function: var(--ease-in); }
  .age-gate[hidden] .age-gate__card { opacity: 0; translate: 0 12px; transition-timing-function: var(--ease-in); }
  @starting-style {
    .age-gate__scrim { opacity: 0; }
    .age-gate__card { opacity: 0; translate: 0 12px; }
  }
}

/* The announcement bar (Figma V7 v7/chrome/marquee): 32 px of the yellow paper on every page. The line (the
   display/15 style, field ink) runs right to left in a window that stops at the bar's icon square; each copy is
   12 px in from its edges, its items and stars 24 px apart, each star the Chicago star 8 px wide on the copy's first
   pixel row plus one. The square at the right end is the page's motion control (the motion-control component,
   1.2.0): 32 px, a 2 px field rule on its left, the pause bars or the play triangle 9 by 12 in the field ink.
   The loop moves the track by one copy of five (20 percent) per --marquee-duration. */
.announcement {
  --marquee-duration: 40s;
  block-size: 32px;
  /* the paper, tiled at its own size (512 px; a copy at twice the size for dense screens), never stretched */
  background: var(--ink-yellow) image-set(url("/images/marquee-yellow-paper/marquee-yellow-paper.webp") 1x, url("/images/marquee-yellow-paper/marquee-yellow-paper-2x.webp") 2x) 0 0 / 512px repeat;
  color: var(--ink-field);
}
.announcement__marquee { display: flex; block-size: 100%; }
.announcement__window { position: relative; flex: 1 1 auto; min-inline-size: 0; overflow: hidden; }
.announcement__track { display: flex; inline-size: max-content; padding-block-start: 9px; }
.announcement__marquee[data-playing] .announcement__track { animation: announcement-run var(--marquee-duration) linear infinite; }
.announcement__marquee[data-paused] .announcement__track { animation-play-state: paused; }
@keyframes announcement-run { to { transform: translateX(-20%); } }
.announcement__copy {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding-inline: 12px;
  white-space: nowrap;
}
.announcement__item {
  font-family: var(--t-display-15-lh15-ls0p6-family);
  font-weight: var(--t-display-15-lh15-ls0p6-weight);
  font-size: var(--t-display-15-lh15-ls0p6-size);
  line-height: var(--t-display-15-lh15-ls0p6-line);
  letter-spacing: var(--t-display-15-lh15-ls0p6-track);
  text-transform: var(--t-display-15-lh15-ls0p6-case);
}
.announcement__star {
  flex: none;
  inline-size: 8px;
  block-size: 12px;
  margin-block-start: 1px;
  background: currentColor;
  -webkit-mask: var(--star-chicago) top / 8px 9.24px no-repeat;
  mask: var(--star-chicago) top / 8px 9.24px no-repeat;
}
.announcement__control {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0 0 0 2px;
  border: 0;
  border-inline-start: 2px solid var(--ink-field);
  background: transparent;
  color: var(--ink-field);
  cursor: pointer;
  transition: background-color var(--motion-hover) var(--ease-in-out);
}
.announcement__control:hover { background: color-mix(in srgb, var(--ink-field) 12%, transparent); }
/* the house's yellow ring would vanish on the yellow bar: the control takes a field ring inside its square */
.announcement__control:focus-visible { outline: 2px solid var(--ink-field); outline-offset: -5px; }
.announcement__glyph { grid-area: 1 / 1; inline-size: 9px; block-size: 12px; }
.announcement__glyph--pause { background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); }
.announcement__glyph--play { margin-inline-start: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* forced colours (a contrast theme) drop a ground drawn as a gradient and repaint one drawn in the text's colour as
   the page's: the glyphs keep their own drawing there, in the theme's text colour (a glyph left to inherit would keep
   the field ink, black on the theme's ground; the square's ground is the bar's, the theme's Canvas) */
@media (forced-colors: active) {
  .announcement__glyph { forced-color-adjust: none; color: CanvasText; }
}

/* The promo badge (Figma V7 v7/badge/promo): Futura PT Cond Bold 18, tracked 4 percent, in capitals, on a tag
   with a two pixel rule and a hard drop shadow; Sold out is the small paper label. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 2px solid var(--ink-field);
  background: var(--ink-yellow);
  color: var(--ink-field);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--ink-field) 55%, transparent);
  transform: rotate(-6deg); /* Figma's -6: the tag rises to the right (checked against the design's category export) */
}
.badge__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge[data-kind="new"] { background: var(--ink-field); border-color: var(--ink-yellow); color: var(--ink-yellow); }
.badge[data-kind="favorite"] { background: var(--ink-red-ink); color: var(--ink-field); }
.badge[data-kind="sold-out"] { padding: 0.3125rem 0.5625rem; border: 0; background: var(--ink-paper); box-shadow: none; transform: none; }
.badge[data-kind="sold-out"] .badge__label { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }

/* The big rig (Figma V7 v7/social/big-rig): the 18-wheeler, --v7-social-rig-w by -h (260 by 87, 420 by 140, 540 by
   180), 120 px from the band's left edge and --v7-social-rig-top down, its wheels on the roadside's near lane; one of
   its five views shows at a time (data-angle), a generated placeholder until the illustrator draws it. ss-big-rig
   moves it with the reader's scroll (--big-rig-x). */
.big-rig {
  position: absolute;
  inset-block-start: var(--v7-social-rig-top);
  inset-inline-start: 120px;
  display: block;
  inline-size: var(--v7-social-rig-w);
  block-size: var(--v7-social-rig-h);
  transform: translateX(var(--big-rig-x, 0px));
  pointer-events: none;
}
.big-rig__sprite { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; visibility: hidden; }
.big-rig[data-angle="left"] .big-rig__sprite[data-view="left"],
.big-rig[data-angle="left-center"] .big-rig__sprite[data-view="left-center"],
.big-rig[data-angle="center"] .big-rig__sprite[data-view="center"],
.big-rig[data-angle="right-center"] .big-rig__sprite[data-view="right-center"],
.big-rig[data-angle="right"] .big-rig__sprite[data-view="right"] { visibility: visible; }

/* ALSO ON THE SHELF (Figma V7 brands__also): the makers the shelf also carries without a page of their own, under the
   brand wall, 48 px below it over the field's rule: the head 32 px under the rule in the display face at 20 px, then
   the names in the display face at 24 px in the dim paper, 28 px apart, wrapping 10 px apart. */
.brand-also { display: flex; flex-direction: column; gap: 16px; margin-block-start: 24px; padding-block-start: 32px; border-block-start: 1px solid var(--ink-rule-field); }
.brand-also__head { align-self: flex-start; margin: 0; color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
/* the makers' marks (since 1.1.0): each 160 x 81, white on the field like the five, 20 px apart and 16 between
   rows, wrapping (one row at 1,440, two to a row at 390) */
.brand-also__list { display: flex; flex-wrap: wrap; gap: 16px 20px; margin: 0; padding: 0; list-style: none; }
.brand-also__mark { flex: none; inline-size: 160px; block-size: 81px; }
.brand-also__logo { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The brand card (Figma V7 v7/card/brand): the product card's instant print for a vendor. Paper, a 14 px pad, the hard
   shadow 10 by 12 px at 55 percent; the square window on the field with the vendor's mark 19 px in from its sides at
   the mark's own proportion (230 by 117 at 1440); the vendor's name in the display capitals; the count in Rockwell
   under it. The name is the link and stretches over the whole card, so the whole print is one target. */
.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: 100%;
  padding: 0.875rem;
  background: var(--ink-paper);
  color: var(--ink-field);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--ink-field) 55%, transparent);
  overflow: hidden;
}
.brand-card__top { display: flex; flex-direction: column; gap: 0.875rem; padding-block-end: 16px; }
.brand-card__window { display: grid; place-items: center; aspect-ratio: 1; padding-inline: 19px; background: var(--ink-field); overflow: hidden; }
.brand-card__mark { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 230 / 117; object-fit: cover; }
.brand-card__name {
  margin: 0;
  font-family: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-family);
  font-weight: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-weight);
  font-size: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-size);
  line-height: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-line);
  letter-spacing: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-track);
  text-transform: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-case);
}
.brand-card__link { color: inherit; text-decoration: none; }
/* the whole print is the target: the link's box stretches over the card */
.brand-card__link::after { content: ""; position: absolute; inset: 0; }
.brand-card__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.brand-card__link:hover { text-decoration-color: currentColor; }
/* the ring shows for keyboard focus only */
.brand-card:has(.brand-card__link:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 3px; }
.brand-card__link:focus-visible { outline: none; }
.brand-card__meta { display: flex; flex-direction: column; gap: 0.625rem; }
.brand-card__count {
  margin: 0;
  font-family: var(--t-v7-archive-12-family);
  font-weight: var(--t-v7-archive-12-weight);
  font-size: var(--t-v7-archive-12-size);
  line-height: var(--t-v7-archive-12-line);
  letter-spacing: var(--t-v7-archive-12-track);
}
/* the lift, as the product card's: the mark grows to 103 percent inside its window where a mouse hovers */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand-card__mark { transition: scale 350ms var(--ease-out); }
  .brand-card:hover .brand-card__mark { scale: 1.03; }
}

/* The brands band (Figma V7 brands): on the field, the head centred between its stars over the red rule; the strip
   of marks, the window --v7-brands-window-h tall across the whole width, each mark --v7-brands-mark-w by
   --v7-brands-mark-h and --v7-brands-marks-gap apart, faded into the field over --v7-brands-fade-left and -right;
   the pause control 24 px in from the right, over the fade; SEE ALL BRANDS --v7-brands-cta-top under the strip.
   The strip moves one copy of the marks per --brands-duration (about 50 px a second at 1440). */
.brands {
  --brands-duration: 63s;
  --brands-copy: calc(12 * (var(--v7-brands-mark-w) + var(--v7-brands-marks-gap)));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--v7-brands-pt) var(--v7-brands-pb);
  overflow: hidden;
  background: var(--ink-field);
  color: var(--ink-paper);
}
.brands__head { align-self: stretch; display: flex; justify-content: center; }
.brands__window { position: relative; display: block; align-self: stretch; block-size: var(--v7-brands-window-h); }
.brands__viewport { position: absolute; inset: 0; overflow: hidden; }
/* the strip rests where the design draws it: its row starts 102 px left of the window's edge, then its padding */
.brands__track { display: flex; inline-size: max-content; margin-inline-start: -102px; padding-inline-start: var(--v7-brands-marks-pl); }
.brands__window[data-playing] .brands__track { animation: brands-run var(--brands-duration) linear infinite; }
.brands__window[data-paused] .brands__track { animation-play-state: paused; }
@keyframes brands-run { to { transform: translateX(calc(-1 * var(--brands-copy))); } }
.brands__marks { display: flex; gap: var(--v7-brands-marks-gap); margin: 0; padding: var(--v7-brands-marks-pt) var(--v7-brands-marks-gap) 0 0; list-style: none; }
.brands__mark { display: grid; place-items: center; flex: none; inline-size: var(--v7-brands-mark-w); block-size: var(--v7-brands-mark-h); overflow: hidden; }
.brands__logo { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.brands__name {
  font-family: var(--t-v7-display-30-30-26-22-family);
  font-weight: var(--t-v7-display-30-30-26-22-weight);
  font-size: var(--t-v7-display-30-30-26-22-size);
  line-height: var(--t-v7-display-30-30-26-22-line);
  letter-spacing: var(--t-v7-display-30-30-26-22-track);
  text-align: center;
  white-space: nowrap;
}
.brands__fade { position: absolute; inset-block: 0; pointer-events: none; }
.brands__fade--left { inset-inline-start: 0; inline-size: var(--v7-brands-fade-left); background: linear-gradient(to right, var(--ink-field), transparent); }
.brands__fade--right { inset-inline-end: 0; inline-size: var(--v7-brands-fade-right); background: linear-gradient(to left, var(--ink-field), transparent); }
.brands__cta { display: flex; justify-content: center; align-self: stretch; padding-block-start: var(--v7-brands-cta-top); }

/* A burst (Figma V7 v7/burst): a star turned off square (twelve points at seven tenths for the sale, turned 16
   degrees; sixteen at eight tenths for the new, turned 7 the other way), in yellow or red with the paper grain
   multiplied in at 28 percent, a 3 px cream rule inside its edge and a soft shadow; its words over it in the display
   face, black on the yellow, yellow on the deeper red (#BC0100, the red's darker variation, so the small words meet AA: 5.6 to 1).
   Each declares its star's ink as the ground its words stand on (--text-ground), for the contrast check. Its box is --v7-sales-sale-size or --v7-sales-new-size, the star
   drawn turned inside it; the words placed as drawn, in proportion to the box. */
.burst { position: relative; display: block; inline-size: var(--v7-sales-sale-size); block-size: var(--v7-sales-sale-size); pointer-events: none; }
.burst { --text-ground: var(--ink-yellow); }
.burst[data-kind="new"] { --text-ground: var(--ink-red-deep); inline-size: var(--v7-sales-new-size); block-size: var(--v7-sales-new-size); }
/* the shadow: Figma's drop shadow (2, 5, blur 9, black at 34 percent) matched by pixels at 2x: a CSS blur of 4 px is
   the closest (the largest difference in alpha 4 of 255 on both bursts; 4.5 px gave 7) */
.burst__star { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; filter: drop-shadow(2px 5px 4px color-mix(in srgb, var(--ink-field) 34%, transparent)); }
.burst__fill { fill: var(--ink-yellow); }
.burst[data-kind="new"] .burst__fill { fill: var(--ink-red-deep); }
.burst__grain { opacity: 0.28; mix-blend-mode: multiply; }
.burst__rule { fill: none; stroke: var(--ink-burst); stroke-width: 6px; vector-effect: non-scaling-stroke; }
.burst__words { position: absolute; inset: 0; margin: 0; color: var(--ink-field); }
.burst[data-kind="new"] .burst__words { color: var(--ink-yellow); }
.burst__word { position: absolute; display: block; text-align: center; white-space: nowrap; }
.burst__word--lead, .burst__word--qualifier {
  font-family: var(--t-v7-display-15-lhauto-ls0-15-15-10-family);
  font-weight: var(--t-v7-display-15-lhauto-ls0-15-15-10-weight);
  font-size: var(--t-v7-display-15-lhauto-ls0-15-15-10-size);
  line-height: var(--t-v7-display-15-lhauto-ls0-15-15-10-line);
}
.burst__word--claim {
  font-family: var(--t-v7-display-34-34-29-22-family);
  font-weight: var(--t-v7-display-34-34-29-22-weight);
  font-size: var(--t-v7-display-34-34-29-22-size);
  line-height: var(--t-v7-display-34-34-29-22-line);
}
/* the words' places, as drawn in the 215 px sale burst and the 194 px new one. The sale's words are turned 5.02
   degrees clockwise as Figma draws them (its -5.02): the block turns about the burst's centre, and each line is placed
   where it stands before the turn, so after it the line's centre is Figma's. 40% OFF is placed by its own centre on
   the star's (Figma 107.49, 107.50 of 215; the star's 107.50, 107.50), so it stays there at every width, where its
   size and the burst's step at different widths (at 768 the burst is 215 and the claim 29) */
.burst[data-kind="sale"] .burst__words { rotate: 5.02deg; }
.burst[data-kind="sale"] .burst__word--lead { inset-inline-start: 18.17%; inset-block-start: 33.84%; inline-size: 59.81%; }
.burst[data-kind="sale"] .burst__word--claim { inset-inline-start: 50%; inset-block-start: 50%; inline-size: 63.05%; translate: -50% -50%; }
.burst[data-kind="sale"] .burst__word--qualifier { inset-inline-start: 20.24%; inset-block-start: 57.43%; inline-size: 59.81%; }
.burst[data-kind="new"] .burst__word--claim { inset-inline-start: 15.01%; inset-block-start: 31.97%; inline-size: 69.99%; }
.burst[data-kind="new"] .burst__word--qualifier { inset-inline-start: 16.8%; inset-block-start: 53.09%; inline-size: 66.4%; }

/* The button (Figma V7 v7/button). Primary: the red; secondary: the field. The label is the display type at
   the v7/display/24 token, tracked 3.33 percent, in paper. States the design does not draw are built from
   the system: hover deepens the ink, pressed sits one pixel down, focus takes the yellow ring, disabled
   reads as unavailable without changing its shape. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: min(var(--v7-button-w), 100%);
  block-size: var(--v7-button-h);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: 0;
  background: var(--ink-red-ink);
  color: var(--ink-paper);
  text-decoration: none;
  cursor: pointer;
}
.button--secondary { background: var(--ink-field); }
.button__label {
  font-family: var(--t-v7-display-24-24-22-19-family);
  font-weight: var(--t-v7-display-24-24-22-19-weight);
  font-size: var(--t-v7-display-24-24-22-19-size);
  line-height: var(--t-v7-display-24-24-22-19-line);
  letter-spacing: var(--t-v7-display-24-24-22-19-track);
  text-transform: var(--t-v7-display-24-24-22-19-case);
  white-space: nowrap;
}
.button { transition: background-color var(--motion-hover) var(--ease-in-out); }
.button:hover { background: var(--ink-red-deep); }
.button--secondary:hover { background: var(--ink-field-dim); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--focus-ring, var(--ink-yellow)); outline-offset: 2px; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* The buy column (Figma V7 buy and v7/product/buy-lower): the breadcrumb and the vendor in the body face at 14/21
   in dim paper, the title in Futura PT Demi (--v7-type-36-31-27 at 105 percent), the price in the numeral face
   (--v7-type-24-22-19 at 150 percent); the rating row 25 px down (five Chicago stars 20 by 23 and 7 apart, the
   figure in the display face, the count at the right); a rule at a quarter of the paper; COLOR and its swatches
   (--v7-product-swatch square, 12 apart, the chosen one ringed 2 px in red outside); the option (SIZE, or the
   product's own, with SIZE GUIDE at the right) and its values, 56 px tall, 12 apart, filling the row, a 1 px paper
   rule inside (one out of stock at 40 percent, its label struck); the quantity (--v7-product-qty-w by 56, minus and
   plus 44 px) beside ADD TO CART on the red; FIND IN STORE under a 1 px rule; the pickup line and the fit note in
   faint paper. Sold out (data-stock="out"): every value at 35 percent, the fit note under them, the quantity at 35
   percent, OUT OF STOCK on the rule's grey in faint paper, and TELL ME WHEN IT LANDS. */
.buy-box { display: block; padding-block-end: 31px; }
.buy-box__form { display: flex; flex-direction: column; margin: 0; }
.buy-box__head { display: flex; flex-direction: column; gap: 8px; }
.buy-box__crumbs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.3125rem; }
/* each crumb a row of its separator and its link: whitespace a formatter puts between them draws nothing */
.buy-box__crumbs li { display: flex; }
.buy-box__crumbs li + li::before { content: "\203A"; padding-inline: 0.25em; }
.buy-box__crumb-link { color: inherit; text-decoration: none; }
.buy-box__crumb-link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: auto; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.buy-box__crumb-link:hover { text-decoration-color: currentColor; }
.buy-box__title { margin: 0; color: var(--ink-paper); font-family: var(--font-product); font-weight: 600; font-size: var(--v7-type-36-31-27); line-height: 1.05; }
.buy-box__vendor:hover, .buy-box__guide:hover { text-decoration-thickness: 2px; }
.buy-box__vendor { align-self: flex-start; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.3125rem; text-underline-offset: 0.15em; transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
.buy-box__price { margin: 0; color: var(--ink-paper); font-family: var(--font-numeral); font-weight: var(--t-numeral-13-medium-weight); font-size: var(--v7-type-24-22-19); line-height: 1.5; }
.buy-box__rating { display: flex; align-items: center; gap: 16px; padding-block-start: 25px; }
.buy-box__rating-stars { display: flex; gap: 7px; }
.buy-box__rating-star { display: block; inline-size: 20px; block-size: 23.09px; fill: var(--ink-red-ink); }
.buy-box__rating-value { font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-20-18-16); line-height: 1.5; }
.buy-box__rating-count { flex: 1 1 auto; color: var(--ink-paper-dim); text-align: end; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; text-decoration: none; }
.buy-box__rating-count { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: auto; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.buy-box__rating-count:hover { text-decoration-color: currentColor; }
.buy-box__rule { block-size: 1px; margin: 15px 0 0; border: 0; background: color-mix(in srgb, var(--ink-paper) 25%, transparent); }
.buy-box__option { min-inline-size: 0; margin: 0; padding: 23px 0 0; border: 0; }
.buy-box__label { float: left; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2857; }
/* a legend that does not float is drawn on its fieldset's top edge, over the padding: floated across the width, it
   takes its place 23 px down as drawn, and the swatches clear it */
.buy-box__option--color .buy-box__label { float: left; inline-size: 100%; margin-block-end: 4px; }
.buy-box__option--color .buy-box__swatches { clear: both; }
/* the chosen colour's name, 8 px after COLOR on its baseline, in the body face (buy__color-head) */
.buy-box__color-name { margin-inline-start: 8px; font-family: var(--font-body); font-weight: 400; }
.buy-box__swatches { display: flex; flex-wrap: wrap; gap: 12px; inline-size: fit-content; max-inline-size: 100%; }
/* the 1 px edge the design gives the cards' and the filters' swatches, so a black swatch shows on the black ground
   (WCAG 1.4.11) */
.buy-box__swatch { position: relative; display: block; inline-size: var(--v7-product-swatch); block-size: var(--v7-product-swatch); background: var(--swatch); box-shadow: inset 0 0 0 1px var(--ink-paper-dim); cursor: pointer; }
/* the chosen colour's 2 px red ring is a shadow round the swatch, fading over --motion-hover both ways; the focus
   ring is the outline, at once both ways, and stands alone while it shows */
.buy-box__swatch { box-shadow: inset 0 0 0 1px var(--ink-paper-dim), 0 0 0 2px transparent; transition: box-shadow var(--motion-hover) var(--ease-in-out); }
.buy-box__swatch:has(:checked) { box-shadow: inset 0 0 0 1px var(--ink-paper-dim), 0 0 0 2px var(--ink-red-ink); }
.buy-box__swatch:has(:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--ink-paper-dim), 0 0 0 2px transparent; }
.buy-box__option--size { padding-block-start: var(--v7-product-size-pt); }
/* SIZE and SIZE GUIDE share a row: the legend floats left and the guide right, 4 px above the values */
.buy-box__option--size .buy-box__label { margin-block-end: 4px; }
.buy-box__option--size .buy-box__values { clear: both; }
.buy-box__guide { float: right; margin-block-end: 4px; color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2857; text-underline-offset: 0.15em; transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
/* the values share the row; a value whose name is long keeps it on one line and the row wraps (a vendor's own
   names, such as NUB (X-SMALL)); the drawn harness's two share it equally, as drawn */
.buy-box__values { display: flex; flex-wrap: wrap; gap: 12px; }
.buy-box__value {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-inline-size: max-content;
  block-size: 56px;
  padding-inline: 12px;
  box-shadow: inset 0 0 0 1px var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
}
.buy-box__value { transition: box-shadow var(--motion-hover) var(--ease-in-out); }
.buy-box__value:has(:checked) { box-shadow: inset 0 0 0 2px var(--ink-paper); }
.buy-box__value:has(:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.buy-box__value:not([data-available]) { opacity: 0.4; cursor: not-allowed; }
.buy-box__value:not([data-available]) .buy-box__value-label { text-decoration: line-through; }
/* QUANTITY over the stepper, 4 px above the row (buy__qty-group); sold out, the row stands alone as drawn */
.buy-box__qty-label { display: block; float: none; inline-size: fit-content; margin-block-start: 33px; text-transform: uppercase; }
.buy-box__actions { display: flex; align-items: center; gap: 12px; margin-block-start: 4px; }
.buy-box[data-stock="out"] .buy-box__qty-label { display: none; }
.buy-box__qty { display: flex; flex: none; inline-size: var(--v7-product-qty-w); block-size: 56px; box-shadow: inset 0 0 0 1px var(--ink-paper); }
.buy-box__qty button { transition: background-color var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .buy-box__qty button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink-paper) 12%, transparent); } }
.buy-box__qty button { flex: none; inline-size: 44px; padding: 0; border: 0; background: none; color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; cursor: pointer; }
.buy-box__qty-value {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  appearance: textfield;
}
.buy-box__qty-value::-webkit-inner-spin-button, .buy-box__qty-value::-webkit-outer-spin-button { appearance: none; margin: 0; }
.buy-box__qty :focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; }
.buy-box__atc {
  flex: 1 1 0;
  block-size: 56px;
  padding: 0;
  border: 0;
  background: var(--ink-red-ink);
  color: var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.buy-box__atc { transition: background-color var(--motion-hover) var(--ease-in-out); }
.buy-box__atc:hover { background: var(--ink-red-deep); }
.buy-box__atc:focus-visible, .buy-box__secondary:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.buy-box__secondary {
  block-size: 56px;
  margin-block-start: 12px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--ink-paper);
  color: var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  cursor: pointer;
}
.buy-box__secondary { transition: background-color var(--motion-hover) var(--ease-in-out); }
.buy-box__secondary:hover { background: color-mix(in srgb, var(--ink-paper) 12%, transparent); }
.buy-box__pickup, .buy-box__fit { margin: 0; color: var(--ink-paper-faint); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.45; }
.buy-box__pickup { margin-block-start: 12px; }
.buy-box__pickup-place { font-weight: 500; }
.buy-box__fit { padding-block-start: 25px; text-align: end; }
/* sold out: nothing to choose, the fit note under the values, the actions greyed */
.buy-box[data-stock="out"] .buy-box__value { opacity: 0.35; }
.buy-box[data-stock="out"] .buy-box__fit { padding-block-start: 14px; }
.buy-box[data-stock="out"] .buy-box__actions { margin-block-start: 13px; }
.buy-box[data-stock="out"] .buy-box__qty { opacity: 0.35; }
.buy-box__atc--out { background: var(--ink-rule-field); color: var(--ink-paper-faint); cursor: not-allowed; }
.buy-box__atc--out:hover { background: var(--ink-rule-field); }
/* The gift card's switch (Figma V7 v7/product/buy-lower, gift card=true): 24 px under AMOUNT, "I want to send this as
   a gift" (the filters' checkbox), and under it, when ticked, the recipient's email, name, message and the day to send
   it, each a labelled field across the column, 16 px apart. */
.buy-box__gift { display: flex; flex-direction: column; gap: 16px; padding-block-start: 24px; }
.buy-box__gift-toggle { align-self: flex-start; color: var(--ink-paper); }
.buy-box__gift-fields { display: flex; flex-direction: column; gap: 16px; }

/* ADDED TO YOUR CART (Figma V7 v7/cart/added): a panel 480 px wide at the window's right, as tall as the window, in a
   2 px paper rule, over the page dimmed to half. Its contents start 22 px down and 26 px in: the title and CLOSE, the
   line just added, the subtotal, the tax line, CHECK OUT and VIEW CART across it, 16 px apart. Inside it the line's
   name and the buttons take the phone's sizes, as the design sets them in the panel. On the phone it is the window's
   width. */
.cart-added {
  /* the type tokens resolve at the root, so the panel sets the resolved sizes, not their sources */
  --t-v7-display-26-caps-lhauto-ls0p4-26-23-21-size: 1.3125rem;
  --t-v7-display-24-24-22-19-size: 1.1875rem;
  --v7-button-h: 3.5rem;
  --v7-product-qty-w: 7.5rem;
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: min(480px, 100%);
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 22px 26px 26px;
  overflow: auto;
  border: 0;
  background: var(--ink-field);
  box-shadow: inset 0 0 0 2px var(--ink-paper);
  color: var(--ink-paper);
  flex-direction: column;
  gap: 16px;
}
.cart-added[open] { display: flex; }
.cart-added::backdrop { background: color-mix(in srgb, var(--ink-field) 50%, transparent); }
.cart-added__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 44px; }
.cart-added__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: 0.04em; }
.cart-added__close {
  display: grid;
  place-items: center end;
  min-inline-size: 60px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  font-family: var(--t-display-15-lh15-ls0p6-family);
  font-weight: var(--t-display-15-lh15-ls0p6-weight);
  font-size: var(--t-display-15-lh15-ls0p6-size);
  line-height: var(--t-display-15-lh15-ls0p6-line);
  letter-spacing: var(--t-display-15-lh15-ls0p6-track);
  cursor: pointer;
}
.cart-added__close { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 3px; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.cart-added__close:hover { text-decoration-color: currentColor; }
.cart-added__close:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.cart-added__lines { margin: 0; padding: 0; list-style: none; }
.cart-added__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding-block-start: 8px; }
.cart-added__subtotal-label { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
.cart-added__subtotal-value { font-family: var(--font-numeral); font-weight: var(--t-numeral-13-medium-weight); font-size: 1.25rem; line-height: 1.2; }
.cart-added__note { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.4; }
.cart-added > .button { inline-size: 100%; }
/* The slide (1.1.0): the panel comes in from the window's right edge over --motion-slide-in on --ease-slide-in and goes
   back over --motion-slide-out on --ease-slide-out, the page's dimming fading with it, shown and kept in the top layer
   until it has gone (overlay's discrete transition; its layout stays a column meanwhile). Nothing moves under reduced
   motion. */
@media (prefers-reduced-motion: no-preference) {
  .cart-added { translate: 100% 0; transition: translate var(--motion-slide-out) var(--ease-slide-out), overlay var(--motion-slide-out) allow-discrete, display var(--motion-slide-out) allow-discrete; }
  .cart-added[open] { translate: 0 0; transition-duration: var(--motion-slide-in); transition-timing-function: var(--ease-slide-in); }
  @starting-style { .cart-added[open] { translate: 100% 0; } }
  .cart-added::backdrop { background-color: transparent; transition: background-color var(--motion-slide-out) var(--ease-slide-out), overlay var(--motion-slide-out) allow-discrete, display var(--motion-slide-out) allow-discrete; }
  .cart-added[open]::backdrop { background-color: color-mix(in srgb, var(--ink-field) 50%, transparent); transition-duration: var(--motion-slide-in); transition-timing-function: var(--ease-slide-in); }
  @starting-style { .cart-added[open]::backdrop { background-color: transparent; } }
  /* closing, it takes no presses while it goes */
  .cart-added:not([open]), .cart-added:not([open])::backdrop { pointer-events: none; }
}

/* A line of the cart (Figma V7 v7/cart/line): over the field's rule, 24 px above and below, the photograph 120 px
   square, and 24 px from it the name in the display capitals, the vendor in Rockwell and the options in the body face,
   both in the dim paper, then the quantity and Remove, 20 px apart; the line's price at the right in the numeral face. */
.cart-line { display: flex; align-items: flex-start; gap: 24px; padding-block: 24px; border-block-start: 1px solid var(--ink-rule-field); }
/* the photograph as an instant print (1.2.0, the design's v7/cart/line since V7 pin 10b): the product card's paper as a
   6 px border inside the 120 px square, and the card's hard shadow scaled to it (10 by 12 px at the card's 290 px,
   4 by 5 here); the photograph is cut to the 108 px window, and its hover stays inside the paper */
.cart-line__image-link { flex: none; display: block; inline-size: 120px; block-size: 120px; overflow: hidden; border: 6px solid var(--ink-paper); background: var(--ink-paper); box-shadow: 4px 5px 0 color-mix(in srgb, var(--ink-field) 55%, transparent); }
.cart-line__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cart-line__image { transition: scale 350ms var(--ease-out); }
  .cart-line__image-link:hover .cart-line__image { scale: 1.03; }
}
.cart-line__info { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-inline-size: 0; }
.cart-line__name {
  margin: 0;
  font-family: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-family);
  font-weight: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-weight);
  font-size: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-size);
  line-height: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-line);
  letter-spacing: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-track);
  text-transform: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-case);
}
.cart-line__link { color: inherit; text-decoration: none; }
.cart-line__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.cart-line__link:hover { text-decoration-color: currentColor; }
.cart-line__link:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.cart-line__vendor {
  margin: 0;
  color: var(--ink-paper-dim);
  font-family: var(--t-v7-archive-12-family);
  font-weight: var(--t-v7-archive-12-weight);
  font-size: var(--t-v7-archive-12-size);
  line-height: var(--t-v7-archive-12-line);
  letter-spacing: var(--t-v7-archive-12-track);
}
.cart-line__options { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.2; }
.cart-line__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-block-start: 8px; }
.cart-line__remove { min-block-size: 24px; padding: 0; border: 0; background: none; color: var(--ink-paper); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.2; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.cart-line__remove { transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
.cart-line__remove:hover { text-decoration-thickness: 2px; }
.cart-line__remove:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.cart-line__price { flex: none; margin: 0; font-family: var(--font-numeral); font-weight: var(--t-numeral-13-medium-weight); font-size: 1rem; line-height: 1.2; }

/* The cart's big rig (Figma V7 cart__rig): a band of the field 260 px tall under the cart, carrying the social band's
   roadside (the roadside component: its four layers drift with the scroll, the station's sign) and the big rig on its
   near lane, 120 px in, driving with the scroll as the social band's does (the big-rig component: its stylesheet and
   ss-big-rig.js); the band clips them. */
.cart-rig { position: relative; block-size: 260px; overflow: hidden; background: var(--ink-field); }

/* The cart (Figma V7 cart__body, cart/1440 and cart/1440/empty): on the field under the head, the lines and, 56 px
   beside them, the summary 424 px wide in a paper rule (32 px in): the subtotal, the tax line in the dim paper, the
   discretion line, and CHECK OUT across it; below 800 px of content the summary goes under the lines, as wide as the
   column allows. Empty, one line in the display face over SHOP THE SHELF, 24 px apart. */
.cart { background: var(--ink-field); color: var(--ink-paper); }
.cart__inner { display: block; padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.cart__filled { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; }
.cart__lines { flex: 1 1 320px; min-inline-size: min(320px, 100%); margin: 0; padding: 0; list-style: none; }
.cart__summary { display: flex; flex: none; flex-direction: column; gap: 16px; inline-size: min(424px, 100%); padding: 32px; border: 1px solid var(--ink-paper); }
.cart__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; }
.cart__subtotal-label { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
.cart__subtotal-value { font-family: var(--font-numeral); font-weight: var(--t-numeral-13-medium-weight); font-size: 1.25rem; line-height: 1.2; }
.cart__note, .cart__discretion { margin: 0; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.4; }
.cart__note { color: var(--ink-paper-dim); }
.cart__summary > .button { inline-size: 100%; }
.cart__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cart__empty-head { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }

/* The category's head (Figma V7 category-head): the leather texture (texture/leather, a smooth black hide) filling the
   band behind the breadcrumb, the title in the display face with the count at its right (on the phone the count goes
   under the line), and the category's line in the body face, 640 px wide at most. */
.category-head { position: relative; overflow: hidden; background: var(--ink-field); color: var(--ink-paper); }
.category-head__ground { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* the cart's band has its own leather (1.2.0, V7 pin 10d): a black bull hide as a tile that repeats without a seam,
   800 by 320, in place of the category leather's photograph. As the yellow paper's grit: a phone takes the tile alone at
   any density, a screen of two device pixels to the CSS pixel from 768 px the tile at twice the size, every other screen
   the tile. The band is never taller than the tile, so its vertical repeat does not show */
.category-head[data-ground="cart-leather"] { background: var(--ink-field) url("/images/cart-leather/cart-leather.webp") 0 0 / 800px 320px repeat; }
@media (min-width: 768px) {
  .category-head[data-ground="cart-leather"] { background-image: image-set(url("/images/cart-leather/cart-leather.webp") 1x, url("/images/cart-leather-2x/cart-leather-2x.webp") 2x); }
}
/* the AVIF only where the browser reads type() in image-set(), as the drawer's ground: in a browser without it the
   declaration is dropped and the WebP above stands */
@supports (background-image: image-set(url("/images/cart-leather/cart-leather.avif") type("image/avif"))) {
  .category-head[data-ground="cart-leather"] { background-image: image-set(url("/images/cart-leather/cart-leather.avif") type("image/avif"), url("/images/cart-leather/cart-leather.webp") type("image/webp")); }
  @media (min-width: 768px) {
    .category-head[data-ground="cart-leather"] { background-image: image-set(url("/images/cart-leather/cart-leather.avif") type("image/avif") 1x, url("/images/cart-leather/cart-leather.webp") type("image/webp") 1x, url("/images/cart-leather-2x/cart-leather-2x.avif") type("image/avif") 2x, url("/images/cart-leather-2x/cart-leather-2x.webp") type("image/webp") 2x); }
  }
}
.category-head__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--v7-category-head-gap);
  padding-block: var(--v7-category-head-pt) var(--v7-category-head-pb);
}
.category-head__crumb-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-paper-dim);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.2143;
}
.category-head__crumb-list a { color: inherit; text-decoration: none; }
.category-head__crumb-list a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 0.15em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.category-head__crumb-list a:hover { text-decoration-color: currentColor; }
/* the design sets two spaces either side of the separator */
.category-head__sep { margin-inline: 0.5em; }
.category-head__title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.category-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--v7-type-104-81-68);
  line-height: 0.93;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* the tracking after the last letter is not the title's width: a title that fits as drawn (MR. S LEATHER at 390)
     stays on its line */
  margin-inline-end: -0.01em;
}
/* a fitted title (1.2.1, the collections page): COLLECTIONS measures 4.52 em in these capitals, so below 347 px, where it
   would pass the column at the phone's 68 px, the title takes the column's width over 4.52 instead */
.category-head__title[data-fit] { font-size: min(var(--v7-type-104-81-68), calc((100vw - 2 * var(--gutter)) / 4.52)); }
.category-head__count, .category-head__lede { margin: 0; }
.category-head__count { color: var(--ink-paper-dim); font-family: var(--font-body); font-size: var(--v7-type-15-15-14); line-height: 1.2; white-space: nowrap; }
.category-head__count--row { display: none; }
.category-head__lede { inline-size: min(var(--v7-category-lede-w), 100%); font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.4; }
@media (min-width: 768px) {
  .category-head__count--row { display: block; }
  .category-head__count--below { display: none; }
}
.category-head__crumbs, .category-head__count--below { align-self: flex-start; }
/* each crumb a row of its separator and its words: whitespace a formatter puts between them draws nothing */
.category-head__crumb-list li { display: flex; }
/* the search page's field stands where the line does, as wide (Figma search__query) */
.category-head__search { inline-size: min(var(--v7-category-lede-w), 100%); margin: 0; }

/* A category thumb (Figma V7 v7/card/category-thumb): the photograph in a circle (--v7-thumb-circle: 72, 88, 92, 123
   at the four widths) over the category's name in the display capitals, 12 px apart, centred; the whole thumb is the
   link. It fills its share of the strip's row and never narrows past --v7-thumb-min. */
.category-thumb { flex: 1 1 0; min-inline-size: min(var(--v7-thumb-min), 100%); list-style: none; }
.category-thumb__link { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-field); text-decoration: none; }
.category-thumb__circle { position: relative; display: block; inline-size: var(--v7-thumb-circle); block-size: var(--v7-thumb-circle); overflow: hidden; border-radius: 50%; background: var(--ink-rule-paper); }
.category-thumb__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.category-thumb__label {
  align-self: stretch;
  text-align: center;
  font-family: var(--t-v7-display-24-caps-24-23-19-32-family);
  font-weight: var(--t-v7-display-24-caps-24-23-19-32-weight);
  font-size: var(--t-v7-display-24-caps-24-23-19-32-size);
  line-height: var(--t-v7-display-24-caps-24-23-19-32-line);
  letter-spacing: var(--t-v7-display-24-caps-24-23-19-32-track);
  text-transform: var(--t-v7-display-24-caps-24-23-19-32-case);
  /* CSS spaces the last letter too; the design measures the name without it (PUP HOODS fills the phone's 80 px) */
  margin-inline-end: calc(-1 * var(--t-v7-display-24-caps-24-23-19-32-track));
}
.category-thumb__label { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.category-thumb__link:hover .category-thumb__label { text-decoration-color: currentColor; }
/* The hover (since 1.1.0): where a mouse can hover, the photograph grows by 100/92 (the 92 px circle to 100)
   about its centre in 120 ms and a 3 px paper ring appears outside it; the name keeps its underline and does not move
   (a transform). The ring is drawn before the scale, so it is 3 px after it. Not on touch, not under reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .category-thumb__circle { transition: scale 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
  .category-thumb__link:hover .category-thumb__circle { scale: 1.08696; box-shadow: 0 0 0 calc(3px / 1.08696) var(--ink-paper); }
}
.category-thumb__link:focus-visible { outline: 2px solid var(--ink-field); outline-offset: 3px; }

/* The caution stripe (Figma V7 v7/chrome/caution-stripe): SS/Yellow parallelograms 18 px wide at 45 degrees, one
   every 38 px from 1 px in, in a band 24 px tall centred in the stripe (2.5 px from its edges under the panels, at
   29 px; 7.5 px on the footer's and the bands' edges, at 39 px), on the field ink. Drawn as a mask over the yellow,
   so it is crisp at any density and has no seam at any width (the image it replaces, until 1.1.0, carried a grey end
   border: a seam every 1,440 px). */
.caution-stripe { position: relative; display: block; block-size: 29px; overflow: hidden; background: var(--ink-field); }
.caution-stripe::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 24px;
  translate: 0 -50%;
  background: var(--ink-yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='24' viewBox='0 0 38 24'%3E%3Cpath d='M0 0H18L42 24H24ZM-38 0H-20L4 24H-14Z'/%3E%3C/svg%3E") 1px 0 / 38px 24px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='24' viewBox='0 0 38 24'%3E%3Cpath d='M0 0H18L42 24H24ZM-38 0H-20L4 24H-14Z'/%3E%3C/svg%3E") 1px 0 / 38px 24px repeat-x;
}
.caution-stripe--edge { block-size: 39px; }

/* An applied value (Figma V7 v7/category/chip): a 1 px paper rule, the value and its close mark. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  border: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--ink-paper);
  color: var(--ink-paper);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.2857;
  cursor: pointer;
}
.chip__close { display: block; inline-size: 8px; block-size: 8px; }
.chip__close svg { display: block; inline-size: 8px; block-size: 8px; }
.chip { transition: box-shadow var(--motion-hover) var(--ease-in-out); }
.chip:hover { box-shadow: inset 0 0 0 2px var(--ink-paper); }
.chip:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }

/* The category's grid (Figma V7 grid-band, product-grid, no-results): on the field, the applied values first
   (the facets-active component), then the product cards, as many columns as fit at the card's least width (240 px, 150 on
   the phone, 300 from 1,600), 32 px apart (12 on the phone) and 48 between rows (12 on the phone, 32 on the tablet);
   a short last row keeps the grid's columns. When nothing matches, one line in the display face, a second, and CLEAR
   ALL. */
.collection { background: var(--ink-field); color: var(--ink-paper); }
.collection__inner { display: flex; flex-direction: column; gap: 24px; padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--v7-category-card-min), 1fr));
  gap: var(--v7-category-grid-row) var(--v7-category-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.collection__item { display: flex; min-inline-size: 0; }
.collection__item > .product-card { inline-size: 100%; }
.collection__none { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 24px 64px; }
.collection__none-head { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.collection__none-body { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.4; }
/* the pager, where a category holds more than a page (24 products): built from the system, as the design draws none:
   the page numbers in the display face, the current one on the best sellers' red square, the steps as their arrows */
.collection__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.collection__pager[hidden] { display: none; }
.collection__page { display: grid; place-items: center; min-inline-size: 44px; block-size: 44px; padding: 0 8px; border: 0; background: none; color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.collection__page[aria-current="page"], .collection__page--step { background: var(--ink-red-ink); }
.collection__page { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 3px; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.collection__page:hover { text-decoration-color: currentColor; }
.collection__page--step { text-decoration-line: none; transition: background-color var(--motion-hover) var(--ease-in-out); }
.collection__page--step:hover { background: var(--ink-red-deep); }
.collection__page:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
/* the lines span the grid's width, as drawn; the button keeps its own */
.collection__none-head, .collection__none-body { align-self: stretch; }

/* The collections page's grid (Figma V7 collections/1440's grid-band, release 1.2.1): every top-level collection as
   the homepage's door, on the field, padded as the category's grid is (--v7-category-grid-pt, -pb) and spaced as the
   homepage's doors are (--door-gap). The doors fill their rows by the homepage's least width: one on the phone, two
   from 768, three where three of them and their gaps fit the column; never more than three, as collections/1440 draws
   them, so six doors make full rows at every width. */
.collections { background: var(--ink-field); }
.collections__inner { padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.collections__grid { display: flex; flex-wrap: wrap; gap: var(--door-gap); }
.collections__grid > .door-card { flex: 1 1 0; min-inline-size: 100%; }
/* each door takes at least a quarter of the row and a pixel, so a fourth never fits: from 1,600 four least widths fit
   the column, and six doors fell four and two (at 1,920 five and one, the last stretched across the column) */
@media (min-width: 768px) {
  .collections__grid > .door-card { min-inline-size: max(min(var(--v7-door-min), 100%), calc((100% - 3 * var(--door-gap)) / 4 + 1px)); }
}

/* Contact (Figma V7 contact__form): on the field under the head, the labelled fields in a column the head's line's
   width, 24 px apart, SEND 24 px under them; sent, one line in the display face over the words under it, 16 px apart.
   The form is the platform's to send (data-platform="contact-send"). */
.contact { background: var(--ink-field); color: var(--ink-paper); }
.contact__inner { display: block; padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.contact__form { margin: 0; }
/* "Every field is needed." over the fields, in the dimmer paper (contact__needed) */
.contact__needed { align-self: stretch; margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 1rem; line-height: 1.25; }
.contact__fields { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; inline-size: min(var(--v7-category-lede-w), 100%); }
.contact__sent { display: flex; flex-direction: column; gap: 16px; }
.contact__sent:focus { outline: none; }
.contact__sent-head { align-self: flex-start; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.contact__sent-body { margin: 0; font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.4; }

/* A door (Figma V7 v7/card/door): paper, a hard shadow 10 px right and 12 down, 14 px in (25 at the foot). The
   photograph in a square window (the feature door's is a 301 px band at 768, --v7-door-win-feature), 14 px over
   the copy: the category's name in the display capitals, a line in the body face, then a rule in the door's
   yellow-brown and the kicker in the deep red (6.35 to 1 on the paper). The name is the link over the whole card. */
.door-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 25px;
  background: var(--ink-paper);
  color: var(--ink-field);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--ink-field) 55%, transparent);
}
.door-card__window { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-rule-paper); }
.door-card__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.door-card__copy { display: flex; flex-direction: column; gap: 8px; }
.door-card__head { display: flex; flex-direction: column; gap: 1px; }
.door-card__title {
  margin: 0;
  font-family: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-family);
  font-weight: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-weight);
  font-size: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-size);
  line-height: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-line);
  letter-spacing: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-track);
  text-transform: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-35-case);
}
.door-card__link { color: inherit; text-decoration: none; }
.door-card__link::after { content: ""; position: absolute; inset: 0; }
.door-card__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.door-card__link:hover { text-decoration-color: currentColor; }
.door-card:has(.door-card__link:focus-visible) { outline: 2px solid var(--focus-ring, var(--ink-yellow)); outline-offset: 3px; }
.door-card__link:focus-visible { outline: none; }
.door-card__body {
  margin: 0;
  font-family: var(--t-v7-body-13-bold-13-13-13-17-family);
  font-weight: var(--t-v7-body-13-bold-13-13-13-17-weight);
  font-size: var(--t-v7-body-13-bold-13-13-13-17-size);
  line-height: var(--t-v7-body-13-bold-13-13-13-17-line);
}
.door-card__foot { padding-block-start: 11px; border-block-start: 1px solid var(--ink-door-rule); }
.door-card__kicker {
  margin: 0;
  color: var(--ink-red-deep);
  font-family: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-family);
  font-weight: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-weight);
  font-size: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-size);
  line-height: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-line);
  letter-spacing: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-track);
  text-transform: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-case);
}
/* the feature door at 768 is a band: its window the drawn 301 px tall across the full row */
@media (min-width: 768px) {
  .door-card[data-layout="feature"] .door-card__window { aspect-ratio: auto; block-size: var(--v7-door-win-feature); }
}
@media (min-width: 1024px) {
  .door-card[data-layout="feature"] .door-card__window { aspect-ratio: 1; block-size: auto; }
}

/* The loop (since 1.1.0, in place of 1.0's lift): under a mouse the door's photograph gives way to its loop,
   which lies over it unseen until it plays (js/ss-doors.js marks the door data-looping once it does) and fades back
   to the photograph in 200 ms when the pointer leaves. Its first frame is the photograph, so the change cannot jump.
   Never on touch, under reduced motion, or while the page's motion is stopped: the script plays nothing then. */
.door-card__loop { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); }
.door-card[data-looping] .door-card__loop { opacity: 1; }

/* The doors band (Figma V7 doors): the yellow paper, greyed a fifth by a saturation wash that deepens over the band's
   last tenth (the design's gradient at 90 percent, blend SATURATION), the caution stripe along its top, then TOP
   CATEGORIES with the three doors, the strip of the store's categories, BEST SELLERS (the sellers component) and
   the peek-over man on the band's foot at the gutter. Spacing from the design's width values (--v7-doors-*).
   The paper is the design's, at the design's scale and sharp at any density (made by the design repository's
   scripts/paper-v7.py; remade 2026-10-07): its flecks, then its smooth mottling stretched to 2,048 px and multiplied
   over its grit, a tile of 512 px (1.2.0; it was 1,024) with a true copy at twice the size for dense screens.
   Stretched over the band as one image, as the design's fill is, it blurs. */
.doors {
  --focus-ring: var(--ink-field);  /* on the yellow paper the cards' rings are black */
  position: relative;
  overflow: hidden;
  padding-block: var(--v7-doors-pt) var(--v7-doors-pb);
  color: var(--ink-field);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--ink-field) 18.9%, transparent) 90.46%, color-mix(in srgb, var(--ink-field) 64.8%, transparent)),
    none 0 0 / 1024px repeat,
    none 0 0 / 2048px repeat,
    var(--ink-yellow) none 0 0 / 512px repeat;
  background-blend-mode: saturation, normal, multiply, normal;
}
/* the paper's layers come when the band is near, or once the page is idle after its load (js/ss-near.js, 1.2.0):
   the grit is noise, which no image format makes smaller, and the band stands below the first screen, so it never
   competes with what the first screen paints; until then, and without the script, the band is the paper's plain
   yellow. Below 768 the grit is its 512 px tile alone (64 KB) on any screen, softer on a dense one at a fifth of the
   bytes; from 768 a dense screen takes the tile's true copy at twice the size (299 KB) */
.doors[data-near] { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--ink-field) 18.9%, transparent) 90.46%, color-mix(in srgb, var(--ink-field) 64.8%, transparent)), url("/images/paper-flecks/paper-flecks.svg"), url("/images/paper-mottle/paper-mottle.webp"), url("/images/paper-grit-512/paper-grit-512.webp"); }
@media (min-width: 768px) {
  .doors[data-near] { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--ink-field) 18.9%, transparent) 90.46%, color-mix(in srgb, var(--ink-field) 64.8%, transparent)), url("/images/paper-flecks/paper-flecks.svg"), url("/images/paper-mottle/paper-mottle.webp"), image-set(url("/images/paper-grit-512/paper-grit-512.webp") 1x, url("/images/paper-grit-512-2x/paper-grit-512-2x.webp") 2x); }
}
.doors > .caution-stripe { position: absolute; inset-block-start: 0; inset-inline: 0; }
.doors__categories { display: flex; flex-direction: column; gap: var(--v7-doors-cat-gap); padding-block-end: var(--v7-doors-cat-pb); }
/* the doors fill their row by their minimum widths, as the design's wrapping row does */
.doors__grid { display: flex; flex-wrap: wrap; gap: var(--door-gap); }
/* one to a row on the phone, at any width below 768; from 768 by their least widths, as the design wraps them */
.doors__grid > .door-card { flex: 1 1 0; min-inline-size: 100%; }
@media (min-width: 768px) {
  .doors__grid > .door-card { min-inline-size: min(var(--v7-door-min), 100%); }
  .doors__grid > .door-card[data-layout="feature"] { min-inline-size: min(var(--v7-door-min-feature), 100%); }
}
.doors__strip { padding-block-end: var(--v7-doors-nav-pb); }
.doors__thumbs {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--v7-doors-nav-gap);
  row-gap: var(--v7-doors-nav-rowgap);
  inline-size: min(var(--v7-doors-nav-w), 100%);
  /* the phone's four by two, centred where the window is wider than the phone */
  margin: 0 auto;
  padding: 30px var(--v7-doors-nav-px) 31px;
  list-style: none;
}
/* Below 768 the strip keeps the phone's 350 px at any width, so its thumbs keep the phone's sizes too (1.2.3): the
   name's type and the circle grow toward the tablet's 23 and 88 px from 390 to 768, which put PUP HOODS on two lines
   from just above 390 and drew each circle wider than its 80 px share from about 585. */
.doors__thumbs .category-thumb__label { font-size: 1.1875rem; }
.doors__thumbs .category-thumb__circle { inline-size: 4.5rem; block-size: 4.5rem; }
@media (min-width: 768px) {
  .doors__thumbs .category-thumb__label { font-size: var(--t-v7-display-24-caps-24-23-19-32-size); }
  .doors__thumbs .category-thumb__circle { inline-size: var(--v7-thumb-circle); block-size: var(--v7-thumb-circle); }
}
/* From 1,024 the strip is one row of eight, its see-all thumb last (1.2.2; the thumb showed on the phone and the
   tablet only): each thumb may narrow below --v7-thumb-min, so the eight share the row from 1,024 (104 px each) to
   1,920 (198 px each) and no name wraps. The phone and the tablet keep two rows of four. */
@media (min-width: 1024px) {
  .doors__thumbs { flex-wrap: nowrap; }
  .doors__thumbs > .category-thumb { min-inline-size: 0; }
}
.doors__character {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: var(--page-margin);
  inline-size: var(--v7-doors-char-w);
  block-size: var(--v7-doors-char-h);
  pointer-events: none;
}
.doors__character-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The roll-up door: as the doors first come into view (js/ss-reveal.js), each photograph is uncovered from its foot
   up, as a roll-up door opens, over 650 ms, 90 ms apart, while the words under it rise with the band. The words rise
   by their margins, 12 px down and back (the card's height unchanged), not by a transform: a transform would make
   them the box the door's link covers, so a click on the photograph would do nothing until they stood (1.1.0). */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-reveal-ready] .doors .doors__grid:not([data-reveal-state]) > .door-card { opacity: 1; translate: none; }
  html[data-reveal-ready] .doors .doors__grid:not([data-reveal-state]) .door-card__window { clip-path: inset(100% 0 0 0); }
  html[data-reveal-ready] .doors .doors__grid:not([data-reveal-state]) .door-card__copy { opacity: 0; margin-block: 12px -12px; }
  html[data-reveal-ready] .doors .doors__grid[data-reveal-state="in"] > .door-card { transition: none; }
  /* arriving, the photograph opens to an explicit inset of nothing: a shape eases into a shape, never into no clip */
  html[data-reveal-ready] .doors .doors__grid[data-reveal-state="in"] .door-card__window { clip-path: inset(0 0 0 0); transition: clip-path 650ms var(--ease-out) calc(var(--reveal-i, 0) * 90ms); }
  html[data-reveal-ready] .doors .doors__grid[data-reveal-state="in"] .door-card__copy {
    transition: opacity var(--motion-reveal) var(--ease-out), margin-block var(--motion-reveal) var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger));
  }
}

/* The phone drawer (Figma V7 v7/chrome/drawer), below 768 px: it hangs from the header's foot over the page, on
   the field with the vinyl ground at 72 percent (the drawn crop: the texture at 1.31 of its size, 1,148 px left of the
   drawer, its foot on the foot of the drawer's content; the file is the cut of the texture a box up to 767 px wide shows,
   drawn where its columns fall in the whole, and a phone fetches it once the page is idle, js/ss-header.js), 16 px in, the caution stripe along its last 29 px; 800 px
   tall as drawn where the screen has the room under the header, otherwise the screen's height, and scrolling inside
   when a view is taller (the page behind it does not scroll, so nothing may hang below the screen).
   The menu view: the search field (SEARCH over the input, 309 px wide) with CLOSE at the right; 24 px down the
   categories and BRANDS, each a 56 px row in the display face at 24/24 over a rule, a chevron at its right; 48 px
   down, under a 4 px paper rule, Account and Our Store in the body face at 16/24. Searching, the input's rule is
   4 px and the chevrons step back; typed, the results take the list's place, stacked.
   A category's view: BACK and CLOSE, then 24 px apart the columns by type and by material (heads over a rule, links
   in the body face at 18/25 in rows 49 px tall, a rule between rows), TOP PICKS (two picks at 171 px) and VIEW ALL
   the full width. BRANDS opens a view listing the brands. */
.drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: min(800px, calc(100dvh - 138px));
  max-block-size: calc(100dvh - 138px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 16px 0;
  background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 28%, transparent), color-mix(in srgb, var(--ink-field) 28%, transparent)),
    var(--ink-field) url("/images/field-vinyl-phone/field-vinyl-phone.webp") no-repeat calc(-1147.9px + 864 * 2685.7px / 2048) 100% / calc(624 * 2685.7px / 2048) auto;
  background-attachment: local;
  --pick-w: 171px;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/field-vinyl-phone/field-vinyl-phone.avif") type("image/avif"))) {
  .drawer {
    background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 28%, transparent), color-mix(in srgb, var(--ink-field) 28%, transparent)),
    var(--ink-field) image-set(url("/images/field-vinyl-phone/field-vinyl-phone.avif") type("image/avif"), url("/images/field-vinyl-phone/field-vinyl-phone.webp") type("image/webp")) no-repeat calc(-1147.9px + 864 * 2685.7px / 2048) 100% / calc(624 * 2685.7px / 2048) auto;
    background-attachment: local;
  }
}
.drawer__view { display: flex; flex-direction: column; gap: 24px; margin-block-end: 40px; }
.drawer__view--main { gap: 0; }
.drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.drawer__top--search .search { flex: 0 1 309px; min-inline-size: 0; }
.drawer .search__field { flex-direction: column; gap: 4px; }
.drawer .search__label { margin-block-start: 0; }
.drawer .search__input { block-size: 40px; padding-block: 8px 7px; }
.drawer .search__input:focus, .drawer .search__input[data-focused] { padding-block-end: 4px; }
.drawer__close, .drawer__back {
  flex: none;
  min-block-size: 39px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 0.9375rem;
  letter-spacing: 0.04em;
}
.drawer__back { font-size: 1rem; line-height: 1.3125rem; text-transform: uppercase; }
.drawer__list { margin: 24px 0 0; padding: 0; list-style: none; }
.drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  block-size: 57px;
  padding: 0 0 1px;
  border: 0;
  border-block-end: 1px solid var(--ink-rule-field);
  background: none;
  color: var(--ink-paper);
  text-align: start;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: 0.04em;
}
/* a row (1.2.0): its name a link to the category, the chevron a button that opens the row's list; the row carries
   the rule the whole button carried, so the name is a pixel shorter and the row keeps its 57 */
.drawer__row { display: flex; align-items: stretch; border-block-end: 1px solid var(--ink-rule-field); }
.drawer__row > .drawer__item { flex: 1 1 auto; block-size: 56px; min-inline-size: 0; border-block-end: 0; text-decoration: none; }
.drawer__open { display: grid; flex: none; place-items: center; inline-size: 57px; padding: 0; border: 0; background: none; color: var(--ink-paper-dim); cursor: pointer; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.5rem; }
.drawer__chevron { color: var(--ink-paper-dim); }
.drawer[data-view="search"] .drawer__chevron { visibility: hidden; }
.drawer__more { display: flex; flex-direction: column; margin: 48px 0 0; padding: 0; border-block-start: 4px solid var(--ink-paper); list-style: none; }
.drawer__more-link { display: inline-block; padding-block: 3px; color: var(--ink-paper); font-family: var(--font-body); font-size: 1rem; line-height: 1.25rem; text-decoration: none; }
.drawer .search__results { margin-block-start: 24px; }
.drawer .mega-menu__col { flex: none; gap: 12px; }
.drawer .mega-menu__head { font-size: 0.875rem; }
.drawer .mega-menu__list { gap: 0; }
.drawer .mega-menu__list li + li { border-block-start: 1px solid var(--ink-rule-field); }
.drawer .mega-menu__link { display: block; padding-block: 12px; font-size: 1.125rem; line-height: 1.5625rem; }
.drawer .mega-menu__all { align-self: stretch; inline-size: auto; margin-block-start: 0; padding-block-end: 8px; }
/* the stripe closes the drawer: at its foot when the view is short, 40 px after the view when it is long */
.drawer > .caution-stripe { flex: none; margin: auto -16px 0; }
@media (min-width: 768px) {
  .drawer { display: none; }
}
/* The slide (1.1.0): opening, the drawer comes down its own height from behind the bar's foot over --motion-slide-in
   on --ease-slide-in; closing, it goes back up over --motion-slide-out on --ease-slide-out, shown until it has gone.
   Only its translate moves: the header's panels are its fixed edge, clipped at the bar's foot (css/header.css), so it
   never crosses the bar. A category's view (and BRANDS') comes across from the right, and BACK's view from the left,
   in the same way (data-from, js/ss-header.js); the view it replaces goes at once, and the drawer clips the sideways
   overflow, so the slide never scrolls it. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .drawer { transition: translate var(--motion-slide-in) var(--ease-slide-in), display var(--motion-slide-in) allow-discrete; }
  @starting-style { .drawer { translate: 0 -100%; } }
  .drawer[hidden] { translate: 0 -100%; pointer-events: none; transition-duration: var(--motion-slide-out); transition-timing-function: var(--ease-slide-out); }
  .drawer__view { transition: translate var(--motion-slide-in) var(--ease-slide-in); }
  @starting-style {
    .drawer[data-from="end"] .drawer__view { translate: 100% 0; }
    .drawer[data-from="start"] .drawer__view { translate: -100% 0; }
  }
}

/* An event (Figma V7 v7/event/entry): over the field's rule, 32 px above and below, the date on the yellow (112 px
   wide, the month over the day in the display face) and 32 px from it the entry: its title in the display capitals,
   when in Rockwell in the dim paper, and its line in the body face, 10 px apart. */
.event-entry { display: flex; align-items: flex-start; gap: 32px; padding-block: 32px; border-block-start: 1px solid var(--ink-rule-field); }
.event-entry__date { flex: none; inline-size: 112px; margin: 0; padding-block: 12px 14px; background: var(--ink-yellow); color: var(--ink-field); text-align: center; }
.event-entry__date time { display: flex; flex-direction: column; align-items: center; }
.event-entry__month { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
.event-entry__day { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 0.95; }
.event-entry__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-inline-size: 0; }
.event-entry__title {
  margin: 0;
  font-family: var(--t-v7-display-30-30-26-22-family);
  font-weight: var(--t-v7-display-30-30-26-22-weight);
  font-size: var(--t-v7-display-30-30-26-22-size);
  line-height: var(--t-v7-display-30-30-26-22-line);
  letter-spacing: var(--t-v7-display-30-30-26-22-track);
  text-transform: uppercase;
}
.event-entry__when { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-archive); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.event-entry__line { margin: 0; font-family: var(--font-body); font-size: var(--v7-type-17-15-14); line-height: 1.4; }

/* Events (Figma V7 events__list): on the field under the head, the entries the client posts, each over a rule, then
   the signup 48 px under them; with nothing posted, a line in the display face and the words under it, 16 px apart,
   over the signup. */
.events { background: var(--ink-field); color: var(--ink-paper); }
.events__inner { display: flex; flex-direction: column; gap: 48px; padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.events__entries { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.events__none { display: flex; flex-direction: column; gap: 16px; }
.events__none-head { align-self: flex-start; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.events__none-body { margin: 0; font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.4; }

/* A filter's value (Figma V7 v7/category/facet): its checkbox, its name, its count; a value that would find nothing
   is closed, faint and not to be pressed. */
.facet { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 24px; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.3333; cursor: pointer; }
.facet__input { position: absolute; inset-inline-start: 0; inset-block-start: calc(50% - 9px); opacity: 0; inline-size: 18px; block-size: 18px; margin: 0; }
.facet__box { position: relative; flex: none; inline-size: 18px; block-size: 18px; box-shadow: inset 0 0 0 1.5px var(--ink-paper); transition: background-color var(--motion-hover) var(--ease-in-out), box-shadow var(--motion-hover) var(--ease-in-out); }
.facet__input:checked + .facet__box { background: var(--ink-yellow); box-shadow: inset 0 0 0 1.5px var(--ink-yellow); }
.facet__input:checked + .facet__box::after { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 5px; inline-size: 9px; block-size: 5px; border-inline-start: 2px solid var(--ink-field); border-block-end: 2px solid var(--ink-field); transform: rotate(-45deg); }
.facet__input:focus-visible + .facet__box { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.facet__count { color: var(--ink-paper-dim); }
.facet:has(.facet__input:disabled) { color: var(--ink-paper-faint); cursor: not-allowed; }
.facet:has(.facet__input:disabled) .facet__box { box-shadow: inset 0 0 0 1.5px var(--ink-paper-faint); }
.facet:has(.facet__input:disabled) .facet__count { color: var(--ink-paper-faint); }

/* The applied values (Figma V7 facets-active): each as a chip (the chip component) that takes its value off, then Clear
   all; above the grid, and at the head of the drawer's list. */
.facets-active { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.facets-active[hidden] { display: none; }
.facets-active__list { display: contents; }
.facets-active__list > li { display: block; }
.facets-active__clear { padding: 0; border: 0; background: none; color: var(--ink-paper); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.2857; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
.facets-active__clear { transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
.facets-active__clear:hover { text-decoration-thickness: 2px; }
.facets-active__clear:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }

/* The filter bar (Figma V7 filter-bar (top)): yellow across the page, 16 px above and below the labels; the filters'
   labels 32 px apart at the left, Sort by and its value at the right. Below 768 px one Filter bar opens the drawer;
   at 768 Brand and Price wait behind More. Each part of the bar is a component of its own: the label
   (filter-label), its dropdown (filter-panel, sort-panel), a value (facet, sort-option), the price's
   fields (price-facet). */
.facets__bar { position: relative; z-index: var(--z-raised); background: var(--ink-yellow); color: var(--ink-field); }
.facets__rail { display: none; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.facets__filters { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.facets__filter { position: relative; }
.facets__filter[data-rail="all"], .facets__filter[data-rail="more"] { display: none; }
.facets__sort { position: relative; display: flex; align-items: center; gap: 10px; }
.facets__sort-label { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.2143; }
/* one dropdown at a time (1.1.0): a dropdown replaced by another goes at once; only the last to close fades out
   (filter-panel, sort-panel) */
.facets:has([data-filter-toggle][aria-expanded="true"]) .filter-panel[hidden],
.facets:has([data-filter-toggle][aria-expanded="true"]) .sort-panel[hidden] { transition: none; }

/* the phone: one bar, the icon and Filter, opening the drawer */
.facets__phone { display: flex; align-items: center; block-size: 44px; }
.facets__phone-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink-field); font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3125; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.facets__phone-icon { display: block; inline-size: 21px; block-size: 20px; }
.facets__phone-icon svg { display: block; }
.facets__phone-toggle:focus-visible { outline: 2px solid var(--ink-field); outline-offset: 3px; }

@media (min-width: 768px) {
  .facets__rail { display: flex; }
  .facets__phone { display: none; }
  .facets__filter[data-rail="more"] { display: block; }
}
@media (min-width: 1024px) {
  .facets__filter[data-rail="all"] { display: block; }
  .facets__filter[data-rail="more"] { display: none; }
}

/* The form field (Figma V7 signup__field). The states it has, built from the system where the design draws
   none: hover thickens the rule, focus takes the yellow ring, disabled and read-only dash the rule and fade
   the text, and invalid borrows the red rule, never red type. */
.field { display: inline-flex; inline-size: 100%; }
.field__input {
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--v7-button-h);
  padding-inline: var(--space-4);
  border: 2px solid var(--ink-field);
  border-radius: 0;
  background: var(--ink-paper);
  color: var(--ink-field);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--v7-type-17-15-14);
  line-height: normal;
}
.field__input::placeholder { color: var(--ink-field-faint); opacity: 1; }
.field__input { transition: box-shadow var(--motion-hover) var(--ease-in-out); }
.field__input:hover { box-shadow: inset 0 0 0 1px var(--ink-field); }
.field__input:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.field__input:disabled, .field__input[readonly] { border-style: dashed; color: var(--ink-field-faint); cursor: not-allowed; }
.field__input[aria-invalid="true"] { border-color: var(--ink-red-ink); box-shadow: inset 0 0 0 1px var(--ink-red-ink); }
/* The labelled field (Figma V7 v7/form/field: Contact, the search page, the gift card's recipient): the label above
   the box in the display face at 16 px, 10 px over it; the message box 176 px tall, its words from its top; under an
   invalid box its error line in paper (the box's rule red, as above). */
.field--labelled { display: flex; flex-direction: column; gap: 10px; inline-size: 100%; }
/* the label hugs its words, as drawn, over the box that fills the column */
.field__label--shown { align-self: flex-start; color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3125; letter-spacing: 0.04em; text-transform: uppercase; }
.field__input--message { block-size: 176px; padding-block: var(--space-4); line-height: 1.4; resize: vertical; }
.field__error { margin: 0; color: var(--ink-paper); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.2; }

/* The filter drawer (Figma V7 "category/390, filters open", "category/768/filters-open (from More)"): the phone's Filter
   bar and the tablet's More open it. Full width on the phone, 400 px from the right on the tablet, the window's full
   height, over the page dimmed by 15 percent; the phone drawer's vinyl ground (its cut of the texture) on its container,
   so the filters scroll over it. FILTER in the display face with a count of the filters on, CLOSE; the applied values as chips; every filter
   open, one under another over a 1 px rule (the colours as swatches, two to a row; the price as two fields and "to");
   Sort as the platform's select; at the foot, over the list as it scrolls, Clear all once a filter is on and See N
   items; the caution stripe last. */
.filter-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 0 0 29px;
  overflow: hidden;
  border: 0;
  background: url("/images/field-vinyl-phone/field-vinyl-phone.webp") no-repeat calc(-1147.9px + 864 * 2685.7px / 2048) 100% / calc(624 * 2685.7px / 2048) auto, var(--ink-field);
  color: var(--ink-paper);
  flex-direction: column;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/field-vinyl-phone/field-vinyl-phone.avif") type("image/avif"))) {
  .filter-drawer {
    background: image-set(url("/images/field-vinyl-phone/field-vinyl-phone.avif") type("image/avif"), url("/images/field-vinyl-phone/field-vinyl-phone.webp") type("image/webp")) no-repeat calc(-1147.9px + 864 * 2685.7px / 2048) 100% / calc(624 * 2685.7px / 2048) auto, var(--ink-field);
  }
}
.filter-drawer[open] { display: flex; }
.filter-drawer::backdrop { background: color-mix(in srgb, var(--ink-field) 15%, transparent); }
.filter-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 65px; padding: 10px 8px 10px 20px; border-block-end: 1px solid var(--ink-rule-field); }
.filter-drawer__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.27; letter-spacing: 1px; text-transform: uppercase; }
.filter-drawer__badge { display: grid; place-items: center; inline-size: 22px; block-size: 22px; background: color-mix(in srgb, var(--ink-paper) 10%, transparent); font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; line-height: 1; letter-spacing: 0; }
.filter-drawer__badge[hidden] { display: none; }
.filter-drawer__close { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: none; color: var(--ink-paper); cursor: pointer; }
.filter-drawer__close svg { display: block; inline-size: 12px; block-size: 12px; }
.filter-drawer__close:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; }
.filter-drawer__scroll { flex: 1 1 auto; min-block-size: 0; padding: 4px 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
.filter-drawer .facets-active--drawer { padding-block: 14px; }
.filter-drawer .facets-active--drawer .chip { gap: 8px; padding: 8px 10px 8px 12px; }
.filter-drawer .facets-active--drawer .chip__close, .filter-drawer .facets-active--drawer .chip__close svg { inline-size: 10px; block-size: 10px; }
.filter-drawer .facets-active--drawer .facets-active__clear { display: none; }
.filter-drawer__group { padding: 16px 0 18px; border-block-start: 1px solid var(--ink-rule-field); }
.filter-drawer__summary { display: flex; align-items: center; min-block-size: 24px; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3125; letter-spacing: 0.04em; text-transform: uppercase; list-style: none; cursor: pointer; }
.filter-drawer__summary::-webkit-details-marker { display: none; }
.filter-drawer__chevron { flex: none; transform: rotate(180deg); }
.filter-drawer__group:not([open]) .filter-drawer__chevron { transform: none; }
.filter-drawer__summary:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.filter-drawer__list { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 14px 0 0; padding: 0; border: 0; }
.filter-drawer__list--color { display: grid; grid-template-columns: repeat(2, minmax(0, 140px)); gap: 10px 8px; }
.filter-drawer__group .price-facet { margin-block-start: 14px; }
.filter-drawer__group .price-facet__fields { gap: 12px; }
.filter-drawer__group .price-facet__field { inline-size: 120px; box-shadow: inset 0 0 0 1px var(--ink-paper-dim); }
/* a colour: its swatch, its name */
.filter-drawer .facet--swatch .facet__box { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--ink-paper-dim); }
.filter-drawer .facet--swatch .facet__input { inline-size: 22px; block-size: 22px; inset-block-start: calc(50% - 11px); }
.filter-drawer .facet--swatch { gap: 10px; }
.filter-drawer .facet--swatch .facet__input:checked + .facet__box { background: var(--swatch); box-shadow: inset 0 0 0 1px var(--ink-paper-dim), 0 0 0 2px var(--ink-field), 0 0 0 4px var(--ink-yellow); }
.filter-drawer .facet--swatch .facet__input:checked + .facet__box::after { content: none; }
/* Sort: the platform's select */
.filter-drawer__select { position: relative; margin-block-start: 12px; }
.filter-drawer__select select { inline-size: 100%; block-size: 44px; padding: 0 38px 0 14px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--ink-paper-dim); color: var(--ink-paper); font-family: var(--font-body); font-size: 0.9375rem; appearance: none; cursor: pointer; }
.filter-drawer__select select option { background: var(--ink-field); color: var(--ink-paper); }
.filter-drawer__select .filter-drawer__chevron { position: absolute; inset-inline-end: 15px; inset-block-start: 19px; transform: none; pointer-events: none; }
.filter-drawer__select select:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
/* the foot, over the list as it scrolls; the stripe under it */
.filter-drawer__foot { display: flex; gap: 12px; padding: 12px 20px 20px; border-block-start: 1px solid var(--ink-rule-field); background: var(--ink-field); }
.filter-drawer__foot .button { flex: 1 1 0; inline-size: auto; min-inline-size: 0; }
.filter-drawer__foot .button__label { font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.04em; }
.filter-drawer__clear { box-shadow: inset 0 0 0 1px var(--ink-paper); }
.filter-drawer__clear[hidden] { display: none; }
.filter-drawer__stripe { position: absolute; inset: auto 0 0; block-size: 29px; background: repeating-linear-gradient(-45deg, var(--ink-yellow) 0 13.5px, var(--ink-field) 13.5px 27px); box-shadow: inset 0 5.5px 0 var(--ink-field), inset 0 -5.5px 0 var(--ink-field); }
@media (min-width: 768px) {
  .filter-drawer { inline-size: 400px; }
}
/* The slide (1.1.0): the drawer comes in from the window's right edge over --motion-slide-in on --ease-slide-in and goes
   back over --motion-slide-out on --ease-slide-out, the page's dimming fading with it, shown and kept in the top layer
   until it has gone (overlay's discrete transition; its layout stays a column meanwhile). A filter's group opens and
   closes by its height over --motion-unfold, both ways on --ease-in-out, its chevron turning with it, where the
   browser can animate to the content's height (interpolate-size; elsewhere at once). Nothing moves under reduced
   motion. */
@media (prefers-reduced-motion: no-preference) {
  .filter-drawer { translate: 100% 0; transition: translate var(--motion-slide-out) var(--ease-slide-out), overlay var(--motion-slide-out) allow-discrete, display var(--motion-slide-out) allow-discrete; }
  .filter-drawer[open] { translate: 0 0; transition-duration: var(--motion-slide-in); transition-timing-function: var(--ease-slide-in); }
  @starting-style { .filter-drawer[open] { translate: 100% 0; } }
  .filter-drawer::backdrop { background-color: transparent; transition: background-color var(--motion-slide-out) var(--ease-slide-out), overlay var(--motion-slide-out) allow-discrete, display var(--motion-slide-out) allow-discrete; }
  .filter-drawer[open]::backdrop { background-color: color-mix(in srgb, var(--ink-field) 15%, transparent); transition-duration: var(--motion-slide-in); transition-timing-function: var(--ease-slide-in); }
  @starting-style { .filter-drawer[open]::backdrop { background-color: transparent; } }
  /* closing, it takes no presses while it goes */
  .filter-drawer:not([open]), .filter-drawer:not([open])::backdrop { pointer-events: none; }
  .filter-drawer__group { interpolate-size: allow-keywords; }
  .filter-drawer__group::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-unfold) var(--ease-in-out), content-visibility var(--motion-unfold) allow-discrete; }
  .filter-drawer__group[open]::details-content { block-size: auto; }
  .filter-drawer__summary .filter-drawer__chevron { transition: transform var(--motion-unfold) var(--ease-in-out); }
}

/* A filter's label (Figma V7 v7/category/filter-label): in the display face, its chevron beside it, the count of its
   applied values after its name. Hover underlines it at 1 px, pressed at 2 px and 1 px lower, focus a 2 px black
   ring 3 px out, open the chevron turned up and a 2 px bar along its foot. */
.filter-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-field);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3125;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.filter-label__count[hidden] { display: none; }
.filter-label__chevron { flex: none; }
.filter-label__text, .filter-label__count { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.filter-label:hover .filter-label__text, .filter-label:hover .filter-label__count { text-decoration-color: currentColor; }
.filter-label:active { transform: translateY(1px); }
.filter-label:active .filter-label__text, .filter-label:active .filter-label__count { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.filter-label:focus-visible { outline: 2px solid var(--ink-field); outline-offset: 3px; }
.filter-label[aria-expanded="true"] .filter-label__chevron { transform: rotate(180deg); }
.filter-label::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: var(--ink-field); opacity: 0; }
.filter-label[aria-expanded="true"]::after { opacity: 1; }
/* open and closed (1.1.0): the chevron turns and the bar fades with the dropdown, over --motion-panel both ways */
@media (prefers-reduced-motion: no-preference) {
  .filter-label__chevron { transition: transform var(--motion-panel) var(--ease-in-out); }
  .filter-label::after { transition: opacity var(--motion-panel) var(--ease-in-out); }
}

/* A filter's dropdown (Figma V7 v7/category/filter-panel): 260 px of the field with the vinyl texture (drawn at
   2,686 px wide, 1,147 px in, anchored at its foot, as the drawer's) inside a 1 px rule, 20 px in at the top and 24
   at the sides and foot, under its label's left edge; its values 12 px apart. */
.filter-panel {
  position: absolute;
  inset-block-start: calc(100% + 16px);
  z-index: var(--z-overlay);
  inline-size: 260px;
  padding: 20px 24px 24px;
  border: 1px solid var(--ink-rule-field);
  background: url("/images/field-vinyl/field-vinyl.webp") no-repeat -1147.2px 100% / 2686px auto, var(--ink-field);
  color: var(--ink-paper);
  inset-inline-start: 0;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"))) {
  .filter-panel {
    background: image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"), url("/images/field-vinyl/field-vinyl.webp") type("image/webp")) no-repeat -1147.2px 100% / 2686px auto, var(--ink-field);
  }
}
.filter-panel[hidden] { display: none; }
/* the values 24 px tall (a target's least size) and 8 apart: the design's 20 and 12, the same 32 px pitch */
.filter-panel__list { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }

/* The settle: opening, the panel fades in and drops the last 4 px into place over --motion-panel on
   --ease-out; closing (1.1.0), it fades out and lifts the same 4 px on --ease-in, shown until it has gone and
   taking no presses meanwhile. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .filter-panel:not([hidden]) { animation: filter-panel-settle var(--motion-panel) var(--ease-out); }
  .filter-panel[hidden] {
    opacity: 0;
    translate: 0 -4px;
    pointer-events: none;
    transition: opacity var(--motion-panel) var(--ease-in), translate var(--motion-panel) var(--ease-in), display var(--motion-panel) allow-discrete;
  }
}
@keyframes filter-panel-settle { from { opacity: 0; translate: 0 -4px; } }
/* Glide Select (1.2.0): one highlight behind the panel's values, following the mouse from row to row on the hover's
   own timing; it fades out when the mouse leaves and slides on from there when it comes back (js/ss-facets.js, which
   gives Sort by's list its own, drawn by the sort panel's stylesheet). A paper tint on the field, reaching 12 px into the panel's
   padding. Under reduced motion it only fades. */
.filter-panel__list { position: relative; }
.filter-panel__list > .facet { z-index: 1; }
.filter-panel__glide {
  position: absolute;
  inset-block-start: 0;
  inset-inline: -12px;
  block-size: var(--glide-h, 0px);
  translate: 0 var(--glide-y, 0px);
  background: color-mix(in srgb, var(--ink-paper) 12%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: translate var(--motion-hover) var(--ease-in-out), block-size var(--motion-hover) var(--ease-in-out), opacity var(--motion-hover) var(--ease-in-out);
}
.filter-panel__glide[data-on] { opacity: 1; }
.filter-panel__glide[data-jump] { transition: opacity var(--motion-hover) var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) { .filter-panel__glide { transition: opacity var(--motion-hover) var(--ease-in-out); } }

/* The footer (Figma V7 v7/chrome/footer): the yellow paper, the caution stripe showing 19 px at its top and 20 px
   at its foot, and 121 px down the ruled box (1 px of field ink), 48 px above the running foot (display/14/21, 9 px
   down); --v7-footer-pb under that. In the box: the sign (16 px in: the badge, trimmed 17 px at its left; the line
   in the display face at the band-head size, 242 px wide; the discretion note in the body face at 16/24) and the
   four columns (16 px down, 17 px in: the head in display/14, a 1 px rule 37 px down, then the links in the body
   face at 16/22.4, 28 px apart; each column as tall as the design draws it, --footer-group-h, its rule that long). The attendant reclines in the box's lower right corner, turned 1.28 degrees,
   at 71 percent, past the rule by 42.5 px at the right and 17 px at the foot on the desktop (26.5 and 4 on the
   tablet; inside the rule on the phone).
   The box arranges itself by its own width, the sign beside the columns wherever they fit, so no width leaves a band
   of empty paper (1.1.0): from 1,280 px (1,278 inside the rule, reached at a 1,440 px
   window) the sign and the four columns in one row, a rule between columns, the attendant in the lower right corner;
   from 1,060 px the same row with the sign 300 px wide and the columns 20 px apart (the frame footer/1280); from
   702 px the sign beside the columns set two by two, the attendant under the sign at its width (the 768
   arrangement); narrower, the sign above the columns, two by two, the attendant under them (390). Every other size
   comes from the design's width values. */
.footer {
  --footer-char-right: 1.5px;
  --footer-char-bottom: 4px;
  --focus-ring: var(--ink-field);  /* on the yellow paper the ring is black */
  position: relative;
  display: block;
  overflow: hidden;
  padding-block: 121px var(--v7-footer-pb);
  /* the paper, tiled at its own size (512 px; a copy at twice the size for dense screens), never stretched */
  background: var(--ink-yellow) image-set(url("/images/marquee-yellow-paper/marquee-yellow-paper.webp") 1x, url("/images/marquee-yellow-paper/marquee-yellow-paper-2x.webp") 2x) 0 0 / 512px repeat;
  color: var(--ink-field);
}
.footer > .caution-stripe { position: absolute; inset-inline: 0; }
.footer > .caution-stripe:first-child { inset-block-start: -20px; }
.footer > .caution-stripe:last-child { inset-block-end: -19px; }
.footer__frame { position: relative; container-type: inline-size; }
.footer__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--v7-footer-col-gap);
  row-gap: var(--v7-footer-row-gap);
  /* on the phone the attendant lies under the columns: room for him, his drawn height (149 of 348) and 17 px, at any
     phone width (the design's 166 at 390; the token's straight line from 166 to 1 between 390 and 768 would let him
     climb over the last links) */
  padding-block-end: calc(min(var(--v7-footer-char-w), 100%) * 149 / 348 + 17px);
  border: 1px solid var(--ink-field);
}
.footer-sign {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: 16px;
  inline-size: min(var(--v7-footer-sign-w), 100%);
  padding: 16px;
}
.footer-sign__mark { inline-size: var(--v7-footer-mark-w); block-size: var(--v7-footer-mark-h); overflow: hidden; }
/* the badge's left 17 px (at 144 px) are trimmed as drawn: badge-footer.svg starts its view 51 units in */
.footer-sign__badge { inline-size: 100%; block-size: 100%; }
.footer-sign__line {
  inline-size: 242px;
  margin: 0;
  font-family: var(--t-v7-display-56-lh53-ls2p24-band-head-family);
  font-weight: var(--t-v7-display-56-lh53-ls2p24-band-head-weight);
  font-size: var(--t-v7-display-56-lh53-ls2p24-band-head-size);
  line-height: var(--t-v7-display-56-lh53-ls2p24-band-head-line);
  letter-spacing: var(--t-v7-display-56-lh53-ls2p24-band-head-track);
  text-transform: var(--t-v7-display-56-lh53-ls2p24-band-head-case);
}
.footer-sign__note {
  margin: 0;
  font-family: var(--t-body-16-roman-lh24-ls0-family);
  font-weight: var(--t-body-16-roman-lh24-ls0-weight);
  font-size: var(--t-body-16-roman-lh24-ls0-size);
  line-height: var(--t-body-16-roman-lh24-ls0-line);
}
.footer-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 100%;
  min-block-size: var(--footer-group-h, auto);
  padding: 16px var(--v7-footer-group-pr) 0 17px;
}
.footer-group::after {
  content: "";
  position: absolute;
  inset-inline: 17px var(--v7-footer-group-pr);
  inset-block-start: 37px;
  block-size: 1px;
  background: var(--ink-field);
}
.footer-group__head {
  block-size: 22px;
  margin: 0;
  font-family: var(--t-display-14-lh13-ls0p56-family);
  font-weight: var(--t-display-14-lh13-ls0p56-weight);
  font-size: var(--t-display-14-lh13-ls0p56-size);
  line-height: var(--t-display-14-lh13-ls0p56-line);
  letter-spacing: var(--t-display-14-lh13-ls0p56-track);
}
.footer-group__links { margin: 0; padding: 0; list-style: none; }
.footer-group__links li + li { margin-block-start: 0.43px; }
.footer-group__link {
  display: block;
  padding-block: 2.8px;
  color: inherit;
  text-decoration: none;
  font-family: var(--t-body-16-roman-lh22-ls0-family);
  font-weight: var(--t-body-16-roman-lh22-ls0-weight);
  font-size: var(--t-body-16-roman-lh22-ls0-size);
  line-height: var(--t-body-16-roman-lh22-ls0-line);
}
.footer-group__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 0.15em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.footer-group__link:hover, .footer-group__link:focus-visible { text-decoration-color: currentColor; }
.footer__character {
  position: absolute;
  inset-inline-end: var(--footer-char-right);
  inset-block-end: var(--footer-char-bottom);
  inline-size: min(var(--v7-footer-char-w), 100%);
  aspect-ratio: 348 / 149;  /* the drawn box: 348 by 149 below 768, 548 by 243 from it */
  opacity: 0.71;
  transform: rotate(-1.28deg);
  overflow: hidden;  /* his drawing's frame (the breath's, 1.2.0) is a little wider than the box, as object-fit: cover drew it */
  pointer-events: none;
}
.footer__character-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* his breath (1.2.0, the breath in motion.css): his drawing's frame and the box the breath moves, from the design
   repository's scripts/breath-v7.py */
.footer__character .breath {
  --breath-frame: 1800 / 768;
  --breath-x: 44.3431%; --breath-y: 15.3846%; --breath-w: 36.2226%; --breath-h: 61.5385%;
  --breath-strip-x: 43.9781%; --breath-strip-y: 14.5299%; --breath-strip-w: 36.9526%; --breath-strip-h: 63.2479%;
}
.footer__copyright { margin: 0; }
.footer__running {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 48px 0 0;
  padding-block-start: 9px;
  font-family: var(--t-display-14-lh21-ls0p56-family);
  font-weight: var(--t-display-14-lh21-ls0p56-weight);
  font-size: var(--t-display-14-lh21-ls0p56-size);
  line-height: var(--t-display-14-lh21-ls0p56-line);
  letter-spacing: var(--t-display-14-lh21-ls0p56-track);
}
/* on the phone the two columns share the frame (the design's fill it at 390); from 768, the drawn column width */
@media (min-width: 768px) {
  .footer__body { grid-template-columns: repeat(2, minmax(0, var(--v7-footer-group-w))); }
  .footer-group { inline-size: min(var(--v7-footer-group-w), 100%); }
}
/* the sign beside the columns, two by two; the attendant under the sign, at its width */
@container (min-width: 702px) {
  .footer__body { grid-template-columns: min(var(--v7-footer-sign-w), 100%) repeat(2, minmax(0, var(--v7-footer-group-w))); column-gap: var(--v7-footer-col-gap); padding-block-end: var(--v7-footer-body-pb); }
  .footer-sign { grid-column: 1; grid-row: 1 / span 2; }
  /* the attendant under the sign, as the 768 frame draws him: his box turned 1.28 degrees, its bounds ending 1 px short
     of the sign's right edge, which puts his own box 1.25 px left of the frame's edge */
  .footer__character { inset-inline-start: -1.25px; inset-inline-end: auto; inset-block-end: 8px; inline-size: var(--v7-footer-sign-w); }
}
/* the four columns in one row beside the sign, the sign 300 px wide, 20 px between (the frame footer/1280) */
@container (min-width: 1060px) {
  .footer__body { grid-template-columns: 300px repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .footer-sign { grid-row: auto; inline-size: 300px; }
  .footer-group { inline-size: 100%; }
  .footer__character { inset-inline-start: auto; inset-inline-end: var(--footer-char-right); inset-block-end: var(--footer-char-bottom); inline-size: min(var(--v7-footer-char-w), 100%); }
  .footer-group::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 1px; background: var(--ink-field); }
}
@container (min-width: 1280px) {
  .footer__body { grid-template-columns: var(--v7-footer-sign-w) repeat(4, minmax(0, var(--v7-footer-group-w))); column-gap: var(--v7-footer-col-gap); padding-block-end: var(--v7-footer-body-pb); }
  .footer-group { inline-size: min(var(--v7-footer-group-w), 100%); }
  .footer-sign { grid-column: auto; inline-size: min(var(--v7-footer-sign-w), 100%); }
}
@media (min-width: 768px) {
  .footer { --footer-char-right: -26.5px; --footer-char-bottom: -4px; }
  .footer__character { aspect-ratio: 548 / 243; }
}
@media (min-width: 1024px) {
  .footer { --footer-char-right: -42.5px; --footer-char-bottom: -17px; }
}

/* The foundation page: a plain document on the field, generated from the tokens and the components. */
.foundation { display: grid; gap: var(--space-6); padding-block: var(--space-12) var(--space-16); }
.foundation__title { font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-84-66-55); line-height: 1; text-transform: uppercase; }
.foundation__head { margin-block-start: var(--space-8); padding-block-start: var(--space-4); border-block-start: 1px solid var(--ink-rule-field); font-family: var(--font-display); font-weight: 700; font-size: var(--band-head); line-height: 1; text-transform: uppercase; }
.foundation__line { max-inline-size: 42em; color: var(--ink-paper-dim); }
.foundation__inks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); }
.foundation__ink { display: grid; gap: var(--space-1); font-size: 0.875rem; }
.foundation__swatch { block-size: 4rem; border: 1px solid var(--ink-rule-field); }
.foundation__ink-name { font-family: var(--font-numeral); font-weight: var(--t-numeral-13-medium-weight); }
.foundation__ink-value, .foundation__ink-ratio, .foundation__ink-note { color: var(--ink-paper-dim); }
.foundation__types { display: grid; gap: var(--space-6); }
.foundation__type { display: grid; gap: var(--space-1); padding-block-end: var(--space-4); border-block-end: 1px solid var(--ink-rule-field); }
.foundation__type-specimen {
  font-family: var(--f);
  font-weight: var(--w);
  font-size: var(--s);
  line-height: var(--l);
  letter-spacing: var(--tr);
  text-transform: var(--c);
  overflow-wrap: anywhere;
}
.foundation__type-meta { font-size: 0.8125rem; color: var(--ink-paper-dim); overflow-wrap: anywhere; }
.foundation__spaces { display: grid; gap: var(--space-2); }
.foundation__space { display: flex; align-items: center; gap: var(--space-4); font-size: 0.875rem; }
.foundation__space-bar { block-size: 1rem; background: var(--ink-yellow); }
.foundation__layouts { display: grid; gap: var(--space-2); padding-inline-start: var(--space-6); color: var(--ink-paper-dim); }
.foundation__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); padding: var(--space-6); background: var(--ink-field-dim); }
.foundation__row--fields .field { max-inline-size: 20rem; }
.foundation__row--cards { background: var(--ink-red-photo); padding-block-end: var(--space-10); }
.foundation__fluid { inline-size: min(18.5rem, 100%); }

/* The frill (Figma V7 v7/frill): on the field, the attendant's head at the right and one line in a paper bubble
   beside it (a 2 px black rule, 14 px corners, the line in the display face at 95 percent), over two tyre tracks
   tilted across the band and running 120 px past both edges. The social size (since 2026-10-07) carries no attendant: the roadside and the big rig, at its drawn
   height (the roadside and big-rig components). Each track's box is the box of the track as tilted, as the design
   lays them out, so they stack as drawn; the tread is the drawn strip, black on white, at 38 percent over the
   field. */
.frill {
  --frill-pt: var(--v7-frill-pt);
  --frill-pr: var(--v7-frill-pr);
  --frill-pb: var(--v7-frill-pb);
  --frill-gap: var(--v7-frill-gap);
  --frill-bubble-top: var(--v7-frill-bubble-top);
  --frill-bubble-h: var(--v7-frill-bubble-h);
  --frill-bubble-px: var(--v7-frill-bubble-px);
  --frill-head-w: var(--v7-frill-head-w);
  --frill-head-h: var(--v7-frill-head-h);
  --frill-tracks-top: var(--v7-frill-tracks-top);
  --frill-tracks-gap: var(--v7-frill-tracks-gap);
  /* past both edges at any window: never shorter than the window plus what the design adds at 1,440 */
  --frill-track-1-w: max(var(--v7-frill-track-1-w), 100vw + 40px);
  --frill-track-2-w: max(var(--v7-frill-track-2-w), 100vw + 7px);
  --frill-track-h: var(--v7-frill-track-h);
  --frill-tilt: 2.06deg;
  --frill-track-o: 0.38;
  --frill-sin: 0.035945;
  --frill-cos: 0.999354;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--frill-gap);
  padding: var(--frill-pt) var(--frill-pr) var(--frill-pb) 0;
  overflow: hidden;
  background: var(--ink-field);
}
/* the social size (since 2026-10-07) carries the roadside and the big rig instead of the attendant: its drawn height */
.frill[data-size="social"] { display: block; block-size: var(--v7-social-frill-min-h); padding: 0; }
.frill__tracks {
  position: absolute;
  inset-block: 0;
  inset-inline: -120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: var(--frill-tracks-top);
  pointer-events: none;
}
.frill__track {
  --frill-track-w: var(--frill-track-1-w);
  position: relative;
  display: block;
  flex: none;
  inline-size: calc(var(--frill-track-w) * var(--frill-cos) + var(--frill-track-h) * var(--frill-sin));
  block-size: calc(var(--frill-track-w) * var(--frill-sin) + var(--frill-track-h) * var(--frill-cos));
}
/* the design overlaps the tracks' boxes on the desktop (a negative gap, which gap cannot take), so it is a margin */
.frill__track--2 { --frill-track-w: var(--frill-track-2-w); margin-block-start: var(--frill-tracks-gap); }
.frill__track::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--frill-track-w);
  block-size: var(--frill-track-h);
  background: url("/images/k-tracks-strip/k-tracks-strip.webp") center / cover no-repeat;
  background: image-set(url("/images/k-tracks-strip/k-tracks-strip.avif") type("image/avif"), url("/images/k-tracks-strip/k-tracks-strip.webp") type("image/webp")) center / cover no-repeat;
  opacity: var(--frill-track-o);
  transform: translate(-50%, -50%) rotate(var(--frill-tilt));
}
.frill__bubble {
  position: relative;
  /* it may shrink to its row and wrap (a reader's wider text spacing); at the drawn sizes its line fits on one */
  flex: 0 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--frill-bubble-h);
  margin-block-start: var(--frill-bubble-top);
  padding-inline: var(--frill-bubble-px);
  background: var(--ink-paper);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--ink-field);
}
.frill__line {
  margin: 0;
  white-space: normal;
  color: var(--ink-field);
  font-family: var(--t-v7-display-36-36-31-24-family);
  font-weight: var(--t-v7-display-36-36-31-24-weight);
  font-size: var(--t-v7-display-36-36-31-24-size);
  line-height: var(--t-v7-display-36-36-31-24-line);
  letter-spacing: var(--t-v7-display-36-36-31-24-track);
  /* CSS spaces the last letter too; Figma does not, so the bubble would hug 4 percent of an em wider */
  margin-inline-end: calc(-1 * var(--t-v7-display-36-36-31-24-track));
}
.frill__line[data-typing]::after { content: ""; }
.frill__head { position: relative; flex: none; inline-size: var(--frill-head-w); block-size: var(--frill-head-h); }
.frill__head-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The product's photographs (Figma V7 gallery (desktop) and gallery (strip)). From 1,024 px: a column of
   thumbnails (--v7-product-thumb-w by -thumb-h, 66 by 82 at 1440, --v7-product-thumb-gap apart, the current one
   ringed 2 px in red outside it) beside the stage, --v7-product-hero-gap away, which shows the current photograph
   at 4:5. Below it: the photographs as a row the reader swipes, each --v7-product-slide-w by -slide-h with
   --v7-product-slide-gap between, and the thumbnails in a row under it. The first photograph carries the lead clip:
   the centre glyph (--v7-product-play, a black disc at 55 percent) and the control in its lower right corner
   (--v7-product-transport-w by -h, black at 62 percent, --v7-product-transport-inset in), PLAY while it stands and
   STOP while it plays. */
.gallery { display: flex; flex-direction: column; gap: var(--v7-product-hero-gap); }
.gallery__slides {
  display: flex;
  gap: var(--v7-product-slide-gap);
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__slides::-webkit-scrollbar { display: none; }
.gallery__slide {
  position: relative;
  flex: none;
  inline-size: var(--v7-product-slide-w);
  block-size: var(--v7-product-slide-h);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--ink-field-dim);
}
.gallery__open { display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__open:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; }
.gallery__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.gallery[data-playing] .gallery__video { opacity: 1; }
.gallery__play-rail { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.gallery__play {
  display: grid;
  place-items: center;
  inline-size: var(--v7-product-play);
  block-size: var(--v7-product-play);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink-field) 55%, transparent);
  cursor: pointer;
  pointer-events: auto;
}
.gallery__play:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.gallery__play-glyph { inline-size: var(--v7-product-glyph-w); block-size: var(--v7-product-glyph-h); margin-inline-start: 6%; fill: var(--ink-paper); transition: fill var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .gallery__play:hover .gallery__play-glyph { fill: var(--ink-yellow); } }
.gallery[data-playing] .gallery__play-rail { display: none; }
.gallery__transport {
  position: absolute;
  inset-block-end: var(--v7-product-transport-inset);
  inset-inline-end: var(--v7-product-transport-inset);
  display: grid;
  place-items: center;
  inline-size: var(--v7-product-transport-w);
  block-size: var(--v7-product-transport-h);
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink-field) 62%, transparent);
  color: var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
}
.gallery__transport:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.gallery__transport { transition: color var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .gallery__transport:hover { color: var(--ink-yellow); } }
.gallery__transport-stop { display: none; }
.gallery[data-playing] .gallery__transport-play { display: none; }
.gallery[data-playing] .gallery__transport-stop { display: inline; }
/* the row is as wide as its thumbnails (Figma sizes it to them); its window scrolls it, 2 px of room kept round it
   for the current thumbnail's rule */
.gallery__thumbs-window { margin: -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs-window::-webkit-scrollbar { display: none; }
.gallery__thumbs { display: flex; gap: var(--v7-product-thumb-gap); inline-size: max-content; margin: 0; padding: 0; list-style: none; }
.gallery__thumb { display: block; flex: none; inline-size: var(--v7-product-thumb-w); block-size: var(--v7-product-thumb-h); padding: 0; border: 0; background: var(--ink-field-dim); cursor: pointer; }
/* the current thumbnail's 2 px ring and the pointer's ring are a shadow round it, fading over --motion-hover both
   ways; the focus ring is the outline, at once both ways, and stands alone while it shows */
.gallery__thumb { box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .gallery__thumb:hover:not([aria-current="true"]) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-paper) 50%, transparent); } }
.gallery__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--ink-red-ink); }
.gallery__thumb:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; box-shadow: 0 0 0 2px transparent; }
.gallery__thumb-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  /* the desktop: the thumbnails in a column beside the stage, which shows the current photograph */
  .gallery { flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; }
  .gallery__slides { position: relative; isolation: isolate; display: block; flex: 1 1 0; overflow: visible; }
  .gallery__slide { display: none; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; }
  .gallery__slide[data-current] { display: block; }
  .gallery__thumbs-window { flex: none; margin: 0; padding: 0; overflow: visible; }
  .gallery__thumbs { flex-direction: column; }
}
/* The crossfade (1.1.0), from 1,024 px: a thumbnail's photograph fades in over the stage's last over
   --motion-crossfade, and the last stays under it, out of the flow, until it has (display's discrete transition), so
   the stage never changes size. Nothing moves under reduced motion. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .gallery__slide { position: absolute; inset: 0; transition: display var(--motion-crossfade) allow-discrete; }
  .gallery__slide[data-current] { position: relative; z-index: 1; transition: opacity var(--motion-crossfade) var(--ease-in-out); }
  @starting-style { .gallery__slide[data-current] { opacity: 0; } }
}

/* The page a gift card's recipient opens (Figma V7 gift-card-recipient/1440): on the field, without the header or the
   footer, one centred column 32 px apart: the badge (180 by 120), YOUR GIFT CARD, the card's face 640 px wide at most,
   what it holds, its code in a paper box 520 px wide at most in the numeral face widely spaced, COPY CODE and SHOP THE
   SHELF side by side (one above the other where they do not fit), and a line in the dim paper. */
.gift-recipient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  min-block-size: 100svh;
  padding: 64px var(--page-margin) 96px;
  background: var(--ink-field);
  color: var(--ink-paper);
  text-align: center;
}
.gift-recipient__badge { display: block; inline-size: 180px; block-size: 120px; }
.gift-recipient__head { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.gift-recipient__card { display: block; inline-size: min(640px, 100%); block-size: auto; aspect-ratio: 16 / 10; }
.gift-recipient__balance { inline-size: 100%; margin: 0; font-family: var(--font-body); font-size: 1.25rem; line-height: 1.4; }
.gift-recipient__copy { display: contents; }
.gift-recipient__code { box-sizing: border-box; inline-size: min(520px, 100%); margin: 0; padding: 20px 16px; background: var(--ink-paper); box-shadow: inset 0 0 0 2px var(--ink-field); color: var(--ink-field); }
.gift-recipient__code-text { font-family: var(--font-numeral); font-weight: var(--t-numeral-13-medium-weight); font-size: var(--v7-type-24-22-19); line-height: 1.2; letter-spacing: 0.08em; }
.gift-recipient__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; inline-size: 100%; }
.gift-recipient__note { inline-size: 100%; margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.4; }

/* The header (Figma V7 v7/chrome/header): 106 px of field under the announcement bar. The wordmark (192 by 26) sits
   24 px down; 12 px under it the row: the nav (a rule, then 12 px, then the labels, 24 px apart, in the display face
   at the v7/type/18-18-16 size) and, 185 px wide at the right, the tools (a rule from 24 px in, then SEARCH, ACCOUNT
   and CART 13 px down in the display/15 style). On the phone the labels step back into the drawer and the first
   reads MENU; from 768 px the seven show, BRANDS set apart by a bar. An open category's label carries a 2 px paper
   rule under it; open search reads CLOSE. The panels hang from the bar's foot (y 106), the scrim under them. */
/* The bar stays (1.1.0): the header sticks to the window's top once the announcement bar has scrolled away, on its
   own solid field (never glass), its panels hanging from it wherever it is. data-bar (js/ss-header.js) says how: it
   ships "idle" (1.2.0): it slides up out of view once the reader stops scrolling and comes back on any scroll ("always"
   would keep it shown). The slide is a long one (106 px), so it takes the slide tokens, out on --ease-slide-out over
   --motion-slide-out and back on --ease-slide-in over --motion-slide-in: on the settle's 200 ms ease-out a third of the
   way went in the first frame (measured per 60 Hz frame, 2026-10-09: 0.34 of the travel away, 0.30 back; on these
   0.09 and 0.17). At once under reduced motion. Targets scroll clear of it: everything outside the header carries a 106 px
   scroll margin (global.css), so a focus or a jump lands below the bar; the header's own elements carry none, so the
   keyboard's focus entering the stuck bar does not scroll the page (a scroll padding on the root would). */
.header { position: sticky; inset-block-start: 0; z-index: var(--z-header); display: block; transition: translate var(--motion-slide-in) var(--ease-slide-in); }
.header[data-bar-hidden] { translate: 0 -100%; transition-duration: var(--motion-slide-out); transition-timing-function: var(--ease-slide-out); }
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }
.header, .header * { scroll-margin-block-start: 0; }
.header__bar { block-size: 106px; overflow: hidden; background: var(--ink-field); }
.header__inner { padding-block-start: 24px; }
.header__logo { display: block; inline-size: 192px; block-size: 26px; }
.header__logo-img { inline-size: 192px; block-size: 26px; object-fit: cover; }
/* the row stands its two groups on their first baselines, so SEARCH, ACCOUNT and CART (15 px) stand on the labels'
   baseline (18 px; MENU's, 16 px, on the phone) at every width (2026-10-08: they stood 6 px high). The nav, whose
   words sit deepest, keeps the row's top, so its rule and the tools' rule, drawn on the row, stay level */
.header__row { position: relative; display: flex; align-items: baseline; margin-block-start: 12px; }
.header__nav { flex: 1 1 auto; min-inline-size: 0; padding-block-start: 12px; border-block-start: 1px solid var(--ink-rule-field); }
/* the gap is v7/nav/gap (1.2.0): 24 px, 6 at 768, where the labels' carets need the room */
.header__list { display: flex; align-items: center; gap: var(--v7-nav-gap); block-size: 26px; margin: 0; padding: 0; list-style: none; }
.header__item { display: flex; align-items: center; block-size: 26px; }
.header__item--wide { display: none; }
/* a category's label opens its menu under the pointer: its hover area reaches half way across the gaps on both
   sides and down to the menu's top, so a pointer gliding along the labels or down into the menu never crosses
   ground that closes it (1.1.0: before it, a slow glide closed and reopened the menu in each gap) */
.header__item--wide[data-menu] { position: relative; }
.header__item--wide[data-menu]::before { content: ""; position: absolute; inset-inline: calc(var(--v7-nav-gap) / -2); inset-block: -12px -6px; }
.header__label {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  text-decoration: none;
  cursor: pointer;
}
.header__label-text {
  font-family: var(--t-v7-display-18-18-18-16-family);
  font-weight: var(--t-v7-display-18-18-18-16-weight);
  font-size: var(--t-v7-display-18-18-18-16-size);
  line-height: var(--t-v7-display-18-18-18-16-line);
  letter-spacing: var(--t-v7-display-18-18-18-16-track);
  text-transform: var(--t-v7-display-18-18-18-16-case);
  white-space: nowrap;
}
/* the open menu's bar under its label; under a mouse a label or a tool grows the same bar from its centre over
   --motion-hover and takes it back the same way (under reduced motion it fades in, without growing) */
.header__label::after, .header__tool::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--ink-paper);
  scale: 0 1;
  transition: scale var(--motion-hover) var(--ease-in-out);
}
.header__item:has(> .header__caret[aria-expanded="true"]) > .header__label::after { scale: 1 1; }
@media (hover: hover) { .header__label:hover::after, .header__tool:hover::after { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
  .header__label::after, .header__tool::after { scale: 1 1; opacity: 0; transition: opacity var(--motion-hover) var(--ease-in-out); }
  .header__item:has(> .header__caret[aria-expanded="true"]) > .header__label::after { opacity: 1; }
}
/* the caret beside a category's label (1.2.0, Figma v7/chrome/caret): a 24 by 26 target in the label's ink that opens
   the menu (the label itself goes to the category); its chevron turns over while the menu is open. Positioned, as the
   label is, so it paints over its item's hover area (the item's ::before), which would otherwise take its presses */
.header__caret { position: relative; display: grid; flex: none; place-items: center; inline-size: 24px; block-size: 26px; padding: 0; border: 0; background: none; color: var(--ink-paper); cursor: pointer; }
.header__caret-glyph { overflow: visible; transition: rotate var(--motion-hover) var(--ease-in-out); }
.header__caret[aria-expanded="true"] .header__caret-glyph { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) { .header__caret-glyph { transition: none; } }
@media (hover: hover) and (prefers-reduced-motion: reduce) { .header__label:hover::after, .header__tool:hover::after { opacity: 1; } }
.header__divider { display: block; inline-size: 1px; block-size: 19px; margin-inline: 8px; background: var(--ink-paper-dim); }
.header__tools {
  display: flex;
  flex: none;
  justify-content: space-between;
  /* 196 since 1.2.0: CART took its count (CART 2), and the group grew leftward by the label's growth so its gaps
     hold and CART keeps the content edge */
  inline-size: 196px;
  block-size: 28px;
  padding-block-start: 13px;
  padding-inline-start: 24px;
}
.header__tools::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inline-size: 172px;
  inset-block-start: 0;
  block-size: 1px;
  background: var(--ink-rule-field);
}
.header__tool {
  position: relative;
  display: block;
  block-size: 25px;
  margin-block: -5px;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--t-display-15-lh15-ls0p6-family);
  font-weight: var(--t-display-15-lh15-ls0p6-weight);
  font-size: var(--t-display-15-lh15-ls0p6-size);
  line-height: var(--t-display-15-lh15-ls0p6-line);
  letter-spacing: var(--t-display-15-lh15-ls0p6-track);
  white-space: nowrap;
}
/* ACCOUNT (release 1.2.1): one wrapper in the tools' second place, its box the word's. Below 768 px the link to the
   platform's sign-in; from 768 the button that opens the account popover (its own stylesheet), the bar's rule
   under it while the popover is open, as an open category's label carries */
.header__account { position: relative; display: block; }
.header__account-toggle { display: none; }
/* the popover needs the header's script: until ss-header is defined, ACCOUNT stays the link at every width */
@media (min-width: 768px) {
  .header:defined .header__account-link { display: none; }
  .header:defined .header__account-toggle { display: block; }
  .header__account-toggle[aria-expanded="true"]::after { scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) { .header__account-toggle[aria-expanded="true"]::after { opacity: 1; } }
/* CART's count (1.2.0): the figure, seen and not read, its own box so the pump counter's roll can lie over it
   (js/ss-roll.js); a reader hears the count's words, visually hidden beside it */
.header__cart-figure { display: inline-block; }
/* the drawn 15 px words take a 25 px target (WCAG 2.2's 24): 5 px of padding above and below, taken back by the
   margins, so the words sit where the design draws them */
.header__search-toggle { display: grid; }
.header__tool-open, .header__tool-close { grid-area: 1 / 1; }
.header__tool-close { justify-self: end; visibility: hidden; }
/* SEARCH reads CLOSE while the panel is open, from 768 px; on the phone search opens in the drawer, which has its own
   CLOSE, and the header keeps reading SEARCH as the design draws it */
@media (min-width: 768px) {
  .header__search-toggle[aria-expanded="true"] .header__tool-open { visibility: hidden; }
  .header__search-toggle[aria-expanded="true"] .header__tool-close { visibility: visible; }
}
/* the panels hang from the bar's foot. Below 768 px they hold only the phone's drawer and are its fixed edge, clipped at
   the bar's foot, so the drawer slides out from behind the bar with only its translate moving; from 768 nothing is
   clipped (the menus and search) */
.header__panels { position: absolute; inset-inline: 0; inset-block-start: 106px; overflow: clip; }
@media (min-width: 768px) { .header__panels { overflow: visible; } }
/* the scrim covers the page under the bar, not the announcement bar or the header itself */
.header__scrim {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 106px;
  block-size: 100vh;
  z-index: -1;
  background: color-mix(in srgb, var(--ink-field) 50%, transparent);
}
/* one panel at a time (1.1.0): a panel replaced by another (a label to the next, a menu to search) goes at once, so
   the two never stand together; only the last to close fades out (each panel's own rule). The scrim fades in and out
   with search and the drawer over --motion-panel. Nothing moves under reduced motion. */
.header[data-open] .mega-menu[hidden], .header[data-open] .search-panel[hidden] { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .header__scrim { transition: opacity var(--motion-panel) var(--ease-out); }
  @starting-style { .header__scrim { opacity: 0; } }
  .header__scrim[hidden] { opacity: 0; pointer-events: none; transition: opacity var(--motion-panel) var(--ease-in), display var(--motion-panel) allow-discrete; }
}
@media (min-width: 768px) {
  .header__item--phone { display: none; }
  .header__item--wide { display: flex; }
}

/* The hero (Figma V7 hero). Below 768 px (hero/stacked): the photograph 293 px tall (--v7-hero-photo-h) with the
   controls over its foot, 16 px up, on the gutters; then the card, flat and full width (v7/hero/card layout=flat).
   From 768 (hero/composed): the band 763 px tall and the photograph filling it edge to edge; the taped card at the
   gutter, 60 px down (--v7-hero-card-top), tilted 1.15 degrees with its four tapes and its shadow; the controls 40 px
   above the foot. From 1600 (hero/print, option D, 2026-10-08) the photograph is a print, as the site's other
   photographs are: on the page margin, 24 px from the band's top and foot, in a 16 px paper border, with no fade; the
   card centred on it 80 px inside the margin; the controls along its foot, 80 px inside the margin.
   The controls: 44 px buttons with no ground, the glyphs in paper with a 2 px outline of the field ink at 30 percent
   (field-30), yellow under a mouse; the five wrenches between them, the current one red (option C, 2026-10-07).
   From 1600 each photograph keeps its own focal point (--hero-focal), so its person's head stays in frame. */
.hero { position: relative; background: var(--ink-field); }
.hero__reel { position: relative; display: block; block-size: var(--v7-hero-photo-h); }
.hero__photos { position: absolute; inset: 0; overflow: hidden; }
/* The next photograph fades up over the last in 600 ms (js/ss-reel.js changes them). */
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-in-out), visibility 0s linear 600ms; }
.hero__slide[data-current] { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease-in-out), visibility 0s; }
.hero__reel[data-instant] .hero__slide { transition: none; }
.hero__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* from 1600 the band is widest against the photograph: each keeps its focal point, so its person's head stays in
   frame at large widths (1.1.0; centred, a 1,920 px window cut the lead photograph's head) */
@media (min-width: 1600px) { .hero__image { object-position: 50% var(--hero-focal, 50%); } }

.hero__controls {
  position: absolute;
  inset-inline: var(--gutter);
  inset-block-end: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  block-size: 44px;
}
.hero__controls[hidden] { display: none; }
.hero__button {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* over a photograph the yellow ring has a black band inside it, so it reads on any picture */
.hero__button:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--ink-field); }
/* the design's glyphs: paper with a 2 px field outline outside the shape (a 4 px stroke under the fill) */
.hero__glyph { display: block; overflow: visible; fill: var(--ink-paper); stroke: var(--ink-field-30); stroke-width: 4px; stroke-linejoin: miter; paint-order: stroke; transition: fill var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .hero__button:hover .hero__glyph { fill: var(--ink-yellow); } }
.hero__glyph--pause { overflow: hidden; }  /* its 16 by 18 frame clips the bars' outer outlines, as drawn */
.hero__glyph--play { display: none; margin-inline-start: 3px; }
.hero__reel[data-paused] .hero__glyph--pause { display: none; }
.hero__reel[data-paused] .hero__glyph--play { display: block; }

/* the indicators (v7/hero/wrench): one wrench per photograph, centred between PREVIOUS and NEXT,
   --v7-hero-wrench-w by -h and --v7-hero-wrench-gap apart; played in paper, the current one in SS/Red, upcoming in
   paper at 35 percent (paper-35), each with the controls' 2 px outline outside it (field-30), at every size; a wrench
   changing state fades to its new ink */
.hero__wrenches { flex: 1 1 0; display: flex; justify-content: center; align-items: center; gap: var(--v7-hero-wrench-gap); min-inline-size: 0; }
.hero__wrench { position: relative; flex: none; display: block; inline-size: var(--v7-hero-wrench-w); block-size: var(--v7-hero-wrench-h); }
.hero__wrench-glyph { display: block; inline-size: 100%; block-size: 100%; overflow: visible; fill: var(--ink-paper); stroke: var(--ink-field-30); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; transition: fill var(--motion-hover) var(--ease-in-out); vector-effect: non-scaling-stroke; }
.hero__wrench[data-state="upcoming"] .hero__wrench-glyph { fill: var(--ink-paper-35); }
/* the timer: the current wrench carries the hold as an animation that draws nothing; its end advances the reel, so
   whatever stops it (the pointer, the keyboard's focus, a hidden tab, the pause, the page's motion control) stops the reel */
.hero__reel[data-playing] .hero__wrench[data-state="current"] { animation: hero-hold var(--reel-hold, 5s) linear forwards; }
.hero__reel[data-playing]:is([data-held], [data-paused]) .hero__wrench[data-state="current"] { animation-play-state: paused; }
@keyframes hero-hold { from { opacity: 1; } to { opacity: 1; } }
/* the timer drawn (1.2.0): the current wrench fills SS/Red from the left over the photograph's hold, over the upcoming
   ink. Its fill is a layer in the glyph's own shape (a mask of the glyph's path, --wrench-mask, which the markup sets on
   the row from the same path the glyph draws) holding a red bar that grows by transform alone, so it keeps its pace on
   the compositor while the page is busy; it starts and stops with the timer above (held, paused) and the reel advances
   on the timer, not on it. Where the reel is not playing (stopped at load: reduced motion, or the reader's own choice
   remembered) the bar stands whole and the current wrench is red, as drawn; stopped while it plays, the bar stands where
   it was. Under reduced motion it never runs, as the counts set at once there: played by hand, the reel changes its
   photographs and the current wrench stands whole red. The glyph keeps its outline; under the layer its own ink is
   clear, so the upcoming ink is painted once. A wrench changing state fades to its new ink, the layer with it. In
   forced colours (a contrast theme) the layer keeps its inks, as the glyphs keep theirs (a theme forces backgrounds,
   not an SVG's fill): it would otherwise take the theme's ground, a black bar in a dark theme and a near white one on
   the photograph in a light theme, where the current wrench was red. */
.hero__wrench-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  forced-color-adjust: none;
  background: var(--ink-paper-35);
  -webkit-mask: var(--wrench-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--wrench-mask) 0 0 / 100% 100% no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-hover) var(--ease-in-out), visibility 0s linear var(--motion-hover);
}
.hero__wrench-fill::before { content: ""; position: absolute; inset: 0; background: var(--ink-red-ink); transform-origin: 0 50%; }
.hero__wrench[data-state="current"] .hero__wrench-glyph { fill: transparent; }
.hero__wrench[data-state="current"] .hero__wrench-fill { opacity: 1; visibility: visible; transition: opacity var(--motion-hover) var(--ease-in-out); }
@media (prefers-reduced-motion: no-preference) {
  .hero__reel[data-playing] .hero__wrench[data-state="current"] .hero__wrench-fill::before { animation: hero-fill var(--reel-hold, 5s) linear forwards; }
  .hero__reel[data-playing]:is([data-held], [data-paused]) .hero__wrench[data-state="current"] .hero__wrench-fill::before { animation-play-state: paused; }
}
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the card, flat (below 768) */
.hero__card-stack { position: relative; }
.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v7-hero-card-gap);
  padding: var(--v7-hero-card-pt) var(--v7-hero-card-pr) var(--v7-hero-card-pb) var(--v7-hero-card-pl);
  overflow: hidden;
  color: var(--ink-paper);
  /* the texture a shade darker under the words (WCAG 1.4.3): a 12 percent layer of the field ink over it, about 5:1 */
  background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 12%, transparent), color-mix(in srgb, var(--ink-field) 12%, transparent)),
    var(--ink-red-ink) url("/images/card-red-w1100/card-red-w1100.webp") center / cover no-repeat;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/card-red-w1100/card-red-w1100.avif") type("image/avif"))) {
  .hero-card {
    background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 12%, transparent), color-mix(in srgb, var(--ink-field) 12%, transparent)),
    var(--ink-red-ink) image-set(url("/images/card-red-w1100/card-red-w1100.avif") type("image/avif"), url("/images/card-red-w1100/card-red-w1100.webp") type("image/webp")) center / cover no-repeat;
  }
}
/* the card is drawn at a fixed size per layout, so the type of its heading and its button steps with it (its
   paddings and gaps are stepped tokens): between the drawn widths the words keep their place against the badge */
.hero-card { --t-v7-display-40-40-34-30-size: 1.875rem; --t-v7-display-20-20-18-16-size: 1rem; }
@media (min-width: 768px) { .hero-card { --t-v7-display-40-40-34-30-size: 2.125rem; --t-v7-display-20-20-18-16-size: 1.125rem; } }
@media (min-width: 1024px) { .hero-card { --t-v7-display-40-40-34-30-size: 2.5rem; --t-v7-display-20-20-18-16-size: 1.25rem; } }
.hero-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px solid var(--ink-keyline);
  opacity: 0.55;
  pointer-events: none;
}
.hero-card__badge {
  position: absolute;
  inset-block-start: var(--v7-hero-badge-top);
  inset-inline-end: var(--v7-hero-badge-right);
  inline-size: var(--v7-hero-badge-w);
  block-size: var(--v7-hero-badge-h);
}
/* the whole badge inside the card's top right, as the design draws it */
.hero-card__badge-img { display: block; inline-size: 100%; block-size: 100%; }
.hero-card__title { display: flex; flex-direction: column; gap: var(--v7-hero-title-gap); align-self: stretch; }
.hero-card__kicker {
  margin: 0;
  font-family: var(--t-v7-archive-16-regular-family);
  font-weight: var(--t-v7-archive-16-regular-weight);
  font-size: var(--t-v7-archive-16-regular-size);
  line-height: var(--t-v7-archive-16-regular-line);
  letter-spacing: var(--t-v7-archive-16-regular-track);
}
.hero-card__head {
  margin: 0;
  font-family: var(--t-v7-display-40-40-34-30-family);
  font-weight: var(--t-v7-display-40-40-34-30-weight);
  font-size: var(--t-v7-display-40-40-34-30-size);
  line-height: var(--t-v7-display-40-40-34-30-line);
  letter-spacing: var(--t-v7-display-40-40-34-30-track);
}
/* the rule shows 320 px long: the design's 120 px frame around it does not clip it */
/* the phone's line break in the head, which the wider layouts do not draw */
@media (min-width: 768px) { .hero-card__break { display: none; } }
.hero-card__rule { display: block; flex: none; inline-size: 320px; max-inline-size: 100%; block-size: 4px; margin-block-end: var(--v7-hero-rule-after); background: var(--ink-paper); }
.hero-card__visit { display: flex; flex-direction: column; gap: var(--v7-hero-visit-gap); align-self: stretch; }
.hero-card__visit1 {
  margin: 0;
  font-family: var(--t-v7-archive-19-family);
  font-weight: var(--t-v7-archive-19-weight);
  font-size: var(--t-v7-archive-19-size);
  line-height: var(--t-v7-archive-19-line);
}
.hero-card__visit-tail { display: flex; flex-direction: column; gap: var(--v7-hero-visit-tail-gap); }
.hero-card__visit2, .hero-card__visit3 {
  margin: 0;
  font-family: var(--t-v7-archive-16-family);
  font-weight: var(--t-v7-archive-16-weight);
  font-size: var(--t-v7-archive-16-size);
  line-height: var(--t-v7-archive-16-line);
}
.hero-card__action {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 168px;
  block-size: 48px;
  margin-block-start: var(--v7-hero-action-top);
  margin-inline-start: var(--v7-hero-action-left);
  color: var(--ink-paper);
  background: var(--ink-field);
  text-decoration: none;
  font-family: var(--t-v7-display-20-20-18-16-family);
  font-weight: var(--t-v7-display-20-20-18-16-weight);
  font-size: var(--t-v7-display-20-20-18-16-size);
  line-height: var(--t-v7-display-20-20-18-16-line);
  letter-spacing: var(--t-v7-display-20-20-18-16-track);
}
.hero-card__action { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 0.15em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.hero-card__action:hover { text-decoration-color: currentColor; }
.hero-card__action:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.hero-card__tape { display: none; }

/* composed: the photograph fills the band, the taped card over it */
@media (min-width: 768px) {
  /* the card and the controls stand on the page's margin: the gutter up to 1920, the content column's edge above */
  /* the drawn height is the least: with a reader's wider text spacing the band grows with its card, which keeps clear
     of the controls (40 px from the foot, 44 px tall, 16 px of air) */
  .hero { block-size: auto; min-block-size: var(--v7-hero-h); padding: var(--v7-hero-card-top) var(--page-margin) calc(var(--space-10) + 60px); overflow: hidden; }
  .hero__reel { position: absolute; inset: 0; block-size: auto; }
  .hero__controls { inset-inline: var(--page-margin); inset-block-end: var(--space-10); }
  .hero__card-stack { inline-size: fit-content; }
  .hero-card {
    inline-size: var(--v7-hero-card-w);
    margin-block-start: calc(var(--v7-hero-card-w) * 0.02007);  /* the tilt lifts the card's right corner to the stack's top */
    transform-origin: 0 0;
    transform: rotate(-1.15deg);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ink-field) 34%, transparent);
  }
  .hero-card__tape { position: absolute; display: block; inline-size: 104px; block-size: 28px; transform-origin: 0 0; pointer-events: none; }
  .hero-card__tape--tl { inset-inline-start: -34.28px; inset-block-start: 32.48px; transform: rotate(-29.18deg); }
  .hero-card__tape--tr { inset-inline-start: calc(var(--v7-hero-card-w) - 63.82px); inset-block-start: -15.49px; transform: rotate(20.79deg); }
  .hero-card__tape--bl { inset-inline-start: -14.89px; inset-block-start: 457.91px; transform: rotate(41.03deg); }
  .hero-card__tape--br { inset-inline-start: calc(var(--v7-hero-card-w) + 46.68px); inset-block-start: 500.52px; transform: rotate(149.23deg); }
}

/* the print (hero/print, from 1600): the photograph on the page margin and 40 px from the band's top and foot, its 16 px
   paper border drawn outside it (so its box is the photograph's, as the design's is); the card centred on it between a
   40 px top and a foot that keeps it clear of the controls (40 px, 44 px tall, 16 px of air), so a reader's wider text
   spacing moves it up before the band grows; the card and the controls 80 px inside the margin */
@media (min-width: 1600px) {
  .hero {
    display: grid;
    grid-template-rows: minmax(40px, 1fr) auto minmax(calc(var(--space-10) + 60px), 1fr);
    padding: 0 calc(var(--page-margin) + 80px);
  }
  .hero__card-stack { grid-row: 2; }
  .hero__photos { inset: 40px calc(var(--page-margin) + 16px); box-shadow: 0 0 0 16px var(--ink-paper); }
  .hero__controls { inset-inline: calc(var(--page-margin) + 80px); }
}

/* The tape: duct tape, drawn in code at the four places the design draws the tape and
   at its size, 104 by 28 px, cut clean at its ends: a woven cloth under a grey film, its weave as fine gradients,
   its grain as noise, a crease across it. Its colours are the tape tokens (css/tokens.css); the noise is an SVG
   turbulence filter, drawn by the browser, so no image is loaded. */
@media (min-width: 768px) {
  .hero-card__tape {
    opacity: 1;
    background:
      linear-gradient(118deg, transparent 38%, color-mix(in srgb, var(--ink-paper) 22%, transparent) 44%, color-mix(in srgb, var(--ink-field) 10%, transparent) 50%, transparent 56%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(180deg, color-mix(in srgb, var(--ink-paper) 35%, transparent) 0%, transparent 22%, transparent 80%, color-mix(in srgb, var(--ink-field) 12%, transparent) 100%),
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink-field) 14%, transparent) 0 1px, transparent 1px 2.4px),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink-paper) 16%, transparent) 0 1px, color-mix(in srgb, var(--ink-field) 5%, transparent) 1px 1.6px, transparent 1.6px 2.4px),
      linear-gradient(180deg, var(--tape-duct-1) 0%, var(--tape-duct-2) 28%, var(--tape-duct-3) 52%, var(--tape-duct-4) 78%, var(--tape-duct-5) 100%);
    box-shadow: 0 1.5px 2px color-mix(in srgb, var(--ink-field) 55%, transparent), inset 0 0 0 0.5px color-mix(in srgb, var(--ink-paper) 25%, transparent);
  }
}

/* The hero's layouts (release 1.2.1; Figma "Promo layouts V7": hero/<layout>/1440 and its 390 instance). One layout
   for the whole hero (data-layout on .hero): the reel of five photographs and its controls stay in every one; what
   stands over them or beside them changes. card-left is the homepage's own (the rules above). The drawn widths are 390
   and 1440; 768 and 1920 follow the system (the type fluid between the drawn sizes, the arrangements as at 1440). The
   controls keep clear of what each layout puts on the photographs' foot.

   card-right: the taped card on the right gutter (the homepage card's mirror), 480 px of photograph on a phone.
   sale: the taped card in yellow, the words in the field ink, the sale burst over its lower right corner (turned 8
     degrees); on a phone the burst stands on the photograph's lower right, 420 px of photograph.
   centred: the words centred over the photographs under the field at 55 percent, the action the system's button.
   split: the photographs on the left half, the words on the card's red stock on the right, a 120 px paper rule
     under the head, the action black; on a phone the stock under the photograph.
   strip: the black sign strip along the photographs' foot under a 4 px yellow rule: the kicker in yellow over the
     head, the line (from 768) and the action.
   product: the words on the left over the field at 38 percent, one product's own card on the right gutter, taped and
     turned 1.4 degrees, SHOP IT under it to the product's page; on a phone the card stands flat under the words.
   Nothing here moves: the reel's crossfade and the card's settle are the rules above. */

/* the words' parts, shared by centred, split, strip and product */
.hero__kicker { margin: 0; font-family: var(--font-archive); font-weight: 400; font-size: 0.9375rem; line-height: 1.2222; }
.hero__head { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.0625rem; }
.hero__line { margin: 0; font-family: var(--font-archive); font-weight: 700; font-size: 1.0625rem; line-height: 1.4118; }
.hero__rule { display: block; inline-size: 96px; block-size: 4px; background: var(--ink-paper); }
.hero__action, .hero__shop { inline-size: 100%; }
.hero__scrim { display: none; }
@media (min-width: 768px) {
  .hero__kicker { font-size: 1.125rem; }
  .hero__line { font-size: 1.25rem; line-height: 1.2; }
  .hero__rule { inline-size: 120px; }
}

/* ---- card-right ---------------------------------------------------------------------------------------------- */
.hero[data-layout="card-right"] .hero__reel { block-size: 480px; }
@media (min-width: 768px) {
  .hero[data-layout="card-right"] .hero__reel { block-size: auto; }
  /* the tilt (about the card's top left corner) swings its foot right by its height times sin 1.15 degrees, about 2.2
     percent of its width at the card's proportions: the stack stands that far in, so the tilted card's corner meets the
     margin as the design draws it (10.4 px at 1440) */
  .hero[data-layout="card-right"] .hero__card-stack { margin-inline: auto calc(var(--v7-hero-card-w) * 0.0221); }
}
@media (min-width: 1600px) { .hero[data-layout="card-right"] .hero__card-stack { justify-self: end; } }

/* ---- sale ---------------------------------------------------------------------------------------------------- */
.hero-card[data-ground="yellow"] { background: var(--ink-yellow); color: var(--ink-field); }
.hero-card[data-ground="yellow"] .hero-card__action { background: var(--ink-field); color: var(--ink-paper); }
.hero[data-layout="sale"] .hero__reel { block-size: 420px; }
.hero[data-layout="sale"] .hero__card-stack > .burst { position: absolute; z-index: 1; inset-block-start: calc(-12px - var(--v7-sales-sale-size)); inset-inline-end: 12px; }
@media (min-width: 768px) {
  .hero[data-layout="sale"] .hero__reel { block-size: auto; }
  .hero[data-layout="sale"] .hero__card-stack > .burst {
    inset-block-start: calc(100% - var(--v7-sales-sale-size) / 2);
    inset-inline: calc(var(--v7-hero-card-w) - var(--v7-sales-sale-size) * 0.53) auto;
    rotate: -8deg;
  }
}

/* ---- centred ------------------------------------------------------------------------------------------------- */
.hero[data-layout="centred"] .hero__reel { block-size: 720px; }
.hero[data-layout="centred"] .hero__scrim { position: absolute; inset: 0; z-index: 1; display: block; background: color-mix(in srgb, var(--ink-field) 55%, transparent); pointer-events: none; }
.hero[data-layout="centred"] .hero__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding-inline: var(--gutter);
  color: var(--ink-paper);
  text-align: center;
  pointer-events: none;
}
.hero[data-layout="centred"] .hero__copy > * { pointer-events: auto; }
.hero[data-layout="centred"] .hero__head { font-size: clamp(2.875rem, 2.2714rem + 2.4762vw, 4.5rem); line-height: 1.0435; }
.hero[data-layout="centred"] .hero__controls { z-index: 3; }
@media (min-width: 768px) {
  .hero[data-layout="centred"] { display: flex; align-items: center; justify-content: center; padding-block: 0; }
  .hero[data-layout="centred"] .hero__reel { block-size: auto; }
  .hero[data-layout="centred"] .hero__copy { position: relative; inset: auto; gap: 18px; inline-size: min(820px, 100%); padding-inline: 0; }
  .hero[data-layout="centred"] .hero__action { inline-size: 260px; block-size: 64px; margin-block-start: 8px; }
}
@media (min-width: 1024px) { .hero[data-layout="centred"] .hero__head { line-height: 1; } }

/* ---- split --------------------------------------------------------------------------------------------------- */
.hero[data-layout="split"] .hero__reel { block-size: 420px; }
.hero[data-layout="split"] .hero__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px var(--gutter) 36px;
  color: var(--ink-paper);
  background: linear-gradient(color-mix(in srgb, var(--ink-field) 12%, transparent), color-mix(in srgb, var(--ink-field) 12%, transparent)), var(--ink-red-ink) url("/images/card-red-w1100/card-red-w1100.webp") center / cover no-repeat;
}
/* the AVIF where the browser reads type() in image-set(), as the card's ground (so the homepage's preload serves it) */
@supports (background-image: image-set(url("/images/card-red-w1100/card-red-w1100.avif") type("image/avif"))) {
  .hero[data-layout="split"] .hero__panel {
    background: linear-gradient(color-mix(in srgb, var(--ink-field) 12%, transparent), color-mix(in srgb, var(--ink-field) 12%, transparent)), var(--ink-red-ink) image-set(url("/images/card-red-w1100/card-red-w1100.avif") type("image/avif"), url("/images/card-red-w1100/card-red-w1100.webp") type("image/webp")) center / cover no-repeat;
  }
}
.hero[data-layout="split"] .hero__head { font-size: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem); line-height: 1.04; }
.hero[data-layout="split"] .hero__action { background: var(--ink-field); }
.hero[data-layout="split"] .hero__action:hover { background: var(--ink-field-dim); }
@media (min-width: 768px) {
  .hero[data-layout="split"] { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .hero[data-layout="split"] .hero__reel { inset: 0 50% 0 0; block-size: auto; }
  .hero[data-layout="split"] .hero__panel { grid-column: 2; justify-content: center; gap: 18px; padding: 0 var(--page-margin) 0 80px; }
  .hero[data-layout="split"] .hero__action { inline-size: 240px; block-size: 60px; }
  .hero[data-layout="split"] .hero__controls { inset-inline: var(--page-margin) calc(50% + 40px); }
}

/* ---- strip --------------------------------------------------------------------------------------------------- */
.hero[data-layout="strip"] .hero__reel { block-size: 419px; }
.hero[data-layout="strip"] .hero__strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px var(--gutter);
  border-block-start: 4px solid var(--ink-yellow);
  background: var(--ink-field);
  color: var(--ink-paper);
}
.hero[data-layout="strip"] .hero__strip-words { display: flex; flex-direction: column; gap: 12px; }
.hero[data-layout="strip"] .hero__kicker { color: var(--ink-yellow); font-size: 0.875rem; }
.hero[data-layout="strip"] .hero__head { font-size: clamp(2.125rem, 1.4564rem + 1.7143vw, 3.25rem); line-height: 1.0588; }
.hero[data-layout="strip"] .hero__line { display: none; }
@media (min-width: 768px) {
  .hero[data-layout="strip"] { display: flex; flex-direction: column; padding: 0; }
  .hero[data-layout="strip"] .hero__reel { position: relative; inset: auto; flex: 1 1 auto; block-size: auto; min-block-size: calc(var(--v7-hero-h) - 104px); }
  .hero[data-layout="strip"] .hero__strip { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 48px; padding: 17px var(--page-margin); }
  .hero[data-layout="strip"] .hero__strip-words { flex: 1 1 auto; gap: 6px; }
  .hero[data-layout="strip"] .hero__kicker { font-size: 1rem; }
  .hero[data-layout="strip"] .hero__head { line-height: 1.0385; }
  .hero[data-layout="strip"] .hero__line { display: block; flex: 0 1 300px; font-size: 1.1875rem; }
  .hero[data-layout="strip"] .hero__action { flex: none; inline-size: 240px; block-size: 60px; }
}

/* ---- product ------------------------------------------------------------------------------------------------- */
.hero[data-layout="product"] .hero__reel { block-size: 300px; }
.hero[data-layout="product"] .hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px var(--gutter) 8px; color: var(--ink-paper); }
.hero[data-layout="product"] .hero__head { font-size: clamp(3.5rem, 2.85rem + 2.6667vw, 5.25rem); line-height: 1; }
.hero[data-layout="product"] .hero__product { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 30px 34px 36px; }
/* on the phone SHOP IT spans the column, as the design's 390 frame draws it under the card (20 px in, 350 wide) */
.hero[data-layout="product"] .hero__shop { align-self: stretch; inline-size: auto; margin-inline: calc(var(--gutter) - 34px); }
.hero[data-layout="product"] .hero__product > .product-card { inline-size: 100%; }
.hero[data-layout="product"] .hero__tape { display: none; }
@media (min-width: 768px) {
  .hero[data-layout="product"] { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 54px var(--page-margin) 42px; }
  .hero[data-layout="product"] .hero__reel { block-size: auto; }
  .hero[data-layout="product"] .hero__scrim { position: absolute; inset: 0; display: block; background: color-mix(in srgb, var(--ink-field) 38%, transparent); pointer-events: none; }
  .hero[data-layout="product"] .hero__copy { position: relative; flex: 0 1 560px; gap: 18px; padding: 0; }
  .hero[data-layout="product"] .hero__action { inline-size: 260px; block-size: 64px; margin-block-start: 6px; }
  .hero[data-layout="product"] .hero__product { position: relative; flex: none; inline-size: 438px; gap: 17px; padding: 38px 0 0; }
  /* the product's own card, drawn a third larger than the best sellers' (390 px), turned off square under two tapes */
  .hero[data-layout="product"] .hero__product > .product-card { inline-size: 290px; zoom: 1.3448; rotate: -1.4deg; box-shadow: 0 8px 18px color-mix(in srgb, var(--ink-field) 34%, transparent); }
  .hero[data-layout="product"] .hero__tape { display: block; position: absolute; }
  .hero[data-layout="product"] .hero__tape--l { inset-inline-start: 6px; inset-block-start: 14px; rotate: 24deg; }
  .hero[data-layout="product"] .hero__tape--r { inset-inline-end: -4px; inset-block-start: 28px; rotate: -22deg; }
  /* SHOP IT under the card, 15 px in from the product's right edge, as drawn at 1440 */
  .hero[data-layout="product"] .hero__shop { align-self: flex-end; inline-size: 377px; block-size: 60px; margin-inline: 0 15px; }
  .hero[data-layout="product"] .hero__controls { inset-inline-end: calc(var(--page-margin) + 478px); }
}

/* ---- from 1600 the layouts with words over or beside the photographs keep the 1440 arrangement on the page's
   margin: the print (hero/print) is the taped card's, and card-right and sale keep it ---------------------------- */
@media (min-width: 1600px) {
  .hero[data-layout="centred"] .hero__photos { inset: 0; box-shadow: none; }
  .hero[data-layout="split"] .hero__photos { inset: 0; box-shadow: none; }
  .hero[data-layout="strip"] .hero__photos { inset: 0; box-shadow: none; }
  .hero[data-layout="product"] .hero__photos { inset: 0; box-shadow: none; }
  .hero[data-layout="centred"] { display: flex; grid-template-rows: none; }
  .hero[data-layout="product"] { display: flex; grid-template-rows: none; }
  .hero[data-layout="centred"] { padding: 0 var(--page-margin); }
  .hero[data-layout="product"] { padding: 54px var(--page-margin) 42px; }
  .hero[data-layout="split"] { padding: 0; }
  .hero[data-layout="strip"] { display: flex; padding: 0; }
  .hero[data-layout="centred"] .hero__controls { inset-inline-start: var(--page-margin); }
  .hero[data-layout="split"] .hero__controls { inset-inline-start: var(--page-margin); }
  .hero[data-layout="strip"] .hero__controls { inset-inline-start: var(--page-margin); }
  .hero[data-layout="product"] .hero__controls { inset-inline-start: var(--page-margin); }
}

/* The store card (Figma V7 v7/visit/hours-card), printed on time card stock: paper inside a 2 px black rule,
   --v7-visit-card-w wide. Twelve black punches across its top (13 by 26, 6 px corners); "Roll on in" in Rockwell
   with the printed badge at the right; then the card's two columns, side by side where both fit their minimum
   (--v7-visit-card-col-min) and one above the other where not: the map and the address; the hours, day by day
   under HOURS, IN and OUT, and OPEN IN MAPS. The map shows the streets at one scale, centred on the store, so any
   size shows the store in the middle; its credit sits in its lower right corner. */
.hours-card {
  --focus-ring: var(--ink-field);  /* on the paper the ring is black */
  flex: none;
  inline-size: min(var(--v7-visit-card-w), 100%);
  overflow: hidden;
  border: 2px solid var(--ink-field);
  background: var(--ink-paper);
  color: var(--ink-field);
}
.hours-card__punches { display: flex; justify-content: space-between; block-size: 40px; padding: 14px 34px 0; }
.hours-card__punch { flex: none; inline-size: 13px; block-size: 26px; border-radius: 6px; background: var(--ink-field); }
.hours-card__head { display: flex; align-items: center; justify-content: space-between; block-size: 84px; padding: 4px 24px 0; }
.hours-card__title {
  margin: 0;
  font-family: var(--t-v7-archive-34-34-29-26-family);
  font-weight: var(--t-v7-archive-34-34-29-26-weight);
  font-size: var(--t-v7-archive-34-34-29-26-size);
  line-height: var(--t-v7-archive-34-34-29-26-line);
}
.hours-card__badge { display: block; flex: none; inline-size: 120px; block-size: 80px; }
.hours-card__body { display: flex; flex-wrap: wrap; gap: 20px 24px; padding: 16px 24px 24px; }
.hours-card__where, .hours-card__when { display: flex; flex-direction: column; flex: 1 1 0; min-inline-size: min(var(--v7-visit-card-col-min), 100%); }
.hours-card__where { gap: 12px; }
.hours-card__when { gap: 20px; }
.hours-card__map { block-size: var(--v7-visit-map-h); }
.hours-card__address {
  margin: 0;
  font-family: var(--t-v7-archive-20-20-16-14-family);
  font-weight: var(--t-v7-archive-20-20-16-14-weight);
  font-size: var(--t-v7-archive-20-20-16-14-size);
  line-height: var(--t-v7-archive-20-20-16-14-line);
}
.hours-card__hours { display: flex; flex-direction: column; }
.hours-card__row { display: flex; align-items: center; block-size: 30px; border-block-end: 1px solid color-mix(in srgb, var(--ink-field) 35%, transparent); }
.hours-card__row--head { border-block-end: 2px solid var(--ink-field); }
.hours-card__day, .hours-card__time {
  font-family: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-family);
  font-weight: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-weight);
  font-size: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-size);
  line-height: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-line);
  letter-spacing: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-track);
  text-transform: var(--t-v7-archive-14-caps-lhauto-ls0p6-14-14-14-19-case);
}
.hours-card__day { flex: 1 1 auto; }
.hours-card__time { flex: none; align-self: stretch; display: flex; align-items: center; inline-size: 88px; padding-inline-start: 12px; border-inline-start: 1px solid color-mix(in srgb, var(--ink-field) 35%, transparent); }

/* A link over a red rule (Figma V7 menu__all, search__all): the display face at 16 px in capitals, tracked 0.04 em,
   on a 21 px line, 6 px above a 4 px rule of red ink, with a chevron after it. */
.link-rule {
  display: inline-flex;
  align-self: flex-start;
  padding-block-end: 6px;
  border-block-end: 4px solid var(--ink-red-ink);
  color: var(--ink-paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.link-rule__chevron { margin-inline-start: 8px; }
.link-rule { transition: border-color var(--motion-hover) var(--ease-in-out); }
.link-rule:hover { border-block-end-color: var(--ink-red-deep); }

/* The map (Figma V7 v7/visit/map): paper inside a 2 px black rule; the streets at one scale (1152 by 693), centred
   on the store at any size, the store the red Chicago star, the two streets named in the display face at 12 px, and
   the credit the map data's licence asks for in the lower right corner, linked, in the body face at 9 px on paper.
   The frame around it sets its height (the store card's --v7-store-map-h, the homepage card's --v7-visit-map-h). */
.map { position: relative; overflow: hidden; border: 2px solid var(--ink-field); background: var(--ink-paper); color: var(--ink-field); }
.map__streets { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 1152px; block-size: 693px; max-inline-size: none; transform: translate(-50%, -50%); }
.map__store { position: absolute; inset-block-start: calc(50% - 14px); inset-inline-start: calc(50% - 13px); inline-size: 26px; block-size: 29px; fill: var(--ink-red-ink); }
.map__label {
  position: absolute;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%);
}
.map__label--devon { inset-block-start: calc(50% + 54px); inset-inline-start: calc(50% + 100px); }
.map__label--clark { inset-block-start: calc(50% - 24px); inset-inline-start: calc(50% + 27px); transform: translate(-50%, -50%) rotate(-104deg); }
.map__credit {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 2px 4px;
  background: var(--ink-paper);
  color: var(--ink-field-dim);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  line-height: 1.2;
}
.map__credit { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: auto; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.map__credit:hover { text-decoration-color: currentColor; }
.map__credit:focus-visible { outline: 2px solid var(--ink-field); outline-offset: 1px; }

/* A category's menu (Figma V7 v7/chrome/mega-menu), from 768 px: it hangs from the header's foot over the page, on
   the field with the vinyl ground at 72 percent (the drawn crop: the texture at 0.87 of its size, 171 px left of the panel,
   its foot on the panel's foot, so a taller panel shows more of it; wider than 1,611 px it grows to keep reaching the panel's
   right edge, never ending in flat black), a rule of rule-field at its foot and the caution stripe along
   its last 29 px. Inside, 24 px down: the columns by type and by material (heads in the display face over a rule,
   links in the body face at 17/24, 9 px apart) and TOP PICKS (two picks); VIEW ALL under the first column.
   Desktop (1440): the columns 32 px apart, the picks 245 px, the type and material columns sharing the rest 405 to
   304; VIEW ALL sits on the columns' foot beside the picks. Tablet (768, the width=768 variant): 24 px apart, the
   picks at the drawer's 171 px, VIEW ALL 24 px under the columns. A menu with no materials gives its type column
   the room. */
.mega-menu {
  --pick-w: 171px;
  position: relative;
  display: none;
  padding-block: 24px 50px;
  border-block-end: 1px solid var(--ink-rule-field);
  background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 28%, transparent), color-mix(in srgb, var(--ink-field) 28%, transparent)),
    var(--ink-field) url("/images/field-vinyl/field-vinyl.webp") no-repeat -171.1px 100% / max(1782.1px, 100% + 171.1px) auto;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"))) {
  .mega-menu {
    background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 28%, transparent), color-mix(in srgb, var(--ink-field) 28%, transparent)),
    var(--ink-field) image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"), url("/images/field-vinyl/field-vinyl.webp") type("image/webp")) no-repeat -171.1px 100% / max(1782.1px, 100% + 171.1px) auto;
  }
}
.mega-menu__cols { display: flex; align-items: flex-start; gap: 24px; }
.mega-menu__col { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.mega-menu__col--types, .mega-menu__col--materials { flex: 1 1 0; }
.mega-menu__col--picks { flex: none; }
.mega-menu__head {
  margin: 0;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--ink-rule-field);
  color: var(--ink-paper-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2857;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mega-menu__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mega-menu__link {
  display: inline-block;
  color: var(--ink-paper);
  text-decoration: none;
  font-family: var(--t-v7-body-17-roman-17-15-14-family);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5rem;
}
.mega-menu__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.mega-menu__link:hover { text-decoration-color: currentColor; }
.mega-menu__picks { display: flex; gap: 16px; }
/* VIEW ALL is a block, so its margin moves it: on the columns' foot beside the picks from 1024 */
.mega-menu__all { display: flex; inline-size: max-content; margin-block-start: 24px; }
.mega-menu > .caution-stripe { position: absolute; inset-inline: 0; inset-block-end: 0; }
@media (min-width: 768px) {
  .mega-menu { display: block; }
}
@media (min-width: 1024px) {
  .mega-menu { --pick-w: 245px; }
  .mega-menu__cols { gap: 32px; }
  .mega-menu__col--types { flex: 405 1 0; }
  .mega-menu__col--materials { flex: 304 1 0; }
  .mega-menu__all { margin-block-start: -31px; }
}

/* The settle: opening, the panel fades in and drops the last 4 px into place over --motion-panel on
   --ease-out; closing (1.1.0), it fades out and lifts the same 4 px on --ease-in, shown until it has gone and
   taking no presses meanwhile. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mega-menu:not([hidden]) { animation: mega-menu-settle var(--motion-panel) var(--ease-out); }
  .mega-menu[hidden] {
    opacity: 0;
    translate: 0 -4px;
    pointer-events: none;
    transition: opacity var(--motion-panel) var(--ease-in), translate var(--motion-panel) var(--ease-in), display var(--motion-panel) allow-discrete;
  }
  /* moving along the labels swaps the menu in place: the settle plays on the first opening only */
  .mega-menu[data-switched] { animation: none; }
}
@keyframes mega-menu-settle { from { opacity: 0; translate: 0 -4px; } }

/* The page's motion control (Figma V7 v7/chrome/marquee-control): the announcement bar's icon square, at the bar's
   right end on every page (release 1.2.0, as V7 pin 7d drew it; the square's box and glyphs are drawn by the
   announcement bar's stylesheet). Pause bars while things move, a play triangle once stopped (js/ss-motion.js sets
   data-stopped). Without its script the button stays hidden. */
.motion-control { display: contents; }
.motion-control__button[hidden] { display: none; }
.motion-control .announcement__glyph--play,
.motion-control[data-stopped] .announcement__glyph--pause { display: none; }
.motion-control[data-stopped] .announcement__glyph--play { display: block; }

/* The 404 (Figma V7 not-found__body): on the field under the head, one line the head's line's width, then SHOP THE
   SHELF and SEARCH side by side, 16 px apart, 32 px under it. */
.not-found { background: var(--ink-field); color: var(--ink-paper); }
.not-found__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.not-found__line { inline-size: min(var(--v7-category-lede-w), 100%); margin: 0; font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.4; }
.not-found__actions { display: flex; flex-wrap: wrap; align-self: stretch; gap: 16px; }

/* An offer (Figma V7 v7/card/offer): the photograph at 620 by 380 in proportion, its burst standing over a corner as
   the design places it per width (--v7-sales-sale-* and --v7-sales-new-*: the burst's rail is 100 px wider and 100
   px higher than the photograph, so its offsets carry 100 px); then, 22 px down, the kicker in red Rockwell, the head
   in the display capitals, the line in dim paper, and the action over a 3 px red rule. The action is the link over
   the whole offer. */
.offer-card { position: relative; display: flex; flex-direction: column; color: var(--ink-paper); }
.offer-card__photo { position: relative; aspect-ratio: 620 / 380; }
/* the photograph fills the frame and takes no part in its height, which is the drawn proportion */
.offer-card__image { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.offer-card__photo > .burst { position: absolute; }
.offer-card[data-kind="sale"] .offer-card__photo > .burst { inset-block-start: calc(var(--v7-sales-sale-top) - 100px); inset-inline-end: calc(var(--v7-sales-sale-right) - 100px); }
.offer-card[data-kind="new"] .offer-card__photo > .burst { inset-block-start: calc(var(--v7-sales-new-top) - 100px); inset-inline-end: calc(var(--v7-sales-new-right) - 100px); }
.offer-card__copy { display: flex; flex-direction: column; gap: 8px; padding-block-start: 22px; }
.offer-card__kicker {
  margin: 0;
  color: var(--ink-red-ink);
  font-family: var(--t-v7-archive-14-caps-ls0p8-family);
  font-weight: var(--t-v7-archive-14-caps-ls0p8-weight);
  font-size: var(--t-v7-archive-14-caps-ls0p8-size);
  line-height: var(--t-v7-archive-14-caps-ls0p8-line);
  letter-spacing: var(--t-v7-archive-14-caps-ls0p8-track);
  text-transform: var(--t-v7-archive-14-caps-ls0p8-case);
}
/* the line sits --v7-sales-head-gap under the head, a pixel into it at 1,440 (a negative gap, so a margin) */
.offer-card__head-body { display: flex; flex-direction: column; }
.offer-card__head {
  margin: 0;
  font-family: var(--t-v7-display-40-caps-40-34-30-family);
  font-weight: var(--t-v7-display-40-caps-40-34-30-weight);
  font-size: var(--t-v7-display-40-caps-40-34-30-size);
  line-height: var(--t-v7-display-40-caps-40-34-30-line);
  letter-spacing: var(--t-v7-display-40-caps-40-34-30-track);
  text-transform: var(--t-v7-display-40-caps-40-34-30-case);
}
.offer-card__body {
  margin: 0;
  color: var(--ink-paper-dim);
  font-family: var(--t-body-16-roman-lh23-ls0-family);
  font-weight: var(--t-body-16-roman-lh23-ls0-weight);
  font-size: var(--t-body-16-roman-lh23-ls0-size);
  line-height: var(--t-body-16-roman-lh23-ls0-line);
  margin-block-start: var(--v7-sales-head-gap);
}
.offer-card__action {
  align-self: flex-start;
  padding-block: var(--v7-sales-action-top) 5px;
  border-block-end: 3px solid var(--ink-red-ink);
  color: var(--ink-paper);
  text-decoration: none;
  font-family: var(--t-display-16-family);
  font-weight: var(--t-display-16-weight);
  font-size: var(--t-display-16-size);
  line-height: var(--t-display-16-line);
  letter-spacing: var(--t-display-16-track);
}
.offer-card__action::after { content: ""; position: absolute; inset: 0; }
.offer-card__action { transition: border-color var(--motion-hover) var(--ease-in-out); }
.offer-card__action:hover { border-block-end-color: var(--ink-paper); }
.offer-card:has(.offer-card__action:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 4px; }
.offer-card__action:focus-visible { outline: none; }

/* The offers' layouts (release 1.2.1; Figma "Promo layouts V7": offers/<layout>/1440 and its 390 instance). The
   band and each offer carry data-layout; photo-top is the homepage's own (the rules above). Every offer with a
   photograph carries its kind's burst at the homepage's sizes; the drawn widths are 390 and 1440, and 768 and 1920
   follow the system (the band wraps the offers by their least width: two to a row from 700 to 767 px and from 1,300).

   on-photo: the photograph the whole offer (620 by 520; 350 by 420 on a phone), the words in a black strip on its foot
     under a 4 px yellow rule, the kicker yellow, the head and the action on one line (one above the other on a phone),
     no line; the burst in the top right corner.
   wide: each offer across the column, its photograph half of it and the words beside it, the second mirrored; the
     burst in the photograph's lower right corner, 24 px in (12 on a phone, where the words stand under it).
   centred: the homepage's offer with its words centred, the burst in the photograph's lower right corner.
   product: the sale's offer as one product: its photograph (300 by 372; 350 by 434 on a phone) with the burst at seven
     tenths in its lower right corner, the offer's kicker over the product's name, its maker and price, and SHOP IT.
   tile: no photograph, the words on the offer's ground (the sale's yellow, the new's red), the head at 84 px (60 on a
     phone); the sale's burst over its top right corner, standing out past it.
   edit: the new offer's words and action over a row of three products (each a square photograph, its name and price),
     first in the band. */

/* the bursts placed in their photographs' corners: lower right, 12 px in on a phone, 24 from 768 */
.offer-card[data-layout="wide"] .offer-card__photo > .burst { inset: auto 12px 12px auto; }
.offer-card[data-layout="centred"] .offer-card__photo > .burst { inset: auto 12px 12px auto; }
.offer-card[data-layout="product"] .offer-card__photo > .burst { inset: auto 12px 12px auto; }
@media (min-width: 768px) {
  .offer-card[data-layout="wide"] .offer-card__photo > .burst { inset: auto 24px 24px auto; }
  .offer-card[data-layout="centred"] .offer-card__photo > .burst { inset: auto 24px 24px auto; }
}

/* ---- on-photo ------------------------------------------------------------------------------------------------ */
.offer-card[data-layout="on-photo"] .offer-card__photo { aspect-ratio: 350 / 420; overflow: hidden; }
.offer-card[data-layout="on-photo"] .offer-card__photo > .burst { inset: 16px 8px auto auto; }
.offer-card[data-layout="on-photo"] .offer-card__strip {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border-block-start: 4px solid var(--ink-yellow);
  background: var(--ink-field);
}
.offer-card[data-layout="on-photo"] .offer-card__kicker { color: var(--ink-yellow); }
.offer-card[data-layout="on-photo"] .offer-card__strip-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.offer-card[data-layout="on-photo"] .offer-card__action { padding-block-start: 0; }
@media (min-width: 768px) {
  .offer-card[data-layout="on-photo"] .offer-card__photo { aspect-ratio: 620 / 520; }
  .offer-card[data-layout="on-photo"] .offer-card__photo > .burst { inset: 40px 5px auto auto; }
  .offer-card[data-layout="on-photo"] .offer-card__strip { gap: 8px; padding: 24px 28px 26px; }
  .offer-card[data-layout="on-photo"] .offer-card__strip-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
}

/* ---- wide ---------------------------------------------------------------------------------------------------- */
.sales[data-layout="wide"] > .offer-card { flex-basis: 100%; }
.offer-card[data-layout="wide"] .offer-card__photo { aspect-ratio: 350 / 240; }
.offer-card[data-layout="wide"] .offer-card__copy { padding-block-start: 18px; }
@media (min-width: 768px) {
  .offer-card[data-layout="wide"] { flex-direction: row; align-items: center; gap: 56px; }
  .offer-card[data-layout="wide"] .offer-card__photo { flex: 0 0 50%; aspect-ratio: 640 / 380; }
  .offer-card[data-layout="wide"] .offer-card__copy { flex: 1 1 0; padding-block-start: 0; }
  .sales[data-layout="wide"] > .offer-card:nth-child(even) { flex-direction: row-reverse; }
}

/* ---- centred ------------------------------------------------------------------------------------------------- */
.offer-card[data-layout="centred"] .offer-card__photo { aspect-ratio: 350 / 240; }
.offer-card[data-layout="centred"] .offer-card__copy { align-items: center; padding-block-start: 18px; text-align: center; }
.offer-card[data-layout="centred"] .offer-card__action { align-self: center; }
@media (min-width: 768px) {
  .offer-card[data-layout="centred"] .offer-card__photo { aspect-ratio: 620 / 380; }
  .offer-card[data-layout="centred"] .offer-card__copy { padding-block-start: 22px; }
}

/* ---- product ------------------------------------------------------------------------------------------------- */
.offer-card[data-layout="product"] .offer-card__photo { aspect-ratio: 350 / 434; overflow: hidden; }
.offer-card[data-layout="product"] .offer-card__copy { padding-block-start: 18px; }
.offer-card[data-layout="product"] .offer-card__price { display: flex; align-items: center; gap: 10px; margin: 0; }
.offer-card[data-layout="product"] .offer-card__vendor {
  color: var(--ink-paper-dim);
  font-family: var(--t-v7-archive-14-caps-ls0p8-family);
  font-weight: var(--t-v7-archive-14-caps-ls0p8-weight);
  font-size: var(--t-v7-archive-14-caps-ls0p8-size);
  line-height: var(--t-v7-archive-14-caps-ls0p8-line);
  letter-spacing: var(--t-v7-archive-14-caps-ls0p8-track);
  text-transform: var(--t-v7-archive-14-caps-ls0p8-case);
}
.offer-card[data-layout="product"] .offer-card__amount { color: var(--ink-red-ink); font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.offer-card[data-layout="product"] .offer-card__shop { inline-size: 100%; margin-block-start: 6px; }
@media (min-width: 768px) {
  .offer-card[data-layout="product"] { flex-direction: row; align-items: flex-start; gap: 28px; }
  .offer-card[data-layout="product"] .offer-card__photo { flex: 0 0 300px; aspect-ratio: 300 / 372; }
  /* the burst at seven tenths in the narrower window, its words with it: scaled from its corner, its box unchanged */
  .offer-card[data-layout="product"] .offer-card__photo > .burst { scale: 0.7; transform-origin: 100% 100%; }
  .offer-card[data-layout="product"] .offer-card__copy { flex: 1 1 0; padding-block-start: 8px; }
  .offer-card[data-layout="product"] .offer-card__price { gap: 12px; }
  .offer-card[data-layout="product"] .offer-card__amount { font-size: 1.25rem; }
  .offer-card[data-layout="product"] .offer-card__shop { inline-size: min(260px, 100%); }
}

/* ---- tile ---------------------------------------------------------------------------------------------------- */
.offer-card[data-layout="tile"] { gap: 0; padding: 32px 24px 28px; }
.offer-card[data-layout="tile"][data-ground="yellow"] { background: var(--ink-yellow); color: var(--ink-field); }
.offer-card[data-layout="tile"][data-ground="red"] { background: var(--ink-red-deep); color: var(--ink-paper); }
.offer-card[data-layout="tile"] .offer-card__copy { padding-block-start: 0; }
.offer-card[data-layout="tile"][data-ground="yellow"] .offer-card__kicker { color: var(--ink-field); }
.offer-card[data-layout="tile"][data-ground="red"] .offer-card__kicker { color: var(--ink-yellow); }
.offer-card[data-layout="tile"] .offer-card__head { font-size: 3.75rem; line-height: 1.2822; }
.offer-card[data-layout="tile"] .offer-card__body { color: inherit; }
.offer-card[data-layout="tile"] .offer-card__action { color: inherit; }
.offer-card[data-layout="tile"][data-ground="red"] .offer-card__action { border-block-end-color: var(--ink-yellow); }
.offer-card[data-layout="tile"][data-ground="yellow"] { --focus-ring: var(--ink-field); }
.offer-card[data-layout="tile"] > .burst { position: absolute; inset: -24px -12px auto auto; z-index: 1; }
@media (min-width: 768px) {
  .offer-card[data-layout="tile"] { justify-content: flex-start; min-block-size: 420px; padding: 48px 44px 44px; }
  .offer-card[data-layout="tile"] .offer-card__head { font-size: 5.25rem; }
  .offer-card[data-layout="tile"] > .burst { inset: -40px -45px auto auto; }
}

/* ---- edit ---------------------------------------------------------------------------------------------------- */
.offer-card[data-layout="edit"] { gap: 16px; }
.offer-card[data-layout="edit"] .offer-card__copy { padding-block-start: 0; }
.offer-card[data-layout="edit"] .offer-card__products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.offer-card__product { position: relative; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
/* positioned: a cropped photograph (img[data-crop], global.css) is placed against its frame */
.offer-card__product-window { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-rule-paper); }
.offer-card__product-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.offer-card__product-name { color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2822; text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.offer-card__product-name:hover { text-decoration-color: currentColor; }
.offer-card__product-name:focus-visible { outline: none; }
/* the edit holds four links, so none stretches over the others: the offer's action keeps its own words' box, and each
   product's name reaches over its photograph and price, so every target is its tile and the focus rings the tile */
.offer-card__product-name::after { content: ""; position: absolute; inset: 0; }
.offer-card__product:has(.offer-card__product-name:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 4px; }
.offer-card[data-layout="edit"] .offer-card__action { position: relative; }
.offer-card[data-layout="edit"] .offer-card__action::after { content: none; }
.offer-card[data-layout="edit"]:has(.offer-card__action:focus-visible) { outline: none; }
.offer-card[data-layout="edit"] .offer-card__action:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 4px; }
.offer-card__product-price { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; line-height: 1.2143; }
@media (min-width: 768px) {
  .offer-card[data-layout="edit"] { gap: 20px; }
  .offer-card[data-layout="edit"] .offer-card__products { gap: 16px; }
  .offer-card__product { gap: 8px; }
  .offer-card__product-name { font-size: 1.0625rem; }
  .offer-card__product-price { font-size: 0.875rem; }
}

/* The pager's arrows (Figma V7 v7/pager/arrows): previous and next, 44 px red squares 12 px apart with the paper
   chevron. An arrow with nowhere to go is shown inactive and disabled (v7/pager/arrow state=inactive; since 1.1.0,
   where it had been hidden): an empty square with a 2 px rule and the chevron in the deeper red. */
.pager-arrows { display: flex; gap: 12px; }
.pager-arrows__button {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: var(--ink-red-ink);
  cursor: pointer;
}
.pager-arrows__button { transition: background-color var(--motion-hover) var(--ease-in-out), box-shadow var(--motion-hover) var(--ease-in-out), color var(--motion-hover) var(--ease-in-out); }
.pager-arrows__button:hover:not(:disabled) { background: var(--ink-red-deep); }
.pager-arrows__button:disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-red-deep); cursor: default; }
.pager-arrows__button:disabled .pager-arrows__glyph { fill: var(--ink-red-deep); }
.pager-arrows__button:focus-visible { outline: 2px solid var(--ink-field); outline-offset: 2px; }
.pager-arrows__glyph { display: block; fill: var(--ink-paper); }
.pager-arrows__button--previous .pager-arrows__glyph { transform: scaleX(-1); }

/* The pager's nuts (Figma V7 v7/pager/nut): one 20 px hexagon per page, 12 px apart, set to the row's right edge;
   the current page's is red with a yellow bore, the others a 2 px black outline round an outlined bore. A readout,
   not a control: the arrows and the row's own scrolling move it. The current nut's colours fade in and out over
   --motion-hover (1.1.0), so a nut at rest is filled transparent, not none (none does not fade). */
.pager { display: flex; justify-content: flex-end; gap: var(--space-3); }
.pager__nut { display: block; flex: none; inline-size: 20px; block-size: 20px; }
.pager__nut[hidden] { display: none; }
.pager__hex, .pager__bore { fill: transparent; stroke: var(--ink-field); stroke-width: 2px; transition: fill var(--motion-hover) var(--ease-in-out), stroke var(--motion-hover) var(--ease-in-out); }
.pager__nut[data-state="current"] .pager__hex { fill: var(--ink-red-ink); stroke: var(--ink-red-ink); }
.pager__nut[data-state="current"] .pager__bore { fill: var(--ink-yellow); stroke: var(--ink-yellow); }
/* without the script, the design's count: four nuts on the phone and the tablet, two from 1,024 px */
@media (min-width: 1024px) { .pager__nut[data-extra] { display: none; } }

/* The password page (Figma V7 password/1440 and password/1440/enter): on the field, without the header or the footer,
   one column centred in the window, 40 px apart: the badge (280 by 187), THE ONLINE COUNTER
   OPENS SOON., the dispatch signup across it, ENTER WITH THE PASSWORD (or the password's field, 420 px wide at most,
   and ENTER beside it), and the store's running foot in the dim paper. */
.password {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-block-size: 100svh;
  padding: 96px var(--page-margin) 48px;
  background: var(--ink-field);
  color: var(--ink-paper);
  text-align: center;
}
.password__badge { display: block; inline-size: 280px; block-size: auto; aspect-ratio: 3 / 2; }
.password__head { align-self: stretch; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.password > .signup { align-self: stretch; text-align: start; }
.password__open, .password__foot { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
.password__open { min-block-size: 24px; padding: 0; border: 0; background: none; color: var(--ink-paper); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.password__open { transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
.password__open:hover { text-decoration-thickness: 2px; }
.password__open:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.password__form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px; align-self: stretch; margin: 0; text-align: start; }
.password__form > .field { flex: 1 1 240px; max-inline-size: 420px; }
.password__foot { margin: 0; color: var(--ink-paper-dim); }

/* A menu pick (Figma V7 v7/menu/pick): the photograph at 245 by 307 (171 by 214 on the tablet and in the drawer),
   then 8 px apart the name (the display face at 15 px, tracked 0.02 em), the vendor (Rockwell, v7/archive/12) and
   the price (the body face at 13/16), the vendor and price in paper-dim. The name is the link and covers the pick. */
.pick { position: relative; display: flex; flex-direction: column; gap: 8px; inline-size: var(--pick-w, 245px); }
.pick__window { aspect-ratio: 245 / 307; overflow: hidden; background: var(--ink-rule-field); }
.pick__image { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pick__name {
  margin: 0;
  color: var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.1875rem;
  letter-spacing: 0.02em;
}
.pick__link { color: inherit; text-decoration: none; }
.pick__link::after { content: ""; position: absolute; inset: 0; }
.pick__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 0.15em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.pick__link:hover { text-decoration-color: currentColor; }
.pick__brand {
  margin: 0;
  color: var(--ink-paper-dim);
  font-family: var(--t-v7-archive-12-family);
  font-weight: var(--t-v7-archive-12-weight);
  font-size: var(--t-v7-archive-12-size);
  line-height: var(--t-v7-archive-12-line);
  letter-spacing: var(--t-v7-archive-12-track);
}
.pick__price { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; line-height: 1rem; }
.pick:has(.pick__link:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 3px; }
.pick__link:focus-visible { outline: none; }

/* Price (Figma V7 v7/category/filter-panel, price__fields): the two fields, each 6 px under its label (FROM, TO:
   price__group), 12 px apart; the highest price under them. */
.price-facet { display: flex; flex-direction: column; gap: 12px; }
.price-facet__fields { display: flex; gap: 12px; }
.price-facet__group { display: flex; flex-direction: column; gap: 6px; }
.price-facet__label { color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.2857; letter-spacing: 0.04em; text-transform: uppercase; }
.price-facet__field { display: flex; align-items: center; gap: 6px; inline-size: 100px; block-size: 44px; padding-inline: 12px; box-shadow: inset 0 0 0 1px var(--ink-paper); color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.3333; }
/* the field fills the box's height, so the whole box beside the currency is its target (WCAG 2.5.8) */
.price-facet__input { align-self: stretch; min-inline-size: 0; inline-size: 100%; padding: 0; border: 0; background: none; color: var(--ink-paper); font: inherit; -moz-appearance: textfield; appearance: textfield; }
.price-facet__input::placeholder { color: var(--ink-paper-dim); opacity: 1; }
.price-facet__input::-webkit-outer-spin-button, .price-facet__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* one ring on focus: the box's, in the site's focus ring; the field inside it draws none of its own */
.price-facet__field:focus-within { outline: 2px solid var(--focus-ring, var(--ink-yellow)); outline-offset: 2px; }
.price-facet__input:focus-visible { outline: none; }
.price-facet__hint { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.4286; }

/* The product card (Figma V7 v7/card/product): paper, a 14 px pad, a hard shadow 10 by 12 px at 55 percent,
   a square window, then the name; the vendor and the prices sit at the foot. Fixed: 290 px wide and 418 tall
   (the best sellers row); fluid: fills its grid column between the category's 240 and 296 px. */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.875rem;
  background: var(--ink-paper);
  color: var(--ink-field);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--ink-field) 55%, transparent);
  overflow: hidden;
}
/* the drawn height is the least, so a reader's wider text spacing grows the card instead of cutting its price */
.product-card[data-size="fixed"] { flex: none; inline-size: var(--v7-sellers-card-w); min-block-size: var(--v7-sellers-card-h); }
.product-card__top { display: flex; flex-direction: column; gap: 0.875rem; }
.product-card__window { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-rule-paper); }
.product-card__image { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-card__badges { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; display: flex; gap: var(--space-2); }
.product-card__name {
  font-family: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-family);
  font-weight: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-weight);
  font-size: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-size);
  line-height: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-line);
  letter-spacing: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-track);
  text-transform: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-case);
}
.product-card__link { color: inherit; text-decoration: none; }
/* the whole print is the target: the link's box stretches over the card */
.product-card__link::after { content: ""; position: absolute; inset: 0; }
.product-card__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.product-card__link:hover { text-decoration-color: currentColor; }
/* the ring shows for keyboard focus only (a click focuses the link too, and must not ring the card) */
.product-card:has(.product-card__link:focus-visible) { outline: 2px solid var(--focus-ring, var(--ink-yellow)); outline-offset: 3px; }
.product-card__link:focus-visible { outline: none; }
.product-card__meta { display: flex; flex-direction: column; gap: 0.625rem; }
.product-card__brand {
  font-family: var(--t-v7-archive-12-family);
  font-weight: var(--t-v7-archive-12-weight);
  font-size: var(--t-v7-archive-12-size);
  line-height: var(--t-v7-archive-12-line);
  letter-spacing: var(--t-v7-archive-12-track);
}
/* the price in the numeral face at 13/18, medium and black; on sale it is red-deep and bold, the price it was struck
   through beside it in field-dim. The weight is set on the row too, so a word read out but not shown ("Now", on a
   sale) asks for the face already loaded, not a third one (1.2.0: it had pulled in the Display face's 45 Light) */
.product-card__prices { font-weight: var(--t-numeral-13-medium-weight); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); font-family: var(--t-numeral-13-medium-family); font-size: var(--t-numeral-13-medium-size); line-height: var(--t-numeral-13-medium-line); }
.product-card__price { font-weight: var(--t-numeral-13-medium-weight); color: var(--ink-field); }
.product-card[data-sale] .product-card__price { font-weight: 700; color: var(--ink-red-deep); }
.product-card__compare { font-weight: var(--t-numeral-13-medium-struck-weight); color: var(--ink-field-dim); }
/* the fluid card (the category grid's, the recommendations') keeps 16 px under the name, as drawn; the fixed card does not */
.product-card[data-size="fluid"] .product-card__top { padding-block-end: 16px; }
/* the colours, where a grid shows them (the category's): 14 px dots, 6 px apart, under the price */
.product-card__swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.product-card__swatch { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--ink-rule-paper); }

/* The lift: where a mouse can hover, the photograph under the pointer grows to 103
   percent inside its window over 350 ms; the window clips it, and nothing moves under reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card__image { transition: scale 350ms var(--ease-out); }
  .product-card:hover .product-card__image { scale: 1.03; }
}

/* The product page's first band (Figma V7 product-information): on the field, 24 px above and below, the gallery
   and the side column wrapping by their minimum widths as the design lays them out: side by side from 1,024 px,
   --v7-product-pdp-gap apart (86 at 1440, 113 at 1920), and below it the gallery above the column, 40 px apart.
   The side column holds the buy column, the description with SPECS and SHIPPING & RETURNS, and the reviews,
   12 px apart. */
.product { padding-block: 24px; background: var(--ink-field); color: var(--ink-paper); }
.product__pdp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--v7-product-pdp-row) var(--v7-product-pdp-gap); }
.product__pdp > .gallery { flex: none; inline-size: min(var(--v7-product-gallery-w), 100%); }
/* The gallery stays in view (1.2.0): from 1,024 px, where it stands beside the side column, it sticks while the reader
   scrolls the column and leaves with the band at its end. It keeps the design's size and never moves by itself (the
   bar sliding away leaves it where it is, so a pointer on its thumbnails or its clip's control never loses them): it
   sticks 16 px under the bar (106 px), or, on a window too short for the bar and the gallery together (852 px tall
   from 1,024 px wide, 1,080 from 1,600), by its foot, 16 px above the window's, its top under the bar, so its foot and
   the clip's control there stay in reach (js/ss-gallery.js gives its height as --gallery-h; without the script it
   sticks under the bar). */
@media (min-width: 1024px) {
  .product__pdp > .gallery { position: sticky; inset-block-start: min(calc(106px + 16px), calc(100vh - var(--gallery-h, 0px) - 16px)); }
}
.product__side { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-inline-size: min(var(--v7-product-side-min), 100%); }
/* the description, exposed and first (a head and its text, no disclosure), then SPECS and SHIPPING & RETURNS */
.product__details { display: flex; flex-direction: column; }
.product__description-head {
  display: flex;
  align-items: center;
  block-size: 41px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 0.95;
  letter-spacing: 0.04em;
}
.product__description-text { margin: 0; padding-block-end: 16px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; }

/* The quantity (Figma V7 v7/product/qty, as the product page's): 120 by 56 in a 1 px paper rule, minus and plus 44 px
   wide either side of the number, all in the display face at 20 px. */
.quantity { display: flex; flex: none; inline-size: var(--v7-product-qty-w); block-size: 56px; box-shadow: inset 0 0 0 1px var(--ink-paper); }
.quantity__less, .quantity__more { transition: background-color var(--motion-hover) var(--ease-in-out); }
@media (hover: hover) { .quantity__less:hover:not(:disabled), .quantity__more:hover:not(:disabled) { background: color-mix(in srgb, var(--ink-paper) 12%, transparent); } }
.quantity__less, .quantity__more { flex: none; inline-size: 44px; padding: 0; border: 0; background: none; color: var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; cursor: pointer; }
.quantity__value {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  appearance: textfield;
}
.quantity__value::-webkit-inner-spin-button, .quantity__value::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quantity :focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; }

/* YOU MIGHT ALSO NEED (Figma V7 product-recommendations): on the field, --v7-product-recs-py above and below, the
   head over the red rule (section-head, ornament rule), 24 px over the cards: four fluid product cards filling their
   row, each between --v7-product-rec-min and --v7-product-rec-max wide, --v7-product-recs-gap apart; two to a row on
   the phone and the tablet. The platform's recommendations fill it. */
.recommendations { display: flex; flex-direction: column; gap: 24px; padding-block: var(--v7-product-recs-py); background: var(--ink-field); }
.recommendations__grid { display: flex; flex-wrap: wrap; gap: var(--v7-product-recs-gap); margin: 0; padding: 0; list-style: none; }
.recommendations__item { display: flex; flex: 1 1 0; min-inline-size: min(var(--v7-product-rec-min), 100%); max-inline-size: var(--v7-product-rec-max); }
.recommendations__item > .product-card { flex: 1 1 auto; }

/* The reviews (Figma V7 v7/product/reviews): REVIEWS in the display face at 17 px, 41 px tall; the rating row 8 px
   down (the stars, the figure 17 px after them); one review at a time, 15 px down: its text in the body face at
   17 px and the reviewer in dim paper 13 px under it; the arrows and the position (n of 5, Rockwell at 17 px in dim
   paper) 16 px under that. With none yet (state=none): "No reviews yet." and the link to write the first, in the
   display face at 16 px over a 3 px red rule. */
.reviews { display: flex; flex-direction: column; padding-block-start: 4px; }
.reviews__head { display: flex; align-items: center; block-size: 41px; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.reviews__rating { display: flex; align-items: center; gap: 17px; padding-block-start: 8px; }
/* the rating's stars and figure, as the buy column draws them */
.reviews__rating-stars { display: flex; gap: 7px; }
.reviews__rating-star { display: block; inline-size: 20px; block-size: 23.09px; fill: var(--ink-red-ink); }
.reviews__rating-value { font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-20-18-16); line-height: 1.5; }
.reviews__items { margin: 15px 0 0; padding: 0; list-style: none; }
.reviews__item { display: none; flex-direction: column; gap: 13px; }
.reviews__item[data-current] { display: flex; }
.reviews__text, .reviews__by { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.45; }
.reviews__by { color: var(--ink-paper-dim); line-height: 1.5; }
.reviews__ctrl { display: flex; align-items: center; gap: 12px; margin-block-start: 16px; }
.reviews__nav { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: none; color: var(--ink-paper-dim); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1; cursor: pointer; }
.reviews__nav { transition: color var(--motion-hover) var(--ease-in-out); }
.reviews__nav:hover { color: var(--ink-paper); }
.reviews__nav:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; }
.reviews__position { margin: 0; color: var(--ink-paper-dim); font-family: var(--font-archive); font-size: 1.0625rem; line-height: 1.5; }
.reviews__none { margin: 0; padding-block-start: 8px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; }
.reviews__write {
  align-self: flex-start;
  margin-block-start: 20px;
  padding-block-end: 5px;
  border-block-end: 3px solid var(--ink-red-ink);
  color: var(--ink-paper);
  text-decoration: none;
  font-family: var(--t-display-16-family);
  font-weight: var(--t-display-16-weight);
  font-size: var(--t-display-16-size);
  line-height: var(--t-display-16-line);
  letter-spacing: var(--t-display-16-track);
}
.reviews__write { transition: border-color var(--motion-hover) var(--ease-in-out); }
.reviews__write:hover { border-block-end-color: var(--ink-paper); }
.reviews__write:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }

/* The roadside (Figma V7 social__scene and social__sign in v7/frill, size=social; the cart's truck band carries the
   same): four layers of one drawing 3,200 units wide (a unit is a pixel where the truck is 540 wide), centred on
   the band and scaled with the truck (--roadside-s: its width over 540), placed so the road's near lane is under its
   wheels at every width: the wheel line is the truck's top plus 96.7 percent of its height (the sprites' wheels), and
   the scene's top is 231 units above it. The sign stands on the near plane at --v7-social-sign-left, its top 221
   units above the wheel line. The far layers drift with --roadside-p (ss-roadside): the stars by 150 units, the
   mountains by 60, both scaled; the verge (1.2.0), the nearest, by 16 the other way, standing in front of the truck;
   the road and the sign never move against the band. The band clips them all. */
.roadside {
  --roadside-s: 0.48148;
  --roadside-wheel: calc(var(--v7-social-rig-top) + var(--v7-social-rig-h) * 0.96667);
  --roadside-top: calc(var(--roadside-wheel) - 231px * var(--roadside-s));
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
@media (min-width: 768px) { .roadside { --roadside-s: 0.77778; } }
@media (min-width: 1024px) { .roadside { --roadside-s: 1; } }
.roadside__layer {
  position: absolute;
  inset-inline-start: 50%;
  display: block;
  inline-size: calc(3200px * var(--roadside-s));
  max-inline-size: none;
  block-size: auto;
  translate: -50% 0;
}
.roadside__layer--sky { inset-block-start: calc(var(--roadside-top) - 560px * var(--roadside-s)); translate: -50% calc(var(--roadside-p, 0) * 150px * var(--roadside-s)); }
.roadside__layer--mountains { inset-block-start: calc(var(--roadside-top) - 120px * var(--roadside-s)); translate: -50% calc(var(--roadside-p, 0) * 60px * var(--roadside-s)); }
.roadside__layer--near { inset-block-start: var(--roadside-top); }
.roadside__layer--verge { z-index: var(--z-raised); inset-block-start: var(--roadside-top); translate: -50% calc(var(--roadside-p, 0) * -16px * var(--roadside-s)); }
.roadside__sign {
  position: absolute;
  inset-block-start: calc(var(--roadside-wheel) - 221px * var(--roadside-s));
  inset-inline-start: var(--v7-social-sign-left);
  inline-size: calc(140px * var(--roadside-s));
  block-size: calc(180px * var(--roadside-s));
}
.roadside__post { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.roadside__badge { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; inline-size: 100%; block-size: auto; }

/* The sales band (Figma V7 sales-new): on the field, the two offers wrapping by their least width (--v7-sales-min:
   300 px on the phone, the column on the tablet, 560 from 1,024): two to a row from 700 to 767 px and from 1,300, one
   to a row otherwise (measured, release 1.2.1), --offer-gap apart; the band clips the bursts
   that stand past its offers' edges. */
.sales {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--offer-gap);
  row-gap: var(--v7-sales-row-gap);
  padding: var(--v7-sales-pt) var(--page-margin) var(--v7-sales-pb);
  overflow: hidden;
  background: var(--ink-field);
}
.sales > .offer-card { flex: 1 1 0; min-inline-size: min(var(--v7-sales-min), 100%); }
/* the wide layout (release 1.2.1): each offer across the column, the rows 48 px apart from 768 (the offer card's
   stylesheet arranges the offers) */
@media (min-width: 768px) { .sales[data-layout="wide"] { row-gap: 48px; } }

/* The search panel (Figma V7 v7/chrome/search-panel), from 768 px: it hangs from the header's foot on the field
   with the vinyl ground at 72 percent (the same crop as the menus, growing with a wider panel), rules of rule-field above and below, the caution
   stripe along its last 29 px, the page under a half-field scrim. 25 px down: the field (the label beside the
   input), then 32 px down the columns side by side. Tablet (768): the field the content's width; the columns
   164, 328 and 164 px, 24 apart, one product to a row. Desktop (1440): the field 640 px; the columns 296, 624 and
   296 px, 32 apart, the products two to a row. Between the drawn widths the columns keep those proportions. */
.search-panel {
  position: relative;
  display: none;
  padding-block: 25px 67px;
  border-block: 1px solid var(--ink-rule-field);
  background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 28%, transparent), color-mix(in srgb, var(--ink-field) 28%, transparent)),
    var(--ink-field) url("/images/field-vinyl/field-vinyl.webp") no-repeat -171.1px 100% / max(1782.1px, 100% + 171.1px) auto;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"))) {
  .search-panel {
    background:
    linear-gradient(color-mix(in srgb, var(--ink-field) 28%, transparent), color-mix(in srgb, var(--ink-field) 28%, transparent)),
    var(--ink-field) image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"), url("/images/field-vinyl/field-vinyl.webp") type("image/webp")) no-repeat -171.1px 100% / max(1782.1px, 100% + 171.1px) auto;
  }
}
.search-panel .search__results { flex-direction: row; gap: 24px; margin-block-start: 32px; }
.search-panel .search__col--suggestions, .search-panel .search__col--terms { flex: 164 1 0; }
.search-panel .search__col--products { flex: 328 1 0; }
/* before typing there is no third column; its room stays empty, as drawn */
.search-panel .search__results:not(:has(.search__col--terms))::after { content: ""; flex: 164 1 0; }
.search-panel > .caution-stripe { position: absolute; inset-inline: 0; inset-block-end: 0; }
@media (min-width: 768px) {
  .search-panel { display: block; }
}
@media (min-width: 1024px) {
  .search-panel .search__field { inline-size: min(640px, 100%); }
  .search-panel .search__results { gap: 32px; }
  .search-panel .search__col--suggestions, .search-panel .search__col--terms { flex: 296 1 0; }
  .search-panel .search__col--products { flex: 624 1 0; }
  .search-panel .search__results:not(:has(.search__col--terms))::after { flex: 296 1 0; }
  .search-panel .search__products { grid-template-columns: 1fr 1fr; }
}

/* The settle: opening, the panel fades in and drops the last 4 px into place over --motion-panel on
   --ease-out; closing (1.1.0), it fades out and lifts the same 4 px on --ease-in, shown until it has gone and
   taking no presses meanwhile. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .search-panel:not([hidden]) { animation: search-panel-settle var(--motion-panel) var(--ease-out); }
  .search-panel[hidden] {
    opacity: 0;
    translate: 0 -4px;
    pointer-events: none;
    transition: opacity var(--motion-panel) var(--ease-in), translate var(--motion-panel) var(--ease-in), display var(--motion-panel) allow-discrete;
  }
}
@keyframes search-panel-settle { from { opacity: 0; translate: 0 -4px; } }

/* A product in search (Figma V7 v7/search/product): a row 70 px tall, the photograph at 56 by 70, then 12 px on
   the words, centred: the name (the display face at 17/22), the vendor (Rockwell, v7/archive/12) and the price
   (the body face at 13/16), 4 px apart, the vendor and price in paper-dim. The name is the link and covers the row. */
.search-product { position: relative; display: flex; align-items: center; gap: 12px; block-size: 70px; }
.search-product__thumb { flex: none; inline-size: 56px; block-size: 70px; overflow: hidden; background: var(--ink-rule-field); }
.search-product__image { inline-size: 100%; block-size: 100%; object-fit: cover; }
.search-product__text { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.search-product__name {
  overflow: hidden;
  color: var(--ink-paper);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.375rem;
}
.search-product__name::after { content: ""; position: absolute; inset: 0; }
.search-product__name { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 0.15em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.search-product__name:hover { text-decoration-color: currentColor; }
.search-product__vendor {
  color: var(--ink-paper-dim);
  font-family: var(--t-v7-archive-12-family);
  font-weight: var(--t-v7-archive-12-weight);
  font-size: var(--t-v7-archive-12-size);
  line-height: var(--t-v7-archive-12-line);
  letter-spacing: var(--t-v7-archive-12-track);
}
.search-product__price { color: var(--ink-paper-dim); font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; line-height: 1rem; }
.search-product:has(.search-product__name:focus-visible) { outline: 2px solid var(--ink-yellow); outline-offset: 3px; }
.search-product__name:focus-visible { outline: none; }

/* Search (Figma V7 v7/chrome/search-panel and the drawer's search views): the field, then the results.
   The field: SEARCH (display 14/21, paper) and the input, 47 px tall with a 1 px paper rule, the query in the body
   face at 20 px; focused, the rule is 4 px. In the panel the label sits beside the input (55 px from its start,
   the field 640 px on the desktop, the content's width on the tablet); in the drawer it sits above (the input 40 px).
   The results: columns headed in the display face over a rule; suggestions and terms in the body face at 17/24,
   9 px apart, a suggestion's typed part regular and the rest bold; products in rows (search-product); VIEW ALL
   12 px under them. In the panel the columns sit side by side, 296, 624 and 296 px 32 apart on the desktop (the
   products two to a row), 164, 328 and 164 px 24 apart on the tablet (one to a row); in the drawer they stack. */
.search { display: block; }
.search__field { display: flex; align-items: flex-start; gap: 16px; }
.search__label {
  flex: none;
  margin-block-start: 15px;
  color: var(--ink-paper);
  font-family: var(--t-display-14-lh21-ls0p56-family);
  font-weight: var(--t-display-14-lh21-ls0p56-weight);
  font-size: var(--t-display-14-lh21-ls0p56-size);
  line-height: var(--t-display-14-lh21-ls0p56-line);
  letter-spacing: var(--t-display-14-lh21-ls0p56-track);
}
.search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 47px;
  padding: 14px 0 8px;
  border: 0;
  border-block-end: 1px solid var(--ink-paper);
  border-radius: 0;
  background: transparent;
  color: var(--ink-paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5rem;
  appearance: none;
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__input:focus, .search__input[data-focused] { outline: none; padding-block-end: 5px; border-block-end-width: 4px; }
.search__results { display: flex; flex-direction: column; gap: 24px; }
.search__col { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.search__head { padding-block-end: 8px; border-block-end: 1px solid var(--ink-rule-field); }
.search__head-text {
  margin: 0;
  color: var(--ink-paper-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2857;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.search__col--terms .search__head:not(:first-child) { margin-block-start: 0; }
.search__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.search__suggestion, .search__term {
  display: inline-block;
  color: var(--ink-paper);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5rem;
}
.search__suggestion b { font-weight: 700; }
.search__suggestion, .search__term { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: auto; text-underline-offset: 0.2em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.search__suggestion:hover, .search__term:hover { text-decoration-color: currentColor; }
.search__products { display: grid; grid-template-columns: 1fr; gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.search__none { margin: 0; color: var(--ink-paper); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5rem; }

/* A band's head (Figma V7 v7/section-head) in the display face at the band-head size (36, 44, 56 at the phone,
   tablet and desktop widths). ornament=none: the head alone, its line box the face's own (auto). ornament=stars:
   centred, a Chicago star each side 17 px away (30 by 35 at 1440) and a red rule under it, the head's line box 95
   percent (the brands band). ornament=rule: the head over a 4 px red rule the column's width, 12 px apart. */
.section-head { color: var(--ink-field); }
.section-head[data-ink="paper"] { color: var(--ink-paper); }
.section-head__text {
  margin: 0;
  font-family: var(--t-v7-display-56-lhauto-ls2p24-band-head-family);
  font-weight: var(--t-v7-display-56-lhauto-ls2p24-band-head-weight);
  font-size: var(--t-v7-display-56-lhauto-ls2p24-band-head-size);
  line-height: var(--t-v7-display-56-lhauto-ls2p24-band-head-line);
  letter-spacing: var(--t-v7-display-56-lhauto-ls2p24-band-head-track);
}
.section-head[data-ornament="stars"] { display: flex; flex-direction: column; align-items: center; gap: var(--v7-brands-rule-gap); padding-block-end: 24px; }
.section-head[data-ornament="stars"] .section-head__text,
.section-head[data-ornament="rule"] .section-head__text { line-height: var(--t-v7-display-56-lh53-ls2p24-band-head-line); }
.section-head__line { display: flex; align-items: center; gap: var(--v7-brands-head-gap); }
/* the head is drawn to its measure; CSS spaces the last letter too, so the box takes that space back on its right
   and keeps the words centred where the design centres them */
.section-head[data-ornament="stars"] .section-head__text {
  inline-size: calc(var(--v7-brands-h2-w) + var(--t-v7-display-56-lh53-ls2p24-band-head-track));
  max-inline-size: 100%;
  margin-inline-end: calc(-1 * var(--t-v7-display-56-lh53-ls2p24-band-head-track));
  text-align: center;
}
.section-head__star { flex: none; inline-size: var(--v7-brands-star-w); block-size: var(--v7-brands-star-h); fill: var(--ink-red-ink); }
.section-head__rule { display: block; block-size: 4px; background: var(--ink-red-ink); }
.section-head[data-ornament="stars"] .section-head__rule { inline-size: var(--v7-brands-rule-w); max-inline-size: 100%; }
.section-head[data-ornament="rule"] { display: flex; flex-direction: column; gap: 12px; }
.section-head[data-ornament="rule"] .section-head__rule { inline-size: 100%; }

/* The see-all card (Figma V7 v7/card/see-all) that ends the best sellers, the product card's size and paper: an
   arrow in the display face on the field in the window, SEE ALL in the display capitals, THE WHOLE SHELF in Rockwell;
   the name is the link over the whole card. */
.see-all {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: var(--v7-sellers-card-w);
  block-size: var(--v7-sellers-card-h);
  padding: 14px;
  background: var(--ink-paper);
  color: var(--ink-field);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--ink-field) 55%, transparent);
}
.see-all__top { display: flex; flex-direction: column; gap: 14px; }
.see-all__window { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--ink-field); }
.see-all__arrow {
  color: var(--ink-paper);
  font-family: var(--t-v7-display-84-84-66-55-family);
  font-weight: var(--t-v7-display-84-84-66-55-weight);
  font-size: var(--t-v7-display-84-84-66-55-size);
  line-height: var(--t-v7-display-84-84-66-55-line);
}
.see-all__name {
  margin: 0;
  font-family: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-family);
  font-weight: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-weight);
  font-size: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-size);
  line-height: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-line);
  letter-spacing: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-track);
  text-transform: var(--t-v7-display-26-caps-lhauto-ls0p4-26-23-21-case);
}
.see-all__link { color: inherit; text-decoration: none; }
.see-all__link::after { content: ""; position: absolute; inset: 0; }
.see-all__link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; transition: text-decoration-color var(--motion-hover) var(--ease-in-out); }
.see-all__link:hover { text-decoration-color: currentColor; }
.see-all:has(.see-all__link:focus-visible) { outline: 2px solid var(--focus-ring, var(--ink-yellow)); outline-offset: 3px; }
.see-all__link:focus-visible { outline: none; }
.see-all__meta { padding-block-end: 28px; }
/* one line, as drawn: the card is 154 px wide at every phone width, so the words always fit its 126 px (WebKit sets
   them a quarter pixel wider than Chrome and would otherwise wrap the last word) */
.see-all__note {
  margin: 0;
  white-space: nowrap;
  font-family: var(--t-v7-archive-12-family);
  font-weight: var(--t-v7-archive-12-weight);
  font-size: var(--t-v7-archive-12-size);
  line-height: var(--t-v7-archive-12-line);
  letter-spacing: var(--t-v7-archive-12-track);
}

/* BEST SELLERS (Figma V7 sellers-block and nut-row): the head filling the row with the arrows at its end (from
   1,024 px, --v7-sellers-arrows), then the row of product cards from the gutter to the window's right edge, the next
   card peeking; it scrolls on its own below 1,024 and the arrows page it above. The nuts sit at the gutter under it.
   The row keeps 12 px under the cards for their hard shadows, and after its last card the room that lets the last
   page start at the gutter (--sellers-tail, which ss-sellers sets from the row's measure; the margin without it). */
.sellers { display: block; padding-inline-start: var(--page-margin); }
.sellers__head { display: flex; align-items: center; gap: var(--space-6); padding-inline-end: var(--page-margin); }
.sellers__head > .section-head { flex: 1 1 auto; min-inline-size: 0; }
.sellers .pager-arrows { display: none; }
.sellers__row {
  display: flex;
  gap: var(--v7-sellers-gap);
  margin: var(--v7-doors-sell-gap) 0 -12px;
  padding: 0 var(--sellers-tail, var(--page-margin)) 12px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.sellers__row::-webkit-scrollbar { display: none; }
.sellers__row:focus-visible { outline: 2px solid var(--ink-field); outline-offset: 4px; }
.sellers__item { flex: none; scroll-snap-align: start; }
.sellers__nuts { padding-block-start: var(--v7-doors-sell-pb); padding-inline-end: var(--page-margin); }
@media (min-width: 1024px) {
  .sellers .pager-arrows { display: flex; }
}

/* The dispatch signup (Figma V7 v7/visit/signup), a coupon on the deep red: a row of small punches along its top
   (7 by 15, 20 px apart from 24 px in, in the photograph red, every seventh punched through in the darkest red), then
   the copy (Rockwell: "Get the dispatch" and its line) and the form (the field and SIGN ME UP), side by side where
   both fit their minimums and one above the other where not. The punches are a border only, never behind text. */
.signup {
  display: block;
  overflow: hidden;
  background: var(--ink-red-deep);
  color: var(--ink-paper);
}
.signup__punches {
  block-size: 29px;
  background:
    linear-gradient(to right, var(--ink-punch-hole) 7px, transparent 7px) 84px 14px / 140px 15px repeat-x,
    linear-gradient(to right, var(--ink-red-photo) 7px, transparent 7px) 24px 14px / 20px 15px repeat-x;
}
.signup__body { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 16px 24px 24px; }
.signup__copy { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-inline-size: min(var(--v7-visit-signup-copy-min), 100%); }
.signup__head {
  margin: 0;
  font-family: var(--t-v7-archive-34-34-29-26-family);
  font-weight: var(--t-v7-archive-34-34-29-26-weight);
  font-size: var(--t-v7-archive-34-34-29-26-size);
  line-height: var(--t-v7-archive-34-34-29-26-line);
}
.signup__line {
  margin: 0;
  font-family: var(--t-v7-archive-22-22-20-18-family);
  font-weight: var(--t-v7-archive-22-22-20-18-weight);
  font-size: var(--t-v7-archive-22-22-20-18-size);
  line-height: var(--t-v7-archive-22-22-20-18-line);
}
/* the field under its EMAIL label and SIGN ME UP share their foot (signup__form, its items aligned to the end) */
.signup__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; flex: 1 1 0; min-inline-size: min(300px, 100%); }
.signup__form > .field { flex: 1 1 0; min-inline-size: min(200px, 100%); }
.signup__form > .button { flex: none; }
/* The states (release 1.2.1, Figma visit/signup/1440/invalid and /signed-up; js/ss-signup.js). Invalid: on the red card
   the system's red rule cannot be seen (red on #BC0100), so the box takes a 3 px yellow rule (5.56 to 1 on the card)
   and its error line stands under it in paper. Signed up: the copy and the form give way to the line in the copy's
   own type, across the coupon; the punches stay. */
.signup [hidden] { display: none; }
.signup .field__input[aria-invalid="true"] { border: 3px solid var(--ink-yellow); box-shadow: none; }
.signup__sent { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.signup__sent:focus { outline: none; }
.signup__sent:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 4px; }
.signup__sent-head {
  margin: 0;
  font-family: var(--t-v7-archive-34-34-29-26-family);
  font-weight: var(--t-v7-archive-34-34-29-26-weight);
  font-size: var(--t-v7-archive-34-34-29-26-size);
  line-height: var(--t-v7-archive-34-34-29-26-line);
}
.signup__sent-body {
  margin: 0;
  font-family: var(--t-v7-archive-22-22-20-18-family);
  font-weight: var(--t-v7-archive-22-22-20-18-weight);
  font-size: var(--t-v7-archive-22-22-20-18-size);
  line-height: var(--t-v7-archive-22-22-20-18-line);
}

/* The size table (Figma V7 size-table, inside SPECS): SIZE and FITS CHEST in the display face at 14 px over a 2 px
   paper rule, then one row per size over a 1 px rule at a quarter of the paper, each row 34 px tall; the size
   column 104 px wide, the chest 16 px after it, in the body face at 17 px. */
.size-table { inline-size: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; }
.size-table th, .size-table td { block-size: 34px; padding: 0; text-align: start; vertical-align: middle; font-weight: 400; }
.size-table th:first-child { inline-size: 120px; }
.size-table thead th { border-block-end: 2px solid var(--ink-paper); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; }
.size-table tbody tr { border-block-end: 1px solid color-mix(in srgb, var(--ink-paper) 25%, transparent); }

/* The kit specimen (review-only). */
.smoke { padding: var(--space-8) 20px; display: grid; gap: var(--space-8); }
.smoke__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.smoke__specimen { font-size: 1.5rem; }
.smoke__faces { display: grid; gap: var(--space-1); color: var(--ink-paper-dim); }

/* A link to one of the store's accounts (Figma V7 v7/social/link, style=filled): a plate in the photograph red with a
   1 px dim rule inside, --v7-social-link-h tall; the platform's mark (46 px, paper), an arrow and the handle, centred
   26 px apart. The whole plate is the link. */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  block-size: var(--v7-social-link-h);
  border: 1px solid var(--ink-field-dim);
  background: var(--ink-red-photo);
  color: var(--ink-paper);
  text-decoration: none;
}
.social-link { transition: background-color var(--motion-hover) var(--ease-in-out); }
.social-link:hover { background: var(--ink-red-deep); }
.social-link:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.social-link__icon { flex: none; inline-size: 46px; block-size: 46px; fill: none; stroke: var(--ink-paper); stroke-width: 3px; }
.social-link__dot, .social-link__bar { fill: var(--ink-paper); stroke: none; }
.social-link__arrow { flex: none; inline-size: 40px; block-size: 15px; fill: var(--ink-paper); }
.social-link__handle { font-family: var(--font-body); font-size: 1.3125rem; line-height: 1.24; white-space: nowrap; }

/* A tile of the store's feed (Figma V7 v7/social/tile): the photograph at 4:5, Instagram's portrait size, framed as a
   print by an even paper border inside it (--v7-social-tile-border: 8 px on the desktop, 5 below), no shadow. */
.social-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: var(--v7-social-tile-border) solid var(--ink-paper); background: var(--ink-rule-paper); }
/* the photograph fills the space inside the border as an absolute box (1.1.0): a percentage height inside a box sized
   by its aspect ratio resolves against the border box in WebKit, which made the photograph 10 to 16 px too tall and
   cut its foot, and against the inside in Chrome and Firefox; an absolute box's resolves against the inside in all */
.social-tile__image { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The social band (Figma V7 social): the social frill with the big rig on its roadside; then the head over the links,
   stacked at every width (option C, 2026-10-07): FOLLOW THE in v7/display/36 over the store's wordmark
   (--v7-social-wordmark-w by -h), --v7-social-kicker-gap apart; under them, --v7-social-stack-gap down, the two links
   at the content's full width, side by side where they fit (--v7-social-link-min each) and stacked on the phone, each
   over a 6 px SS/Red rule 8 px under its plate; then the tiles at 4:5 in full rows only: two to a row on the phone
   (the ninth and tenth hidden), three from 768 (the seventh to the tenth hidden), five from 1024. */
.social { padding-block: var(--v7-social-pt) var(--v7-social-pb); background: var(--ink-field); color: var(--ink-paper); }
.social__row {
  display: flex;
  flex-direction: column;
  gap: var(--v7-social-stack-gap);
  padding-block-start: var(--v7-social-row-pt);
}
.social__head {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  gap: var(--v7-social-kicker-gap);
  margin: 0;
}
.social__kicker {
  display: block;
  font-family: var(--t-v7-display-36-36-31-27-family);
  font-weight: var(--t-v7-display-36-36-31-27-weight);
  font-size: var(--t-v7-display-36-36-31-27-size);
  line-height: var(--t-v7-display-36-36-31-27-line);
  letter-spacing: var(--t-v7-display-36-36-31-27-track);
  text-transform: uppercase;
  /* CSS spaces the last letter too; Figma does not */
  margin-inline-end: calc(-1 * var(--t-v7-display-36-36-31-27-track));
}
.social__wordmark { display: block; inline-size: var(--v7-social-wordmark-w); max-inline-size: 100%; block-size: auto; }
.social__links { display: flex; flex-wrap: wrap; gap: 16px var(--v7-social-links-gap); }
.social__cell { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-inline-size: min(var(--v7-social-link-min), 100%); }
.social__rule { display: block; block-size: 6px; background: var(--ink-red-ink); }
.social__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tile-gap);
  margin: 0;
  padding-block-start: var(--v7-social-grid-pt);
  list-style: none;
}
.social__grid > .social-tile:nth-child(n+9) { display: none; }
@media (min-width: 768px) {
  .social__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .social__grid > .social-tile:nth-child(n+7) { display: none; }
}
@media (min-width: 1024px) {
  .social__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .social__grid > .social-tile:nth-child(n+7) { display: block; }
}

/* One of the platform's orders (Figma V7 v7/category/sort-option), the current one marked. */
.sort-option { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 24px; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.3333; cursor: pointer; }
.sort-option__input { position: absolute; inset-inline-start: 0; inset-block-start: calc(50% - 9px); opacity: 0; inline-size: 18px; block-size: 18px; margin: 0; }
.sort-option__radio { position: relative; flex: none; inline-size: 18px; block-size: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-paper); transition: background-color var(--motion-hover) var(--ease-in-out), box-shadow var(--motion-hover) var(--ease-in-out); }
.sort-option__input:checked + .sort-option__radio { background: var(--ink-yellow); box-shadow: none; }
.sort-option__input:checked + .sort-option__radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink-field); }
.sort-option__input:focus-visible + .sort-option__radio { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }

/* Sort by's dropdown (Figma V7 v7/category/sort-panel): the filter panel's ground and rule, under the value's right
   edge; the platform's orders 12 px apart. */
.sort-panel {
  position: absolute;
  inset-block-start: calc(100% + 16px);
  z-index: var(--z-overlay);
  inline-size: 260px;
  padding: 20px 24px 24px;
  border: 1px solid var(--ink-rule-field);
  background: url("/images/field-vinyl/field-vinyl.webp") no-repeat -1147.2px 100% / 2686px auto, var(--ink-field);
  color: var(--ink-paper);
  inset-inline-end: 0;
}
/* the AVIF only where the browser reads type() in image-set(): a declaration holding var() is checked only once
   its variables are filled in, so beside the plain WebP in one rule it would always win, and blank the ground in a
   browser without type() */
@supports (background-image: image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"))) {
  .sort-panel {
    background: image-set(url("/images/field-vinyl/field-vinyl.avif") type("image/avif"), url("/images/field-vinyl/field-vinyl.webp") type("image/webp")) no-repeat -1147.2px 100% / 2686px auto, var(--ink-field);
  }
}
.sort-panel[hidden] { display: none; }
/* the orders 24 px tall (a target's least size) and 8 apart: the design's 20 and 12, the same 32 px pitch */
.sort-panel__list { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }

/* The settle: opening, the panel fades in and drops the last 4 px into place over --motion-panel on
   --ease-out; closing (1.1.0), it fades out and lifts the same 4 px on --ease-in, shown until it has gone and
   taking no presses meanwhile. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sort-panel:not([hidden]) { animation: sort-panel-settle var(--motion-panel) var(--ease-out); }
  .sort-panel[hidden] {
    opacity: 0;
    translate: 0 -4px;
    pointer-events: none;
    transition: opacity var(--motion-panel) var(--ease-in), translate var(--motion-panel) var(--ease-in), display var(--motion-panel) allow-discrete;
  }
}
@keyframes sort-panel-settle { from { opacity: 0; translate: 0 -4px; } }
/* Glide Select (1.2.0): the filter panel's highlight behind the orders, as the filter panel's stylesheet draws it */
.sort-panel__list { position: relative; }
.sort-panel__list > .sort-option { z-index: 1; }
.sort-panel__glide {
  position: absolute;
  inset-block-start: 0;
  inset-inline: -12px;
  block-size: var(--glide-h, 0px);
  translate: 0 var(--glide-y, 0px);
  background: color-mix(in srgb, var(--ink-paper) 12%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: translate var(--motion-hover) var(--ease-in-out), block-size var(--motion-hover) var(--ease-in-out), opacity var(--motion-hover) var(--ease-in-out);
}
.sort-panel__glide[data-on] { opacity: 1; }
.sort-panel__glide[data-jump] { transition: opacity var(--motion-hover) var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) { .sort-panel__glide { transition: opacity var(--motion-hover) var(--ease-in-out); } }

/* The product's fields as a labelled run (Figma V7 v7/product/specs, state=open): each label in the display face at
   14 px in dim paper, 104 px wide, the value 16 px after it in the body face at 17 px; rows 6 px apart. A row
   without data does not render. */
.specs { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.specs__row { display: flex; align-items: baseline; gap: 16px; }
.specs__label { flex: none; inline-size: 104px; color: var(--ink-paper-dim); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.04em; }
.specs__value { flex: 1 1 0; margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; }

/* The category page's store band (Figma V7 store-band, "the compact store card"): on the yellow, the counterman beside
   the store card, 56 px apart (20 on the phone, 32 on the tablet), one above the other where the card would fall under
   its least width (600 px; 400 on the tablet, 300 on the phone). The counterman is the closer crop, from the head to just
   below the belt: his drawing 487 px wide (389 on the tablet, 257 on the phone), centred on a narrower frame and cut
   by the band's foot, which clips him. */
.store-band { overflow: hidden; background: var(--ink-yellow); color: var(--ink-field); }
.store-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v7-category-store-gap);
  padding-block: var(--v7-category-store-py);
}
.store-band__counterman {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  inline-size: var(--v7-category-counterman-w);
  block-size: var(--v7-category-counterman-h);
  padding-block-start: var(--v7-store-art-pt);
}
.store-band__art {
  position: relative;
  flex: none;
  inline-size: var(--v7-store-art-w);
  block-size: var(--v7-store-art-h);
  overflow: hidden;
}
/* the card stands over the drawing, as the design layers them: the drawing's frame is wider than its column and reaches
   under the card from 768 px until the card wraps; positioned, the frame would otherwise paint over the card's words */
.store-band .store-card { position: relative; flex: 1 1 0; min-inline-size: min(var(--v7-category-store-card-min), 100%); }

/* The store card (Figma V7 v7/visit/store-card), on time card stock: paper inside a 2 px black rule; sixteen punches
   (13 by 26, 6 px corners) spread along its top, 34 px in; under them, 12 px down and 24 in, the map (at least 240
   px wide, --v7-store-map-h tall) and the words (at least 260): "Roll on in" in Rockwell at --v7-type-34-29-26, the
   address and the hours at --v7-type-20-16-14, OPEN IN MAPS; side by side where both fit, one above the other where
   not, 24 px apart. */
.store-card { --focus-ring: var(--ink-field); overflow: hidden; background: var(--ink-paper); box-shadow: inset 0 0 0 2px var(--ink-field); color: var(--ink-field); }
.store-card__punches { display: flex; justify-content: space-between; block-size: 40px; padding: 14px 34px 0; }
.store-card__punch { flex: none; inline-size: 13px; block-size: 26px; border-radius: 6px; background: var(--ink-field); }
.store-card__body { display: flex; flex-wrap: wrap; gap: 24px; padding: 12px 24px 24px; }
.store-card__map { flex: 1 1 0; min-inline-size: min(240px, 100%); block-size: var(--v7-store-map-h); }
.store-card__info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1 1 0; min-inline-size: min(260px, 100%); }
.store-card__head {
  margin: 0;
  font-family: var(--t-v7-archive-34-34-29-26-family);
  font-weight: var(--t-v7-archive-34-34-29-26-weight);
  font-size: var(--t-v7-archive-34-34-29-26-size);
  line-height: var(--t-v7-archive-34-34-29-26-line);
}
.store-card__line {
  margin: 0;
  font-family: var(--t-v7-archive-20-20-16-14-family);
  font-weight: var(--t-v7-archive-20-20-16-14-weight);
  font-size: var(--t-v7-archive-20-20-16-14-size);
  line-height: var(--t-v7-archive-20-20-16-14-line);
}

/* Our Store's line and paragraph (Figma V7 store__mission): on the field under the head, the client's shelf line in the
   display face across the column, 24 px over the store's own paragraph, which is the head's line's width. */
.store-mission { background: var(--ink-field); color: var(--ink-paper); }
.store-mission__inner { display: flex; flex-direction: column; gap: 24px; padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.store-mission__line { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--v7-type-40-34-30); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.store-mission__body { inline-size: min(var(--v7-category-lede-w), 100%); margin: 0; font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.4; }

/* FIND IN STORE's panel (Figma V7 v7/product/store-panel): a dialog over the page and a scrim of the field at 50
   percent; the field inside a 2 px paper rule, 20 px inside it at the top and 24 at the sides and foot: FIND IN STORE in the
   display face at 24 px and CLOSE, the pickup line in faint paper, and the store card, 16 px apart. 928 px wide on
   the desktop (the store card at its 880), the window's width on the phone. */
.store-panel {
  inline-size: min(928px, 100%);
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: auto;
  /* Figma lays the panel out inside its 2 px rule: the contents start 22 px down and 26 px in */
  padding: 22px 26px 26px;
  overflow: auto;
  border: 0;
  background: var(--ink-field);
  box-shadow: inset 0 0 0 2px var(--ink-paper);
  color: var(--ink-paper);
  flex-direction: column;
  gap: 16px;
}
.store-panel[open] { display: flex; }
.store-panel::backdrop { background: color-mix(in srgb, var(--ink-field) 50%, transparent); }
.store-panel__head { display: flex; align-items: center; justify-content: space-between; }
.store-panel__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: 0.04em; }
.store-panel__close {
  display: grid;
  place-items: center end;
  inline-size: 60px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-paper);
  font-family: var(--t-display-15-lh15-ls0p6-family);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.store-panel__close:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: -2px; }
.store-panel__pickup { margin: 0; color: var(--ink-paper-faint); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.45; }
.store-panel__place { font-weight: 500; }
/* The settle (1.1.0), as the header's panels: opening, the panel fades in and drops the last 4 px into place over
   --motion-panel on --ease-out, the page's dimming fading with it; closing, the same out on --ease-in, shown and
   kept in the top layer until it has gone. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .store-panel { opacity: 0; translate: 0 -4px; transition: opacity var(--motion-panel) var(--ease-in), translate var(--motion-panel) var(--ease-in), overlay var(--motion-panel) allow-discrete, display var(--motion-panel) allow-discrete; }
  .store-panel[open] { opacity: 1; translate: 0 0; transition-timing-function: var(--ease-out); }
  @starting-style { .store-panel[open] { opacity: 0; translate: 0 -4px; } }
  .store-panel::backdrop { background-color: transparent; transition: background-color var(--motion-panel) var(--ease-in), overlay var(--motion-panel) allow-discrete, display var(--motion-panel) allow-discrete; }
  .store-panel[open]::backdrop { background-color: color-mix(in srgb, var(--ink-field) 50%, transparent); transition-timing-function: var(--ease-out); }
  @starting-style { .store-panel[open]::backdrop { background-color: transparent; } }
  /* closing, it takes no presses while it goes */
  .store-panel:not([open]), .store-panel:not([open])::backdrop { pointer-events: none; }
}

/* A text page (Figma V7 text-page__body, drawn as Shipping & Returns): on the field under the head, one column the head's
   line's width, its sections 40 px apart, each a head in the display capitals 16 px over its lines in the body face at
   150 percent: paragraphs, a list with its bullets, a size table, and a link in the running text. */
.text-page { background: var(--ink-field); color: var(--ink-paper); }
.text-page__inner { padding-block: var(--v7-category-grid-pt) var(--v7-category-grid-pb); }
.text-page__column { display: flex; flex-direction: column; gap: 40px; inline-size: min(var(--v7-category-lede-w), 100%); }
.text-page__section { display: flex; flex-direction: column; gap: 16px; }
.text-page__head {
  margin: 0;
  font-family: var(--t-v7-display-30-30-26-22-family);
  font-weight: var(--t-v7-display-30-30-26-22-weight);
  font-size: var(--t-v7-display-30-30-26-22-size);
  line-height: var(--t-v7-display-30-30-26-22-line);
  letter-spacing: var(--t-v7-display-30-30-26-22-track);
  text-transform: uppercase;
}
.text-page__p, .text-page__list { margin: 0; font-family: var(--font-body); font-size: var(--v7-type-20-18-16); line-height: 1.5; }
/* the bullets as drawn: a disc about 13 px in, the words 32 px in at 1,440 */
.text-page__list { padding-inline-start: 1.6em; list-style: disc; }
.text-page__link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.text-page__link { transition: text-decoration-thickness var(--motion-hover) var(--ease-in-out); }
.text-page__link:hover { text-decoration-thickness: 2px; }
.text-page__link:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }

/* The visit band (Figma V7 visit): the caution stripe, then the stage: the scene (the yellow paper, the store's
   interior drawn over its top --v7-visit-interior-h, a dissolve into the field over its foot --v7-visit-dissolve-h,
   the whole --v7-visit-scene-h tall and clipped) with the counterman in front (from the left edge on the phone and
   the tablet, --v7-visit-art-x in and --v7-visit-art-y down; from 1,024 px placed from the right, --v7-visit-art-pr
   in, so he stays beside the card), the store card set to the right (--v7-visit-card-top down, --v7-visit-card-pr in),
   and the signup across the foot. The scene's paper is the doors band's, in the same three layers. */
.visit { position: relative; overflow: hidden; padding-block-end: var(--v7-visit-pb); background: var(--ink-field); }
.visit__stage { position: relative; min-block-size: var(--v7-visit-scene-h); }
.visit__scene {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--v7-visit-scene-h);
  overflow: hidden;
  background:
    none 0 0 / 1024px repeat,
    none 0 0 / 2048px repeat,
    var(--ink-yellow) none 0 0 / 512px repeat;
  background-blend-mode: normal, multiply, normal;
}
/* the paper's layers come when the band is near, or once the page is idle after its load (js/ss-near.js, 1.2.0):
   the grit is noise, which no image format makes smaller, and the band stands below the first screen, so it never
   competes with what the first screen paints; until then, and without the script, the band is the paper's plain
   yellow. Below 768 the grit is its 512 px tile alone (64 KB) on any screen, softer on a dense one at a fifth of the
   bytes; from 768 a dense screen takes the tile's true copy at twice the size (299 KB) */
.visit__scene[data-near] { background-image: url("/images/paper-flecks/paper-flecks.svg"), url("/images/paper-mottle/paper-mottle.webp"), url("/images/paper-grit-512/paper-grit-512.webp"); }
@media (min-width: 768px) {
  .visit__scene[data-near] { background-image: url("/images/paper-flecks/paper-flecks.svg"), url("/images/paper-mottle/paper-mottle.webp"), image-set(url("/images/paper-grit-512/paper-grit-512.webp") 1x, url("/images/paper-grit-512-2x/paper-grit-512-2x.webp") 2x); }
}
.visit__interior { position: absolute; inset-block-start: 0; inset-inline: 0; inline-size: 100%; block-size: var(--v7-visit-interior-h); object-fit: cover; object-position: 50% 0; }
.visit__dissolve {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--v7-visit-dissolve-h);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink-field) 50%, transparent) 45%, var(--ink-field));
}
.visit__counterman {
  position: absolute;
  inset-block-start: var(--v7-visit-art-y);
  inset-inline-start: var(--v7-visit-art-x);
  inline-size: var(--v7-visit-art-w);
  block-size: var(--v7-visit-art-h);
  overflow: hidden;  /* his drawing's frame (the breath's, 1.2.0) is wider than the box, as object-fit: cover drew it */
}
.visit__counterman-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* his breath (1.2.0, the breath in motion.css): his drawing's frame and the box the breath moves, from the design
   repository's scripts/breath-v7.py */
.visit__counterman .breath {
  --breath-frame: 1024 / 1023;
  --breath-x: 19.4336%; --breath-y: 0.3910%; --breath-w: 57.9102%; --breath-h: 59.9218%;
  --breath-strip-x: 19.0430%; --breath-strip-y: 0.0000%; --breath-strip-w: 58.6914%; --breath-strip-h: 60.7038%;
}
.visit__card-row { position: relative; display: flex; justify-content: flex-end; padding: var(--v7-visit-card-top) var(--v7-visit-card-pr) 0 var(--page-margin); }
.visit__strip { position: relative; padding: var(--v7-visit-strip-top) var(--v7-visit-strip-pr) 0 var(--v7-visit-strip-pl); }
@media (min-width: 1024px) {
  .visit__counterman { inset-inline-start: auto; inset-inline-end: var(--v7-visit-art-pr); }
}

/* The photographs closer (Figma V7 v7/product/zoom): a dialog filling the window on the field. On the desktop the
   photograph is drawn wider than the window, as the design crops it, and moves up and down with the pointer (--zoom-y,
   from ss-gallery); on the phone the whole photograph across the screen, centred, to pinch. CLOSE at the top right and the count at the foot
   in chips of the field, 24 px in (16 on the phone); the red arrows at the sides, 24 px in, centred. */
.zoom {
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--ink-field);
  color: var(--ink-paper);
}
.zoom::backdrop { background: var(--ink-field); }
/* the photographs keep their stacking to themselves, so CLOSE, the count and the arrows stay over them */
.zoom__items { position: absolute; inset: 0; isolation: isolate; margin: 0; padding: 0; list-style: none; }
.zoom__item { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; touch-action: pinch-zoom; }
.zoom__item[data-current] { display: flex; }
.zoom__image { display: block; inline-size: 100%; block-size: auto; max-inline-size: none; cursor: zoom-out; }
.zoom__chip, .zoom__close, .zoom__count {
  position: absolute;
  display: grid;
  place-items: center;
  block-size: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink-field);
  color: var(--ink-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
}
.zoom__close { inset-block-start: 16px; inset-inline-end: 16px; inline-size: 96px; cursor: pointer; }
.zoom__close:focus-visible { outline: 2px solid var(--ink-yellow); outline-offset: 2px; }
.zoom__count { inset-block-end: 16px; inset-inline-start: calc(50% - 36px); inline-size: 72px; }
.zoom__arrows { display: contents; }
.zoom__arrow { position: absolute; inset-block-start: calc(50% - 22px); display: none; }
.zoom__arrow--previous { inset-inline-start: 24px; }
.zoom__arrow--next { inset-inline-end: 24px; }
@media (min-width: 1024px) {
  /* the desktop: the photograph across the window, the pointer moving it; the arrows show */
  .zoom__item { align-items: flex-start; }
  /* the design's crop shows 0.794 of the photograph's width across the window: the photograph drawn at 1 / 0.794 of the
     window's width (about twice a 928 px frame's own size at 1,440), centred, the pointer moving it up and down */
  .zoom__image { flex: none; inline-size: calc(100% / 0.794); transform: translateY(var(--zoom-y, 0px)); }
  .zoom__close { inset-block-start: 24px; inset-inline-end: 24px; }
  .zoom__count { inset-block-end: 24px; }
  .zoom__arrow { display: grid; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .zoom__image { transition: transform 120ms linear; }
}
/* The fade (1.1.0): the zoom and the window's field behind it fade in over --motion-panel on --ease-out and out on
   --ease-in, kept in the top layer until gone. Once open, the arrows, the keys and a swipe crossfade the photographs
   (data-swapping, js/ss-gallery.js): the next fades in over the last over --motion-crossfade, and the last stays under
   it until it has; opening shows the photograph with the zoom, without a fade of its own. Nothing moves under reduced
   motion. */
@media (prefers-reduced-motion: no-preference) {
  .zoom, .zoom::backdrop { opacity: 0; transition: opacity var(--motion-panel) var(--ease-in), overlay var(--motion-panel) allow-discrete, display var(--motion-panel) allow-discrete; }
  .zoom[open], .zoom[open]::backdrop { opacity: 1; transition-timing-function: var(--ease-out); }
  @starting-style { .zoom[open], .zoom[open]::backdrop { opacity: 0; } }
  /* closing, it takes no presses while it goes */
  .zoom:not([open]), .zoom:not([open])::backdrop { pointer-events: none; }
  .zoom[data-swapping] .zoom__item { transition: display var(--motion-crossfade) allow-discrete; }
  .zoom[data-swapping] .zoom__item[data-current] { z-index: 1; transition: opacity var(--motion-crossfade) var(--ease-in-out); }
  @starting-style { .zoom[data-swapping] .zoom__item[data-current] { opacity: 0; } }
}

/* motion.css - the band reveal (the design repository's developer note, section 16), a base
   stylesheet: it belongs to no one component, it moves what the pages mark (js/ss-reveal.js). As a band's head, its
   rule and its grid first come into view they rise 12 px and fade in over 600 ms on --ease-out, the items of a grid
   70 ms apart (--reveal-i, set by the script), once. The hidden state exists only under html[data-reveal-ready],
   which the script sets, and only on a screen where the reader has not asked for reduced motion: without the
   script, under reduced motion and in print, everything stands as drawn. The rise uses the translate property, so
   an element's own transform stands; once risen (data-reveal-state="done") nothing here applies to it at all. */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-reveal-ready] [data-reveal]:not([data-reveal-state]),
  html[data-reveal-ready] [data-reveal-items]:not([data-reveal-state]) > * { opacity: 0; translate: 0 12px; }
  html[data-reveal-ready] [data-reveal][data-reveal-state="in"],
  html[data-reveal-ready] [data-reveal-items][data-reveal-state="in"] > * {
    transition: opacity var(--motion-reveal) var(--ease-out), translate var(--motion-reveal) var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger));
  }
}

/* The pump counter (js/ss-roll.js, release 1.2.0), a base rule set like the reveal's: the counts of several
   components roll with it. For the length of a roll, a copy of the count is laid over it and hidden from readers,
   its text drawn from data-t so it adds none to the page. Each digit the change touches turns in a window of its own,
   the height of the line and clipped at its edges, its two figures on a reel; the figure that sizes the window stays
   in the flow, unseen, so the line keeps its baseline. A stepper's copy (roll--field) is laid over the number field
   and centres its line as the field does. The script makes no copy under reduced motion. */
.roll { position: absolute; inset: 0; padding: inherit; pointer-events: none; }
.roll--field { inset: auto; display: flex; align-items: center; box-sizing: border-box; white-space: nowrap; }
.roll [data-t]::before { content: attr(data-t); }
/* the words before and after the number are nudged by their relative offset (a word's line box takes no transform) */
.roll > [data-t] { position: relative; }
/* a window clips its reel above and below only, so a figure's ink past its advance (the 7's bar) still shows; a
   window that opens or closes, as a digit comes or goes, clips at its sides too */
.roll__drum { position: relative; display: inline-block; vertical-align: baseline; clip-path: inset(0 -0.25em); }
.roll__drum--sizing { clip-path: inset(0); }
.roll__size { visibility: hidden; }
.roll__reel { position: absolute; inset-inline: 0; inset-block-start: 0; display: flex; flex-direction: column; }
.roll__figure { display: block; text-align: center; }

/* The attendants' breath (js/ss-breath.js, release 1.2.0), a base rule set: the footer's attendant and the visit band's
   counterman each take a deep breath every five seconds while things move. A drawing stands in its own frame (.breath:
   the drawing's aspect, --breath-frame, as tall as its box and centred, where object-fit: cover put it; the box clips
   it). The box the breath moves (--breath-x, -y, -w, -h, shares of the frame, from the design repository's
   scripts/breath-v7.py) is cut out of the drawing while the breath runs and drawn by .breath__region: at rest from a
   copy of the drawing (the same file, so nothing more is fetched), in frames 2 to 5 from a strip of them in a box one
   frame tall (its object-position chooses the frame), cut 4 px past the box so the fade a browser gives a scaled
   image's edges is clipped away. The region's clip has the cut's edges and
   is added to the drawing (plus-lighter), so where the two share an edge pixel they make the drawing whole. Only
   visibility and the strip's object-position change, which a browser paints and which move no box: an animated
   transform or clip-path would put the drawing on a layer of its own and soften it, and a moving top would count as
   layout shift (both found 2026-10-09). One breath: at rest 2,275 ms, in through frames 2 to
   5 at 300 ms each, the last held 400 ms more, out through 4, 3 and 2 at 375 ms each; each frame held, nothing between
   them (stop motion). The strip is fetched once a quarter of the drawing's box is in view, and the breath runs only
   while it is (data-breath-in), so nothing loads or plays off screen and each time he comes into view he starts at
   rest. The motion control stops it at rest; with motion stopped (reduced motion with nothing chosen, or the reader's
   own choice) the strip is never fetched. Without the script the drawings stand. */
.breath { position: absolute; inset-block: 0; inset-inline-start: 50%; aspect-ratio: var(--breath-frame); translate: -50% 0; }
.breath__region {
  position: absolute;
  inset: 0;
  display: none;
  clip-path: inset(var(--breath-y) calc(100% - var(--breath-x) - var(--breath-w)) calc(100% - var(--breath-y) - var(--breath-h)) var(--breath-x));
  mix-blend-mode: plus-lighter;
}
.breath__rest { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; visibility: hidden; }
.breath__strip { position: absolute; inset-inline-start: var(--breath-strip-x); inset-block-start: var(--breath-strip-y); inline-size: var(--breath-strip-w); max-inline-size: none; block-size: var(--breath-strip-h); object-fit: cover; object-position: 50% 0%; visibility: hidden; }
/* laid out unseen once the drawing is in view, so the browser fetches the strip as the lazy image it is */
.breath[data-breath="load"] .breath__region, .breath[data-breath="on"] .breath__region { display: block; }
:root:not([data-motion-stopped]) .breath[data-breath="on"][data-breath-in] .breath__base {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--breath-x) var(--breath-y), calc(var(--breath-x) + var(--breath-w)) var(--breath-y), calc(var(--breath-x) + var(--breath-w)) calc(var(--breath-y) + var(--breath-h)), var(--breath-x) calc(var(--breath-y) + var(--breath-h)), var(--breath-x) var(--breath-y));
}
:root:not([data-motion-stopped]) .breath[data-breath="on"][data-breath-in] .breath__rest { animation: breath-rest 5s step-end infinite; }
:root:not([data-motion-stopped]) .breath[data-breath="on"][data-breath-in] .breath__strip { animation: breath-strip 5s step-end infinite; }
@keyframes breath-rest {
  0% { visibility: visible; }
  45.5% { visibility: hidden; }
  100% { visibility: visible; }
}
@keyframes breath-strip {
  0% { visibility: hidden; object-position: 50% 0%; }
  45.5% { visibility: visible; object-position: 50% 0%; }
  51.5% { object-position: 50% 33.3333%; }
  57.5% { object-position: 50% 66.6667%; }
  63.5% { object-position: 50% 100%; }
  77.5% { object-position: 50% 66.6667%; }
  85% { object-position: 50% 33.3333%; }
  92.5% { object-position: 50% 0%; }
  100% { visibility: hidden; object-position: 50% 0%; }
}

/* While the window's width is changing (html[data-resizing], set by js/ss-resizing.js until 200 ms after the last
   change), every CSS animation is held where it is and no transition runs: the common practice for a resize. The
   animations go on from where they stood (paused, not removed: a CSS animation taken off starts again from its
   beginning, which would restart the hero's hold and its wrench's fill), and a value that changes with the width
   changes at once. */
html[data-resizing] *,
html[data-resizing] *::before,
html[data-resizing] *::after { animation-play-state: paused !important; transition: none !important; }