/* Design system from the user's Jiro refs: Kelos palette and cards, Tidewell hero, Safar tiles, Arcfield CTA, Growlio footer. */
:root {
  --page: #ffffff; --well: #f5f4f4; --warm: #f4f3ea; --tint: #eef0e8;
  --ink: #161817; --body: #3d3d3c; --muted: #8a8484; --soft: #9ca3ae; --line: #e7e5e4;
  --olive: #2f3218; --olive-2: #3c4022; --gold: #d4ae37; --good: #3f7d3a;
  --head: 'Inter Tight', Inter, system-ui, sans-serif; --sans: Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --sh: 0 4px 20px rgba(0,0,0,.03); --sh-hover: 0 15px 45px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--body); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 500; color: var(--ink); letter-spacing: -.03em; line-height: 1.05; margin: 0; }
h2 > span, h1 .tail { color: var(--soft); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* Buttons and chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 28px; font: 500 15px var(--sans); cursor: pointer; transition: background .25s, transform .2s, box-shadow .25s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn.olive { background: var(--olive); color: #fff; box-shadow: 0 4px 12px rgba(47,50,25,.2); }
.btn.olive:hover { background: var(--olive-2); }
.btn.white { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.white:hover { border-color: #cfccc9; }
.btn.sm { padding: 9px 18px; font-size: 14px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font: 500 14px var(--sans); color: var(--body); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: #cfccc9; color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--olive); border-color: var(--olive); color: #fff; }

/* Entrance motion only: fade + 24px rise, once */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rise { opacity: 1; transform: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- Nav (Tidewell pill) ---------- */
.nav { position: sticky; top: 14px; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 8px 30px rgba(0,0,0,.05); }
.logo { display: flex; align-items: center; gap: 9px; margin-right: 12px; font: 600 16px var(--head); color: var(--ink); letter-spacing: -.02em; }
.nav-links { display: flex; gap: 2px; }
.nav-links > a, .nav-shop-btn { padding: 9px 14px; border-radius: 999px; font: 500 14px var(--sans); color: var(--body); white-space: nowrap; transition: background .2s, color .2s; }
.nav-links > a:hover, .nav-shop-btn:hover, .nav-shop-btn[aria-expanded="true"] { background: var(--well); color: var(--ink); }
.nav-links { align-items: center; }
.nav-shop-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; }
.nav-shop-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav-shop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-shop-btn:focus-visible, .nav-links > a:focus-visible, .nav-burger:focus-visible, .shop-panel a:focus-visible, .m-menu a:focus-visible, .m-close:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
/* Anchored to the pill, not the button, so it stays centred on any width. */
.shop-panel { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; width: min(720px, calc(100vw - 32px)); display: grid; grid-template-columns: 216px 1fr; gap: 8px; padding: 8px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.12); animation: sgIn .22s var(--ease); }
.shop-panel[hidden] { display: none; }
.shop-kit { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: var(--olive); color: #fff; transition: background .2s; }
.shop-kit:hover { background: var(--olive-2); }
.shop-kit b { font: 500 22px/1.12 var(--head); letter-spacing: -.02em; }
.shop-kit span { font-size: 14px; color: var(--tint); }
.shop-kit svg { width: 20px; height: 20px; margin-top: auto; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.shop-kit:hover svg { transform: translateX(4px); }
.shop-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start; }
.shop-cats a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; font: 500 14.5px var(--sans); color: var(--ink); transition: background .18s; }
.shop-cats a:hover { background: var(--well); }
.shop-cats small { font-size: 12.5px; font-weight: 400; color: #6b6767; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-wait { grid-column: 1 / -1; margin: 0; padding: 11px 14px; font-size: 14px; color: #6b6767; }
.nav-burger { display: none; width: 44px; height: 44px; flex: none; place-items: center; border: 0; border-radius: 50%; background: var(--well); cursor: pointer; }
.nav-burger svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 960px) { .nav-links { display: none; } .nav-burger { display: grid; } .nav-pill, .pg .nav-pill { width: 100%; } .nav-sell { margin-left: auto; } }
/* Full-screen phone menu. A native dialog: focus trap, Escape and focus return come with it. */
html:has(.m-menu[open]) { overflow: hidden; }
.m-menu { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); border: 0; background: #fff; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
.m-menu[open] { animation: sgIn .24s var(--ease); }
.m-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.m-top h2 { margin: 0; font: 500 26px/1.1 var(--head); letter-spacing: -.025em; }
.m-close { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--well); cursor: pointer; }
.m-close svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.m-menu .shop-kit { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 12px; padding: 16px; min-height: 60px; }
.m-menu .shop-kit b { font-size: 17px; } .m-menu .shop-kit span { display: none; } .m-menu .shop-kit svg { margin: 0; }
.m-menu .shop-cats { gap: 8px; margin-top: 8px; }
.m-menu .shop-cats a { min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 16px; background: var(--well); font-size: 15px; }
.m-links { margin-top: 12px; }
.m-links a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); font: 500 21px var(--head); letter-spacing: -.02em; color: var(--ink); }
.m-menu .nav-sell { display: flex; justify-content: center; align-items: center; margin-top: 20px; min-height: 52px; font-size: 16px; }

/* ---------- Hero (Tidewell centred stack) ---------- */
.hero { background: var(--warm); margin-top: -70px; padding: 132px 0 0; text-align: center; overflow: hidden; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 500 13.5px var(--sans); color: var(--body); }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: #5aa452; box-shadow: 0 0 0 4px rgba(90,164,82,.18); }
.hero h1 { margin: 22px auto 0; max-width: 900px; font-size: clamp(40px, 6.4vw, 76px); }
.hero .sub { max-width: 600px; margin: 20px auto 0; font-size: clamp(16px, 1.6vw, 18px); color: var(--body); }
.search { position: relative; z-index: 30; max-width: 720px; margin: 34px auto 0; display: flex; align-items: center; gap: 8px; height: 64px; padding: 6px 6px 6px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0,0,0,.05); text-align: left; transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: #c9cbbd; box-shadow: 0 0 0 4px var(--tint), 0 10px 40px rgba(0,0,0,.06); }
.search > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 17px var(--sans); color: var(--ink); }
.search input::placeholder { color: #a8a3a3; }
.search button[type=submit] { height: 100%; padding: 0 26px; border: 0; border-radius: 12px; background: var(--olive); color: #fff; font: 500 15px var(--sans); cursor: pointer; transition: background .2s; }
.search button[type=submit]:hover { background: var(--olive-2); }
.mic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; cursor: pointer; transition: background .2s; }
.mic[hidden] { display: none; }
.mic svg { width: 20px; height: 20px; fill: none; stroke: var(--olive); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mic:hover, .mic[aria-pressed="true"] { background: var(--tint); }
.mic[aria-pressed="true"] { animation: micOn 1.4s ease-in-out infinite; }
.mic:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
@keyframes micOn { 50% { box-shadow: 0 0 0 5px var(--tint); } }
@media (max-width: 560px) { .search { padding-left: 14px; gap: 4px; } .search button[type=submit] { padding: 0 16px; } }
.ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 760px; }
.ideas .chip { background: rgba(255,255,255,.7); }
/* Photo band: real photographers on a sage panel, live price cards beside them */
.band { position: relative; margin: 56px auto 0; max-width: 1232px; height: 440px; border-radius: 32px 32px 0 0; background: linear-gradient(180deg, var(--tint), #e3e6da); overflow: hidden; }
.band .person { position: absolute; bottom: 0; height: 92%; object-fit: contain; object-position: bottom; }
.band .p1 { left: 9%; height: 84%; }
.band .p2 { left: 50%; transform: translateX(-50%); height: 96%; }
.band .p3 { right: 9%; height: 86%; }
.float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 34px rgba(0,0,0,.08); text-align: left; cursor: pointer; border: 0; transition: transform .3s var(--ease), box-shadow .3s; }
.float-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.float-card .th { width: 52px; height: 52px; border-radius: 12px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.float-card .th img { width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.float-card b { display: block; font: 500 14px var(--sans); color: var(--ink); max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float-card small { font: 500 13px var(--sans); color: var(--muted); white-space: nowrap; }
.float-card small em { font-style: normal; color: var(--ink); }
.fc1 { left: 20%; top: 24%; } .fc2 { left: 57%; top: 14%; } .fc3 { left: 21%; top: 60%; }
@media (max-width: 1200px) { .fc3 { display: none; } }
@media (max-width: 900px) {
  .band { height: 360px; border-radius: 24px 24px 0 0; margin-left: 16px; margin-right: 16px; }
  .band .p1, .band .p3, .fc1, .fc3 { display: none; }
  .fc2 { left: 50%; top: auto; bottom: 18px; transform: translateX(-50%); }
  .fc2:hover { transform: translateX(-50%) translateY(-4px); }
}

/* Suggestions dropdown */
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60; max-height: 420px; overflow-y: auto; padding: 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.12); text-align: left; animation: sgIn .2s var(--ease); }
@keyframes sgIn { from { opacity: 0; transform: translateY(-6px); } }
.sg-label { padding: 10px 12px 6px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sg-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--ink); }
.sg-item[aria-selected="true"], .sg-item:hover { background: var(--well); }
.sg-item .ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.sg-item .ic img { width: 36px; height: 36px; object-fit: contain; mix-blend-mode: multiply; }
.sg-item .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--olive); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-item .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-item .tx em { font-style: normal; color: var(--muted); }
.sg-item .pr { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.sg-item .pr b { font: 500 14px var(--sans); color: var(--ink); }
.sg-item .pr small { font-size: 12px; color: #6b6767; }

/* ---------- Sections ---------- */
.sec { padding: 96px 0; }
.sec.well-bg { background: var(--well); }
@media (max-width: 640px) { .sec { padding: 64px 0; } }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.sec-head h2 { max-width: 760px; font-size: clamp(32px, 4vw, 52px); }
.sec-head p { margin: 12px 0 0; max-width: 560px; color: var(--body); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Product card (Kelos): cut-out on a warm well, price top-right */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 20px; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.pcard .well { position: relative; aspect-ratio: 1 / .82; border-radius: 18px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.pcard .well img { max-width: 78%; max-height: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
.pcard:hover .well img { transform: scale(1.05); }
.pcard .tag { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: #fff; font: 500 12px var(--sans); color: var(--ink); }
.pcard .tag.best { background: var(--olive); color: #fff; }
.pcard .price-chip { position: absolute; right: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: #fff; font: 600 13px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.pcard .price-chip.low { background: var(--gold); color: #1d1a0e; }
.pcard .body { padding: 16px 10px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard .cat { font: 500 12.5px var(--sans); color: var(--muted); }
.pcard h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
.pcard .why { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--body); }
.pcard .why li { display: flex; gap: 7px; }
.pcard .why li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--olive); }
.pcard .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.pcard .foot .ok { color: var(--good); }
.pcard .go { width: 34px; height: 34px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; flex: none; transition: background .25s, transform .25s var(--ease); }
.pcard .go svg { width: 15px; height: 15px; fill: none; stroke: var(--olive); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pcard:hover .go { background: var(--olive); transform: rotate(-45deg); }
.pcard:hover .go svg { stroke: #fff; }
.ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #b9b4ad; }
.ph svg { width: 110px; height: 74px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ph small { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); background: var(--well); border-radius: 24px; }

/* Kit cards: camera + lens side by side */
.kit { cursor: default; }
.kit .pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; aspect-ratio: 1 / .62; border-radius: 18px; background: var(--well); padding: 10px; }
.kit .pair button { height: 100%; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 12px; transition: background .2s; }
.kit .pair button:hover { background: rgba(255,255,255,.6); }
.kit .pair img { max-width: 92%; max-height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.kit .pair .plus { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 500 18px var(--sans); color: var(--olive); }
.kit .names { font: 500 15px/1.35 var(--sans); color: var(--ink); }
.kit .names button { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.kit .names button:hover { text-decoration-color: var(--olive); }
.kit .split { font-size: 13px; color: var(--muted); }
.kit .total { font: 600 20px var(--head); color: var(--ink); letter-spacing: -.02em; }

/* Kit builder panel */
.kitpanel { border-radius: 32px; background: var(--well); padding: clamp(24px, 4vw, 48px); }
.kitpanel .controls { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; margin-bottom: 28px; }
.kitpanel .controls label { display: flex; flex-direction: column; gap: 8px; font: 500 13px var(--sans); color: var(--muted); }
.select { appearance: none; min-width: 190px; padding: 12px 40px 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f3218' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; font: 500 15px var(--sans); color: var(--ink); cursor: pointer; }
.select:hover { border-color: #cfccc9; }
.kitpanel .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Results */
.results { padding-top: 72px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; margin-bottom: 28px; border-radius: 20px; background: var(--well); }
.filters label { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; font: 500 12px var(--sans); color: var(--muted); }
@media (max-width: 640px) { .filters label { flex: 1 1 44%; } .select { min-width: 0; width: 100%; } }

/* Shelf paddles */
.shelf-nav { display: flex; gap: 10px; }
.shelf-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, opacity .2s; }
.shelf-nav button:hover { border-color: #cfccc9; }
.shelf-nav button:disabled { opacity: .35; cursor: default; }
.shelf-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px max(24px, calc((100vw - 1232px) / 2)) 30px; scroll-padding-inline: max(24px, calc((100vw - 1232px) / 2)); }
.track::-webkit-scrollbar { display: none; }
.track .pcard { flex: 0 0 min(300px, 80vw); scroll-snap-align: start; }

/* Use case tiles (Safar destinations) */
.tiles { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 20px; }
.tile { position: relative; overflow: hidden; border-radius: 24px; border: 0; padding: 0; cursor: pointer; text-align: left; background: #ddd; }
.tile:first-child { grid-row: span 2; }
.tile .bg { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .7s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,26,18,.65)); }
.tile:hover .bg { transform: scale(1.05); }
.tile .lbl { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; color: #fff; }
.tile .lbl b { display: block; font: 500 24px/1.1 var(--head); letter-spacing: -.02em; }
.tile .lbl small { font-size: 14px; opacity: .85; }
.tile .lbl i { width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(8px); display: grid; place-items: center; transition: background .25s, transform .25s var(--ease); }
.tile .lbl svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tile:hover .lbl i { background: #fff; transform: rotate(-45deg); }
.tile:hover .lbl svg { stroke: var(--olive); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 200px 200px; } .tile:first-child { grid-column: span 2; grid-row: auto; } }


/* Footer (Growlio) */
/* ---------- Footer: aurora, spotlight, scroll-filled wordmark ---------- */
.site-foot { position: relative; overflow: hidden; isolation: isolate; margin-top: 96px; padding: 96px 0 28px; color: #eef0e8; background: #12140f; border-radius: 40px 40px 0 0; }
.site-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--fx, 50%) var(--fy, 30%), rgba(212,174,55,.16), transparent 60%); transition: opacity .4s; }
.site-foot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.foot-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; filter: blur(70px); }
.foot-aurora i { position: absolute; border-radius: 50%; opacity: .55; animation: aurora 22s ease-in-out infinite alternate; }
.foot-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -20vw; background: #3c4022; }
.foot-aurora i:nth-child(2) { width: 34vw; height: 34vw; right: -8vw; top: 4vw; background: #6b5a1c; opacity: .35; animation-duration: 28s; animation-delay: -6s; }
.foot-aurora i:nth-child(3) { width: 40vw; height: 30vw; left: 30vw; bottom: -18vw; background: #2f3218; animation-duration: 34s; animation-delay: -12s; }
@keyframes aurora { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 3vw) scale(1.12); } 100% { transform: translate(-4vw, 5vw) scale(.94); } }
.foot-lead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 13px var(--sans); color: rgba(238,240,232,.7); }
.foot-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(212,174,55,.6); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(212,174,55,.55); } 70% { box-shadow: 0 0 0 12px rgba(212,174,55,0); } 100% { box-shadow: 0 0 0 0 rgba(212,174,55,0); } }
.foot-lead h2 { margin: 0; font: 500 clamp(36px, 5vw, 64px)/1 var(--head); letter-spacing: -.035em; color: #fff; }
.foot-lead h2 span { background: linear-gradient(90deg, #d4ae37, #f1dc9a 40%, #d4ae37 60%, #a8862a); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: sheen 6s linear infinite; }
@keyframes sheen { to { background-position: -220% 0; } }
.foot-search { display: flex; align-items: center; gap: 10px; height: 60px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); transition: border-color .3s, background .3s, box-shadow .3s; }
.foot-search:focus-within { border-color: rgba(212,174,55,.6); background: rgba(255,255,255,.1); box-shadow: 0 0 0 5px rgba(212,174,55,.12); }
.foot-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: rgba(238,240,232,.6); stroke-width: 2; stroke-linecap: round; }
.foot-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px var(--sans); color: #fff; }
.foot-search input::placeholder { color: rgba(238,240,232,.45); }
.foot-search button { height: 100%; padding: 0 22px; border: 0; border-radius: 999px; background: #eef0e8; color: var(--olive); font: 600 14px var(--sans); cursor: pointer; transition: transform .2s, background .2s; }
.foot-search button:hover { background: #fff; } .foot-search button:active { transform: scale(.96); }
.foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 56px 0 24px; }
.site-foot h4 { margin: 0 0 16px; font: 500 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(238,240,232,.45); }
.site-foot nav { display: flex; flex-direction: column; gap: 11px; }
.site-foot nav a { position: relative; width: fit-content; font-size: 15px; color: rgba(238,240,232,.82); transition: color .25s, transform .3s var(--ease); }
.site-foot nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.site-foot nav a:hover { color: #fff; transform: translateX(3px); } .site-foot nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot-note { margin: 22px 0 0; max-width: 260px; font-size: 13px; line-height: 1.55; color: rgba(238,240,232,.45); }
.foot-word { margin-top: 24px; line-height: .8; overflow: hidden; user-select: none; }
.foot-word span { display: block; font: 600 clamp(64px, 15.5vw, 236px)/.86 var(--head); letter-spacing: -.06em; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(238,240,232,.18);
  background: linear-gradient(180deg, #f1dc9a, #d4ae37 45%, #6b5a1c) no-repeat; -webkit-background-clip: text; background-clip: text;
  background-size: 100% calc(var(--fill, 0) * 100%); background-position: bottom;
  transform: translateY(calc((1 - var(--fill, 0)) * 18%)); transition: background-size .2s linear; }
.foot-word span { padding-bottom: .24em; } /* room for the g descender: the gradient text clips to this box */
.foot-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: rgba(238,240,232,.5); }
.foot-top { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); cursor: pointer; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.foot-top svg { width: 18px; height: 18px; fill: none; stroke: #eef0e8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.foot-top:hover { background: var(--gold); border-color: var(--gold); } .foot-top:hover svg { stroke: #12140f; transform: translateY(-3px); }
@media (max-width: 960px) { .foot-lead { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-foot { padding-top: 64px; border-radius: 28px 28px 0 0; } .foot-grid { gap: 28px 20px; } .foot-search { height: 54px; } .foot-search button { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .foot-aurora i, .foot-kicker i, .foot-lead h2 span { animation: none; } .foot-word span { --fill: 1; transform: none; } }

/* Product sheet */
.sheet { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 32px; padding: 0; background: #fff; color: var(--body); box-shadow: 0 40px 100px rgba(0,0,0,.18); }
.sheet::backdrop { background: rgba(22,24,23,.35); backdrop-filter: blur(6px); }
.sheet[open] { animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.sheet-in { display: grid; grid-template-columns: 1fr 1.1fr; }
.sheet .pic { margin: 12px; border-radius: 24px; background: var(--well); display: grid; place-items: center; padding: 32px; min-height: 400px; }
.sheet .pic img { max-height: 320px; object-fit: contain; mix-blend-mode: multiply; }
.sheet .info { padding: 36px 36px 32px 20px; overflow: auto; }
.sheet .close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 20px; cursor: pointer; }
.sheet .cat { font: 500 13px var(--sans); color: var(--muted); }
.sheet h2 { margin: 6px 0 16px; font-size: 32px; }
.fit { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.fit li { display: flex; gap: 10px; }
.fit li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--olive); }
.sheet h4 { margin: 24px 0 10px; font: 500 13px var(--sans); color: var(--muted); }
.offers { display: grid; gap: 8px; }
.offer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 16px; background: var(--well); }
.offer:first-child { background: var(--tint); }
.offer b { display: block; font: 500 16px var(--sans); color: var(--ink); }
.offer small { font-size: 12.5px; color: var(--good); }
.offer small.out { color: var(--muted); }
.offer small.avail { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: #dcebd6; color: #2a5f27; font-weight: 500; }
.offer .p { font: 600 18px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.offer .p.na { font-size: 14px; font-weight: 500; color: var(--muted); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.specs div { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.specs span { display: block; font-size: 12px; color: var(--muted); }
.specs div:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 760px) {
  .sheet-in { grid-template-columns: 1fr; }
  .sheet .pic { min-height: 0; padding: 20px; }
  .sheet .pic img { max-height: 190px; }
  .sheet .info { padding: 8px 20px 24px; }
  .offer { grid-template-columns: 1fr auto; }
  .offer .btn { grid-column: 1 / -1; }
}

/* ================= Premium layer: liquid glass, light, grain, motion ================= */
:root { --glass: rgba(255,255,255,.55); --glass-strong: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.75); --glass-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 -1px 0 rgba(0,0,0,.03) inset, 0 18px 50px -18px rgba(47,50,24,.28); }
/* Liquid glass: blur + saturation, a bright inner rim, and a specular highlight that follows the pointer (--mx/--my). */
.glass { position: relative; background: linear-gradient(180deg, var(--glass-strong), var(--glass)); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.75), transparent 60%); opacity: .55; mix-blend-mode: soft-light; transition: opacity .3s; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.1) 40%, rgba(212,174,55,.35) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.nav-pill.glass { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5)); }
.search.glass { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7)); }
.float-card.glass { position: absolute; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); border: 1px solid rgba(255,255,255,.8); }

/* Hero light: slow drifting gradient mesh + film grain */
.hero { position: relative; isolation: isolate; }
.mesh { position: absolute; inset: -160px -10% 0; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .9; }
.mesh i { position: absolute; border-radius: 50%; animation: drift 22s ease-in-out infinite alternate; }
.mesh i:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: -8vw; background: #f9e7c2; }
.mesh i:nth-child(2) { width: 40vw; height: 40vw; right: -4vw; top: 2vw; background: #dfe6cf; animation-duration: 28s; }
.mesh i:nth-child(3) { width: 30vw; height: 30vw; left: 36vw; top: 18vw; background: #f3d9b8; opacity: .7; animation-duration: 34s; }
@keyframes drift { to { transform: translate3d(5vw, 3vw, 0) scale(1.12); } }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero h1 .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(18px); animation: wordIn .9s var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 70ms); }
@keyframes wordIn { to { opacity: 1; filter: blur(0); transform: none; } }
.hero h1 .tail .w { color: transparent; background: linear-gradient(100deg, #9ca3ae 10%, #b9a46a 50%, #9ca3ae 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: wordIn .9s var(--ease) forwards, sheen 6s 1.6s ease-in-out infinite; animation-delay: calc(120ms + var(--i) * 70ms), 1.6s; }
@keyframes sheen { 50% { background-position: 100% 0; } }
.float-card { animation: bob 6s ease-in-out infinite; animation-delay: var(--bob, 0s); }
@keyframes bob { 50% { translate: 0 -8px; } }
.band { background: radial-gradient(120% 90% at 50% 100%, #d9dfcb, transparent 60%), linear-gradient(180deg, #eef0e8, #e4e8d9); }
.band::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(47,50,24,.08)); pointer-events: none; }
.person { will-change: transform; transition: transform .2s linear; }

/* Stats strip with count-up */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: -1px auto 0; max-width: 1232px; border-radius: 0 0 32px 32px; overflow: hidden; background: var(--line); }
.stats div { background: #fff; padding: 26px 24px; text-align: left; }
.stats b { display: block; font: 500 clamp(28px, 3vw, 40px)/1 var(--head); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; margin: 0 16px; } }

/* Brand marquee */
.marquee { overflow: hidden; padding: 34px 0; border-bottom: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .row-m { display: flex; gap: 64px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font: 500 26px var(--head); letter-spacing: -.03em; color: #b7b2ac; white-space: nowrap; transition: color .3s; }
.marquee span:hover { color: var(--ink); }
.marquee:hover .row-m { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Cards: 3D tilt + specular sheen */
.pcard { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .5s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { --ty: -6px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.pcard .well::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.65), transparent 55%); opacity: 0; transition: opacity .35s; }
.pcard:hover .well::after { opacity: 1; }
.cmp-toggle { position: absolute; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); transition: transform .3s var(--ease), background .2s; }
.cmp-toggle { left: 12px; bottom: 12px; }
.cmp-toggle:hover { transform: scale(1.1); }
.cmp-toggle svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-toggle[aria-pressed="true"] { background: var(--olive); }
.cmp-toggle[aria-pressed="true"] svg { stroke: #fff; }
.btn.olive { background: linear-gradient(180deg, #3d4122, #2f3218); }
.magnet { transition: transform .35s var(--ease); }

/* Compare tray + compare sheet */
.tray { position: fixed; left: 50%; bottom: 18px; z-index: 70; translate: -50% 140%; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; transition: translate .5s var(--ease); max-width: calc(100vw - 24px); }
.tray.show { translate: -50% 0; }
.tray .slots { display: flex; gap: 6px; }
.tray .slot { width: 44px; height: 44px; border-radius: 50%; background: var(--well); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); }
.tray .slot img { width: 36px; height: 36px; object-fit: contain; mix-blend-mode: multiply; }
.tray .txt { font: 500 14px var(--sans); color: var(--ink); white-space: nowrap; }
.tray .clear { border: 0; background: none; color: var(--muted); cursor: pointer; font: 500 13px var(--sans); }
.cmp-table { display: grid; gap: 0; overflow-x: auto; }
.cmp-table .r { display: grid; grid-template-columns: 140px repeat(var(--n), minmax(170px, 1fr)); border-top: 1px solid var(--line); }
.cmp-table .r > div { padding: 12px 14px; font-size: 14px; color: var(--ink); }
.cmp-table .r > div:first-child { color: var(--muted); font-size: 13px; }
.cmp-table .head > div { border-top: 0; }
.cmp-table .head img { height: 110px; margin: 0 auto 8px; object-fit: contain; mix-blend-mode: multiply; }
.cmp-table .best { color: var(--good); font-weight: 600; }

.sortbar { display: flex; justify-content: flex-end; gap: 8px; margin: -12px 0 18px; }
.share { display: inline-flex; align-items: center; gap: 6px; }
.toast { position: fixed; left: 50%; top: 84px; z-index: 90; translate: -50% -20px; opacity: 0; padding: 10px 18px; border-radius: 999px; font: 500 14px var(--sans); color: var(--ink); transition: translate .4s var(--ease), opacity .4s; pointer-events: none; }
.toast.show { translate: -50% 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mesh i, .float-card, .marquee .row-m, .hero h1 .tail .w { animation: none !important; } .hero h1 .w { opacity: 1; filter: none; transform: none; } }
@media (max-width: 560px) { .tray .txt { display: none; } }
.res-more, .res-explore { display: flex; justify-content: center; margin-top: 32px; }
/* Explore page (?view=all): results only */
body.explore .hero, body.explore .marquee, body.explore #kits, body.explore #deals, body.explore #occasion { display: none; }
body.explore .results { padding-top: 120px; }
.res-more[hidden], .res-explore[hidden] { display: none; }
/* Price verdict in product sheets */
.verdict { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--tint), #f4f1e2); border: 1px solid rgba(212,174,55,.35); }
.verdict p { margin: 0; font-size: 14.5px; color: var(--body); } .verdict p + p { margin-top: 4px; color: var(--muted); }
.verdict b { color: var(--ink); font-weight: 600; }
/* Complete your kit */
.res-kit { margin: 0 0 28px; padding: 22px; border-radius: 28px; background: linear-gradient(180deg, var(--tint), #e9ecdf); }
.res-kit[hidden] { display: none; }
.kit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.kit-head h3 { margin: 0; font: 500 22px/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); }
.kit-head p { margin: 0; font-size: 14px; color: var(--muted); } .kit-head p b { font: 600 20px var(--sans); color: var(--olive); margin-right: 4px; }
.kit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kit-item { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 18px; background: rgba(255,255,255,.85); text-align: left; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.kit-item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.kit-item .th { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.kit-item .th img { width: 50px; height: 50px; object-fit: contain; mix-blend-mode: multiply; } .kit-item .th svg { width: 40px; fill: none; stroke: var(--muted); stroke-width: 2; }
.kit-item .tx { min-width: 0; } .kit-item small { display: block; font-size: 12px; color: var(--muted); }
.kit-item b { display: block; font: 500 14px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-item em { font: 600 14px var(--sans); font-style: normal; color: var(--olive); }
@media (max-width: 900px) { .kit-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kit-row { grid-template-columns: 1fr; } }
.fit-ok, .fit-warn { margin: 14px 0 0; padding-left: 26px; position: relative; font-size: 14.5px; }
.fit-ok { color: var(--good); } .fit-warn { color: #9a6b12; }
.fit-ok::before, .fit-warn::before { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/18px var(--sans); color: #fff; text-align: center; }
.fit-ok::before { content: "✓"; background: var(--good); } .fit-warn::before { content: "!"; background: #c99a2e; }
/* Static SEO pages (scripts/build-pages.mjs) */
body.pg { background: var(--warm, #f4f3ea); }
.pg .nav-pill { justify-content: space-between; width: min(1232px, 100%); }
.pg .logo { display: inline-flex; align-items: center; gap: 10px; font: 600 16px var(--head); color: var(--ink); }
.pg-main { max-width: 1232px; margin: 0 auto; padding-top: 40px; padding-bottom: 80px; }
.pg-crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; } .pg-crumbs a { color: var(--body); }
.pg-main h1 { font: 500 clamp(30px, 4vw, 48px)/1.08 var(--head); letter-spacing: -.03em; color: var(--ink); margin: 8px 0 14px; }
.pg-main h2 { font: 500 clamp(22px, 2.4vw, 30px)/1.15 var(--head); letter-spacing: -.02em; color: var(--ink); margin: 56px 0 18px; }
.pg-main h2.pg-h { font-size: 15px; font-family: var(--sans); color: var(--muted); margin: 26px 0 10px; letter-spacing: 0; }
.pg-lead { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 68ch; }
.pg-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; padding: 28px; border-radius: 32px; background: #fff; }
.pg-pic { aspect-ratio: 1; border-radius: 24px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.pg-pic img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.pg-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.pg-alert { margin-top: 18px; padding: 18px; border-radius: 20px; background: var(--well); }
.pg-alert[hidden] { display: none; }
.pg-alert label { display: block; font: 500 17px var(--head); letter-spacing: -.01em; color: var(--ink); }
.pg-alert-row { display: flex; gap: 8px; margin-top: 12px; }
.pg-alert input { flex: 1; width: 0; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 16px; color: var(--ink); }
.pg-alert input::placeholder { color: #6f6a6a; }
.pg-alert input[aria-invalid="true"] { border-color: #a3341f; }
.pg-alert .btn { flex: none; min-height: 44px; }
.pg-alert .btn:disabled { opacity: .6; cursor: default; }
.pg-alert-msg { margin: 10px 0 0; font-size: 13.5px; color: var(--body); }
.pg-alert-msg a { text-decoration: underline; text-underline-offset: 2px; }
.pg-alert[data-state="sent"] .pg-alert-row { display: none; }
.pg-alert[data-state="sent"] .pg-alert-msg { color: #2f6a2b; font-weight: 500; }
.pg-alert[data-state="invalid"] .pg-alert-msg, .pg-alert[data-state="error"] .pg-alert-msg { color: #a3341f; font-weight: 500; }
.offer .p s { font-size: 13px; font-weight: 500; color: var(--muted); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pg-tile { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s; }
.pg-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.pg-tile .th { flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.pg-tile .th img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
.pg-tile b { display: block; font: 500 15px/1.3 var(--sans); color: var(--ink); } .pg-tile small { font-size: 13px; color: var(--muted); }
.pg-kits { display: grid; gap: 16px; } .pg-kit { padding: 18px; border-radius: 24px; background: var(--tint); } .pg-kit p { margin: 12px 0 0; color: var(--body); } .pg-kit .tag { position: static; display: inline-block; margin-bottom: 10px; }
.pg-faq details { padding: 16px 20px; border-radius: 16px; background: #fff; margin-bottom: 8px; }
.pg-faq summary { cursor: pointer; font: 500 16px var(--sans); color: var(--ink); } .pg-faq p { margin: 10px 0 0; color: var(--body); line-height: 1.6; }
.pg-cta { margin-top: 72px; padding: 40px; border-radius: 32px; background: var(--olive); color: #eef0e8; text-align: center; }
.pg-cta h2 { color: #fff; margin-top: 0; } .pg-cta p { color: rgba(238,240,232,.8); margin-bottom: 22px; } .pg-cta .btn { background: #eef0e8; color: var(--olive); }
@media (max-width: 860px) { .pg-hero { grid-template-columns: 1fr; gap: 24px; padding: 18px; } }
.pg-link { margin-top: 22px; } .pg-link a { display: inline-flex; align-items: center; gap: 6px; font: 500 15px var(--sans); color: var(--olive); } .pg-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-chart { margin: 0; padding: 20px; border-radius: 24px; background: #fff; color: var(--olive); } .pg-chart svg { width: 100%; height: auto; display: block; } .pg-chart figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
/* ---------- Motion layer 2 ---------- */
/* Reading progress: native scroll-driven animation, no JS; browsers without support simply don't show it. */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--olive), var(--gold)); pointer-events: none; }
@supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } }
@keyframes grow { to { transform: scaleX(1); } }
/* Section headings: words rise out of a blur, one after another. */
.sec-head h2 .w2 { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.45em); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.sec-head h2.in .w2 { opacity: 1; filter: none; transform: none; }
/* Photos ease in from a slight zoom as they enter. */
.tile.rise .bg { transform: scale(1.14); transition: transform 1.4s var(--ease); }
.tile.rise.in .bg { transform: scale(1); }
.tile.rise.in:hover .bg { transform: scale(1.05); transition-duration: .7s; }
/* Primary buttons: a light sweep on hover. */
.btn.olive { position: relative; overflow: hidden; isolation: isolate; }
.btn.olive::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn.olive:hover::after { transform: translateX(120%); }
/* Price chips pop in after their card. */
.pcard.rise .price-chip { opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .5s var(--ease) .25s, transform .5s var(--ease) .25s; }
.pcard.rise.in .price-chip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; } .sec-head h2 .w2 { opacity: 1; filter: none; transform: none; }
  .tile.rise .bg { transform: none; } .pcard.rise .price-chip { opacity: 1; transform: none; } .btn.olive::after { display: none; }
}
/* Rich product page blocks */
.pg-main h3 { margin: 0 0 12px; font: 500 15px var(--sans); color: var(--muted); }
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.pg-two > div { padding: 22px; border-radius: 24px; background: #fff; }
.pg-yes, .pg-no { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pg-yes li, .pg-no li { position: relative; padding-left: 28px; line-height: 1.55; color: var(--body); }
.pg-yes li::before, .pg-no li::before { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/18px var(--sans); color: #fff; text-align: center; }
.pg-yes li::before { content: "✓"; background: var(--good); } .pg-no li::before { content: "!"; background: #c99a2e; }
.pg-table { overflow-x: auto; border-radius: 24px; background: #fff; }
.pg-table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.pg-table th, .pg-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-table thead th { font: 500 13px var(--sans); color: var(--muted); background: var(--well); }
.pg-table tbody th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.pg-table td a { color: var(--olive); font-weight: 500; }
.pg-table tr:last-child td, .pg-table tr:last-child th { border-bottom: 0; }
.pg-table tr.total td { font-weight: 600; color: var(--ink); background: var(--tint); }
.pg-table tbody tr { transition: background .2s; } .pg-table tbody tr:hover { background: #fafaf6; }
.pg-prose { max-width: 70ch; font-size: 17px; line-height: 1.7; color: var(--body); }
.pg-prose h2 { margin-top: 40px; } .pg-prose a { color: var(--olive); font-weight: 500; }
@media (max-width: 760px) { .pg-two { grid-template-columns: 1fr; } }
/* Versus pages */
.pg-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 28px 0 8px; }
.pg-vs-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border-radius: 28px; background: #fff; text-align: center; transition: transform .3s var(--ease), box-shadow .3s; }
.pg-vs-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.pg-vs-card .th { width: min(220px, 100%); aspect-ratio: 1; border-radius: 20px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.pg-vs-card img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.pg-vs-card b { font: 500 18px/1.25 var(--head); color: var(--ink); } .pg-vs-card small { font-size: 14px; color: var(--olive); font-weight: 600; }
.pg-vs-x { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--olive); color: #eef0e8; font: 600 15px var(--sans); }
.pg-vs-table td.win { color: var(--good); font-weight: 600; } .pg-vs-table td.win::after { content: " ✓"; }
.pg-links { margin-top: 14px; font-size: 15px; line-height: 1.8; } .pg-links a { color: var(--olive); font-weight: 500; }
@media (max-width: 640px) { .pg-vs { gap: 8px; } .pg-vs-card { padding: 12px; border-radius: 20px; } .pg-vs-card b { font-size: 15px; } .pg-vs-x { width: 38px; height: 38px; font-size: 13px; } }
/* Recently viewed */
.recent { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 820px; margin: 18px auto 0; }
.recent[hidden] { display: none; }
.recent > span { font: 500 13px var(--sans); color: var(--muted); }
.recent-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.recent-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); cursor: pointer; font: 500 13px var(--sans); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; animation: chipIn .5s var(--ease) both; }
.recent-chip:hover { transform: translateY(-2px); border-color: #cfd1c4; box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.recent-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: var(--well); mix-blend-mode: multiply; }
.recent-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@media (max-width: 560px) { .recent-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; } .recent { padding: 0 16px; } .recent-chip { flex: none; max-width: 180px; } }
@media (prefers-reduced-motion: reduce) { .recent-chip { animation: none; } }
.kit-row > .kit-item { min-width: 0; } .res-kit { min-width: 0; max-width: 100%; }
/* ---------- Quick finders ---------- */
.finders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.finder { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 28px; background: var(--well); overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s; }
.finder::before { content: ""; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(212,174,55,.22), transparent 70%); transition: transform .6s var(--ease); }
.finder:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.07); } .finder:hover::before { transform: translate(-30%, -30%) scale(1.3); }
.finder .fi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.finder .fi svg { width: 24px; height: 24px; fill: none; stroke: var(--olive); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); }
.finder:hover .fi svg { transform: rotate(-12deg) scale(1.08); }
.finder h3 { margin: 6px 0 0; font: 500 22px/1.15 var(--head); letter-spacing: -.02em; color: var(--ink); }
.finder p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.finder label { display: flex; flex-direction: column; gap: 6px; font: 500 12.5px var(--sans); color: var(--muted); }
.finder .select { width: 100%; min-width: 0; }
.finder .btn { margin-top: auto; justify-content: center; }
@media (max-width: 1100px) { .finders { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .finders { grid-template-columns: 1fr; } .finder { padding: 22px; } }
/* ---------- Popular comparisons ---------- */
#versus[hidden] { display: none; }
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vs-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px; border-radius: 26px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.vs-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.vs-side .th { width: 100%; aspect-ratio: 1; max-width: 120px; border-radius: 18px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.vs-side .th img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
.vs-side .th svg { width: 70%; fill: none; stroke: var(--muted); stroke-width: 2; }
.vs-card:hover .vs-side:first-child img { transform: translateX(-4px) rotate(-3deg); } .vs-card:hover .vs-side:last-child img { transform: translateX(4px) rotate(3deg); }
.vs-side b { font: 500 14.5px/1.25 var(--sans); color: var(--ink); } .vs-side small { font: 600 13px var(--sans); color: var(--olive); }
.vs-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--olive); color: #eef0e8; font: 600 12px var(--sans); transition: transform .4s var(--ease), background .3s; }
.vs-card:hover .vs-x { transform: scale(1.12) rotate(-8deg); background: var(--gold); color: var(--ink); }
@media (max-width: 1000px) { .vs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .vs-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .finder, .finder::before, .finder .fi svg, .vs-card, .vs-side .th img, .vs-x { transition: none; } }

/* Paste a link */
.paste-hint { margin: 14px auto 0; font-size: 14px; color: var(--muted); text-align: center; }
.link-note { margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; background: #eef0e8; color: var(--olive); font-size: 14px; line-height: 1.45; }
/* Deal Score. Final state is the default, so it reads correctly without JS; foot.js adds .pre to animate in. */
.deal { --tone: var(--gold); --ease-deal: cubic-bezier(.22,1,.36,1); display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; margin: 40px 0 8px; padding: 36px 40px; border-radius: 32px; background: linear-gradient(135deg, #2f3218, #23261a); color: #eef0e8; }
.deal-good { --tone: #a9c77a; } .deal-fair { --tone: var(--gold); } .deal-wait { --tone: #e39a72; }
.deal-gauge { position: relative; }
.deal-gauge svg { display: block; width: 100%; overflow: visible; }
.deal-gauge path { fill: none; stroke-width: 14; stroke-linecap: round; }
.deal-track { stroke: rgba(238,240,232,.12); }
.deal-arc { stroke: var(--tone); stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1.3s var(--ease-deal); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tone) 45%, transparent)); }
.deal.pre .deal-arc { stroke-dasharray: 0 100; }
.deal-num { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.deal-num b { display: block; font: 600 68px/1 var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.deal-num b.deal-flat { font-size: 38px; }
.deal-num span { font-size: 12px; color: rgba(238,240,232,.6); }
.deal-eye { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.deal h3 { margin: 6px 0 18px; font: 600 clamp(28px, 3.2vw, 38px)/1.08 var(--head); letter-spacing: -.02em; color: #fff; }
.deal-bar { position: relative; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--tone), rgba(238,240,232,.14)); }
.deal-now { position: absolute; top: 50%; left: var(--x); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 35%, transparent); transition: left 1.3s var(--ease-deal); }
.deal.pre .deal-now { left: 100%; }
.deal-usual { position: absolute; top: -4px; width: 2px; height: 16px; background: rgba(238,240,232,.5); }
.deal-ends { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: rgba(238,240,232,.65); }
.deal-ends span:nth-child(2) { color: #fff; font-weight: 500; }
.deal ul { list-style: none; margin: 20px 0 0; padding: 0; }
.deal li { position: relative; padding: 5px 0 5px 24px; font-size: 15px; line-height: 1.4; opacity: 1; transform: none; transition: opacity .5s ease, transform .5s var(--ease-deal); }
.deal li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(238,240,232,.5); }
.deal li.ok::before { background: #a9c77a; } .deal li.warn::before { background: #e39a72; }
.deal li:nth-child(2) { transition-delay: .08s; } .deal li:nth-child(3) { transition-delay: .16s; }
.deal.pre li { opacity: 0; transform: translateY(8px); }
.deal-foot { margin: 14px 0 0; font-size: 12px; color: rgba(238,240,232,.5); }
.deal-wait { grid-template-columns: auto 1fr; gap: 28px; padding: 26px 32px; }
.deal-wait h3 { margin-bottom: 6px; font-size: 24px; }
.deal-wait p { margin: 0; color: rgba(238,240,232,.72); font-size: 15px; }
.deal-days { display: grid; place-items: center; align-content: center; width: 96px; height: 96px; border-radius: 50%; border: 2px dashed rgba(238,240,232,.3); }
.deal-days b { font: 600 34px/1 var(--head); } .deal-days span { font-size: 11px; color: rgba(238,240,232,.6); }
@media (max-width: 720px) { .deal { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; border-radius: 26px; } .deal-gauge { max-width: 240px; margin: 0 auto; } .deal-wait { grid-template-columns: auto 1fr; gap: 16px; } .deal-days { width: 76px; height: 76px; } .deal-days b { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .deal-arc, .deal-now, .deal li { transition: none; } }

/* Why buy local */
.why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: stretch; }
.why-photo { position: relative; display: flex; align-items: flex-end; min-height: 520px; padding: 32px; border-radius: 32px; overflow: hidden; background-size: cover; background-position: center; }
.why-photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(23,25,14,.82)); }
.why-photo p { position: relative; z-index: 1; margin: 0; max-width: 420px; font: 600 clamp(22px, 2.3vw, 30px)/1.16 var(--head); letter-spacing: -.02em; color: #fff; }
.why-copy { align-self: center; }
.why-eye { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.why h2 { margin: 10px 0 14px; font-size: clamp(32px, 4vw, 52px); }
.why h2 span { color: var(--muted); }
.why-lead { margin: 0 0 26px; max-width: 560px; color: var(--body); font-size: 17px; }
.why ol { list-style: none; margin: 0; padding: 0; counter-reset: why; }
.why li { counter-increment: why; position: relative; display: grid; gap: 4px; padding: 18px 0 18px 52px; border-top: 1px solid var(--line); }
.why li::before { content: counter(why); position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--olive); color: #eef0e8; font-size: 14px; font-weight: 600; }
.why li b { font: 600 19px/1.2 var(--head); color: var(--olive); }
.why li span { color: var(--body); font-size: 15px; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; gap: 28px; } .why-photo { min-height: 340px; padding: 24px; border-radius: 26px; } }

/* List your store page */
.sell-calc { padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--well); }
.sell-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sell-fields label { display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.sell-fields input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: 500 16px var(--sans); color: var(--ink); }
.sell-fields input:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.sell-out { display: block; margin-top: 16px; }
.sell-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sell-nums div { padding: 14px 16px; border-radius: 16px; background: #fff; }
.sell-nums span { display: block; font-size: 13px; color: var(--muted); }
.sell-nums b { display: block; margin-top: 4px; font: 600 24px var(--head); color: var(--ink); }
.sell-out p { margin: 14px 0 0; color: var(--ink); }

/* City, Call and WhatsApp on store rows */
.store-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.store-city { margin-right: auto; font-size: 13px; color: var(--muted); }

/* Store list and store pages */
.store-filter { display: inline-grid; gap: 6px; margin: 8px 0 18px; font-size: 14px; color: var(--ink); }
.store-filter[hidden], .store-card[hidden] { display: none; }
.store-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.store-card { display: block; padding: 20px; border-radius: 20px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s; }
.store-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.store-card b { display: block; font: 500 18px var(--sans); color: var(--ink); }
.store-card small { font-size: 13.5px; color: var(--muted); }
.store-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.store-head .store-city { margin-right: 6px; font-size: 15px; }
.store-tiles .pg-tile { content-visibility: auto; contain-intrinsic-size: auto 88px; }
.pg-share { margin-top: 14px; }

/* ================= Content pages: About, How we compare, Contact, Stores, Sell Here, Terms, Privacy ================= */
/* The HTML is the finished state. foot.js adds .pre only to things below the fold; .now plays with CSS alone, so nothing waits on a script. */
body.pg { --muted: #6b6767; }
body.pg-white { background: var(--page); }
.pg .nav-links a[aria-current] { background: var(--well); color: var(--ink); }
.pg-story { padding-top: 24px; }
.pg-story .pg-crumbs { margin: 0 0 clamp(28px, 4vw, 52px); }
.s-display { font: 500 clamp(44px, 7.2vw, 100px)/.98 var(--head); letter-spacing: -.04em; color: var(--ink); }
.s-h2 { font: 500 clamp(30px, 4.4vw, 58px)/1.04 var(--head); letter-spacing: -.035em; color: var(--ink); }
.s-h3 { font: 500 clamp(22px, 2.4vw, 30px)/1.18 var(--head); letter-spacing: -.022em; color: var(--ink); margin: 0; }
.s-display span, .s-h2 span { color: #767a66; }
.s-lead { margin: 22px 0 0; max-width: 36em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--body); }
.s-lead a, .s-note a, .st-after a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.s-eye { margin: 0 0 14px; font: 500 15px var(--sans); color: var(--muted); }
.s-note { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }
.s-sec { padding-block: clamp(72px, 10vw, 136px); }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.s-actions .btn { white-space: normal; text-align: center; }
.s-link { display: inline-flex; align-items: center; gap: 8px; font: 500 16px var(--sans); color: var(--olive); }
.s-link svg, .btn > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .s-link:hover svg { transform: translateX(4px); } }
.s-close { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-block: 24px clamp(40px, 6vw, 72px); text-align: center; }
.s-photo { margin: 0; border-radius: 28px; overflow: hidden; background: var(--well); clip-path: inset(0 round 28px); transition: clip-path 1.1s var(--ease), opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.s-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.s-photo.pre { clip-path: inset(7% round 28px); } .s-photo.pre img { transform: scale(1.08); }

/* Scroll reveal and line drawing */
.rv { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.rv.pre { opacity: 0; transform: translateY(20px); }
.dr { fill: none; stroke: var(--olive); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 200; transition: stroke-dashoffset 1.3s var(--ease) var(--d, 0ms), opacity .2s linear var(--d, 0ms); }
.pre .dr { stroke-dashoffset: 100; opacity: 0; }
.fd { transition: opacity .6s var(--ease) var(--d, 300ms); } .pre .fd { opacity: 0; }
.dr.gold { stroke: var(--gold); }
@keyframes draw { from { stroke-dashoffset: 100; opacity: 0; } 2% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes photoIn { from { clip-path: inset(6% round 28px); } }
@keyframes trav { 0% { stroke-dashoffset: 0; opacity: 0; } 6%, 94% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes halo { 0%, 100% { transform: scale(.7); opacity: .9; } 60% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .now .dr { animation: draw 1.7s var(--ease) var(--d, 0ms) backwards; }
  .now .fd { animation: fadeIn .8s var(--ease) var(--d, 350ms) backwards; }
  .now-up { animation: rise .7s var(--ease) var(--d, 0ms) backwards; }
  .now-photo { animation: photoIn 1.2s var(--ease) backwards; }
  .trav { animation: trav 5s linear 1.6s infinite backwards; }
  .pin-halo { animation: halo 2.6s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .trav { display: none; } .rv, .s-photo, .s-photo img, .dr, .fd { transition: none; } }
@media print { .pre, .pre .dr, .pre .fd { opacity: 1 !important; transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; } }

/* Hand-built diagrams */
.only-narrow { display: none; }
@media (max-width: 959px) { .only-wide { display: none; } .only-narrow { display: block; } }
figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-label { font: 500 17px var(--sans); fill: var(--ink); } .t-note { font: 400 16px var(--sans); fill: #625f5f; }
.t-pill { font: 600 21px var(--head); fill: #fff; } .t-sign { font: 600 14.5px var(--head); fill: var(--olive); }
.t-box { font: 500 25px var(--head); letter-spacing: -.02em; fill: #fff; } .t-match { font: 500 15.5px var(--sans); fill: #eef0e8; } .t-match-d { font: 500 14px var(--sans); fill: var(--ink); }
.fill-white { fill: #fff; } .fill-well { fill: var(--well); } .fill-sage { fill: var(--tint); } .fill-olive { fill: var(--olive); } .fill-olive2 { fill: #7b7f63; } .fill-bar { fill: #dcdad5; } .fill-bar2 { fill: #ebe9e5; }
.stroke-line { stroke: var(--line); } .sign { fill: #fff; stroke: var(--olive); stroke-width: 1.5; }
.line-draw { stroke-width: 2.2; }
.trav { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; stroke-dasharray: .01 99.99; } .trav.gold { stroke: var(--olive); }
.tick { stroke: var(--gold); stroke-width: 2.4; }
.pin { fill: var(--gold); } .pin-halo { fill: rgba(212,174,55,.3); transform-box: fill-box; transform-origin: center; }

/* About */
.ab-hero { padding-bottom: clamp(32px, 5vw, 60px); }
.ab-route { margin: 0; padding: clamp(20px, 3vw, 44px); border-radius: 32px; background: linear-gradient(180deg, var(--tint), #e7eadd); }
.ab-route figcaption { margin-top: 14px; font: 500 16px var(--sans); color: var(--ink); text-align: center; }
.ab-same { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.ab-same .s-photo { aspect-ratio: 1 / 1.08; }
.ab-why { margin: 36px 0 0; }
.ab-why div { padding: 20px 0; border-top: 1px solid var(--line); }
.ab-why dt { font: 600 20px/1.2 var(--head); color: var(--olive); } .ab-why dd { margin: 6px 0 0; color: var(--body); }
.ab-band { background: var(--well); padding-block: clamp(64px, 9vw, 120px); }
.ab-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 6vw, 88px); }
.ab-q p { margin: 16px 0 0; max-width: 30em; font-size: 18px; line-height: 1.5; }
.ab-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 44px; border-top: 1px solid #dcdad5; }
.ab-nums b { display: block; font: 500 clamp(44px, 7vw, 96px)/1 var(--head); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-nums span span { font: inherit; color: inherit; }
.ab-nums div > span { display: block; margin-top: 8px; color: var(--muted); }
.ab-who { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.ab-who .s-photo { aspect-ratio: 4 / 3.4; }
.ab-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
@media (max-width: 860px) { .ab-same, .ab-who, .ab-band .wrap { grid-template-columns: 1fr; } .ab-nums { gap: 16px; } }
@media (max-width: 520px) { .ab-nums { grid-template-columns: 1fr; } }

/* How we compare prices */
.hw-hero { text-align: center; }
.hw-hero .s-lead { margin-inline: auto; max-width: 40em; }
.hw-flow { margin: clamp(36px, 5vw, 60px) 0 0; padding: clamp(18px, 3vw, 44px); border-radius: 32px; background: #f7f7f2; }
.hw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.hw-a { grid-column: span 7; } .hw-b { grid-column: span 5; } .hw-c { grid-column: span 5; } .hw-d { grid-column: span 7; } .hw-e { grid-column: span 12; }
.hw-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 46px); border-radius: 32px; }
.hw-card h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.1; } .hw-card p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.hw-card.sage { background: var(--tint); } .hw-card.well { background: var(--well); } .hw-card.line { border: 1px solid var(--line); }
.hw-card.olive { background: var(--olive); } .hw-card.olive h2 { color: #fff; } .hw-card.olive p { color: rgba(238,240,232,.82); }
.hw-card.olive .hw-date { font: 500 clamp(34px, 4vw, 54px)/1.04 var(--head); letter-spacing: -.03em; color: #fff; }
.hw-card.olive .hw-date + p { margin-top: auto; }
.hw-never { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; }
.hw-never span { padding: 7px 14px; border-radius: 999px; background: #fff; font: 500 14px var(--sans); color: var(--ink); white-space: nowrap; }
.hw-never svg { flex: 1; min-width: 0; height: 24px; }
.hw-fit { width: 112px; margin-bottom: 8px; display: block; overflow: visible; }
.hw-scale { display: block; width: 100%; height: auto; margin-top: auto; padding-top: 16px; overflow: visible; }
.hw-card.plain { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 56px; background: #f7f7f2; }
.hw-card.plain p { flex: 1 1 420px; font: 500 clamp(21px, 2.3vw, 29px)/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); }
.hw-card.plain h2 { flex: 0 0 auto; }
.hw-grid + .s-close { padding-top: clamp(72px, 10vw, 128px); }
@media (max-width: 860px) { .hw-a, .hw-b, .hw-c, .hw-d { grid-column: span 12; } }

/* Contact */
.ct-hero { text-align: center; }
.ct-mail { display: inline-block; margin-top: 14px; font: 500 min(13vw, 150px)/1.08 var(--head); letter-spacing: -.045em; color: var(--ink); transition: color .25s; }
.ct-mail svg { display: block; width: 0; min-width: 100%; height: 10px; margin-top: 6px; overflow: visible; }
.ct-mail .dr { stroke: var(--gold); stroke-width: 4; }
@media (hover: hover) and (pointer: fine) { .ct-mail:hover { color: var(--olive); } }
.ct-fork { margin-top: clamp(20px, 3vw, 36px); } .ct-fork > svg { width: 100%; height: auto; margin-bottom: -1px; } @media (min-width: 960px) { .ct-fork > svg { display: block; } }
.ct-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-door { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--well); }
.ct-door.tint { background: var(--tint); }
.ct-door p { flex: 1; margin: 0 0 12px; color: var(--body); }
.ct-after { margin-top: 16px; margin-bottom: 8px; }
.ct-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(14px, 1.6vw, 20px); border-radius: 36px; background: #f7f7f2; }
.ct-panel .s-photo { aspect-ratio: 1.3; } .ct-panel > div { padding: clamp(10px, 2vw, 28px); }
.ct-panel p { margin: 14px 0 0; font-size: 17px; max-width: 30em; } .ct-panel .s-note { font-size: 15px; }
@media (max-width: 860px) { .ct-doors, .ct-panel { grid-template-columns: 1fr; } .ct-fork { margin-top: 40px; } }

/* Store list */
.st-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.st-top .s-photo { aspect-ratio: 1 / .86; }
.st-list { margin-top: clamp(40px, 6vw, 80px); }
.store-list.st-rows { display: block; border-top: 1px solid var(--line); }
.store-card.st-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 46px; align-items: center; gap: 28px; padding: 30px 16px; border-bottom: 1px solid var(--line); border-radius: 0; background: none; transition: background .25s, opacity .7s var(--ease), transform .7s var(--ease); }
.store-card.st-row:hover { background: #f7f7f2; transform: none; box-shadow: none; }
.st-row-main b { font: 500 clamp(26px, 3.2vw, 42px)/1.08 var(--head); letter-spacing: -.03em; }
.st-row-main small { display: block; margin-top: 6px; font-size: 14.5px; }
.st-row-mix small { display: block; margin-top: 10px; font-size: 14.5px; }
.st-go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tint); transition: background .25s, transform .3s var(--ease); }
.st-go svg { width: 18px; height: 18px; fill: none; stroke: var(--olive); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
@media (hover: hover) and (pointer: fine) { .st-row:hover .st-go { background: var(--olive); transform: translateX(4px); } .st-row:hover .st-go svg { stroke: #fff; } }
.st-after { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(32px, 6vw, 88px); }
.st-after p { margin: 12px 0 0; font-size: 17px; } .st-after .s-note { grid-column: 1 / -1; margin: 0; font-size: 14.5px; }
@media (max-width: 860px) {
  .st-top, .st-after { grid-template-columns: 1fr; }
  .store-card.st-row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; padding: 24px 4px; }
  .st-row-main { grid-column: 1; } .st-go { grid-column: 2; grid-row: 1; }
  .st-row-mix { grid-column: 1 / -1; }
}

/* One store */
.st-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
.st-name { font-size: clamp(44px, 6.6vw, 92px); overflow-wrap: anywhere; }
.st-hero .store-head { margin-top: 30px; }
.st-mix { padding: clamp(22px, 2.6vw, 32px); border-radius: 28px; background: var(--tint); }
.st-mix h2 { margin-bottom: 18px; font: 500 15px var(--sans); letter-spacing: 0; color: var(--muted); }
.st-mix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.st-mix li { color: var(--ink); font-size: 15px; }
.st-brands { margin-top: clamp(40px, 5vw, 64px); }
.st-brands h2 { margin-bottom: 12px; font: 500 15px var(--sans); letter-spacing: 0; color: var(--muted); }
.st-brands p { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; font: 500 clamp(19px, 2vw, 26px)/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); }
.st-note { margin-top: 32px; } .st-note p { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.st-products { margin-top: clamp(56px, 7vw, 96px); } .st-products .s-h2 { margin-bottom: 24px; } .st-products .s-link { margin-top: 12px; }
.pg-story .pg-tile { background: var(--well); } .pg-story .pg-tile .th { background: #fff; }
@media (max-width: 860px) { .st-hero { grid-template-columns: 1fr; } }

/* Sell Here */
.sl-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.sl-title { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; }
.sl-mock { display: grid; gap: 10px; padding: clamp(14px, 2vw, 22px); border-radius: 32px; background: linear-gradient(180deg, var(--tint), #e7eadd); }
.sl-paste { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff; font-size: 14.5px; color: var(--muted); }
.sl-paste svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--olive); stroke-width: 1.8; stroke-linecap: round; }
.sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.72); }
.sl-row-name { font: 500 15.5px var(--sans); color: var(--ink); }
.sl-row i { width: 60px; height: 8px; border-radius: 4px; background: #dcdad5; }
@media (max-width: 420px) { .sl-row i { width: 24px; } }
.sl-row-go { font: 500 13px var(--sans); color: var(--olive); }
.sl-row.you { background: #fff; box-shadow: 0 0 0 1.5px var(--gold), 0 14px 34px -14px rgba(47,50,24,.28); }
.sl-row-price { font: 600 15px var(--sans); color: var(--ink); }
.sl-row-contact { grid-column: 1 / -1; display: flex; gap: 8px; }
.sl-row-contact em { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font: 500 13px var(--sans); color: var(--ink); }
.sl-gets .s-h2 { margin-bottom: 36px; }
.sl-get-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; }
.sl-get-list li { padding-top: 20px; border-top: 1px solid var(--line); }
.sl-get-list svg { width: 34px; height: 34px; display: block; margin-bottom: 18px; overflow: visible; } .sl-get-list .dr { stroke-width: 1.4; }
.sl-get-list span { font: 500 19px/1.25 var(--head); letter-spacing: -.012em; color: var(--ink); }
.sl-photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.sl-photos .tall { aspect-ratio: auto; height: 100%; min-height: 0; }
.sl-photo-copy { display: grid; gap: 16px; align-content: start; }
.sl-photo-copy p { margin: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: 28px; background: var(--tint); }
.sl-photo-copy .s-photo { aspect-ratio: 1.3; }
.sl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-radius: 32px; background: var(--well); overflow: hidden; }
.sl-plan { padding: clamp(26px, 3vw, 40px); border-left: 1px solid #e3e1dd; } .sl-plan:first-child { border-left: 0; }
.sl-plan.gold { box-shadow: inset 0 3px 0 var(--gold); }
.sl-plan h3 { font: 500 16px var(--sans); letter-spacing: 0; color: var(--muted); }
.sl-plan .sell-price { margin: 12px 0 14px; font: 500 clamp(28px, 3.2vw, 42px)/1.05 var(--head); letter-spacing: -.03em; color: var(--ink); }
.sl-plan p:last-child { margin: 0; color: var(--body); }
#plans { padding-bottom: clamp(56px, 7vw, 88px); }
.sell-calc.sl-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: none; }
.sl-calc-in { padding: clamp(26px, 4vw, 56px); background: var(--tint); border-radius: 32px 0 0 32px; } .sl-calc-in p { margin: 14px 0 26px; } .sl-calc .sell-fields { grid-template-columns: 1fr; }
.sl-calc .sell-out { margin: 0; padding: clamp(26px, 4vw, 56px); background: var(--olive); border-radius: 0 32px 32px 0; color: #eef0e8; }
.sl-calc .sell-nums { grid-template-columns: 1fr; gap: 20px; }
.sl-calc .sell-nums div { padding: 0; background: none; }
.sl-calc .sell-nums span { font-size: 14.5px; color: rgba(238,240,232,.75); }
.sl-calc .sell-nums b { margin-top: 2px; font: 500 clamp(44px, 6vw, 76px)/1 var(--head); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.sl-calc .sell-out p { color: #eef0e8; } .sl-calc .pg-note { color: rgba(238,240,232,.7); }
.sl-end { text-align: center; padding-bottom: clamp(16px, 3vw, 40px); } .sl-end .s-lead { margin-inline: auto; }
@media (max-width: 960px) { .sl-hero, .sell-calc.sl-calc { grid-template-columns: 1fr; } .sl-calc-in { border-radius: 32px 32px 0 0; } .sl-calc .sell-out { border-radius: 0 0 32px 32px; } .sl-get-list { grid-template-columns: 1fr 1fr; } .sl-plans { grid-template-columns: 1fr; } .sl-plan { border-left: 0; border-top: 1px solid #e3e1dd; } .sl-plan:first-child { border-top: 0; } .sl-plan.gold { box-shadow: inset 3px 0 0 var(--gold); } .sl-photos { grid-template-columns: 1fr 1fr; } .sl-photo-copy { grid-column: 1 / -1; grid-row: 1; } .sl-photos .tall { height: auto; aspect-ratio: 1 / 1.1; } }
@media (max-width: 520px) { .sl-get-list { grid-template-columns: 1fr; } .sl-get-list svg { margin-bottom: 12px; } }

/* Terms and Privacy */
.lg-head h1 { font: 500 clamp(40px, 6vw, 76px)/1 var(--head); letter-spacing: -.04em; }
.lg-head svg { display: block; width: 100%; height: 8px; margin-top: clamp(22px, 3vw, 36px); overflow: visible; } .lg-head .dr { stroke: var(--line); stroke-width: 1.5; }
.lg-body { display: grid; grid-template-columns: 240px minmax(0, 70ch); gap: clamp(40px, 6vw, 88px); margin-top: clamp(28px, 4vw, 48px); margin-bottom: 40px; }
.lg-body .pg-prose > p:first-child { margin-top: 0; }
.lg-body h2 { scroll-margin-top: 96px; margin: 44px 0 12px; font: 500 clamp(23px, 2.4vw, 30px)/1.15 var(--head); letter-spacing: -.022em; }
.toc { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 116px); overflow-y: auto; }
.toc summary { display: none; }
.toc nav { display: flex; flex-direction: column; }
.toc a { padding: 7px 0 7px 16px; border-left: 2px solid var(--line); font-size: 14.5px; line-height: 1.3; color: var(--muted); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); } .toc a[aria-current] { border-left-color: var(--olive); color: var(--ink); font-weight: 500; }
@media (max-width: 899px) {
  .lg-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; max-height: none; padding: 14px 18px; border-radius: 16px; background: var(--well); }
  .toc summary { display: list-item; cursor: pointer; font: 500 15px var(--sans); color: var(--ink); }
  .toc nav { margin-top: 12px; }
}

/* Compact store rows on phones: two tight lines per store, so more stores fit on screen */
@media (max-width: 720px) {
  .offers { gap: 6px; }
  .offer { grid-template-columns: minmax(0, 1fr) auto 42px; grid-template-areas: "n p g" "a a g"; gap: 3px 10px; padding: 8px 8px 8px 14px; border-radius: 14px; }
  .offer > div:first-child { display: contents; }
  .offer b { grid-area: n; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .offer small { grid-area: a; justify-self: start; font-size: 12px; }
  .offer small.avail { margin-top: 0; padding: 0; background: none; }
  .offer small.avail::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--good); vertical-align: 1px; }
  .offer .p { grid-area: p; font-size: 16px; text-align: right; }
  .offer .p br, .offer .p s, .offer .p small { display: none; }
  .offer > .btn.olive { grid-area: g; grid-column: auto; width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; }
  .offer > .btn.olive svg { display: none; }
  .offer > .btn.olive::before { content: "\2192"; font-size: 18px; line-height: 1; color: #eef0e8; transform: translateY(1px); }
  .offer .store-contact { grid-area: a; grid-column: 1 / 3; justify-self: end; flex-wrap: nowrap; gap: 5px; }
  .offer .store-city { display: none; }
  .offer .store-contact .btn { height: 28px; min-height: 0; padding: 0 9px; font-size: 12px; }
  .sheet .pic { margin: 8px; padding: 10px; border-radius: 18px; }
  .sheet .pic img { max-height: 120px; }
  .sheet .info h2 { font-size: 24px; }
  .verdict { margin-top: 10px; padding: 10px 14px; }
  .verdict p { font-size: 13.5px; line-height: 1.4; }
}

/* Live 3D lens logo and line art wordmark */
.logo { gap: 8px; }
.logo-word { display: block; width: 118px; height: auto; overflow: visible; }

/* Buy direct message */
.why-hi { margin: 0 0 22px; padding: 18px 20px; border-radius: 18px; background: #eef0e8; color: var(--olive); }
.why-hi h3 { margin: 0 0 6px; font: 600 21px/1.2 var(--head); letter-spacing: -.02em; }
.why-hi p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--body); } .why-hi b { color: var(--olive); }
.pg-seal { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #eef0e8; color: var(--olive); font-size: 14px; line-height: 1.45; }

/* Popup: the panel scrolls inside, so Close never leaves its corner */
.sheet { overflow: hidden; }
.sheet > div { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sheet .info { overflow: visible; }
.sheet h2 { margin: 4px 0 12px; font-size: 26px; }
.sheet h4 { margin: 18px 0 8px; }
.sheet .close { display: grid; place-items: center; padding: 0; line-height: 1; color: var(--ink); transition: transform .4s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.sheet .close:hover { transform: rotate(90deg); }
.sheet.scrolled .close { background: var(--olive); border-color: var(--olive); color: #fff; transform: scale(.88); box-shadow: 0 10px 26px rgba(47,50,24,.3); }
.sheet.scrolled .close:hover { transform: scale(.88) rotate(90deg); }
@media (min-width: 761px) { .sheet .pic { position: sticky; top: 12px; align-self: start; min-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .sheet .close { transition: none; } .sheet .close:hover, .sheet.scrolled .close:hover { transform: none; } }

/* Our scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: rgba(47,50,24,.32) padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--olive) padding-box; }
@supports not selector(::-webkit-scrollbar) { html, .sheet > div { scrollbar-color: rgba(47,50,24,.4) transparent; scrollbar-width: thin; } }

/* Store rows: logo circle, one line on desktop, round Call and WhatsApp */
.offer b { display: flex; align-items: center; gap: 9px; min-width: 0; }
.offer b > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 12px var(--sans); color: var(--olive); text-transform: uppercase; }
.mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 13px var(--sans); text-decoration: none; transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.ct:hover { background: var(--olive); color: #fff; box-shadow: none; transform: translateY(-1px); }
.ct.wa { color: #1c7a43; }
.ct.wa:hover { background: #1c7a43; color: #fff; }
.offer .store-city { display: none; }
.offer .ct { width: 36px; padding: 0; }
.offer .ct span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 721px) {
  .offer { grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto) auto; gap: 10px; padding: 8px 10px 8px 12px; }
  .offer small { display: block; margin: 1px 0 0 35px; }
  .offer small.avail { display: table; margin-top: 2px; padding: 1px 8px; font-size: 11.5px; }
  .offer .store-contact { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 6px; }
  .offer .p { grid-column: 3; grid-row: 1; text-align: right; font-size: 17px; line-height: 1.2; }
  .offer > .btn.olive { grid-column: 4; grid-row: 1; padding: 10px 16px; }
}
@media (max-width: 720px) {
  .offer b { gap: 7px; }
  .offer .mark { width: 22px; height: 22px; }
  .offer .store-contact { gap: 6px; }
  .offer .ct, .offer .store-contact .btn { width: 34px; height: 34px; }
}
.offer small.avail { white-space: nowrap; }
/* Narrow popup: the store name matters more than the words on the button */
@media (min-width: 721px) and (max-width: 1040px) {
  .offer > .btn.olive { width: 40px; height: 40px; padding: 0; font-size: 0; }
}

/* ---------- Homepage: trending, facts strip, paste demo, stores, camera start, price gaps, guides ---------- */
.tr-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 20px; min-height: 442px; }
.tr-lead { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; padding: clamp(28px, 4vw, 52px); border-radius: 32px; background: var(--well); overflow: hidden; transition: box-shadow .35s var(--ease); }
.tr-lead:hover { box-shadow: var(--sh-hover); }
.tr-label { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: #fff; font: 500 12.5px var(--sans); color: var(--ink); }
.tr-lead h3 { font-size: clamp(28px, 3.1vw, 42px); }
.tr-price { margin: 20px 0 4px; font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--head); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-price small { font: 400 15px var(--sans); letter-spacing: 0; color: var(--muted); }
.tr-where { margin: 0 0 24px; font-size: 14.5px; color: var(--body); }
.tr-pic { display: grid; place-items: center; min-width: 0; }
.tr-pic img { width: 100%; max-height: 340px; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.tr-lead.rise .tr-pic img { transform: scale(1.08); }
.tr-lead.rise.in .tr-pic img { transform: none; }
.tr-lead.rise.in:hover .tr-pic img { transform: scale(1.04); }
.tr-side { display: grid; grid-auto-rows: 1fr; gap: 20px; }
.tr-tile { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: border-color .25s, box-shadow .35s var(--ease); }
.tr-tile:hover { border-color: transparent; box-shadow: var(--sh-hover); }
.tr-th { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 16px; background: var(--well); overflow: hidden; }
.tr-th img { max-width: 80%; max-height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.tr-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tr-tx small { font: 500 12.5px var(--sans); color: var(--muted); }
.tr-tx b { font: 500 18px/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); }
.tr-tx em { font: 500 13.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--olive); }
@media (max-width: 980px) { .tr-grid { grid-template-columns: 1fr; min-height: 760px; } .tr-side { grid-auto-rows: auto; } }
@media (max-width: 620px) { .tr-grid { min-height: 960px; } .tr-lead { grid-template-columns: 1fr; padding: 24px; border-radius: 26px; } .tr-pic { order: -1; } .tr-pic img { max-height: 220px; } .tr-th { width: 84px; height: 84px; } .tr-tx b { font-size: 16.5px; } }

.fact-strip { position: relative; min-height: 64px; border-block: 1px solid var(--line); }
.marquee.facts { border: 0; padding: 20px 0; }
.marquee.facts .row-m { gap: 0; animation-duration: 70s; }
.facts-set { display: flex; align-items: center; flex: none; }
.marquee.facts span { font: 500 15px var(--sans); letter-spacing: 0; color: var(--body); }
.marquee.facts i { width: 4px; height: 4px; margin: 0 28px; border-radius: 50%; background: var(--soft); flex: none; }
.fact-strip.paused .row-m { animation-play-state: paused; }
.fact-pause { position: absolute; right: 12px; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; }
.fact-pause svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.fact-pause[aria-pressed="true"] svg path { d: path("M9 6l9 6-9 6z"); fill: var(--ink); stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .marquee.facts { mask: none; -webkit-mask: none; padding-inline: 16px; } .marquee.facts .row-m { width: auto; } .facts-set { flex-wrap: wrap; justify-content: center; row-gap: 8px; } .facts-set[aria-hidden] { display: none; } .fact-pause { display: none; } .tr-lead.rise .tr-pic img { transform: none; } .tr-pic img, .tr-lead, .tr-tile, .meet-card, .hg-card, .hg-card img { transition: none; } }

.paste-panel { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 28px 56px; padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: var(--warm); }
.paste-panel h2 { font-size: clamp(30px, 3.6vw, 46px); }
.paste-panel p { margin: 12px 0 0; max-width: 520px; color: var(--body); }
.paste-form label { display: block; margin-bottom: 8px; font: 500 13px var(--sans); color: var(--body); }
.paste-row { display: flex; gap: 8px; }
.paste-row input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 16px; }
.paste-row input:focus { outline: 2px solid var(--olive); outline-offset: 1px; }
.paste-row .btn { height: 52px; padding: 0 22px; border-radius: 14px; }
.paste-try { min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--olive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 860px) { .paste-panel { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .paste-row { flex-direction: column; } .paste-row input { flex: none; } .paste-row .btn { width: 100%; } }

.meet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; min-height: 307px; }
.meet-card { display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: var(--well); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.meet-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.meet-card .mark { width: 48px; height: 48px; margin-bottom: 18px; font: 600 20px var(--head); }
.meet-card h3 { font-size: 21px; }
.meet-city { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.meet-cats { margin: 4px 0 18px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.meet-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 14px var(--sans); color: var(--olive); }
.meet-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .meet-grid { min-height: 1504px; } }

.cam-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; margin-bottom: 22px; }
.cam-pick { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s; }
.cam-pick:hover { border-color: #cfccc9; }
.cam-pick[aria-pressed="true"] { border-color: var(--olive); box-shadow: inset 0 0 0 1px var(--olive); }
.cam-pick img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.cam-pick span { font: 500 14px/1.25 var(--sans); color: var(--ink); min-width: 0; }
.cam-select { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-bottom: 18px; font: 500 13px var(--sans); color: var(--muted); }
.cam-select .select { width: 100%; min-height: 44px; }
.cam-go { display: flex; flex-wrap: wrap; gap: 10px; }
.cam-go .btn { min-height: 44px; }
@media (max-width: 620px) { .cam-picks { grid-template-columns: 1fr 1fr; } .cam-pick { padding: 8px; } .cam-pick span { font-size: 13px; } .cam-go .btn { flex: 1 1 100%; } }

.sec-head > .btn.sm { min-height: 44px; }
.sec-head h2 > .w2 { color: var(--ink); } /* word-split spans must not pick up the muted h2 > span colour */
.gap-grid { grid-template-columns: repeat(3, 1fr); min-height: 896px; }
.gap-card { color: inherit; }
.gap-card .well { aspect-ratio: 1 / .6; }
.gap-card .well img { position: absolute; inset: 10% 0; width: 100%; max-width: none; height: 80%; max-height: none; }
@media (max-width: 980px) { .gap-grid { grid-template-columns: 1fr 1fr; } }
.gap-rows { margin: 8px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
.gap-rows div { display: flex; justify-content: space-between; gap: 12px; }
.gap-rows dt { color: var(--body); } .gap-rows dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 620px) { .gap-grid { grid-template-columns: 1fr; min-height: 2486px; } }

.hg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; min-height: 296px; }
.hg-card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 20px; background: var(--well); transition: transform .5s var(--ease); }
.hg-card:hover img { transform: scale(1.02); }
.hg-card h3 { margin: 14px 0 6px; font-size: 21px; line-height: 1.15; }
.hg-card p { margin: 0; font-size: 14.5px; color: var(--body); }
@media (max-width: 860px) { .hg-grid { grid-template-columns: 1fr; min-height: 867px; } }
/* Popup store rows: the name gets the room */
.offer small { white-space: nowrap; }
@media (min-width: 761px) { .sheet-in { grid-template-columns: .82fr 1.18fr; } }
@media (min-width: 721px) {
  .sheet .offer > .btn.olive { width: 40px; height: 40px; padding: 0; font-size: 0; }
  .sheet .offer > .btn.olive svg { width: 16px; height: 16px; }
}
/* Compact store button: a bag icon reads as buy from this store */
.offer { --go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef0e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
@media (max-width: 1040px) {
  .offer > .btn.olive { display: flex; align-items: center; justify-content: center; gap: 0; }
  .offer > .btn.olive svg { display: none; }
  .offer > .btn.olive::before { content: ""; width: 18px; height: 18px; background: var(--go) center / contain no-repeat; transform: none; }
}
@media (min-width: 721px) {
  .sheet .offer > .btn.olive { display: flex; align-items: center; justify-content: center; gap: 0; }
  .sheet .offer > .btn.olive svg { display: none; }
  .sheet .offer > .btn.olive::before { content: ""; width: 18px; height: 18px; background: var(--go) center / contain no-repeat; }
}

/* The first screen shows at once and only slides in, so it never waits for the scripts */
.hero .rise { opacity: 1; transform: none; animation: hero-up .7s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes hero-up { from { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .hero .rise { animation: none; } }

/* Logo: three rings pull into focus on load, and again on hover */
.logo-rings { display: block; flex: none; width: 28px; height: 28px; overflow: visible; }
.logo-rings .r2 { animation: focus-2 .9s var(--ease) both; }
.logo-rings .r3 { animation: focus-3 .9s var(--ease) both; }
.logo:hover .logo-rings .r2 { animation: focus-2b .7s var(--ease) both; }
.logo:hover .logo-rings .r3 { animation: focus-3b .7s var(--ease) both; }
@keyframes focus-2 { from { transform: translate(-5.66px, -5.66px); } }
@keyframes focus-3 { from { transform: translate(-11.31px, -11.31px); } }
@keyframes focus-2b { from { transform: translate(-5.66px, -5.66px); } }
@keyframes focus-3b { from { transform: translate(-11.31px, -11.31px); } }
@media (prefers-reduced-motion: reduce) { .logo-rings circle, .logo:hover .logo-rings circle { animation: none; } }

/* Category and brand pages */
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
a.chip { display: inline-block; font-size: 14px; }
.pg-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 8px; }
.pg-pager a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 12px; background: #fff; color: var(--ink); font: 500 14px var(--sans); }
.pg-pager a:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.pg-pager a[aria-current] { background: var(--olive); color: #fff; }
.pg-checks { margin: 12px 0 0; padding-left: 20px; line-height: 1.7; color: var(--body); max-width: 68ch; }

/* Ask all stores */
.ask-all { margin-top: 14px; }
.ask-all .btn svg { fill: currentColor; stroke: none; }
.ask-all .btn[aria-disabled] { opacity: .6; cursor: default; }

/* Search in the menu, on every page */
.nav-search { display: none; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0; max-width: 340px; height: 40px; margin: 0 8px; padding: 0 14px; border-radius: 999px; background: rgba(0,0,0,.05); transition: background .2s, box-shadow .2s; }
.pg .nav-search, .nav-pill.searching .nav-search { display: flex; }
.nav-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--olive); }
.nav-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.nav-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px var(--sans); color: var(--ink); }
.nav-search input::-webkit-search-cancel-button { display: none; }
@media (max-width: 960px) {
  .pg .nav-pill, .nav-pill.searching { flex-wrap: wrap; border-radius: 28px; padding-bottom: 8px; }
  .pg .nav-pill .logo, .nav-pill.searching .logo { flex: 1 1 0; min-width: 0; margin-right: 0; }
  .pg .nav-pill .nav-sell, .nav-pill.searching .nav-sell { margin-left: 0; padding: 8px 14px; flex: none; }
  .pg .nav-pill .nav-burger, .nav-pill.searching .nav-burger { flex: none; }
  .nav-search { order: 9; flex: 1 1 100%; max-width: none; margin: 6px 2px 0 -8px; }
}

/* Category shelf: photo first */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pg-card { display: flex; flex-direction: column; padding: 12px; border-radius: 22px; background: #fff; color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s; }
.pg-card.new { animation: card-in .35s var(--ease) both; }
.pg-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.pg-card .th { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--well); overflow: hidden; margin-bottom: 12px; }
.pg-card .th img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.pg-card:hover .th img { transform: scale(1.05); }
.pg-card b { font: 500 14px/1.3 var(--sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em; }
.pg-card .pr { margin-top: 8px; font: 600 17px var(--sans); } .pg-card .pr i { font: 400 12px var(--sans); color: var(--muted); }
.pg-card small { margin-top: 2px; font-size: 12px; color: var(--muted); } .pg-card small.in { color: var(--olive); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pg-card { animation: none; transition: none; } }
@media (max-width: 640px) { .pg-cards { grid-template-columns: 1fr 1fr; gap: 10px; } .pg-card { padding: 10px; border-radius: 18px; } }
.pg-cards-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 32px 0 14px; }
.pg-cards-head h2 { margin: 0 !important; }
.pg-types { display: flex; gap: 10px; overflow-x: auto; margin: 18px -16px 0; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.pg-types::-webkit-scrollbar { display: none; }
.pg-type { flex: 0 0 116px; scroll-snap-align: start; padding: 8px; border-radius: 18px; background: #fff; color: var(--ink); text-align: center; transition: transform .25s var(--ease), box-shadow .25s; }
.pg-type:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.pg-type .th { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--well); overflow: hidden; margin-bottom: 6px; }
.pg-type .th img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.pg-type b { font: 500 13px/1.25 var(--sans); }
.pg-pager.more { justify-content: center; }
.pg-pager.more a:not([rel=next]) { display: none; }
.pg-pager.more a[rel=next] { padding: 0 32px; border-radius: 999px; }
.pg-main .pg-checks, .pg-cards-head ~ .pg-lead { max-width: none; }

/* Voice button inside the menu search */
.nav-search .mic { width: 32px; height: 32px; margin-right: -8px; border-radius: 50%; }
.nav-search .mic svg { stroke: var(--olive); }

/* Homepage: story circles for categories */
.cat-stories { position: relative; z-index: 1; display: flex; align-items: center; max-width: 1232px; margin: 28px auto 8px; padding: 0 8px; }
.cat-stories[hidden] { display: none; }
.cs-row { display: flex; flex: 1; min-width: 0; gap: 14px; overflow-x: auto; padding: 6px 12px; scroll-snap-type: x proximity; scrollbar-width: none; justify-content: safe center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.cs-row::-webkit-scrollbar { display: none; }
.cs { flex: 0 0 auto; width: 84px; scroll-snap-align: start; text-align: center; color: var(--ink); }
.cs-ring { position: relative; display: block; width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 50%; transition: transform .25s var(--ease); }
.cs-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, var(--olive), #c9a24a, #e6cf8f, var(--olive-2), var(--olive)); transition: transform .9s var(--ease); }
.cs:hover .cs-ring::before { transform: rotate(180deg); }
.cs:active .cs-ring { transform: scale(.94); }
.cs-in { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid #fff; overflow: hidden; }
.cs-in img { width: 78%; height: 78%; object-fit: contain; }
.cs b { display: block; font: 500 12.5px/1.25 var(--sans); }
.cs-arrow { display: none; flex: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; }
.cs-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-arrow:hover { border-color: #cfccc9; }
@media (min-width: 961px) { .cs { width: 104px; } .cs-ring { width: 92px; height: 92px; } .cs b { font-size: 13.5px; } }
@media (hover: hover) and (min-width: 961px) { .cs-arrow { display: grid; } }
@media (prefers-reduced-motion: reduce) { .cs-ring, .cs-ring::before { transition: none; } .cs:hover .cs-ring::before { transform: none; } }

/* Homepage: category cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.cat-grid .pg-card b { min-height: 0; font-size: 15px; }
@media (max-width: 640px) { .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }