:root {
  /* Storybook woodland: parchment, moss, oak bark, fox, honey. */
  --sky: #ece5d3;      /* birch: header and hero bands */
  --sky-deep: #d9cfb6;
  --mist: #f8f4ea;     /* parchment: page */
  --cloud: #fffdf7;    /* linen: cards */
  --ink: #2f3b2c;      /* forest: text */
  --ink-soft: #5f6a58;
  --rain: #4f6b47;     /* moss: links and actions */
  --rain-dark: #3b5236;
  --sun: #e9c46a;      /* honey */
  --sun-ink: #6f5310;
  --line: #e4dcc8;
  --fox: #c8693a;
  --fox-l: #f6dcc6;
  --bark: #5b4632;
  --sage: #8fa382;
  --head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Gaegu', 'Figtree', system-ui, sans-serif; /* little labels only */
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--body); color: var(--ink); background: var(--mist); -webkit-font-smoothing: antialiased; }
a { color: var(--rain); text-underline-offset: 3px; }
a:hover { color: var(--rain-dark); }
:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; border-radius: 6px; }
/* A-02: controls reset with all: unset get the ring back. */
.chip:focus-visible, .linkish:focus-visible, .g-reset:focus-visible, .cp-miss:focus-visible, .cp-use:focus-visible, .cp-clear:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; }
/* A-11: sideways-scrolling table boxes take keyboard focus. */
.table-scroll:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; }
/* A-10: headings promoted to h2 keep their old look. */
.mf-h { font: inherit; font-size: inherit; font-weight: 700; margin: 0 0 10px; }
.pc-h { font-size: 1.17em; margin: 0 0 8px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; font-variation-settings: 'SOFT' 100, 'WONK' 1; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(34px, 5.4vw, 58px); }
h2 { font-size: clamp(25px, 3vw, 32px); margin-bottom: 14px; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--cloud); padding: 8px 12px; z-index: 10; }

/* header */
.site-head { background: var(--sky); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 23px/1 var(--head); white-space: nowrap; flex: none; }
.logo-cloud { width: 54px; height: 32px; flex: none; }
.logo-cloud .cloud-shape { fill: var(--cloud); stroke: var(--ink); stroke-width: 2; }
.logo-bee * { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.logo-bee .bee-body { fill: var(--sun); stroke-width: 1.8; }
.logo-bee .bee-wing { fill: #e2eff9; }
.logo-bee .bee-eye { fill: var(--ink); stroke: none; }
.logo-bee .bee-trail { stroke-width: 1.4; opacity: .55; }
.logo:hover .logo-bee { transform: translate(1px, -2px); }
.logo-bee { transition: transform .25s; }
@media (prefers-reduced-motion: reduce) { .logo-bee { transition: none; } }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav a:hover { color: var(--rain); }

/* hero: the picker floats on a cloud */
.hero { background: linear-gradient(var(--sky) 0%, var(--sky) 55%, var(--mist) 100%); padding: 36px 0 72px; position: relative; overflow: hidden; }
.hero h1 { max-width: 14ch; }
.hero .lede { font-size: 19px; color: var(--ink-soft); max-width: 46ch; margin-top: 16px; }
.cloud-stage { position: relative; margin-top: 34px; padding: 56px 7% 64px; }
.hero-cloud { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--cloud); filter: drop-shadow(0 18px 30px rgba(63, 115, 100, 0.14)); }
.picker { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; max-width: 900px; margin: 0 auto; }
.picker label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.picker input { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--mist); color: var(--ink); }
.picker input:focus { border-color: var(--rain); outline: none; background: var(--cloud); }
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 17px/1 var(--head); padding: 15px 24px; border-radius: 999px; border: 0; background: var(--rain); color: var(--cloud); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--rain-dark); color: var(--cloud); }
.btn.quiet { background: var(--cloud); color: var(--rain); box-shadow: inset 0 0 0 2px var(--rain); }
.picker-note { position: relative; text-align: center; color: var(--ink-soft); font-size: 14px; margin: 14px 0 0; }
.picker-err { color: #a33a2a; }

/* sections */
main section { padding: 48px 0; }
.section-lede { color: var(--ink-soft); max-width: 60ch; margin-top: -4px; }
.crumbs { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.crumbs a { color: var(--ink-soft); }

/* categories */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 20px 0 0; }
.cats a { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; padding: 18px; background: var(--cloud); border-radius: 22px; text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.cats a:hover { border-color: var(--sky-deep); }
.cats .ico { grid-row: span 2; width: 56px; height: 42px; color: var(--rain); }
.cats b { font: 600 18px/1.2 var(--head); }
.cats span { font-size: 14px; color: var(--ink-soft); }

/* explorer table */
.explorer-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; align-items: center; }
.explorer-tools select, .explorer-tools input[type=search] { font: inherit; font-size: 15px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--cloud); color: var(--ink); }
.chip { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--cloud); border: 2px solid var(--line); cursor: pointer; }
.chip input { accent-color: var(--rain); }
.table-scroll { overflow-x: auto; background: var(--cloud); border-radius: 22px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th, thead td { position: sticky; top: 0; background: var(--cloud); }
tbody tr:last-child > * { border-bottom: 0; }
.explorer th button { all: unset; cursor: pointer; font-weight: 700; }
.explorer th button:focus-visible { outline: 3px solid var(--rain); }
.explorer th[aria-sort] button::after { content: ' ↕'; color: var(--ink-soft); font-weight: 400; }
.explorer th[aria-sort=ascending] button::after { content: ' ↑'; }
.explorer th[aria-sort=descending] button::after { content: ' ↓'; }
.explorer td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.explorer td a { font-weight: 600; text-decoration: none; }
.explorer .cmp { width: 1%; }
.explorer .cmp input { width: 18px; height: 18px; accent-color: var(--rain); }
.na { color: var(--ink-soft); font-style: italic; } /* A-03: 5.6:1 on cream */
.brand { color: var(--ink-soft); font-weight: 500; }
.count { color: var(--ink-soft); font-size: 14px; }

/* tray for picking strollers to compare */
.tray { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--ink); color: var(--cloud); border-radius: 999px; padding: 10px 10px 10px 22px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 30px rgba(47, 59, 44, 0.3); z-index: 5; max-width: calc(100% - 32px); }
.tray[hidden] { display: none; }
.tray .btn { padding: 11px 18px; font-size: 15px; }

/* comparison table */
.compare th[scope=row] { width: 190px; font-weight: 600; color: var(--ink-soft); background: var(--mist); }
.compare thead th { font: 600 18px/1.25 var(--head); min-width: 200px; }
.compare thead th a { color: var(--ink); text-decoration: none; }
.compare thead th a:hover { color: var(--rain); }
.compare td small { display: block; color: var(--ink-soft); font-size: 13px; }
.compare td.win { background: #fff8de; }
.tag { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--sun-ink); }
.sun { width: 16px; height: 16px; fill: var(--sun); stroke: #d9a520; stroke-width: 1.6; stroke-linecap: round; }
.compare.cols-1 td { min-width: 240px; }

/* stroller page */
.product-hero { background: var(--sky); padding: 30px 0 40px; }
.product-hero .wrap { display: grid; grid-template-columns: 1fr 260px; gap: 30px; align-items: center; }
.product-hero .ico { width: 100%; max-width: 240px; height: auto; color: var(--rain); background: var(--cloud); border-radius: 50% 50% 46% 54% / 60% 58% 42% 40%; padding: 34px 26px; }
.product-hero .summary { font-size: 19px; color: var(--ink-soft); max-width: 56ch; margin-top: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 20px 0 0; padding: 0; list-style: none; }
.facts li { font-size: 15px; color: var(--ink-soft); }
.facts b { display: block; font: 600 24px/1.1 var(--head); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pc > div { background: var(--cloud); border-radius: 22px; padding: 22px 24px; }
.pc ul { margin: 10px 0 0; padding-left: 20px; }
.pc li { margin-bottom: 6px; }
.peers { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; }
.peers a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--cloud); text-decoration: none; font-weight: 600; font-size: 15px; }
.notice { background: var(--cloud); border-radius: 18px; padding: 16px 20px; font-size: 15px; color: var(--ink-soft); }
.notice b { color: var(--ink); }
.sources { font-size: 14px; color: var(--ink-soft); word-break: break-word; }
.sources ul { padding-left: 18px; }

/* prose pages */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 30px; }

/* footer */
.site-foot { background: var(--ink); color: #d5e3dc; margin-top: 40px; padding: 40px 0 60px; font-size: 15px; }
.site-foot a { color: var(--cloud); }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 30px; }
.site-foot h3 { color: var(--cloud); font-size: 17px; margin-bottom: 10px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 6px; }
.disclose { font-size: 14px; color: #b7b19c; margin-top: 26px; max-width: 80ch; }

@media (max-width: 820px) {
  .site-head .wrap { flex-wrap: wrap; row-gap: 10px; }
  .site-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 2px; scrollbar-width: none; }
  .site-nav a { white-space: nowrap; }
  .hero { padding-top: 22px; }
  .picker { grid-template-columns: 1fr; }
  /* On phones the cloud is a white card with a puffy top instead of a stretched drawing */
  .hero-cloud { display: none; }
  .cloud-stage { background: var(--cloud); border-radius: 30px; padding: 30px 20px 26px; margin-top: 64px; box-shadow: 0 18px 30px rgba(63, 115, 100, 0.14); }
  .cloud-stage::before, .cloud-stage::after { content: ''; position: absolute; background: var(--cloud); border-radius: 50%; z-index: 0; }
  .cloud-stage::before { width: 52%; height: 96px; top: -46px; left: 10%; }
  .cloud-stage::after { width: 40%; height: 80px; top: -30px; right: 8%; }
  .product-hero .wrap { grid-template-columns: 1fr; }
  .product-hero .ico { display: none; }
  .pc { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr; grid-auto-flow: row; }
  .compare th[scope=row] { width: 130px; position: sticky; left: 0; z-index: 1; }
  .explorer .hide-sm { display: none; }
  .site-nav { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* header search */
.site-search { flex: 1; max-width: 320px; }
.site-search input { width: 100%; font: inherit; font-size: 15px; padding: 9px 14px 9px 36px; border: 2px solid transparent; border-radius: 999px; background: var(--cloud) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6f68' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px; color: var(--ink); }
.site-search input:focus { border-color: var(--rain); outline: none; }

/* browse layout: filters left, results right */
.browse { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 10px; }
.facets { background: var(--cloud); border-radius: 22px; padding: 6px 16px 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.facets > summary { list-style: none; font: 600 18px/1 var(--head); padding: 12px 0; cursor: default; pointer-events: none; }
.facets > summary::-webkit-details-marker { display: none; }
.fsearch input, .facets select { width: 100%; font: inherit; font-size: 15px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--mist); color: var(--ink); }
.fgroup { border-top: 1px solid var(--line); padding: 10px 0; }
.fgroup > summary { font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.fgroup > summary::after { content: '+'; color: var(--ink-soft); }
.fgroup[open] > summary::after { content: '–'; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fbody { padding-top: 8px; display: grid; gap: 6px; font-size: 15px; }
.fbody label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fbody input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--rain); flex: none; }
.fbody .count { margin-left: auto; font-size: 13px; }
.fbody .scroll { max-height: 220px; overflow: auto; display: grid; gap: 6px; padding-right: 4px; }
.range { display: grid !important; gap: 4px; }
.range span { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.range output { font-weight: 700; color: var(--ink); }
.range input { width: 100%; accent-color: var(--rain); }
.btn.small { padding: 10px 16px; font-size: 14px; margin-top: 12px; width: 100%; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.results-bar select { font: inherit; font-size: 15px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--cloud); color: var(--ink); margin-left: 6px; }
.explorer .nm a { display: flex; align-items: center; gap: 12px; }
.explorer .nm small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.thumb { width: 52px; height: 40px; flex: none; display: grid; place-items: center; background: var(--mist); border-radius: 12px; color: var(--rain); overflow: hidden; }
.thumb .ico { width: 36px; height: 28px; }
.thumb-img { width: 100%; height: 100%; object-fit: contain; background: var(--cloud); }
.explorer th.n, .explorer td.n { text-align: right; }
.score-pill { display: inline-block; min-width: 40px; text-align: center; padding: 3px 8px; border-radius: 999px; background: var(--sky); font-variant-numeric: tabular-nums; }
.empty { padding: 30px; text-align: center; color: var(--ink-soft); background: var(--cloud); border-radius: 22px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* product hero media + score */
.hero-media { position: relative; display: grid; place-items: center; }
.hero-media .photo { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; background: var(--cloud); border-radius: 30px; }
.hero-media .ico { width: 100%; max-width: 240px; height: auto; color: var(--rain); background: var(--cloud); border-radius: 50% 50% 46% 54% / 60% 58% 42% 40%; padding: 34px 26px; }
.score-badge { position: absolute; right: 0; bottom: -6px; width: 92px; height: 92px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-content: center; text-align: center; text-decoration: none; box-shadow: 0 8px 20px rgba(122, 86, 0, 0.18); }
.score-badge b { font: 600 32px/1 var(--head); }
.score-badge span { font-size: 12px; font-weight: 700; }
.score-num { font: 600 22px/1 var(--head); }
.bars { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; max-width: 640px; }
.bars li { display: grid; grid-template-columns: 180px 1fr 40px; gap: 12px; align-items: center; font-size: 15px; }
.bar { height: 12px; background: var(--cloud); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--rain); border-radius: 999px; }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); font: 400 16px/1 var(--body); margin-left: 8px; }

/* FAQ */
.faq details { background: var(--cloud); border-radius: 18px; padding: 4px 20px; margin-bottom: 10px; max-width: 820px; }
.faq summary { cursor: pointer; list-style: none; padding: 12px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { display: inline; font-size: 18px; }
.faq details p { margin: 0 0 14px; color: var(--ink-soft); }

@media (max-width: 820px) {
  .site-search { order: 3; max-width: none; width: 100%; flex-basis: 100%; }
  .browse { grid-template-columns: minmax(0, 1fr); }
  .facets { position: static; max-height: none; }
  .facets > summary { pointer-events: auto; cursor: pointer; }
  .facets > summary::after { content: ' (tap to open)'; font: 400 14px var(--body); color: var(--ink-soft); }
  .facets[open] > summary::after { content: ''; }
  .hero-media { display: none; }
  .bars li { grid-template-columns: 120px 1fr 34px; }
}

/* home hub */
.home-search { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.home-search label { display: block; font: 600 20px/1.2 var(--head); margin-bottom: 12px; text-align: center; }
.home-search div { display: flex; gap: 10px; }
.home-search input { flex: 1; font: inherit; font-size: 18px; padding: 15px 18px; border: 2px solid var(--line); border-radius: 999px; background: var(--mist); color: var(--ink); min-width: 0; }
.home-search input:focus { border-color: var(--rain); outline: none; background: var(--cloud); }
.types .soon { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; padding: 18px; border-radius: 22px; border: 2px dashed var(--line); color: var(--ink-soft); }
.types .soon .ico { grid-row: span 2; width: 56px; height: 42px; color: var(--ink-soft); opacity: .6; }
.types .soon b { font: 600 18px/1.2 var(--head); }
.types .soon span { font-size: 14px; }
.site-nav a[aria-current="page"] { color: var(--rain); text-decoration: underline; text-underline-offset: 6px; }
.search-out h2 { margin-top: 26px; }
@media (max-width: 820px) { .home-search div { flex-direction: column; } }

/* ---------- fun layer: dawn sky, drifting clouds, pastel cards ---------- */
:root {
  --butter: #fff1c2; --peach: #ffe0d2; --mint: #e4e9d6; --lilac: #e7e2f6; --skyblue: #dbeaf5; --sage: #e1ece3;
}
.hero.fun { background: linear-gradient(170deg, #e4e9d6 0%, #eef0e2 45%, #fbf1dc 100%); padding-bottom: 96px; }
.hero.fun .wrap { position: relative; z-index: 1; }
.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky .sun { position: absolute; top: 34px; right: 9%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #ffe08a 0 52%, rgba(255, 224, 138, .35) 53% 70%, transparent 71%); }
.drift { position: absolute; fill: var(--cloud); opacity: .9; filter: drop-shadow(0 6px 10px rgba(63, 115, 100, .10)); animation: drift linear infinite; }
.d1 { width: 150px; top: 30px; animation-duration: 70s; animation-delay: -10s; }
.d2 { width: 90px; top: 150px; animation-duration: 95s; animation-delay: -55s; opacity: .75; }
.d3 { width: 120px; top: 250px; animation-duration: 80s; animation-delay: -30s; }
.d4 { width: 70px; top: 90px; animation-duration: 110s; animation-delay: -80s; opacity: .6; }
@keyframes drift { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } }
.scallop { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 34px; fill: var(--mist); }
.hero.fun h1 { color: var(--ink); }

.btn { transition: transform .15s ease, background-color .15s ease; box-shadow: 0 4px 0 var(--rain-dark); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rain-dark); }
.btn.quiet { box-shadow: inset 0 0 0 2px var(--rain); }

.tint-0 { --tint: var(--butter); } .tint-1 { --tint: var(--peach); } .tint-2 { --tint: var(--mint); }
.tint-3 { --tint: var(--lilac); } .tint-4 { --tint: var(--skyblue); } .tint-5 { --tint: var(--sage); }
.cats li > a, .cats li > .soon { background: var(--tint, var(--cloud)); transition: transform .15s ease; }
.cats li > a:hover { transform: translateY(-3px) rotate(-.6deg); border-color: transparent; }
.cats .ico { background: var(--cloud); border-radius: 50% 50% 46% 54% / 62% 58% 42% 38%; padding: 8px 6px; width: 60px; height: 50px; }
.types .soon { border-color: rgba(47, 59, 44, .15); background: color-mix(in srgb, var(--tint) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .drift { animation: none; }
  .d1 { transform: translateX(8vw); } .d2 { transform: translateX(60vw); } .d3 { transform: translateX(30vw); } .d4 { transform: translateX(80vw); }
  .btn, .cats li > a { transition: none; }
}
@media (max-width: 820px) { .sky .sun { width: 80px; height: 80px; top: 16px; right: 4%; } .d3, .d4 { display: none; } }

/* add to registry */
.plus { width: 16px; height: 16px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }
.reg-add { gap: 6px; }
.reg-mini { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--butter); color: var(--ink); }
.reg-mini:hover { background: var(--sun); }
.nav-reg { background: var(--butter); padding: 4px 12px; border-radius: 999px; }

/* where to buy */
.stores { list-style: none; padding: 0; margin: 14px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.stores a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: var(--cloud); border-radius: 16px; text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.stores a:hover { border-color: var(--sky-deep); }
.stores span { font-size: 13px; color: var(--rain); font-weight: 600; white-space: nowrap; }
.small { font-size: 14px; }

/* registry app */
.share { display: flex; gap: 10px; margin-top: 18px; max-width: 640px; }
.share input { flex: 1; font: inherit; font-size: 15px; padding: 11px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--cloud); color: var(--ink); min-width: 0; }
.reg-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.reg-card { background: var(--cloud); border-radius: 22px; padding: 20px; margin-top: 16px; }
.reg-card h3 { margin-bottom: 6px; }
.reg-card label { display: block; font-weight: 600; font-size: 14px; margin-top: 12px; }
.reg-card input:not([type=checkbox]), .reg-card textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--mist); color: var(--ink); }
.reg-card .btn { margin-top: 14px; }
.reg-card label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.reg-card label.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--rain); flex: none; }
.reg-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--cloud); border-radius: 18px; padding: 14px 18px; margin-bottom: 10px; flex-wrap: wrap; }
.reg-item small { display: block; color: var(--ink-soft); }
.reg-item a { text-decoration: none; }
.reg-actions { display: flex; gap: 10px; align-items: center; }
.reg-actions input { width: 64px; font: inherit; padding: 6px 8px; border: 2px solid var(--line); border-radius: 10px; margin-left: 6px; }
.claim summary { list-style: none; }
.claim summary::-webkit-details-marker { display: none; }
.claim[open] { flex-basis: 100%; }
.claims { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.claims small { display: block; color: var(--ink-soft); }
.notice.ok { background: var(--mint); color: var(--ink); }
.addr { display: inline-block; margin: 8px 0; font-weight: 600; color: var(--ink); }
.danger form { display: inline; }
.steps { padding-left: 22px; max-width: 70ch; }
.steps li { margin-bottom: 10px; }
#reg-toast { left: 50%; }
@media (max-width: 820px) { .reg-grid { grid-template-columns: 1fr; } .share { flex-direction: column; } }
.store-logo { height: 24px; width: auto; max-width: 120px; object-fit: contain; }

/* ---------- shop by budget + registry quiz ---------- */
.hero.slim { padding: 28px 0 40px; }
.budget-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.budget-tabs a { padding: 9px 16px; border-radius: 999px; background: var(--cloud); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; border: 2px solid var(--line); }
.budget-tabs a[aria-current] { background: var(--ink); color: var(--cloud); border-color: var(--ink); }
.bundle { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.bundle li { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 4px 16px; align-items: center; background: var(--cloud); border-radius: 18px; padding: 14px 18px; }
.bundle .b-type { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-soft); font-size: 14px; }
.bundle .b-type .ico { width: 34px; height: 26px; }
.bundle .b-name { font-weight: 600; color: var(--ink); }
.bundle .b-why { grid-column: 2; color: var(--ink-soft); font-size: 14px; }
.bundle .b-price { grid-row: 1 / span 2; grid-column: 3; font-size: 18px; }
.bundle .b-acts { grid-row: 1 / span 2; grid-column: 4; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bundle-total { font-size: 18px; margin: 16px 0 6px; }
.bundle-total span { color: var(--ink-soft); }
@media (max-width: 640px) {
  .bundle li { grid-template-columns: 1fr auto; }
  .bundle .b-type, .bundle .b-name, .bundle .b-why { grid-column: 1; }
  .bundle .b-price { grid-column: 2; grid-row: 1; }
  .bundle .b-acts { grid-column: 2; grid-row: 2 / span 2; }
}
.quiz { display: grid; gap: 14px; max-width: 720px; }
.quiz .q { border: 0; margin: 0; padding: 18px 20px; background: var(--cloud); border-radius: 20px; }
.quiz legend { font: 600 19px/1.3 var(--head); display: flex; gap: 10px; align-items: center; padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.quiz .q-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); display: grid; place-items: center; font-size: 15px; }
.quiz label { clear: left; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.quiz label:hover { background: var(--mist); }
.quiz input { width: 18px; height: 18px; accent-color: var(--ink); }
.quiz .btn { justify-self: start; }
#quiz-out { max-width: 720px; }
.quiz-group { background: var(--cloud); border-radius: 20px; padding: 16px 20px; margin: 12px 0; }
.quiz-group h3 { margin: 0; }
.quiz-group p { color: var(--ink-soft); margin: 4px 0 10px; font-size: 15px; }
.quiz-picks { list-style: none; padding: 0; margin: 0; }
.quiz-picks li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.quiz-picks li:first-child { border-top: 0; }
/* Product lists use the full page width */
.wrap.wide { max-width: none; padding: 0 32px; }
@media (max-width: 640px) { .wrap.wide { padding: 0 16px; } }
.bundle-total + .actions { margin-bottom: 18px; }

/* ---------- budget planner ---------- */
.plan-opts { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; background: var(--cloud); border-radius: 20px; padding: 16px 20px; margin-bottom: 16px; }
.plan-opts fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-opts legend { font-weight: 700; font-size: 14px; color: var(--ink-soft); padding: 0; margin-bottom: 6px; width: 100%; }
.chip-r input { position: absolute; opacity: 0; pointer-events: none; }
.chip-r span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); font-weight: 600; font-size: 14px; cursor: pointer; background: var(--mist); }
.chip-r input:checked + span { background: var(--ink); color: var(--cloud); border-color: var(--ink); }
.chip-r input:focus-visible + span { outline: 3px solid var(--sun); }
.plan-amt { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.plan-amt span { display: flex; align-items: center; gap: 4px; background: var(--mist); border: 2px solid var(--line); border-radius: 14px; padding: 4px 12px; }
.plan-amt b { font: 600 26px var(--head); color: var(--ink); }
.plan-amt input { border: 0; background: none; font: 600 28px var(--head); width: 7ch; color: var(--ink); }
.plan-amt input:focus { outline: none; }
table.plan { width: 100%; border-collapse: collapse; background: var(--cloud); border-radius: 20px; overflow: hidden; }
table.plan th, table.plan td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
table.plan thead th { border-top: 0; font-size: 14px; color: var(--ink-soft); }
table.plan tbody th { font-weight: 600; }
table.plan small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
table.plan .n { text-align: right; white-space: nowrap; }
table.plan .have { width: 56px; text-align: center; }
table.plan .have input { width: 20px; height: 20px; accent-color: var(--ink); }
table.plan .est { color: var(--ink-soft); font-style: italic; }
table.plan .qty { color: var(--ink-soft); }
table.plan tfoot th, table.plan tfoot td { font-size: 17px; }
.have-list { margin-top: 10px; }
.chip { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 999px; background: var(--sky); font-size: 14px; text-transform: capitalize; }
.warn { background: #fff3cf; border-radius: 14px; padding: 12px 16px; }

/* ---------- registry builder (start flow) ---------- */
.start-wrap { padding: 28px 0 60px; background: linear-gradient(var(--sky), var(--mist) 420px); min-height: 80vh; }
.start { max-width: 760px; margin: 0 auto; outline: none; }
.start h1 { font-size: clamp(28px, 5vw, 42px); text-align: center; margin: 8px 0 6px; }
.start .sub { text-align: center; color: var(--ink-soft); margin: 0 0 18px; }
.start .step { animation: slide .35s ease both; }
@keyframes slide { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 40px)); } to { opacity: 1; transform: none; } }
.clouds { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.clouds span { width: 26px; height: 14px; border-radius: 10px; background: var(--cloud); border: 2px solid var(--line); transition: background .3s; }
.clouds span.done { background: var(--sun); border-color: var(--sun); }
.clouds span.now { background: var(--sky-deep); }
.hello { text-align: center; padding: 30px 0; }
.hello p { font-size: 19px; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 20px; }
.hello .actions { justify-content: center; }
.btn.big { font-size: 18px; padding: 14px 28px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.tiles { display: grid; gap: 12px; margin: 18px 0; }
.tiles.t2 { grid-template-columns: repeat(2, 1fr); }
.tiles.t3 { grid-template-columns: repeat(3, 1fr); }
.tiles.t4 { grid-template-columns: repeat(4, 1fr); }
.tiles.t5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) { .tiles.t3, .tiles.t4, .tiles.t5 { grid-template-columns: repeat(2, 1fr); } }
.tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 8px; padding: 20px 12px; border-radius: 22px; background: var(--cloud); border: 3px solid transparent; text-align: center; transition: transform .15s, border-color .15s, background .15s; }
.tile svg { width: 64px; height: 48px; color: var(--ink); }
.tile b { font-size: 16px; }
.tile:hover { transform: translateY(-3px); }
.tile:focus-visible { outline: 3px solid var(--sun); }
.tile.on { border-color: var(--ink); background: #fffbe8; transform: scale(1.03); }
.tile .tick { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: transparent; display: grid; place-items: center; }
.tile .tick svg { width: 16px; height: 16px; color: inherit; }
.tile.on .tick { background: var(--ink); color: var(--cloud); }
.have-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.have-grid .tile { padding: 16px 12px; min-height: 76px; align-content: center; }
.have-grid .tile.on b { text-decoration: line-through; color: var(--ink-soft); }
.due { display: grid; justify-items: center; gap: 16px; margin: 24px 0; }
.due input { font: 600 24px var(--head); padding: 12px 18px; border-radius: 16px; border: 3px solid var(--line); background: var(--cloud); color: var(--ink); }
.chip-toggle { all: unset; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--cloud); border: 3px solid var(--line); font-weight: 700; }
.chip-toggle svg { width: 18px; height: 18px; opacity: .25; }
.chip-toggle.on { border-color: var(--ink); background: #fffbe8; }
.chip-toggle.on svg { opacity: 1; }
.space { display: grid; justify-items: center; gap: 14px; margin: 24px 0; }
.space .room { width: 160px; height: 120px; display: grid; place-items: center; }
.space .room svg { width: 120px; transform: scale(var(--s, 1)); transition: transform .3s; }
.space input, .budget-dial input { width: min(100%, 520px); accent-color: var(--ink); height: 28px; }
.space output { font: 600 22px var(--head); }
.budget-dial { display: grid; justify-items: center; gap: 8px; margin: 20px 0; }
.budget-dial output { font: 600 clamp(44px, 9vw, 72px) var(--head); color: var(--ink); }
.b-scale { width: min(100%, 520px); display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 14px; }
.b-live { width: min(100%, 520px); background: var(--cloud); border-radius: 18px; padding: 12px 18px; min-height: 90px; }
.b-live p { margin: 0 0 6px; }
.b-live ul { list-style: none; padding: 0; margin: 0; }
.b-live li { display: flex; gap: 6px; padding: 3px 0; }
.b-live li span { margin-left: auto; color: var(--ink-soft); }
.start .nav { display: flex; justify-content: space-between; margin-top: 18px; }
.r-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.r-list li { display: grid; grid-template-columns: 1.1fr 1.6fr auto 36px; gap: 12px; align-items: center; background: var(--cloud); border-radius: 16px; padding: 12px 16px; animation: pop .4s ease both; animation-delay: calc(var(--i) * 70ms); transition: opacity .2s; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.r-list li.gone { opacity: .4; }
.r-list li.gone .r-what, .r-list li.gone b { text-decoration: line-through; }
.r-what { font-weight: 700; }
.r-pick small { display: block; color: var(--ink-soft); font-size: 13px; }
.r-x { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); font-size: 20px; }
.r-x:hover { background: var(--sky); }
.r-total { text-align: center; font-size: 19px; }
#reveal .actions { justify-content: center; }
@media (max-width: 640px) { .r-list li { grid-template-columns: 1fr auto 32px; } .r-pick { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .start .step, .r-list li { animation: none; } }
/* Rows that can't be compared with what's ticked */
tr.no-cmp .cmp input { opacity: .25; cursor: not-allowed; }
tr.no-cmp .nm { opacity: .55; }
/* Header: with many sections, the menu gets its own row under the logo and search */
.site-head .wrap { flex-wrap: wrap; row-gap: 10px; }
.site-search { flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.site-nav { flex-basis: 100%; gap: 6px 22px; padding-top: 2px; }
@media (max-width: 820px) { .site-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; } }

/* "Looking for X?" callout on a hub page */
.callout { display: flex; align-items: center; gap: 16px; background: #fff7d6; border: 2px solid var(--sun); border-radius: 20px; padding: 14px 20px; color: var(--ink); text-decoration: none; }
.callout .ico { width: 54px; height: 40px; flex: none; }
.callout b { font: 600 18px var(--head); margin-right: 4px; }
.callout-go { margin-left: auto; font-weight: 700; color: var(--rain); white-space: nowrap; }
.callout:hover .callout-go { text-decoration: underline; }
@media (max-width: 640px) { .callout { flex-wrap: wrap; } .callout-go { margin-left: 0; } }
/* Home: plan by budget */
.home-budget .hb-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.hb-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--cloud); border-radius: 20px; padding: 12px 14px; }
.hb-form label { font-weight: 700; font-size: 14px; color: var(--ink-soft); width: 100%; }
.hb-form span { display: flex; align-items: center; gap: 4px; background: var(--mist); border: 2px solid var(--line); border-radius: 14px; padding: 4px 12px; }
.hb-form span b { font: 600 22px var(--head); }
.hb-form input { border: 0; background: none; font: 600 22px var(--head); width: 7ch; color: var(--ink); }
.hb-form input:focus { outline: none; }
.hb-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.hb-cards a { display: grid; gap: 4px; padding: 18px; border-radius: 22px; text-decoration: none; color: var(--ink); border: 2px solid transparent; height: 100%; box-sizing: border-box; }
.hb-cards a:hover { border-color: var(--ink); }
.hb-amt { font: 600 30px var(--head); }
.hb-cards span { font-weight: 600; }
.hb-cards small { color: var(--ink-soft); }
.hb-cards a { background: var(--tint, var(--cloud)); }
.hb-cards .hb-left { color: var(--ink); font-weight: 600; }
/* Footer: brand + department columns */
.site-foot { padding: 48px 0 40px; }
.site-foot a { color: var(--cloud); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-top { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 32px 48px; }
.foot-brand .logo { color: var(--cloud); }
.foot-brand .logo-cloud .cloud-shape { fill: var(--cloud); stroke: none; }
.foot-brand .logo-bee * { stroke: var(--ink); }
.foot-brand p { margin-top: 12px; max-width: 28ch; line-height: 1.5; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 32px; }
.site-foot h3 { font: 600 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #b7b19c; margin: 0 0 12px; }
.site-foot li { margin-bottom: 9px; line-height: 1.35; }
.site-foot .disclose { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; margin-top: 36px; font-size: 13px; }
.site-foot .disclose + .disclose { border: 0; padding-top: 0; margin-top: 10px; }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; } }
.site-foot .disclose { max-width: none; } .site-foot .disclose { max-width: none; }

/* ---------- registry: profile header + product cards ---------- */
.reg-profile { background: linear-gradient(var(--sky), var(--mist)); padding: 36px 0 28px; }
.reg-profile .wrap { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.rp-photo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--cloud); border: 5px solid var(--cloud); box-shadow: 0 10px 30px rgba(47, 59, 44, .15); display: grid; place-items: center; }
.rp-photo img { width: 100%; height: 100%; object-fit: cover; }
.rp-cloud svg { width: 80px; fill: var(--sky-deep); }
.rp-text h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 8px; }
.rp-bio { font-size: 18px; color: var(--ink); max-width: 60ch; margin: 0 0 12px; line-height: 1.55; }
.rp-bio.muted { color: var(--ink-soft); font-style: italic; }
.rp-owner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--cloud); font-weight: 600; font-size: 14px; }
.reg-profile .share { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-profile .share input { flex: 1 1 260px; }
@media (max-width: 640px) { .reg-profile .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; } .rp-photo { width: 120px; height: 120px; } .rp-owner, .reg-profile .share { justify-content: center; } }
.reg-main { padding-top: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; border-bottom: 2px solid var(--line); }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--ink-soft); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a[aria-current] { color: var(--ink); border-color: var(--ink); }
.tabs a.tab-sell { margin-left: auto; color: var(--rain); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #d9534f; color: var(--cloud); font-size: 12px; }
.reg-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 14px; }
.reg-bar h2 { margin: 0; }
.reg-bar-acts { margin-left: auto; display: flex; gap: 8px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pcard { background: var(--cloud); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 0 rgba(47, 59, 44, .04); }
.pcard.done { opacity: .75; }
.pc-vis { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--tint, var(--sky)); color: var(--ink); }
.pc-vis .ico { width: 46%; height: auto; }
.pc-done { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--cloud); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pc-brand { font-size: 13px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pc-name { font: 600 18px/1.25 var(--head); color: var(--ink); text-decoration: none; }
a.pc-name:hover { text-decoration: underline; }
.pc-meta { font-size: 14px; color: var(--ink-soft); }
.pc-prog { height: 6px; border-radius: 6px; background: var(--line); margin-top: 8px; overflow: hidden; }
.pc-prog span { display: block; height: 100%; background: var(--rain); border-radius: 6px; }
.pc-count { color: var(--ink-soft); }
.pc-acts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: auto; padding-top: 10px; font-size: 14px; }
.pc-link { all: unset; cursor: pointer; color: var(--rain); font-weight: 600; font-size: 14px; }
.pc-link:hover { text-decoration: underline; }
.pc-link.danger { color: #a3423b; }
.pc-qty { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pc-qty input { width: 52px; padding: 4px 6px; border: 2px solid var(--line); border-radius: 10px; font: inherit; }
.pcard .claim { margin-top: 10px; }
.pcard .claim summary { list-style: none; width: 100%; text-align: center; }
.pcard .claim summary::-webkit-details-marker { display: none; }
.claim-form { display: grid; gap: 8px; margin-top: 10px; }
.claim-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.claim-form input { padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; font: inherit; }
.reg-how { font-size: 17px; margin: 0 0 18px; }
.reg-sub { margin-top: 36px; }
.reg-lower { margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.empty-state { text-align: center; background: var(--cloud); border-radius: 22px; padding: 36px 20px; }
.empty-state p { font-size: 18px; margin: 0 0 14px; }
.reg-dialog { border: 0; border-radius: 24px; padding: 0; width: min(520px, 94vw); box-shadow: 0 30px 60px rgba(47, 59, 44, .25); }
.reg-dialog::backdrop { background: rgba(47, 59, 44, .35); }
.reg-dialog form { padding: 24px; display: grid; gap: 12px; }
.reg-dialog label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.reg-dialog input, .reg-dialog textarea { padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; font: inherit; }
.pd-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-photo #pd-preview { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--sky); flex: none; }
.pd-photo img { width: 100%; height: 100%; object-fit: cover; }
.pd-link { display: flex; align-items: stretch; border: 1px solid var(--line, #d9dee5); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.pd-link > span { padding: 10px 8px 10px 12px; background: var(--sky, #f1ede2); color: var(--muted, #5b6672); font-size: .9em; white-space: nowrap; max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
.pd-link input { border: 0 !important; margin: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.pd-hint { margin-top: -4px; }
.pd-photo label.btn { display: inline-flex; }
.pd-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- marketplace ---------- */
.slim-hero { padding: 26px 0 22px; }
.mfilter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--cloud); border-radius: 20px; padding: 14px 16px; margin-bottom: 10px; }
.mfilter label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.mfilter input, .mfilter select { padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; background: var(--mist); color: var(--ink); min-width: 120px; }
.mgrid { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mcard a { display: grid; gap: 3px; text-decoration: none; color: var(--ink); }
.mc-img { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--sky); display: grid; place-items: center; }
.mc-img img { width: 100%; height: 100%; object-fit: cover; }
.mc-ico .ico { width: 70px; height: auto; }
.mc-status { position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--cloud); font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.mc-price { font: 600 20px var(--head); margin-top: 6px; }
.mc-name { font-weight: 600; line-height: 1.3; }
.mcard small { color: var(--ink-soft); }
.mcard a:hover .mc-name { text-decoration: underline; }
.msafety { background: #fff7d6; border-radius: 16px; padding: 12px 16px; margin-top: 22px; font-size: 15px; }
.mlisting { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 820px) { .mlisting { grid-template-columns: 1fr; } }
.mg-main { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; background: var(--sky); }
.mg-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.mg-thumbs button { all: unset; cursor: pointer; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
.mg-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mg-empty { aspect-ratio: 1; border-radius: 22px; background: var(--sky); display: grid; place-items: center; align-content: center; gap: 8px; color: var(--ink-soft); }
.mg-empty .ico { width: 120px; }
.minfo h1 { font-size: clamp(26px, 4vw, 36px); margin: 0; }
.m-price { font: 600 30px var(--head); margin: 6px 0 14px; }
.mc-flag { display: inline-block; background: var(--ink); color: var(--cloud); padding: 3px 12px; border-radius: 999px; font-weight: 700; margin: 0 0 8px; }
.m-facts { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.m-facts li { display: flex; gap: 12px; }
.m-facts span { width: 90px; color: var(--ink-soft); flex: none; }
.m-desc { background: var(--cloud); border-radius: 16px; padding: 14px 16px; margin: 12px 0; line-height: 1.55; }
.m-checks { font-size: 15px; margin: 12px 0; }
.m-checks ul { margin: 6px 0 0; padding-left: 20px; }
.m-msg { display: grid; gap: 8px; margin-top: 12px; }
.m-msg textarea { padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; font: inherit; }
.m-report { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.m-report form { display: flex; gap: 8px; margin-top: 8px; }
.sell-form { display: grid; gap: 12px; max-width: 720px; }
.sell-form > label, .sell-row label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.sell-form input, .sell-form select, .sell-form textarea { padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; font: inherit; background: var(--mist); color: var(--ink); }
.sell-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .sell-row { grid-template-columns: 1fr; } }
.sell-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.sell-previews span { position: relative; width: 90px; height: 90px; border-radius: 12px; overflow: hidden; }
.sell-previews img { width: 100%; height: 100%; object-fit: cover; }
.sell-previews button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: var(--cloud); cursor: pointer; }
.sell-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sell-checks legend { font-weight: 700; margin-bottom: 6px; }
.mine, .inbox { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mine li, .inbox a { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; background: var(--cloud); border-radius: 18px; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.mine small, .inbox small { display: block; color: var(--ink-soft); }
.mine-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--sky); display: grid; place-items: center; }
.mine-img img { width: 100%; height: 100%; object-fit: cover; }
.mine-img .ico { width: 44px; }
.mine-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inbox .unread a, .inbox li.unread a { border-left: 4px solid var(--rain); }
.inbox-last { display: block; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
.chat { display: grid; gap: 10px; margin: 18px 0; }
.bubble { max-width: min(560px, 85%); background: var(--cloud); border-radius: 18px 18px 18px 4px; padding: 10px 14px; }
.bubble.me { justify-self: end; background: #dcefe4; border-radius: 18px 18px 4px 18px; }
.bubble p { margin: 0 0 4px; }
.bubble small { color: var(--ink-soft); }
.reg-profile .btn, .reg-bar .btn, .reg-card .btn, .pd-acts .btn { width: auto; white-space: nowrap; }
.rp-owner { justify-content: flex-start; }
.reg-profile .btn, .reg-card .btn { justify-self: start; align-self: start; flex: 0 0 auto; }
.tag-recur { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fff3cf; color: var(--sun-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
table.plan .pri { display: block; margin-top: 6px; }
table.plan .pri select { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 8px; border: 2px solid var(--line); border-radius: 999px; background: var(--mist); color: var(--ink); }

/* Marketplace ratings, member pages, reviews */
.stars { color: #cfc7b3; letter-spacing: 1px; }
.stars i { font-style: normal; }
.stars i.on { color: #f2a93b; }
.stars i.half { background: linear-gradient(90deg, #f2a93b 50%, #cfc7b3 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rating { white-space: nowrap; font-size: 14px; }
.rating.none { color: var(--ink-soft); }
a.person { font-weight: 700; }
.member-head { display: flex; gap: 16px; align-items: center; margin: 12px 0 8px; }
.member-head h1 { margin: 0; }
.member-head p { margin: 4px 0; }
.member-ava { width: 64px; height: 64px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; font-size: 28px; font-weight: 700; flex: none; }
.reviews { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.reviews li { background: var(--cloud); border-radius: 14px; padding: 12px 16px; position: relative; }
.reviews p { margin: 6px 0 0; }
.rv-report { position: absolute; top: 10px; right: 12px; }
.linkish { background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.review-form h3 { margin-top: 0; }
.star-pick { border: 0; padding: 0; margin: 4px 0 8px; display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label { font-size: 30px; color: #cfc7b3; cursor: pointer; line-height: 1; }
.star-pick input:checked ~ label, .star-pick label:hover, .star-pick label:hover ~ label { color: #f2a93b; }
.star-pick input:focus-visible + label { outline: 2px solid var(--rain); border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sold-pick { position: relative; }
.sold-pick > div { display: grid; gap: 6px; margin-top: 6px; padding: 10px; background: var(--cloud); border-radius: 12px; min-width: 220px; }
.sold-pick summary { list-style: none; }
.sold-pick summary::-webkit-details-marker { display: none; }

/* ---------- department colors ----------
   Each department (primary) has one pastel. Its product types (secondary) use a lighter version of it. */
.d-go { --dept: #bfd3d6; --dept-l: #e6efef; }
.d-sleep { --dept: #cec6db; --dept-l: #eeeaf2; }
.d-feeding { --dept: #f2c2a0; --dept-l: #fae6d7; }
.d-play { --dept: #eed38c; --dept-l: #f8edcb; }
.d-nursery { --dept: #c3d3b0; --dept-l: #e8efdd; }
.d-care { --dept: #b9d4d0; --dept-l: #e3efed; }
.d-toddler { --dept: #e3b9a3; --dept-l: #f5e4da; }
.d-clothes { --dept: #b8cfe0; --dept-l: #e6eff6; }
.d-mom { --dept: #e1c0c8; --dept-l: #f4e6e9; }
.d-other { --dept: #ddd6c4; --dept-l: #f0ece1; }
/* Icons: ink outline, closed shapes tinted with the department color (honey by default). */
:root { --ico-ink: #3d3a33; --ico-fill: #f3dfa6; }
:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) { --ico-fill: var(--dept); }
:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) { --tint: var(--dept-l); }

/* Home: product types grouped by department */
.dept-group { margin-top: 22px; }
.dept-label { display: inline-block; background: var(--dept); padding: 6px 16px; border-radius: 999px; font: 600 16px var(--head); }
.dept-group .cats { margin-top: 12px; }
.cats:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) a, .dept-group .cats a { background: var(--dept-l); }
.cats:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) a:hover, .dept-group .cats a:hover { border-color: var(--dept); }
.dept-group .types .soon { background: color-mix(in srgb, var(--dept-l) 55%, transparent); border-color: var(--dept); }

/* Type pages: hero in the department's light shade */
body:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) .product-hero { background: var(--dept-l); }
body:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) .product-hero .ico { background: var(--cloud); box-shadow: 0 0 0 10px var(--dept); }
.mc-img:is(.d-go, .d-sleep, .d-feeding, .d-play, .d-nursery, .d-care, .d-toddler, .d-mom, .d-clothes, .d-other) { background: var(--dept-l); }

/* Footer: a dot in each department's color */
.dept-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dept); margin-right: 8px; vertical-align: 1px; }
/* Accessories that fit a stroller */
.acc-fit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.acc-fit > div { background: var(--dept-l, var(--cloud)); border-radius: 18px; padding: 14px 16px; }
.acc-fit h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 6px; }
.acc-fit h3 .ico { width: 32px; height: 24px; color: var(--rain); }
.acc-fit ul { list-style: none; padding: 0; margin: 0; }
.acc-fit li { padding: 3px 0; }
.acc-fit small { color: var(--ink-soft); }

/* ---------- top menu ----------
   Desktop: one row of departments; each opens a single panel with the department color as a top band.
   Phone: a Menu button opens a sheet; departments expand as accordions listing their product types. */
.site-head { position: relative; z-index: 60; }
.site-head .wrap { position: relative; flex-wrap: nowrap; }
.site-search { flex: 1 1 200px; min-width: 160px; max-width: 360px; }
.site-nav { flex-basis: auto; padding: 0; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.nav-toggle { display: none; }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.dept-btn, .nav-link { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; transition: background .12s; }
.dept-btn:hover, .nav-link:hover { background: rgba(255, 255, 255, .7); }
.dept.open .dept-btn { background: var(--dept); }
.dept-btn:focus-visible, .nav-link:focus-visible { outline: 3px solid var(--rain); }
.dept-btn .dept-dot { margin: 0; width: 9px; height: 9px; }
.dept.current .dept-btn, .nav-link[aria-current] { box-shadow: inset 0 -3px 0 var(--dept, var(--rain)); border-radius: 12px 12px 4px 4px; }
.chev { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .18s; }
.dept.open .chev { transform: rotate(180deg); }
.nav-menu .nav-reg { margin-left: 6px; }
.drop { display: none; position: absolute; left: 16px; right: 16px; top: 100%; padding-top: 8px; }
.drop-panel { background: var(--cloud); border-radius: 18px; box-shadow: 0 16px 36px rgba(47, 59, 44, .14); border-top: 5px solid var(--dept); padding: 18px 22px 20px; }
.dept.open .drop { display: block; }
.drop-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 24px; }
.drop-col { min-width: 0; }
.drop-head { display: flex; align-items: center; gap: 8px; font: 600 16px var(--head); color: var(--ink); text-decoration: none; padding: 6px 8px; margin: 0 -8px 2px; border-radius: 10px; }
.drop-head:hover, .drop-head[aria-current] { background: var(--dept-l); }
.drop-head .ico { width: 28px; height: 22px; flex: none; color: var(--rain); }
.drop-col ul { list-style: none; padding: 0; margin: 0; }
.drop-col li a { display: block; padding: 3px 0; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.drop-col li a:hover { color: var(--ink); text-decoration: underline; }
.drop-col .drop-more { color: var(--rain); font-weight: 600; }
@media (max-width: 1400px) and (min-width: 1181px) {
  .dept-btn, .nav-link { padding: 8px 8px; font-size: 14px; gap: 5px; }
  .site-search { min-width: 120px; }
}
@media (max-width: 1180px) {
  .site-head .wrap { flex-wrap: wrap; }
  .nav-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--cloud); font-weight: 700; }
  .nav-toggle:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; } /* A-01 */
  .burger, .burger::before, .burger::after { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
  .burger::before, .burger::after { content: ''; position: absolute; left: 0; }
  .burger::before { top: -5px; } .burger::after { top: 5px; }
  .site-nav { order: 2; margin-left: auto; width: auto; flex: 0 0 auto; }
  .site-search { order: 3; flex-basis: 100%; max-width: none; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--cloud); padding: 6px 16px 18px; box-shadow: 0 18px 40px rgba(47, 59, 44, .18); max-height: calc(100vh - 120px); overflow: auto; border-radius: 0 0 20px 20px; }
  .site-nav.open .nav-menu { display: flex; }
  .nav-menu > li { border-bottom: 1px solid var(--line); }
  .nav-menu > li:last-child { border-bottom: 0; }
  .dept-btn, .nav-link { display: flex; width: 100%; padding: 14px 6px; border-radius: 10px; font-size: 16px; }
  .dept-btn .chev { margin-left: auto; }
  .dept.current .dept-btn, .nav-link[aria-current] { box-shadow: none; }
  .dept.open .dept-btn { background: var(--dept-l); }
  .drop { position: static; padding: 0 0 10px; }
  .drop-panel { box-shadow: none; border: 0; padding: 4px 0 0 22px; border-radius: 0; }
  .drop-cols { grid-template-columns: 1fr; gap: 0; }
  .drop-col ul { display: none; }
  .drop-head { font: 600 15.5px var(--body); padding: 10px 8px; margin: 0; }
  .nav-menu .nav-reg { display: block; margin: 14px 0 2px; text-align: center; padding: 10px; }
}
/* Sortable table headers */
.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; border-radius: 6px; }
.th-sort:hover { color: var(--rain); }
.th-sort:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; }
th[aria-sort="descending"] th[aria-sort="ascending"] th.n .th-sort { justify-content: flex-end; }
/* Marketplace has its own bar, separate from the registry */
.market-bar { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; border-bottom: 2px solid var(--line); }
.market-bar .tabs { margin: 0; border: 0; flex: 1; }
.market-brand { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 8px; border-radius: 999px; background: #ffe0d2; color: var(--ink); text-decoration: none; font: 600 16px var(--head); }
.market-brand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.reg-market .btn { margin-top: 8px; }
/* Product reviews */
.rv-top { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: start; margin: 12px 0 18px; }
.rv-sum { background: var(--cloud); border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; }
.rv-avg { font: 600 40px/1 var(--head); }
.rv-sum .stars { font-size: 20px; }
.rv-dist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.rv-dist li { display: grid; grid-template-columns: 28px 1fr 26px; gap: 8px; align-items: center; }
.rv-dist i { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rv-dist b { display: block; height: 100%; background: #f2a93b; }
.rv-form label { display: block; margin-bottom: 10px; }
.rv-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rv-sort { display: block; text-align: right; margin-bottom: 8px; }
.rv-list li > p { margin: 4px 0; }
.rv-report { margin-top: 6px; font-size: 13px; }
.rv-report summary { cursor: pointer; color: var(--ink-soft); text-decoration: underline; list-style: none; }
@media (max-width: 720px) { .rv-top { grid-template-columns: 1fr; } }
/* Team tools */
.adm-card { display: grid; grid-template-columns: 220px 1fr; gap: 18px; background: var(--cloud); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.adm-card h3 { margin: 0 0 4px; }
.adm-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.adm-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.adm-desc { background: var(--mist); border-radius: 10px; padding: 8px 10px; }
.adm-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.adm-acts input[data-note] { flex: 1; min-width: 180px; }
.adm-list li { margin-bottom: 8px; }
.pill-wait { background: #fff1c2; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.pill-no { background: #ffe0d2; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.warn-notice { background: #ffe0d2; }
@media (max-width: 720px) { .adm-card { grid-template-columns: 1fr; } }
.adm-acts .btn, .adm-acts select, .adm-acts input { width: auto; margin: 0; }
.adm-acts .check { flex-basis: 100%; }
/* Hub type cards, top picks, category shortlist, what to look for */
.type-cards a, .type-cards .soon { grid-template-columns: 56px 1fr; align-items: start; }
.type-cards a span, .type-cards .soon span { grid-column: 2; }
.type-cards small { grid-column: 2; color: var(--ink-soft); font-size: 13px; }
.picks { list-style: none; padding: 0; margin: 14px 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.picks li { background: var(--cloud); border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.pick-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rain); }
.pick-name { font: 600 17px/1.25 var(--head); color: var(--ink); text-decoration: none; }
.pick-name:hover { text-decoration: underline; }
.pick-val { font: 600 22px var(--head); }
.pick-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pick-acts .btn { width: auto; }
.pick-lines { margin: 4px 0 0; padding-left: 18px; color: var(--ink-soft); }
.look { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.look > div { background: var(--cloud); border-radius: 16px; padding: 12px 16px; }
.look h3 { font-size: 17px; margin-bottom: 4px; }
.look p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.lead-answer { color: var(--ink); }
.recall-notice { background: #ffe0d2; border: 2px solid #f0a58a; }
.cmp-two { margin: 12px 0 0; font-weight: 600; }
.reg-count { margin: 8px 0 0; color: var(--ink-soft); }
.used-near { margin-top: 8px; }
/* Sticky product actions on phones */
.sticky-act { display: none; }
@media (max-width: 720px) {
  .sticky-act:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--cloud); box-shadow: 0 -8px 24px rgba(47, 59, 44, .14); }
  .sticky-act > span { display: none; }
  .sticky-act .btn { flex: 1; width: auto; padding: 10px 8px; font-size: 14px; text-align: center; justify-content: center; }
}
.pick-acts .btn { display: inline-flex; padding: 6px 12px; font-size: 13px; }
/* ---------- hub redesign: tool in the hero, carousels ---------- */
.hub-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; }
.need-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.need-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--cloud); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--dept, var(--line)); }
.need-chips .chip:hover { background: var(--dept-l); }
.need-chips .chip .ico, .product-hero .need-chips .ico { width: 26px; height: 20px; max-width: none; padding: 0; background: none; border-radius: 0; color: var(--rain); flex: none; }
.tool { background: var(--cloud); border-radius: 24px; padding: 20px 22px; box-shadow: 0 14px 34px rgba(47, 59, 44, .12); border-top: 6px solid var(--dept, var(--sun)); }
.tool-title { font-size: 22px; margin-bottom: 4px; }
.tool-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tool-row label { font-size: 13px; font-weight: 600; display: grid; gap: 4px; }
.tool-row input { width: 100%; font-size: 18px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tool .check { margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.tool-out { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; min-height: 40px; }
.tool-big { margin: 0 0 6px; font: 600 18px var(--head); }
.tool-big b { font-size: 34px; color: var(--rain); margin-right: 4px; }
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tool-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.tool-list span { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tool-foot { margin: 10px 0 0; }
.rail-sec { padding-bottom: 0; }
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.rail-nav { display: flex; gap: 6px; }
.rail-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--cloud); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-static .rail-nav { visibility: hidden; }
.rail { list-style: none; margin: 14px 0 0; padding: 4px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; }
.tc a, .tc > div { display: grid; gap: 8px; height: 100%; padding: 0 0 16px; background: var(--dept-l, var(--cloud)); border-radius: 22px; text-decoration: none; color: var(--ink); overflow: hidden; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.tc a:hover { border-color: var(--dept); transform: translateY(-2px); }
.tc-art { display: grid; place-items: center; height: 130px; background: var(--dept); }
.tc-art .ico { width: 110px; height: 84px; color: var(--ink); }
.tc-name { font: 600 21px var(--head); padding: 0 16px; }
.tc-blurb { padding: 0 16px; font-size: 14px; color: var(--ink-soft); }
.tc-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; align-self: end; }
.tc-stats i { font-style: normal; font-size: 12px; font-weight: 600; background: var(--cloud); padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.award { background: var(--cloud); border-radius: 22px; padding: 16px; display: grid; gap: 6px; align-content: start; position: relative; border: 1px solid var(--line); }
.award-tag { justify-self: start; background: var(--sun); color: var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; }
.award-art { display: grid; place-items: center; height: 90px; border-radius: 16px; background: var(--dept-l, var(--mist)); }
.award-art .ico { width: 80px; height: 62px; color: var(--rain); }
.award-val { font: 600 28px var(--head); font-variant-numeric: tabular-nums; }
.award-name { font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tc a { transition: none; } }
@media (max-width: 860px) { .hub-hero .wrap { grid-template-columns: 1fr; } }
/* Image placeholders: where real photos go */
.img-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius: inherit; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--ink) 4%, transparent) 10px 20px); }
.img-ph em { position: absolute; left: 10px; bottom: 8px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); background: var(--cloud); padding: 2px 8px; border-radius: 999px; }
.img-ph.ph-hero { width: 100%; max-width: 300px; aspect-ratio: 4 / 3; height: auto; border-radius: 28px; background-color: var(--cloud); }
.img-ph.ph-hero .ico { width: 55%; height: auto; }
.img-ph.ph-wide { aspect-ratio: 16 / 9; height: auto; border-radius: 16px; }
.tc-art .img-ph, .award-art .img-ph { border-radius: 0; border-width: 0 0 2px; }
.award-art { overflow: hidden; }
.award-art .img-ph { border-radius: 16px; border-width: 2px; }
/* FAQ: two columns on desktop, answer-first */
.faq-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; align-items: start; }
.faq-intro { position: sticky; top: 16px; }
.faq-intro h2 { margin-bottom: 8px; }
.faq-list details { max-width: none; }
.faq summary { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.faq-pm { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--dept-l, var(--mist)); position: relative; }
.faq-pm::before, .faq-pm::after { content: ''; position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; background: var(--ink); border-radius: 2px; }
.faq-pm::after { transform: rotate(90deg); transition: transform .15s; }
.faq details[open] .faq-pm::after { transform: rotate(0deg); }
.faq details p strong { color: var(--ink); font-weight: 600; }
.faq details:target { outline: 3px solid var(--dept, var(--sun)); }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; gap: 8px; } .faq-intro { position: static; } }
/* Blog rail */
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.topic-chips .chip { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; background: var(--cloud); }
.topic-chips .chip.on { background: var(--ink); color: var(--cloud); border-color: var(--ink); }
.topic-chips .chip:focus-visible { outline: 3px solid var(--rain); }
.blog-card a, .blog-card > div { display: grid; gap: 6px; text-decoration: none; color: var(--ink); background: var(--cloud); border-radius: 20px; padding: 10px 10px 14px; height: 100%; }
.blog-card b { font: 600 17px/1.3 var(--head); padding: 0 6px; }
.blog-card small { padding: 0 6px; color: var(--ink-soft); }
.blog-topic { justify-self: start; margin: 4px 6px 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rain); }
.blog-card.is-ph b { color: var(--ink-soft); }
.about-head { display: flex; gap: 18px; align-items: center; margin: 12px 0 18px; }
.about-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; min-height: 0; }
.reviewed-by { background: var(--mint, #e4e9d6); border-radius: 12px; padding: 8px 12px; }
.about-head p { margin: 2px 0 0; }
.img-ph.about-photo em { position: static; font-size: 10px; text-align: center; }
/* ---- Category and product page v2 ---- */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.jump a { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--cloud) 70%, transparent); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.jump a:hover { background: var(--cloud); border-color: var(--dept, var(--rain)); }
.section-lede { color: var(--ink-soft); max-width: 70ch; margin: 4px 0 0; }
.cat-hero .facts b { font-size: 22px; }
.hero-stack { list-style: none; margin: 0; padding: 0; position: relative; height: 270px; }
.hero-stack li { position: absolute; width: 170px; top: calc(var(--i) * 34px); left: calc(var(--i) * 46px); transform: rotate(calc((var(--i) - 1) * 4deg)); transition: transform .2s; z-index: calc(3 - var(--i)); }
.hero-stack li:hover { transform: rotate(0) translateY(-4px); z-index: 5; }
.hero-stack a { display: grid; gap: 6px; background: var(--cloud); border-radius: 20px; padding: 8px 8px 10px; box-shadow: 0 10px 26px rgba(30, 60, 50, .14); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; text-align: center; }
.hero-stack .img-ph, .hero-stack img { aspect-ratio: 4 / 3; height: auto; border-radius: 14px; min-height: 0; }
.hero-stack .img-ph .ico, .hm-thumbs .ico { width: 54px; height: 40px; padding: 0; background: none; border-radius: 0; max-width: none; }
.stack-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--dept-l, var(--mist)); border-radius: 14px; }
/* shortlist */
.slist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sl { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--cloud); border-radius: 24px; padding: 14px 16px 16px; border: 1px solid var(--line); }
.sl-tag { position: absolute; top: 22px; left: 22px; z-index: 1; background: var(--sun); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.sl-art { display: block; border-radius: 16px; overflow: hidden; margin-bottom: 8px; background: var(--dept-l, var(--mist)); }
.sl-art .img-ph, .sl-art img, .sl-art .ico { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: 16px; }
.sl-art .ico { padding: 26%; color: var(--rain); }
.pcard-brand { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.sl-name { font: 600 20px/1.2 var(--head); color: var(--ink); text-decoration: none; }
.sl-val { font: 600 34px/1.1 var(--head); color: var(--rain-dark); font-variant-numeric: tabular-nums; }
.sl-why { margin: 2px 0 6px; font-size: 14px; color: var(--ink-soft); }
.sl-why b { color: var(--ink); }
.sl-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.sl-specs div { background: var(--mist); border-radius: 10px; padding: 6px 8px; }
.sl-specs dt { font-size: 11px; color: var(--ink-soft); }
.sl-specs dd { margin: 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.sl .pick-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
/* range bars */
.rb { margin: 10px 0 4px; }
.rb-track { position: relative; height: 12px; border-radius: 999px; background: var(--line); margin: 22px 8px 6px; }
.rb-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--rain) 28%, transparent); border-radius: 999px; }
.rb-mid { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-soft); }
.rb-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cloud); border: 3px solid var(--rain); box-sizing: border-box; }
.rb-dot.me { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--sun); border-color: var(--ink); z-index: 2; }
.rb-dot em { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--cloud); padding: 1px 6px; border-radius: 6px; }
a.rb-dot:hover { background: var(--rain); }
.rb-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rb-ends .good { color: var(--rain-dark); font-weight: 700; }
.look2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.lk { background: var(--cloud); border-radius: 22px; padding: 18px 20px; border: 1px solid var(--line); }
.lk h3 { font-size: 19px; margin: 0; }
.lk-why { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.lk-sum { margin: 6px 0 0; font-size: 14px; }
/* spec map */
.smap { margin: 16px 0 0; background: var(--cloud); border-radius: 24px; padding: 12px; border: 1px solid var(--line); overflow-x: auto; }
.smap svg { display: block; width: 100%; min-width: 520px; height: auto; font-family: inherit; }
.sm-good { fill: color-mix(in srgb, var(--rain) 12%, transparent); }
.sm-axis { stroke: var(--line); stroke-width: 2; }
.sm-tick { font-size: 12px; fill: var(--ink-soft); }
.sm-lab { font-size: 13px; font-weight: 700; fill: var(--ink-soft); }
.sm-pt circle { fill: var(--cloud); stroke: var(--rain); stroke-width: 3; transition: r .15s; }
.sm-pt text { font-size: 12px; font-weight: 600; fill: var(--ink); opacity: 0; pointer-events: none; paint-order: stroke; stroke: var(--cloud); stroke-width: 4px; }
.sm-pt.on circle { fill: var(--sun); stroke: var(--ink); }
.sm-pt.on text, .sm-pt:hover text, .sm-pt:focus text { opacity: 1; }
.sm-pt:hover circle, .sm-pt:focus circle { fill: var(--rain); }
/* quick chips */
.qchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.qchips > span { font-weight: 700; font-size: 14px; color: var(--ink-soft); margin-right: 2px; }
.qchip { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--cloud); font-weight: 600; font-size: 14px; }
.qchip i { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.qchip[aria-pressed="true"] { background: var(--ink); color: var(--cloud); border-color: var(--ink); }
.qchip[aria-pressed="true"] i { color: var(--cloud); }
.qchip:focus-visible { outline: 3px solid var(--rain); }
/* product cards (rails) */
.pcard { display: flex; flex-direction: column; gap: 4px; background: var(--cloud); border-radius: 22px; padding: 12px 14px 16px; border: 1px solid var(--line); height: 100%; box-sizing: border-box; }
.pcard-art { display: grid; place-items: center; border-radius: 16px; overflow: hidden; background: var(--dept-l, var(--mist)); aspect-ratio: 4 / 3; margin-bottom: 6px; }
.pcard-art .ico { width: 46%; height: auto; color: var(--rain); padding: 0; background: none; max-width: none; }
.pcard-art img { width: 100%; height: 100%; object-fit: contain; }
.pcard-name { font: 600 18px/1.25 var(--head); color: var(--ink); text-decoration: none; }
.pcard-bits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pcard-bits i { font-style: normal; font-size: 12px; font-weight: 600; background: var(--mist); padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pcard .pick-acts { margin-top: auto; padding-top: 10px; }
.rc-diff { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.rc-diff li { font-size: 14px; font-weight: 600; padding-left: 20px; position: relative; }
.rc-diff li::before { content: "•"; position: absolute; left: 6px; color: var(--ink-soft); }
.rc-diff li.up::before { content: "▲"; left: 2px; font-size: 10px; top: 3px; color: var(--rain); }
.rc-diff li.down::before { content: "▼"; left: 2px; font-size: 10px; top: 3px; color: #b0675f; }
/* vs cards */
.vs a { display: grid; gap: 8px; height: 100%; box-sizing: border-box; background: var(--cloud); border-radius: 22px; padding: 12px 14px 16px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.vs a:hover { border-color: var(--dept, var(--rain)); }
.vs-art { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.vs-art > span { display: grid; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--dept-l, var(--mist)); }
.vs-art .img-ph { min-height: 0; }
.vs-art .img-ph em { display: none; }
.vs-art .ico { width: 60%; height: auto; padding: 0; background: none; color: var(--rain); }
.vs-art b { font: 600 15px var(--head); background: var(--sun); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
.vs-name { font-weight: 600; font-size: 15px; }
.vs-name small { color: var(--ink-soft); }
.vs-diff { font-size: 13px; color: var(--ink-soft); }
/* product hero gallery */
.hero-media { display: grid; gap: 10px; justify-items: center; }
.hm-main { position: relative; width: 100%; display: grid; place-items: center; }
.hm-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 300px; }
.img-ph.ph-thumb { aspect-ratio: 1; height: auto; min-height: 0; border-radius: 12px; background-color: var(--cloud); }
.img-ph.ph-thumb em { left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 9px; padding: 1px 6px; white-space: nowrap; }
.product-hero .wrap { grid-template-columns: minmax(0, 1fr) 300px; }
/* at a glance */
.glance { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.glance:not(:has(.gl-score)) { grid-template-columns: 1fr; }
.glance:not(:has(.gl-rows)) { grid-template-columns: minmax(0, 420px); }
.gl-row { background: var(--cloud); border-radius: 18px; padding: 14px 18px 10px; margin-top: 12px; border: 1px solid var(--line); }
.gl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.gl-head b { font-size: 15px; }
.gl-val { font: 600 22px var(--head); font-variant-numeric: tabular-nums; }
.gl-rank { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--mist); padding: 3px 10px; border-radius: 999px; }
.gl-rank.top { background: var(--sun); color: var(--ink); }
.gl-score { position: sticky; top: 16px; background: var(--cloud); border-radius: 24px; padding: 20px; border: 1px solid var(--line); }
.gl-score-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.gl-score-top b { width: 76px; height: 76px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font: 600 30px var(--head); color: var(--sun-ink); flex: none; }
.gl-score-top span { font-weight: 700; display: grid; }
.gl-score-top small { font-weight: 500; color: var(--ink-soft); }
.gl-score .bars { margin: 0 0 10px; }
.gl-score .bars li { grid-template-columns: 110px 1fr 32px; }
.pc-good { border-top: 5px solid var(--rain); }
.pc-know { border-top: 5px solid var(--sun); }
@media (max-width: 860px) {
  .glance, .product-hero .wrap { grid-template-columns: 1fr; }
  .gl-score { position: static; }
  .hero-stack { height: 220px; margin: 10px auto 0; width: 270px; }
  .hero-stack li { width: 150px; }
  .pc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hero-stack li { transition: none; } }
.img-ph.ph-card { aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: 14px; background-color: var(--dept-l, var(--mist)); }
.img-ph.ph-card .ico, .product-hero .img-ph.ph-card .ico { width: 42%; height: auto; max-width: none; padding: 0; background: none; border-radius: 0; color: var(--rain); }
.hero-stack .img-ph.ph-card em { display: none; }
.pcard-art .img-ph, .sl-art .img-ph { border-radius: 0; border: 0; }
.sl-specs { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.rb-track { margin-top: 30px; }
.smap svg { max-width: 820px; margin: 0 auto; }
.browse > * { min-width: 0; }
.rb-dot.l em { left: -4px; transform: none; }
.rb-dot.r em { left: auto; right: -4px; transform: none; }
.gl-score .bars .bar { background: var(--line); }
@media (max-width: 860px) {
  .cat-hero .hero-stack { display: none; }
  .slist { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .sl { scroll-snap-align: start; }
  .sl-art .img-ph { aspect-ratio: 16 / 9; }
}
.product-hero .img-ph .ico { padding: 0; background: none; border-radius: 0; max-width: none; height: auto; }
.product-hero .img-ph.ph-hero .ico { width: 45%; display: block; }
.product-hero .hero-stack .img-ph .ico { width: 40%; }
@media (max-width: 860px) {
  .hero-media { max-width: 320px; margin: 0 auto; }
  .hm-thumbs { display: none; }
}
body .product-hero .img-ph .ico, body .product-hero .need-chips .ico, body .product-hero .qchip .ico { box-shadow: none; background: none; }
/* Budget banner above the nav */
.promo { background: var(--ink); color: var(--cloud); font-size: 14px; }
.promo-in { display: flex; align-items: center; gap: 10px 18px; min-height: 40px; padding-block: 6px; }
.promo-msg { color: var(--cloud); text-decoration: none; flex: 1 1 auto; min-width: 0; }
.promo-msg:hover { color: var(--sun); }
.promo-msg b { color: var(--sun); }
.promo-tiers { display: flex; gap: 6px; flex: none; }
.promo-tiers a { color: var(--ink); background: var(--sun); font-weight: 700; padding: 4px 10px; border-radius: 999px; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.promo-tiers a:last-child { background: transparent; color: var(--cloud); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cloud) 50%, transparent); }
.promo-tiers a:hover { background: var(--cloud); color: var(--ink); }
.promo-x { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--cloud); opacity: .7; flex: none; }
.promo-x:hover, .promo-x:focus-visible { opacity: 1; background: color-mix(in srgb, var(--cloud) 15%, transparent); }
@media (max-width: 860px) {
  .promo-in { flex-wrap: wrap; position: relative; padding-right: 36px; }
  .promo-msg span { display: none; }
  .promo-tiers { overflow-x: auto; max-width: 100%; }
  .promo-x { position: absolute; right: 8px; top: 6px; }
}
@media (max-width: 860px) { .promo-tiers a:last-child { display: none; } .promo-tiers a { padding: 3px 9px; font-size: 13px; } .promo-msg b::after { content: " →"; } }
.tool-form > label { font-size: 13px; font-weight: 600; display: grid; gap: 4px; margin-top: 8px; }
.tool-form select, .tool-form > label input, .tool-row select { width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--cloud); color: var(--ink); min-width: 0; }
.tool-row:has(> label:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-q { border: 0; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.tool-q legend { font-size: 14px; font-weight: 600; margin-bottom: 4px; padding: 0; }
.tool-q label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.tool-out:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.tool-big.txt b { font-size: 24px; }
/* spec map v2 */
.sm-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.sm-pt circle { fill: color-mix(in srgb, var(--rain) 18%, var(--cloud)); stroke: var(--rain); stroke-width: 2; }
.sm-pt text { opacity: 1; font-size: 12px; font-weight: 800; fill: var(--ink); stroke: none; pointer-events: none; }
.sm-pt.on circle { fill: var(--sun); stroke: var(--ink); stroke-width: 2.5; }
.sm-pt:hover circle, .sm-pt:focus circle, .sm-pt.hot circle { fill: var(--rain); stroke: var(--rain-dark); }
.sm-pt.on:hover text, .sm-pt.on.hot text { fill: var(--cloud); }
.sm-info { font-size: 14px; color: var(--ink-soft); text-align: center; min-height: 22px; margin-top: 4px; }
.sm-info b { color: var(--ink); }
.sm-key { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.sm-key li { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; align-items: start; font-size: 14px; }
.sm-key li b { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font-size: 12px; border: 2px solid var(--ink); box-sizing: border-box; }
.sm-key li a { font-weight: 600; color: var(--ink); }
.sm-key li span { font-size: 12px; color: var(--ink-soft); }
/* sticky on-this-page bar: a floating pill track */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.jumpbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 35; padding-block: 10px; margin-top: -26px; pointer-events: none; }
.jb-in { pointer-events: auto; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 6px; background: color-mix(in srgb, var(--cloud) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 28px rgba(30, 60, 50, .12); }
.jb-k { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; border-radius: 999px; background: var(--dept-l, var(--mist)); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.jb-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dept, var(--rain)); }
.jb-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; scroll-behavior: smooth; }
.jb-list::-webkit-scrollbar { display: none; }
.jb-list a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 8px 7px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.jb-arrow { box-sizing: content-box; width: 8px; height: 10px; padding: 5px 6px; border-radius: 50%; background: var(--mist); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .2s, transform .2s; }
.jb-list a:hover { background: var(--dept-l, var(--mist)); }
.jb-list a:hover .jb-arrow { transform: translateY(2px); background: var(--cloud); }
.jb-list a[aria-current] { background: var(--ink); color: var(--cloud); }
.jb-list a[aria-current] .jb-arrow { background: var(--sun); color: var(--ink); }
@media (max-width: 640px) { .jb-k { display: none; } .jumpbar { margin-top: -22px; } .jb-in { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .jb-list a, .jb-arrow { transition: none; } .jb-list a:hover .jb-arrow { transform: none; } }
[id="all"], [id="shortlist"], [id="map"], [id="look"], [id="questions"], [id="pairs"], [id="sibs-sec"], [id="types-sec"], [id="picks-sec"], [id="blog-sec"], [id="also"], [id="glance"], [id="buy"], [id="specs"], [id="rivals"], [id="reviews"] { scroll-margin-top: 84px; }
.list-sec { padding-top: 24px; }
.notice.slim { padding: 10px 14px; font-size: 14px; margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .jumpdd .chev { transition: none; } }
.hero-stack a > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-form > label.check { display: flex; grid-template-columns: none; gap: 6px; align-items: center; font-weight: 500; }
/* parent tools */
.big-tool { max-width: 760px; margin: 0 auto; }
.big-tool .tool-form > .btn { margin-top: 10px; }
.og-list li { align-items: baseline; }
.og-list small { color: var(--ink-soft); }
.rc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.rc-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.rc-list span { font-size: 13px; color: var(--ink-soft); }
.rc-list small { font-size: 13px; }
.tool-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tool-cards a { display: grid; gap: 6px; height: 100%; box-sizing: border-box; padding: 18px 20px; border-radius: 22px; background: var(--cloud); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tool-cards a:hover { border-color: var(--rain); }
.tool-cards b { font: 600 19px var(--head); }
.tool-cards span { font-size: 14px; color: var(--ink-soft); }
.tool-hero .wrap { grid-template-columns: 1fr; }
.hero-tools { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.hero-tools a::before { content: "→ "; }
/* brand vs brand */
.vs-lines { margin: 8px 0 16px; padding-left: 20px; font-size: 17px; }
.vs-lines li { margin-bottom: 6px; }
.vs-table td small { display: block; font-size: 12px; color: var(--ink-soft); }
.vs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-col { background: var(--cloud); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; min-width: 0; }
.vs-col h3 { margin: 0; font-size: 22px; }
.vs-best { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.vs-best li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; background: var(--mist); border-radius: 12px; padding: 8px 12px; }
.vs-best span { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.vs-best b { font-variant-numeric: tabular-nums; }
.vs-models { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 16px; font-size: 14px; }
.vs-models li { break-inside: avoid; padding: 3px 0; }
.vs-models small { color: var(--ink-soft); margin-left: 6px; }
@media (max-width: 760px) { .vs-cols { grid-template-columns: 1fr; } .vs-models { columns: 1; } }
/* Five departments no longer fit beside the logo and search: keep the search usable and let the menu drop below. */
.site-head .site-search { flex: 1 1 260px; min-width: 240px; }
@media (max-width: 1360px) and (min-width: 821px) { .site-head .wrap { flex-wrap: wrap; row-gap: 6px; } .site-head .site-nav { flex-basis: 100%; order: 3; justify-content: flex-start; } }

/* ---------- home (v2): search-first hero, departments, big buys, tools, brands ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-hero { background: linear-gradient(170deg, #e4e9d6 0%, #eef0e2 50%, #fbf1dc 100%); padding: 40px 0 44px; }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.hh-copy { min-width: 0; }
.hh-kicker { display: inline-block; font-size: 14px; font-weight: 600; color: var(--rain-dark); background: rgba(255,255,255,.7); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.home-hero h1 { font-size: clamp(34px, 5vw, 54px); max-width: 16ch; text-wrap: balance; }
.home-hero .lede { font-size: 18px; color: var(--ink-soft); max-width: 50ch; margin: 14px 0 22px; }
.hh-search { display: flex; gap: 8px; background: var(--cloud); padding: 8px; border-radius: 999px; box-shadow: 0 12px 28px rgba(63,115,100,.16); max-width: 560px; }
.hh-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; padding: 10px 14px; color: var(--ink); }
.hh-search input:focus { outline: none; }
.hh-search:focus-within { outline: 3px solid var(--rain); outline-offset: 2px; }
.hh-search .btn { border-radius: 999px; padding-inline: 22px; }
.hh-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 15px; }
.hh-quick span { color: var(--ink-soft); font-weight: 600; }
.hh-quick a { background: rgba(255,255,255,.75); padding: 5px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500; }
.hh-quick a:hover { background: var(--cloud); color: var(--rain-dark); }
.img-ph.ph-home-hero { aspect-ratio: 5 / 4; height: auto; border-radius: 32px; background-color: rgba(255,255,255,.6); }
.home-trust { background: var(--cloud); border-bottom: 1px solid var(--line); }
.home-trust ul { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-trust li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--sun); }
.home-trust b { font: 600 16px var(--head); }
.home-trust span { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.home-sec { padding: 52px 0; }
.home-sec.alt { background: var(--cloud); }
.hs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px; }
.hs-head h2 { margin: 0; }
.hs-head p { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.dept-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.dept-cards > li { background: var(--dept-l); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.dc-art .img-ph.ph-card { border-radius: 0; border-width: 0 0 2px; background-color: var(--dept); }
.dc-body { padding: 14px 16px 18px; }
.dc-body h3 { font-size: 20px; }
.dc-count { font-size: 13px; color: var(--ink-soft); margin: 2px 0 8px; }
.dc-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dc-body a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.dc-body a:hover { color: var(--rain-dark); text-decoration: underline; }
.dc-soon { font-size: 14px; color: var(--ink-soft); }
.big-cards, .vs-cards, .tool-tiles, .brand-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.big-cards, .vs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.big-cards a { display: grid; gap: 4px; text-decoration: none; color: var(--ink); background: var(--dept-l); border-radius: 22px; padding: 12px 12px 16px; border: 2px solid transparent; height: 100%; }
.big-cards a:hover { border-color: var(--dept); }
.bc-art { display: block; margin-bottom: 8px; }
.big-cards .img-ph.ph-card { background-color: var(--cloud); }
.big-cards b { font: 600 19px var(--head); padding: 0 4px; }
.bc-meta { font-size: 14px; color: var(--ink-soft); padding: 0 4px; }
.bc-cta { font-size: 15px; font-weight: 600; color: var(--rain); padding: 4px 4px 0; }

.vs-cards a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); background: var(--cloud); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px 16px; height: 100%; }
.vs-cards a:hover { border-color: var(--rain); }
.vs-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 10px; }
.vs-row i { font: 600 14px var(--head); color: var(--ink-soft); font-style: normal; }
.vs-cards b { font-weight: 600; line-height: 1.3; }
.vs-v { font-size: 13px; color: var(--ink-soft); }
.vs-sec { font-size: 13px; color: var(--rain); font-weight: 600; margin-top: 6px; }
.tool-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tool-tiles a { display: grid; gap: 4px; padding: 18px; border-radius: 20px; background: var(--mist); text-decoration: none; color: var(--ink); border: 2px solid transparent; height: 100%; }
.tool-tiles a:hover { border-color: var(--sky-deep); }
.tool-tiles b { font: 600 18px var(--head); }
.tool-tiles span { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.brand-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.brand-tiles a { display: grid; gap: 2px; text-align: center; text-decoration: none; color: var(--ink); padding: 12px; background: var(--cloud); border-radius: 18px; border: 1px solid var(--line); }
.brand-tiles a:hover { border-color: var(--rain); }
.img-ph.ph-logo { aspect-ratio: 3 / 2; height: auto; min-height: 0; border-radius: 12px; margin-bottom: 8px; }
.img-ph.ph-logo em { left: 50%; transform: translateX(-50%); font-size: 9px; }
.brand-tiles b { font-size: 15px; }
.brand-tiles span { font-size: 12px; color: var(--ink-soft); }
.home-how { padding: 48px 0 56px; background: var(--sky); }
.home-how ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; max-width: 70ch; }
@media (max-width: 820px) {
  .hh-grid { grid-template-columns: 1fr; gap: 24px; }
  .img-ph.ph-home-hero { aspect-ratio: 21 / 9; }
  .home-hero { padding: 24px 0 32px; }
  .home-trust ul { grid-template-columns: 1fr; gap: 12px; }
  .home-sec { padding: 36px 0; }
  .hh-search .btn { padding-inline: 16px; }
  .big-cards, .vs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dept-cards, .big-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vs-cards { grid-template-columns: 1fr; }
  .vs-row { grid-template-columns: 72px auto 72px; justify-content: start; }
  .dc-body { padding: 10px 12px 14px; }
  .dc-body h3, .big-cards b { font-size: 17px; }
  .bc-meta { font-size: 13px; }
  .brand-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hh-quick a { font-size: 14px; }
}

/* ---------- CRO pass: compare pages, hubs ---------- */
.product-hero .wrap.pair-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.pair-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.pair-card { background: var(--cloud); border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pair-art { display: block; }
.pair-art .img-ph.ph-hero, .pair-art .photo { max-width: none; width: 100%; aspect-ratio: 1; border-radius: 16px; }
.pair-art .img-ph .ico { width: 50%; }
.pair-name { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.25; }
.pair-name span { color: var(--ink-soft); font-weight: 500; }
.pair-price { font: 600 18px var(--head); }
.pair-acts { display: grid; gap: 6px; margin-top: auto; }
.pair-acts .btn { width: 100%; margin: 0; text-align: center; justify-content: center; }
.pair-acts .btn.small { padding: 9px 10px; font-size: 14px; }
.pair-vs { align-self: center; font: 600 16px var(--head); color: var(--ink-soft); }
table.compare.collapse-same:not(.show-same) tr.same { display: none; }
.same-note { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.same-note .btn.small { width: auto; margin: 0; }
.hub-tool { padding-top: 0; }
.hub-tool .wrap > * { max-width: 520px; }
@media (max-width: 820px) {
  .product-hero .wrap.pair-wrap { grid-template-columns: 1fr; gap: 16px; }
  .pair-cards { gap: 8px; }
  .pair-card { padding: 8px; border-radius: 18px; }
  .pair-name { font-size: 14px; }
  .pair-price { font-size: 16px; }
  .slim-hero .img-ph.ph-hero { display: none; }
  .slim-hero { padding-bottom: 18px; }
}
@media (max-width: 520px) {
  .explorer .thumb { display: none; }
  .explorer th, .explorer td { padding: 10px 8px; }
  .explorer .nm a { gap: 0; }
}
/* Hubs: compact hero so the product list shows on first load */
.product-hero.slim-hero { padding: 16px 0 34px; }
.product-hero.slim-hero .wrap { grid-template-columns: 1fr; }
.slim-hero h1 { font-size: clamp(28px, 3.4vw, 40px); }
.slim-hero .summary { font-size: 16px; margin-top: 4px; max-width: 70ch; }
.slim-hero .facts { margin-top: 10px; gap: 4px 20px; }
.slim-hero .facts li { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.slim-hero .facts b { display: inline; font-size: 18px; }
.slim-hero .need-chips { margin-top: 12px; }
.slim-hero .crumbs { margin-bottom: 4px; }
.slim-hero + .jumpbar + .list-sec, .slim-hero + .list-sec { padding-top: 12px; }
.list-sec h2 { margin-bottom: 10px; }
.slim-hero ~ .list-sec h2, .list-sec h2 { font-size: clamp(22px, 2.4vw, 28px); }
.list-sec .notice.slim { margin-bottom: 14px; padding-block: 10px; font-size: 14px; }
@media (min-width: 821px) {
  .slim-hero .facts { display: inline-flex; margin: 10px 18px 0 0; vertical-align: middle; }
  .slim-hero .need-chips { display: inline-flex; vertical-align: middle; margin-top: 10px; }
  .slim-hero .need-chips .chip { padding: 4px 10px 4px 6px; font-size: 14px; }
}
@media (max-width: 820px) {
  .promo-in { min-height: 0; padding-block: 8px; }
  .promo-tiers { display: none; }
  .promo-msg span { display: none; }
  .slim-hero .summary, .slim-hero .facts { display: none; }
  .slim-hero h1 { font-size: 28px; }
  .product-hero.slim-hero { padding: 12px 0 28px; }
  .slim-hero .need-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .slim-hero .need-chips .chip { white-space: nowrap; flex: none; }
}
.cat-hero.slim-hero .hero-stack { display: none; }
.cat-hero.slim-hero .facts b { font-size: 18px; }
.slim-hero .jump { margin-top: 10px; }
/* Brands hub */
.az { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; position: sticky; top: 0; background: var(--mist); padding-block: 8px; z-index: 5; }
.az a { min-width: 32px; text-align: center; padding: 4px 8px; border-radius: 8px; background: var(--cloud); text-decoration: none; font-weight: 600; color: var(--ink); }
.az a:hover { background: var(--sky); }
.az-group { margin-bottom: 26px; scroll-margin-top: 60px; }
.az-group h2 { font-size: 22px; margin-bottom: 10px; }
.brand-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.brand-list a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--cloud); text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.brand-list a:hover { border-color: var(--rain); }
.brand-list span { font-size: 13px; color: var(--ink-soft); }
.img-ph.brand-logo-ph { max-width: 220px; justify-self: end; }
.hs-head > a { font-weight: 600; text-decoration: none; }
@media (max-width: 820px) { .img-ph.brand-logo-ph { display: none; } }
/* Sticky context bar: the page's own name first, then its sections, then its main action */
.jb-k { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; text-transform: none; letter-spacing: 0; font-size: 14px; }
.jb-k::before { display: inline-block; margin-right: 6px; vertical-align: middle; }
.jb-cta { flex: none; display: inline-flex; gap: 6px; margin-left: 4px; }
.jb-cta .btn.small { width: auto; margin: 0; padding: 7px 14px; font-size: 14px; white-space: nowrap; }
.jb-list .count { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 640px) {
  .jb-k { display: inline-block; max-width: 34vw; padding: 7px 10px; font-size: 13px; }
  .jb-cta { display: none; }
}

/* ---------- baby stages (/leaps/) ---------- */
.leap-calc { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 14px; }
.leap-calc label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.leap-calc input { font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line, var(--line)); background: var(--cloud); }
.leap-line { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.leap-line a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--card, var(--cloud)); border: 1px solid var(--line, var(--line)); text-decoration: none; color: inherit; height: 100%; }
.leap-line a:hover { border-color: var(--dept, #b8e3e6); }
.leap-line b { font-size: 1.05rem; }
.leap-line span { font-size: .88rem; color: var(--muted, var(--ink-soft)); }
.leap-when { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .75rem !important; }
.leap-line li.past a { opacity: .7; }
.leap-line li.now a { border: 2px solid var(--rain-dark); opacity: 1; }
.leap-date { font-weight: 600; color: var(--rain-dark) !important; }
.leap-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.leap-col { background: var(--card, var(--cloud)); border-radius: 16px; padding: 14px 18px; border: 1px solid var(--line, var(--line)); }
.leap-col h3 { font-size: 1rem; margin: 0 0 6px; }
.leap-col ul, .leap-facts { margin: 0; padding-left: 20px; }
.leap-facts li { margin: 6px 0; }
.leap-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 8px; }
.prose-wide { max-width: 900px; }
.reg-cta { margin-top: 24px; padding: 20px; border-radius: 18px; background: var(--dept-l, #e3f4f5); }
.reg-cta h2 { margin-top: 0; }

/* interactive stages */
.leap-opt { opacity: .95; }
.linkish { all: unset; cursor: pointer; color: var(--rain); text-decoration: underline; text-underline-offset: 3px; }
.leap-now { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; background: var(--cloud); border: 2px solid var(--rain); border-radius: 20px; padding: 18px 22px; margin: 4px 0 18px; }
.leap-now h2 { margin: 2px 0 4px; font-size: 1.35rem; }
.leap-now p { margin: 0; }
.leap-track { position: relative; height: 74px; margin: 6px 14px 0; }
.leap-rail { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 6px; background: var(--line, var(--line)); overflow: hidden; }
.leap-fill { display: block; height: 100%; width: 0; background: var(--rain); transition: width .5s ease; }
.leap-dot { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; width: 64px; }
.leap-pin { width: 22px; height: 22px; border-radius: 50%; background: var(--cloud); border: 3px solid #c8d4ce; margin-top: 6px; transition: transform .15s, border-color .15s, background .15s; }
.leap-dot.past .leap-pin { background: var(--rain); border-color: var(--rain); }
.leap-dot.now .leap-pin { background: var(--cloud); border-color: var(--rain); box-shadow: 0 0 0 5px rgba(63, 115, 100, .2); }
.leap-dot.sel .leap-pin, .leap-dot:hover .leap-pin { transform: scale(1.25); border-color: var(--rain-dark); }
.leap-dot:focus-visible .leap-pin { outline: 3px solid var(--rain); outline-offset: 3px; }
.leap-lab { font-size: .72rem; font-weight: 700; text-align: center; color: var(--ink-soft, #4b5f57); line-height: 1.2; }
.leap-dot:nth-child(odd) .leap-lab { margin-top: 18px; }
.leap-peek { background: var(--cloud); border-radius: 20px; padding: 16px 22px; margin: 14px 0 20px; min-height: 120px; }
.leap-peek h3 { margin: 2px 0 6px; font-size: 1.2rem; }
.leap-peek p { margin: 4px 0; }
.leap-bar { height: 10px; border-radius: 10px; background: var(--line, var(--line)); overflow: hidden; margin: 10px 0 4px; max-width: 420px; }
.leap-bar i { display: block; height: 100%; width: 0; background: var(--rain); transition: width .3s ease; }
.leap-prog { display: block; height: 5px; border-radius: 5px; background: var(--line, var(--line)); overflow: hidden; margin-top: 4px; }
.leap-prog i { display: block; height: 100%; background: var(--rain); }
.leap-when-box { background: var(--cloud); border-radius: 16px; padding: 12px 18px; margin: 0 0 16px; }
.leap-check fieldset { margin: 0; min-width: 0; }
.leap-check legend { font-weight: 700; padding: 0 4px; }
.leap-check label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 10px; cursor: pointer; }
.leap-check label:hover { background: var(--cloud); }
.leap-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rain); flex: none; }
.leap-check input:checked + span { color: var(--muted, var(--ink-soft)); }
.leap-notes { margin: 16px 0; background: var(--cloud); border: 1px solid var(--line, var(--line)); border-radius: 16px; padding: 12px 18px; }
.leap-notes summary { cursor: pointer; font-weight: 700; }
@media (max-width: 640px) { .leap-lab { font-size: .64rem; } .leap-dot { width: 44px; } .leap-track { margin: 6px 8px 0; } }
.leap-now[hidden], .linkish[hidden] { display: none; }
.leap-calc + p { margin-top: 12px; }
@media (max-width: 640px) { .leap-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* A-04: still read by screen readers */ .leap-dot.sel .leap-lab, .leap-dot.now .leap-lab { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-top: 0 !important; white-space: nowrap; } .leap-track { height: 60px; } }

/* mobile: never let hero content set the page width */
.product-hero .wrap > *, .hub-hero .wrap > * { min-width: 0; }
html, body { overflow-x: clip; }

/* home: baby stages band */
.home-leaps { background: linear-gradient(135deg, #eef0e2, #fdf3e7); }
.hl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hl-copy h2 { margin: 4px 0 10px; }
.hl-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 16px 0 8px; }
.hl-form label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.hl-form input { font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line, var(--line)); background: var(--cloud); }
.hl-card { background: var(--cloud); border-radius: 24px; padding: 18px 20px; box-shadow: 0 14px 34px rgba(47, 59, 44, .12); min-width: 0; }
.hl-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hl-strip a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--cloud); text-decoration: none; color: var(--ink); }
.hl-strip a:hover { background: #e3efe9; }
.hl-strip span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, var(--ink-soft)); }
.hl-strip b { font-size: .95rem; }
.hl-now h3 { font-size: 1.5rem; margin: 2px 0 8px; }
.hl-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 820px) { .hl-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .hl-strip li:nth-child(n+7) { display: none; } }

/* ---------- topic guides ---------- */
.guide-intro .prose p { max-width: 68ch; }
.key-facts ul { margin: 12px 0 8px; padding-left: 20px; max-width: 72ch; }
.key-facts li { margin: 6px 0; }
.guide-rules { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.guide-rules li { background: var(--cloud); border-radius: 16px; padding: 14px 18px; font-size: 15px; color: var(--ink-soft); }
.guide-rules b { display: block; color: var(--ink); margin-bottom: 4px; }
.gmods { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: 14px; }
.gbars { background: var(--cloud); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.gbars h3 { font-size: 19px; }
.gbars ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.gbars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.gbars li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-count li { grid-template-columns: 7.5em minmax(0, 1fr) auto; }
.gbar { height: 10px; background: var(--sky); border-radius: 99px; overflow: hidden; }
.gbar i { display: block; height: 100%; background: var(--rain); border-radius: 99px; }
.stage-ladder { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.stage-ladder li { display: flex; gap: 14px; background: var(--cloud); border-radius: 18px; padding: 14px 18px; }
.stage-ladder h3 { font-size: 19px; }
.stage-ladder p { margin: 4px 0 0; }
.sl-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; font: 600 17px var(--head); }
.chooser { background: var(--cloud); border-radius: 18px; padding: 16px 18px; display: grid; gap: 14px; }
.chooser fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.chooser legend { font-weight: 600; margin-bottom: 6px; width: 100%; }
.chooser label { font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.chooser input[name=max] { width: 7em; padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; font: inherit; }
.chooser-out { margin-top: 14px; }
.ch-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.ch-list li { background: var(--cloud); border-radius: 14px; padding: 10px 14px; }
.ch-list small { display: block; color: var(--ink-soft); }
.lim-chart { background: var(--cloud); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; }
.lc-row { display: grid; grid-template-columns: 9em minmax(0, 1fr) 8.5em; gap: 10px; align-items: center; font-size: 14px; }
.lc-track { position: relative; height: 14px; background: var(--sky); border-radius: 99px; }
.lc-track i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--rain); }
.lc-track .lc-ff { background: var(--rain-dark); } .lc-track .lc-bo { background: var(--sun-ink); }
.lc-axis { display: flex; justify-content: space-between; margin-left: calc(9em + 10px); margin-right: calc(8.5em + 10px); font-size: 12px; color: var(--ink-soft); }
@media (max-width: 520px) { .lc-row { grid-template-columns: 1fr; gap: 4px; } .lc-axis { margin: 0; } }
/* Desktop header: logo and search on top, the department row underneath at full width, so nothing gets cut off. */
@media (min-width: 1181px) {
  .site-head .wrap { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .site-search { flex: 1 1 360px; max-width: 560px; margin-left: auto; }
  .site-nav { order: 3; flex: 1 0 100%; }
  .nav-menu { justify-content: space-between; }
  .dept-btn, .nav-link { padding: 8px 10px; font-size: 15px; gap: 6px; }
}
@media (min-width: 1181px) {
  .nav-menu { flex-wrap: nowrap; }
  .dept-btn, .nav-link { padding: 8px 6px; font-size: 14.5px; gap: 5px; }
  .nav-menu .nav-reg { margin-left: 2px; padding: 6px 14px; }
}
/* Jump links: a full-width bar that sticks to the top, not a floating pill. */
.jumpbar { position: sticky; top: 0; margin: 0; padding: 0; pointer-events: auto; background: color-mix(in srgb, var(--cloud) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(30, 60, 50, .06); }
.jb-in { width: auto; max-width: none; padding: 8px 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 640px) { .jumpbar { margin-top: 0; } .jb-in { border-radius: 0; } }
/* Hero: type chips sit on their own row with a label and counts. */
.need-chips { align-items: center; }
.need-chips .nc-k { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.need-chips .chip { text-transform: none; }
.need-chips .chip i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--dept-l, var(--mist)); border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.hub-hero .summary { max-width: 62ch; }
/* Guide and key facts read as one block. */
.guide-intro .wrap > h2 { margin-bottom: 10px; }
.guide-intro .prose { max-width: 70ch; }
.guide-intro + .key-facts { padding-top: 0; }
.key-facts .wrap > h2 { font-size: 22px; }
.key-facts ul { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: none; }
.key-facts li { background: var(--cloud); border-radius: 14px; padding: 12px 16px; margin: 0; font-size: 15px; border-left: 4px solid var(--dept, var(--rain)); }
/* Denser list rows, and a "show more" footer instead of one very long page. */
.explorer tbody td { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; }
.explorer .thumb { width: 40px; height: 32px; border-radius: 10px; }
.explorer .thumb .ico { width: 24px; height: 20px; }
.explorer td.nm small { display: inline; margin-left: 6px; font-size: 13px; }
.explorer td.nm small::before { content: "· "; }
.list-more { display: grid; justify-items: center; gap: 10px; padding: 22px 0 6px; }
.lm-count { margin: 0; font-size: 15px; color: var(--ink-soft); }
.lm-count b { color: var(--ink); }
.lm-bar { width: min(260px, 70%); height: 6px; border-radius: 99px; background: var(--sky); overflow: hidden; }
.lm-bar i { display: block; height: 100%; background: var(--rain); border-radius: 99px; }
.lm-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.list-more:empty { display: none; }
/* Top picks: compact cards, no photo placeholders. */
.award2 { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; min-height: 0; }
.award2 .aw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.award2 .award-tag { background: none; padding: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.award2 .aw-ico { flex: none; width: 40px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--dept-l, var(--mist)); color: var(--rain); }
.award2 .aw-ico .ico { width: 24px; height: 20px; }
.award2 .award-val { font: 600 30px/1.1 var(--head); color: var(--ink); }
.award2 .award-name { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
.award2 .award-name:hover { text-decoration: underline; }
.award2 .aw-type { font-size: 13px; color: var(--ink-soft); }
.award2 .aw-acts { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.award2 .aw-acts a:first-child { font-weight: 600; font-size: 14px; text-decoration: none; }
/* Help me choose: numbered steps with toggle pills, results as a card grid. */
.chooser { gap: 18px; padding: 20px 22px; }
.chooser fieldset { display: block; }
.chooser legend { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.chooser legend b { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--cloud); display: grid; place-items: center; font-size: 13px; }
.chooser legend small { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--mist); font-size: 14.5px; font-weight: 600; transition: background .15s, border-color .15s; }
.pill:hover span { border-color: var(--rain); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cloud); }
.pill input:focus-visible + span { outline: 3px solid var(--rain); outline-offset: 2px; }
.ch-budget { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.chooser .ch-budget input { width: 8em; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; font: inherit; background: var(--mist); }
.ch-count { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.ch-count b { color: var(--ink); }
.ch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 0; }
.ch-list li { padding: 0; }
.ch-list a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--cloud); text-decoration: none; color: var(--ink); border: 1.5px solid transparent; height: 100%; box-sizing: border-box; }
.ch-list a:hover { border-color: var(--rain); }
.ch-t { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.ch-m { font-size: 13.5px; color: var(--ink-soft); }
.ch-p { font-weight: 700; margin-top: 4px; }
/* Desktop header v3: logo + search row, then a quiet white department bar.
   No colored dots, no filled pills; open and current states are a thin underline. */
@media (min-width: 1181px) {
  .site-head .wrap { padding-top: 12px; padding-bottom: 0; row-gap: 12px; }
  .site-search { max-width: 520px; }
  .site-head { overflow-x: clip; }
  .site-nav { position: relative; z-index: 0; }
  .site-nav::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vmax; right: -100vmax; background: var(--cloud); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .nav-menu { justify-content: flex-start; gap: 4px; }
  .nav-menu > li { display: flex; }
  .dept-btn .dept-dot { display: none; }
  .dept-btn, .nav-link { position: relative; padding: 14px 12px; border-radius: 0; font-size: 15px; font-weight: 600; gap: 5px; color: var(--ink); }
  .dept-btn .chev { width: 9px; opacity: .45; transition: transform .15s, opacity .15s; }
  .dept-btn:hover, .nav-link:hover, .dept.open .dept-btn { background: none; color: var(--rain-dark, var(--ink)); }
  .dept-btn:hover .chev, .dept.open .chev { opacity: 1; }
  .dept-btn::after, .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--dept, var(--rain)); transform: scaleX(0); transition: transform .15s; z-index: 1; }
  .dept-btn:hover::after, .nav-link:hover::after, .dept.open .dept-btn::after, .dept.current .dept-btn::after, .nav-link[aria-current]::after { transform: scaleX(1); }
  .dept.current .dept-btn, .nav-link[aria-current] { box-shadow: none; border-radius: 0; }
  .nav-menu > li:has(.nav-reg) { margin-left: auto; align-items: center; }
  .nav-menu .nav-reg { background: none; border: 1.5px solid var(--ink); color: var(--ink); padding: 7px 16px; border-radius: 999px; font-weight: 700; margin: 0; }
  .nav-menu .nav-reg:hover { background: var(--ink); color: var(--cloud); }
  .nav-menu .nav-reg::after { display: none; }
}
/* Header v4: Baby Market and Registry as standout buttons beside search; departments get their own icon tiles. */
.head-acts { display: none; }
.dept-ico { display: none; }
@media (min-width: 1181px) {
  .site-head .site-search { max-width: none; flex: 1 1 360px; margin-left: 40px; }
  .head-acts { display: flex; gap: 10px; align-items: center; }
  .nav-menu > li.nav-dup { display: none; }
  .ha { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.1; border: 2px solid transparent; transition: transform .12s, box-shadow .12s; }
  .ha:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(47, 59, 44, .14); }
  .ha svg { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .ha span { display: grid; }
  .ha small { font-weight: 500; font-size: 12px; color: inherit; opacity: .75; }
  .ha-market { background: #ffd9c7; }
  .ha-market svg { background: #fff3ec; color: #b4532a; }
  .ha-reg { background: var(--ink); color: var(--cloud); }
  .ha-reg svg { background: var(--sun); color: var(--ink); }
  .ha[aria-current] { border-color: var(--rain); }
  /* Departments: icon tile in the department's color, label beside it. */
  .nav-menu { justify-content: space-between; gap: 0; }
  .dept-btn { padding: 10px 10px; gap: 8px; }
  .dept-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--dept-l); color: var(--ink); transition: background .15s, transform .15s; }
  .dept-ico .ico { width: 22px; height: 18px; }
  .dept-btn:hover .dept-ico, .dept.open .dept-ico, .dept.current .dept-ico { background: var(--dept); transform: rotate(-4deg); }
  .dept-btn::after { left: 10px; right: 10px; }
}
@media (min-width: 1181px) and (max-width: 1380px) {
  .dept-btn { padding: 10px 6px; gap: 6px; font-size: 14.5px; }
  .dept-ico { width: 28px; height: 28px; border-radius: 9px; }
  .dept-btn .chev { display: none; }
  .ha small { display: none; }
  .site-head .site-search { margin-left: 24px; }
}
/* Budget planner: neutral options dropdown instead of a pick. */
.opt-pick select { width: 100%; max-width: 440px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--cloud); font: inherit; font-size: 14.5px; color: var(--ink); }
.opt-pick select:focus-visible { outline: 3px solid var(--rain); outline-offset: 1px; }
.plan td small { display: block; margin-top: 4px; }

/* Brand: Cribpicks logo */
.logo-mark { width: 44px; height: 44px; flex: none; }
.logo span { font: 600 25px/1 var(--head); letter-spacing: -0.02em; color: var(--ink); }
.logo span b { font-weight: 600; color: var(--fox); }
.foot-brand .logo span, .foot-brand .logo span b { color: var(--cloud); }
.foot-brand .logo-mark { background: var(--mist); border-radius: 12px; padding: 3px; }
.ha-market { background: var(--fox-l); }
.ha-market svg { background: var(--cloud); color: var(--fox); }
/* Whimsy: the bee bobs, clouds drift, the ladybug wiggles. Off for reduced motion. */
.hero-scene { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 32px; }
@keyframes cp-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -6px); } }
@keyframes cp-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes cp-wiggle { 0%, 92%, 100% { transform: translate(372px, 324px) rotate(0); } 95% { transform: translate(372px, 324px) rotate(-6deg); } 98% { transform: translate(372px, 324px) rotate(5deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hs-bee { animation: cp-bob 4s ease-in-out infinite; }
  .hs-cloud.a { animation: cp-drift 14s ease-in-out infinite; }
  .hs-cloud.b { animation: cp-drift 18s ease-in-out infinite reverse; }
  .hs-bug { animation: cp-wiggle 6s ease-in-out infinite; }
  .logo .m-bee { transition: transform .35s ease; }
  .logo:hover .m-bee { transform: translate(-2px, -3px); }
}
.logo-mark { overflow: visible; }
/* Logo from Canva (hand-lettered with a ladybug and a bee). */
.logo-img { display: block; height: 76px; width: auto; margin: -6px 0; }
@media (max-width: 820px) { .logo-img { height: 58px; margin: -4px 0; } }
.foot-brand .logo { background: var(--mist); border-radius: 14px; padding: 6px 12px; display: inline-flex; }
.foot-brand .logo-img { height: 48px; }
/* Home banner: full-width storybook meadow behind the headline. */
.hero-banner { position: relative; overflow: hidden; background: #e3ece9; padding: 64px 0 210px; min-height: 560px; }
.hero-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-banner .hh-grid { position: relative; grid-template-columns: minmax(0, 620px); }
.hero-banner .hh-copy { background: color-mix(in srgb, var(--mist) 82%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 2px solid rgba(61, 58, 51, .12); border-radius: 28px; padding: 28px 30px 26px; }
@media (max-width: 860px) {
  .hero-banner { padding: 20px 0 0; min-height: 0; display: flex; flex-direction: column; }
  .hero-banner .hh-grid { order: 1; }
  .hero-banner .hh-copy { background: transparent; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-banner-art { position: relative; order: 2; height: 230px; margin-top: 18px; }
}

/* Honeycomb cursor (links and buttons keep the pointer so they still read as clickable). */
html, body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M14.4%205.9%20L14.4%2012.1%20L9.0%2015.2%20L3.6%2012.1%20L3.6%205.9%20L9.0%202.8Z%22%20fill%3D%22%23e9c46a%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M25.1%205.9%20L25.1%2012.1%20L19.7%2015.2%20L14.4%2012.1%20L14.4%205.9%20L19.7%202.8Z%22%20fill%3D%22%23f1d98f%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M19.7%2015.2%20L19.7%2021.4%20L14.4%2024.5%20L9.0%2021.4%20L9.0%2015.2%20L14.4%2012.1Z%22%20fill%3D%22%23e9c46a%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 9 9, auto; }

/* Type pairing: Fraunces (Softness 100, Wonky on) for headlines, Figtree for body and specs, Gaegu for small labels (bold, sized up: it runs small). */
.logo span, .award-val, .hb-amt { font-variation-settings: 'SOFT' 100, 'WONK' 1; }
table, .n, .award-val, .pick-val, .lc-row, .ch-p, .rb, .facts, .kpi b, .hb-amt { font-variant-numeric: tabular-nums; }
.award-tag, .award2 .award-tag, .pick-tag, .hh-kicker, .an-tip b, .ch-t, .eyebrow, .need-chips .nc-k, .tag-recur {
  font-family: var(--hand); text-transform: none; letter-spacing: .01em; font-weight: 700; line-height: 1.1;
}
.award2 .award-tag, .ch-t, .need-chips .nc-k, .pick-tag { font-size: 17px; }
.hh-kicker { font-size: 19px; }
.award-tag, .an-tip b, .eyebrow, .tag-recur { font-size: max(16px, 1em); }

/* Unsplash stand-in photos: muted and veiled so they sit behind the content. */
.stock { position: relative; display: block; width: 100%; height: 100%; min-height: 80px; overflow: hidden; border-radius: inherit; background: var(--dept-l, #f0ece1); }
.stock img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) sepia(.14) contrast(.94) brightness(1.03); }
.stock::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--dept-l, #f8f4ea) 42%, transparent); pointer-events: none; }
.product-hero.slim-hero.has-photo .wrap { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); align-items: center; }
.hub-photo { margin: 0; }
.hub-photo .stock { aspect-ratio: 4 / 3; height: auto; border-radius: 26px 26px 26px 6px; box-shadow: 0 0 0 6px var(--linen, #fffdf7); }
.hub-photo figcaption, .photo-credits { font-size: 11px; color: var(--ink-soft); margin-top: 8px; }
.hub-photo figcaption a, .photo-credits a { color: inherit; }
.photo-credits { margin-top: 18px; }
@media (max-width: 860px) { .product-hero.slim-hero.has-photo .wrap { grid-template-columns: 1fr; } .hub-photo { max-width: 420px; } }

/* ---------- blog posts ---------- */
.post-head { padding-block: 28px 8px; }
.post-head h1 { font: 600 clamp(30px, 5vw, 46px)/1.1 var(--head); max-width: 22ch; text-wrap: balance; margin: 0 0 16px; }
.post-answer { background: var(--cloud); border-radius: 18px; padding: 16px 20px; max-width: 72ch; border-left: 5px solid var(--rain); font-size: 18px; }
.post-answer p { margin: 0; }
.post-by { font-size: 14px; color: var(--ink-soft); margin: 14px 0 2px; }
.post-disclose { margin: 0; }
.post-photo { margin: 18px 0 6px; }
.post-photo img { width: 100%; max-height: 440px; object-fit: cover; border-radius: 22px; display: block; }
.post-cover img { height: auto; max-height: none; max-width: 820px; aspect-ratio: 16 / 9; object-fit: contain; }
.post-photo figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.post-body { padding-block: 10px 28px; }
.post-body h2 { font: 600 26px/1.2 var(--head); margin-top: 34px; text-wrap: balance; }
.post-body h3 { font: 600 19px/1.3 var(--head); }
.post-table { overflow-x: auto; margin: 18px 0; max-width: 100%; }
.post-table table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--cloud); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
.post-table caption { text-align: left; font: 600 17px/1.3 var(--head); padding: 0 0 8px; }
.post-table th, .post-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-table thead th { background: var(--dept-l, #e8efdd); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.post-table tbody th { font-weight: 600; }
.post-chart { margin: 18px 0; max-width: 760px; }
.post-callout { border-radius: 16px; padding: 14px 18px; margin: 18px 0; background: var(--cloud); border: 2px dashed var(--line); }
.post-callout p { margin: 0; }
.post-check { background: var(--cloud); border-radius: 16px; padding: 14px 18px; margin: 18px 0; }
.post-check ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.post-check li::before { content: '☐ '; color: var(--rain); }
.post-steps { padding-left: 22px; }
.post-steps li { margin: 8px 0; }
.post-sources ul { font-size: 15px; }
.post-grid { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.post-grid img, .blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.post-toc { background: var(--cloud); border-radius: 16px; padding: 14px 18px; margin: 10px 0 24px; font-size: 15px; }
.post-toc ol { margin: 6px 0 0; padding-left: 20px; columns: 2 220px; }
.post-toc li { margin: 3px 0; break-inside: avoid; }
.post-table thead th[role=button] { cursor: pointer; user-select: none; }
.post-table thead th[data-dir=asc]::after { content: ' ▲'; } .post-table thead th[data-dir=desc]::after { content: ' ▼'; }
.post-tool { background: var(--dept-l, #e8efdd); border-radius: 20px; padding: 18px 20px; margin: 22px 0; }
.post-tool h3 { margin: 0 0 4px; }
.post-tool form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0; }
.post-tool label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.post-tool input, .post-tool select { font: inherit; font-size: 16px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--cloud); color: var(--ink); min-width: 0; max-width: 100%; }
.post-tool input { width: 9ch; }
.post-tool output { display: block; background: var(--cloud); border-radius: 14px; padding: 12px 14px; margin-top: 8px; }
.post-tool output ul { margin: 6px 0 0; padding-left: 20px; }
.post-table tr.is-hit { outline: 3px solid var(--rain); outline-offset: -3px; }
.post-table tr[hidden] { display: none; }
/* Spec tables: description line, feature tags, check columns with maker-confidence marks. */
.explorer .row-desc { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-soft); line-height: 1.35; max-width: 52ch; }
.explorer .row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.explorer .row-tags i { font-style: normal; font-family: var(--hand); font-weight: 700; font-size: 14px; line-height: 1.1; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--dept, #c3d3b0) 45%, #fffdf7); color: var(--ink); }
.explorer th.c, .explorer td.c { text-align: center; width: 64px; padding-inline: 4px; }
.explorer th.c span { display: inline-block; font-size: 11px; line-height: 1.15; letter-spacing: .02em; max-width: 72px; white-space: normal; }
.ck { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; }
.ck.yes { background: #dfeedd; color: #2f5e2a; }
.ck.no { background: #efece6; color: #9a9389; font-size: 11px; }
.ck.unk { background: transparent; color: #a8a196; border: 1.5px dashed #c9c2b6; font-size: 12px; }
.ck-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--ink-soft); }
.ck-legend .ck { width: 18px; height: 18px; font-size: 11px; margin-right: -4px; }
.ck-only { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); margin-left: 6px; }
@media (max-width: 700px) { .explorer th.c, .explorer td.c { width: 40px; } .explorer th.c span { font-size: 10px; } .explorer .row-desc { font-size: 12px; } }

.explorer td.nm { min-width: 250px; }
.explorer td.t { text-align: left; white-space: normal; max-width: 180px; font-size: 13px; line-height: 1.35; color: var(--ink); }
@media (max-width: 700px) { .explorer td.nm { min-width: 190px; } }
.explorer th.t { text-align: left; }

/* Spec tables, storybook pass: soft card, Gaegu headers, dotted trail between rows, cards on phones. */
.results .table-scroll { background: var(--linen, #fffdf7); border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 26px; box-shadow: 0 6px 0 color-mix(in srgb, var(--dept, #c3d3b0) 45%, transparent); }
.explorer thead th, .explorer thead td { background: color-mix(in srgb, var(--dept-l, #f4efe1) 85%, #fffdf7); border-bottom: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); padding-top: 14px; padding-bottom: 12px; }
.explorer thead th button, .explorer thead th > span { font-family: var(--hand); font-weight: 700; font-size: 18px; letter-spacing: .01em; color: var(--ink); }
.explorer thead th.c span { font-size: 14px; line-height: 1.05; max-width: 78px; }
.explorer tbody td { border-bottom: 2px dotted color-mix(in srgb, var(--ink) 16%, transparent); }
.explorer tbody tr { transition: background-color .15s; }
.explorer tbody tr:hover > td { background: color-mix(in srgb, var(--dept-l, #f4efe1) 60%, transparent); }
.explorer tbody tr[hidden] { display: none !important; }
.explorer .brand { color: var(--ink-soft); }
.ck.yes { background: #dcebd6; color: #2f5e2a; box-shadow: inset 0 0 0 1.5px #a9c79f; }
.ck.no { background: #f1ede6; color: #a59d91; }
.ck.unk { color: #b39a5a; border-color: #dcc98f; background: #fdf8ea; }
.ck-legend { background: #fffdf7; border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: 6px 12px; border-radius: 999px; }
/* Tablet */
@media (max-width: 1024px) {
  .explorer td.nm { min-width: 210px; }
  .explorer td.t { max-width: 140px; }
  .explorer thead th button { font-size: 16px; }
  .explorer th.c, .explorer td.c { width: 54px; }
}
/* Narrow table area (phones, and tablets with the filter column open): each row becomes a little card */
.results { container: results / inline-size; }
@container results (max-width: 700px) {
  .results .table-scroll { background: none; border: 0; box-shadow: none; overflow: visible; }
  .explorer, .explorer tbody { display: block; }
  .explorer thead { display: none; }
  .explorer tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 12px 12px 14px; background: var(--linen, #fffdf7); border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 20px; box-shadow: 0 4px 0 color-mix(in srgb, var(--dept, #c3d3b0) 40%, transparent); }
  .explorer tbody tr:hover > td { background: none; }
  .explorer tbody td { display: block; border: 0; padding: 0; }
  .explorer td.cmp { order: 0; width: auto; }
  .explorer td.nm { order: 1; flex: 1 1 calc(100% - 90px); min-width: 0; }
  .explorer td:last-child { order: 2; margin-left: auto; }
  .explorer td.n, .explorer td.t, .explorer .hide-sm { order: 3; display: inline-flex; gap: 4px; align-items: baseline; max-width: none; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--dept-l, #f4efe1) 80%, #fffdf7); font-size: 13px; white-space: normal; text-align: left; }
  .explorer td.n::before, .explorer td.t::before { content: attr(data-label); font-family: var(--hand); font-weight: 700; font-size: 15px; color: var(--ink-soft); margin-right: 2px; }
  .explorer td:is(.n, .t):has(> .na:only-child) { display: none; }
  .explorer td.c { order: 4; display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 3px 9px 3px 4px; border-radius: 999px; background: #fffdf7; border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: 12px; }
  .explorer td.c::after { content: attr(data-label); font-weight: 600; color: var(--ink); }
  .explorer td.c.ck-unk::after { color: #a8a196; }
  .explorer td.c.ck-no::after { color: #a59d91; text-decoration: line-through; text-decoration-color: color-mix(in srgb, #a59d91 60%, transparent); }
  .explorer td.c .ck { width: 18px; height: 18px; font-size: 11px; }
  .explorer td.nm a { gap: 10px; }
  .explorer tbody tr > td:last-child { order: 2 !important; display: block !important; background: none !important; padding: 0 !important; margin-left: auto; }
  .explorer tbody tr > td:last-child::before { content: none !important; }
  .explorer .thumb { display: inline-grid; }
}

/* Header Budget pill */
.ha-budget { background: color-mix(in srgb, var(--sun, #e9c46a) 45%, #fffdf7); }
.ha-budget svg { background: #fffdf7; color: #8a6a1f; }
@media (min-width: 1181px) and (max-width: 1460px) { .ha small { display: none; } .ha { padding: 6px 14px 6px 8px; } }

/* Home: budget slider with jars */
.home-budget .hb-head { display: block; margin-bottom: 18px; }
.hb-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; background: #fffdf7; border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 30px; padding: 26px 28px; box-shadow: 0 6px 0 color-mix(in srgb, #e9c46a 45%, transparent); }
.hb-controls { display: grid; gap: 14px; min-width: 0; }
.hb-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hb-amount span { font-family: var(--hand); font-weight: 700; font-size: 20px; color: var(--ink-soft); }
.hb-amount output { font: 600 46px/1 var(--head); font-variation-settings: 'SOFT' 100, 'WONK' 1; font-variant-numeric: tabular-nums; color: var(--ink); }
#hb-range { --p: 14%; width: 100%; appearance: none; -webkit-appearance: none; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #c8693a 0 var(--p), color-mix(in srgb, var(--ink) 12%, #fffdf7) var(--p)); outline-offset: 6px; }
#hb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #e9c46a; border: 3px solid #3d3a33; box-shadow: 0 3px 0 #3d3a33; cursor: grab; }
#hb-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #e9c46a; border: 3px solid #3d3a33; cursor: grab; }
.hb-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-presets button { font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); background: #fffdf7; cursor: pointer; color: var(--ink); }
.hb-presets button b { font-family: var(--head); margin-right: 4px; }
.hb-presets button:hover { border-color: var(--ink); }
.hb-stage { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hb-stage legend { font-family: var(--hand); font-weight: 700; font-size: 18px; color: var(--ink-soft); margin-bottom: 4px; }
.hb-stage label { position: relative; }
.hb-stage input { position: absolute; opacity: 0; }
.hb-stage span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, #8fa382 22%, #fffdf7); font-size: 14px; font-weight: 600; cursor: pointer; }
.hb-stage input:checked + span { background: #4f6b47; color: #fffdf7; }
.hb-stage input:focus-visible + span { outline: 3px solid #e9c46a; }
.hb-lines { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; min-height: 3em; }
.hb-controls .btn { justify-self: start; }
.hb-age { font-size: 14px; color: var(--ink); }
.hb-jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.hb-jar { margin: 0; text-align: center; }
.hb-jar svg { width: 100%; max-width: 150px; height: auto; display: block; margin: 0 auto; }
.hb-jar .jar-level { transition: transform .35s ease; }
.hb-jars.is-empty .hb-jar { opacity: .45; }
.hb-min { all: unset; cursor: pointer; display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.hb-min:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; }
.hb-jar figcaption { display: grid; gap: 2px; margin-top: 6px; }
.hb-jar figcaption b { font: 600 22px var(--head); font-variant-numeric: tabular-nums; }
.hb-jar figcaption span { font-family: var(--hand); font-weight: 700; font-size: 17px; color: var(--ink-soft); }
@media (max-width: 860px) { .hb-play { grid-template-columns: 1fr; padding: 20px 16px; } .hb-amount output { font-size: 38px; } .hb-jars { order: -1; } }

/* Budget pages: running total, groups, tier switch, later list */
.plan-stage legend { font-family: var(--hand); font-weight: 700; font-size: 18px; }
.plan-bar { position: sticky; top: 8px; z-index: 5; margin: 0 0 14px; padding: 12px 16px; background: #fffdf7; border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 20px; box-shadow: 0 4px 0 color-mix(in srgb, #e9c46a 40%, transparent); }
.pb-nums { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 15px; color: var(--ink-soft); }
.pb-nums b { font: 600 22px var(--head); color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-track { display: flex; height: 14px; margin: 8px 0 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink) 9%, #fffdf7); border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.pb-track i { display: block; transition: width .3s; }
.pb-big { background: #c8693a; } .pb-everyday { background: #e9c46a; } .pb-ongoing { background: #8fa382; }
.pb-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-soft); }
.pb-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.plan tr.grp th { background: color-mix(in srgb, var(--dept-l, #f4efe1) 80%, #fffdf7); padding-top: 14px; padding-bottom: 10px; }
.plan tr.grp th span { font-family: var(--hand); font-weight: 700; font-size: 21px; color: var(--ink); }
.plan tr.grp th small { font-size: 13px; color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
.plan tr.grp th b { float: right; font: 600 18px var(--head); font-variant-numeric: tabular-nums; }
.plan tr.grp-big th { box-shadow: inset 5px 0 0 #c8693a; } .plan tr.grp-everyday th { box-shadow: inset 5px 0 0 #e9c46a; } .plan tr.grp-ongoing th { box-shadow: inset 5px 0 0 #8fa382; }
.tier { display: inline-flex; margin-top: 6px; border: 1.5px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; overflow: hidden; background: #fffdf7; }
.tier button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
.tier button + button { border-left: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.tier button[aria-pressed="true"] { background: #4f6b47; color: #fffdf7; }
.tier button[data-v="3"][aria-pressed="true"] { background: #c8693a; }
.tier button[data-v="0"][aria-pressed="true"] { background: #a59d91; }
.plan-later { margin-top: 20px; padding: 18px 20px; border-radius: 22px; background: color-mix(in srgb, #8fa382 14%, #fffdf7); border: 2px dashed color-mix(in srgb, #4f6b47 35%, transparent); }
.plan-later h3 { margin: 0 0 4px; }
.plan-later p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; }
.plan-later ul { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.plan-later li { background: #fffdf7; border-radius: 14px; padding: 8px 12px; font-size: 14px; }
.plan-later li span { font-family: var(--hand); font-weight: 700; font-size: 16px; color: #4f6b47; margin-left: 4px; }
.plan-later li small { display: block; color: var(--ink-soft); font-size: 12px; }
@media (max-width: 700px) {
  .plan-bar { top: auto; bottom: 8px; position: sticky; }
  .plan thead { display: none; }
  .plan, .plan tbody, .plan tfoot { display: block; }
  .plan tbody tr:not(.grp) { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; padding: 12px; margin: 8px 0; background: #fffdf7; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--ink) 10%, transparent); }
  .plan tbody tr:not(.grp) > * { border: 0; padding: 0; }
  .plan tbody tr:not(.grp) > td:nth-last-child(3) { grid-column: 1 / -1; }
  .plan tr.grp { display: block; } .plan tr.grp th { display: block; border-radius: 14px; }
  .plan tfoot tr { display: flex; justify-content: space-between; }
}
.plan th .tier { display: flex; width: max-content; }
.plan tr.grp th b { margin-top: 4px; }

/* Meadow footer */
.meadow-foot { position: relative; background: none; color: var(--ink); padding: 0; margin-top: 40px; border: 0; }
.meadow-foot .mf-ground { display: block; width: 100%; height: 70px; margin-bottom: -2px; }
.mf-body { background: var(--mf-body, #a9bb98); padding: 6px 0 22px; }
.mf-top { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; background: #fffdf7; border-radius: 28px; padding: 26px 28px; border: 2px solid color-mix(in srgb, #3d3a33 14%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, #4f6b47 35%, transparent); }
.mf-logo img { width: 190px; height: auto; display: block; }
.mf-brand p { margin: 10px 0; color: var(--ink-soft); font-size: 15px; }
.mf-cta { font-weight: 700; color: var(--ink); font-size: 14px; }
.meadow-foot h3 { font-family: var(--hand); font-weight: 700; font-size: 20px; margin: 0 0 8px; color: var(--ink); }
.mf-depts ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mf-depts a { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--dept-l, #f4efe1); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.mf-depts a:hover { box-shadow: inset 0 0 0 2px var(--dept, #c3d3b0); }
.mf-ico .ico { width: 30px; height: 30px; display: block; }
.mf-all { font-weight: 700; font-size: 14px; color: var(--ink); }
.mf-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mf-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mf-links a { color: var(--ink); text-decoration: none; font-size: 14px; }
.mf-links a:hover { text-decoration: underline; }
.mf-legal { margin-top: 16px; color: #2f3b2c; font-size: 12px; }
.mf-legal p { margin: 4px 0; max-width: 90ch; }
.mf-legal p:last-child { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mf-legal a { color: inherit; }
.mf-bug { position: absolute; top: 18px; right: 12%; width: 46px; height: 26px; }
@media (max-width: 980px) { .mf-top { grid-template-columns: 1fr; } .mf-depts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mf-top { padding: 20px 16px; } .mf-links { grid-template-columns: 1fr 1fr; } }
/* Site map */
.sitemap { display: grid; gap: 22px; }
.sm-dept { padding: 18px 20px; border-radius: 22px; background: var(--dept-l, #f4efe1); }
.sm-dept h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.sm-dept { --sm: 1; }
.sm-dept > .sm-type { display: inline-block; vertical-align: top; width: min(100%, 280px); margin: 0 18px 12px 0; }
.sm-type h3 { margin: 0 0 4px; font-size: 17px; }
.sm-type ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }

/* Category headers: softer tint, dotted bee-trail texture, wavy bottom, picture and fact tiles on the right */
body .product-hero.slim-hero { position: relative; background-color: color-mix(in srgb, var(--dept-l, #f4efe1) 72%, #fffdf7); background-image: radial-gradient(circle, color-mix(in srgb, #3d3a33 9%, transparent) 1.2px, transparent 1.6px); background-size: 22px 22px; padding-bottom: 54px; }
body .product-hero.slim-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; background: var(--mist); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C120 0 260 0 400 12S680 26 820 14 1100 0 1240 10 1500 26 1600 12V28Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C120 0 260 0 400 12S680 26 820 14 1100 0 1240 10 1500 26 1600 12V28Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.product-hero.slim-hero.has-side .wrap { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); align-items: center; gap: 28px; }
.hero-side { display: grid; justify-items: center; gap: 14px; }
.hero-art { display: grid; place-items: center; width: 210px; height: 160px; background: #fffdf7; border-radius: 52% 48% 46% 54% / 60% 58% 42% 40%; box-shadow: 0 0 0 7px color-mix(in srgb, var(--dept, #c3d3b0) 55%, transparent), 0 10px 0 color-mix(in srgb, var(--dept, #c3d3b0) 40%, transparent); }
.hero-art .ico { width: 62%; height: auto; max-width: none; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.hero-side .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-side .facts li { display: grid; gap: 0; text-align: center; background: #fffdf7; border-radius: 16px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft); border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.hero-side .facts b { font: 600 20px var(--head); color: var(--ink); font-variant-numeric: tabular-nums; }
.slim-hero .summary { color: color-mix(in srgb, var(--ink) 78%, transparent); }
@media (max-width: 860px) { .product-hero.slim-hero.has-side .wrap { grid-template-columns: 1fr; } .hero-side { grid-auto-flow: column; justify-content: start; align-items: center; } .hero-art { width: 110px; height: 86px; } }
@media (max-width: 480px) { .hero-art { display: none; } .hero-side { justify-items: start; } .hero-side .facts { justify-content: start; } }
body .product-hero .hero-art .ico { box-shadow: none !important; background: none !important; border-radius: 0 !important; padding: 0 !important; width: 62%; height: auto; }
/* Header: keep logo, search and the three buttons on one row on laptop widths */
@media (min-width: 1181px) and (max-width: 1520px) {
  .site-head .site-search { flex: 1 1 200px; min-width: 180px; margin-left: 20px; }
  .ha small { display: none; }
  .ha { padding: 5px 14px 5px 6px; font-size: 14px; gap: 7px; }
  .ha svg { width: 30px; height: 30px; padding: 6px; }
  .head-acts { gap: 8px; flex: none; }
}
@media (min-width: 1521px) { .site-head .site-search { flex: 1 1 260px; min-width: 220px; margin-left: 28px; } .head-acts { flex: none; } }

/* Spec tables: one header size, sort arrow kept on the label's line, and the whole table fits on first load (no sideways scroll). */
.results .table-scroll { overflow-x: hidden; }
.explorer { width: 100%; }
.explorer thead th { vertical-align: bottom; }
.explorer thead th button, .explorer thead th > span, .explorer thead th.c span { font-family: var(--hand); font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: .01em; color: var(--ink); }
.explorer thead th button { display: inline-flex; align-items: flex-end; gap: 3px; white-space: normal; text-align: inherit; }
@container results (max-width: 1100px) { .explorer th, .explorer td { padding-inline: 7px; } .explorer td.n { white-space: normal; } }
.explorer th[aria-sort] button::after { content: '↕'; font-size: 14px; }
.explorer th[aria-sort=ascending] button::after { content: '↑'; }
.explorer th[aria-sort=descending] button::after { content: '↓'; }
.explorer th.c, .explorer td.c { width: 116px; }
.explorer td.n.hide-sm, .explorer th.n.hide-sm { white-space: normal; max-width: 150px; }
.explorer thead th.c span { display: inline-block; max-width: 112px; white-space: normal; text-align: center; }
.explorer td.nm { min-width: 0; }
.explorer td.t { max-width: none; }
@media (max-width: 1024px) { .explorer thead th button, .explorer thead th.c span { font-size: 15px; } .explorer th.c, .explorer td.c { width: 96px; } .explorer td.nm { min-width: 0; } }
/* Switch to cards a little earlier so the table never has to squeeze or scroll. */
@container results (max-width: 860px) {
  .results .table-scroll { background: none; border: 0; box-shadow: none; overflow: visible; }
  .explorer, .explorer tbody { display: block; }
  .explorer thead { display: none; }
  .explorer tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 12px 12px 14px; background: var(--linen, #fffdf7); border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 20px; box-shadow: 0 4px 0 color-mix(in srgb, var(--dept, #c3d3b0) 40%, transparent); }
  .explorer tbody tr:hover > td { background: none; }
  .explorer tbody td { display: block; border: 0; padding: 0; }
  .explorer td.cmp { order: 0; width: auto; }
  .explorer td.nm { order: 1; flex: 1 1 calc(100% - 90px); min-width: 0; }
  .explorer td.n, .explorer td.t, .explorer .hide-sm { order: 3; display: inline-flex; gap: 4px; align-items: baseline; max-width: none; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--dept-l, #f4efe1) 80%, #fffdf7); font-size: 13px; white-space: normal; text-align: left; }
  .explorer td.n::before, .explorer td.t::before { content: attr(data-label); font-family: var(--hand); font-weight: 700; font-size: 15px; color: var(--ink-soft); margin-right: 2px; }
  .explorer td:is(.n, .t):has(> .na:only-child) { display: none; }
  .explorer td.c { order: 4; display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 3px 9px 3px 4px; border-radius: 999px; background: #fffdf7; border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: 12px; }
  .explorer td.c::after { content: attr(data-label); font-weight: 600; color: var(--ink); }
  .explorer td.c.ck-unk::after { color: #a8a196; }
  .explorer td.c.ck-no::after { color: #a59d91; text-decoration: line-through; text-decoration-color: color-mix(in srgb, #a59d91 60%, transparent); }
  .explorer td.c .ck { width: 18px; height: 18px; font-size: 11px; }
  .explorer tbody tr > td:last-child { order: 2 !important; display: block !important; background: none !important; padding: 0 !important; margin-left: auto; }
  .explorer tbody tr > td:last-child::before { content: none !important; }
  .explorer .thumb { display: inline-grid; }
}
.plan .shop-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.plan .shop-links a { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #e9c46a 30%, #fffdf7); color: var(--ink); text-decoration: none; border: 1.5px solid color-mix(in srgb, #e9c46a 70%, transparent); }
.plan .shop-links a:hover { background: #e9c46a; }
.plan .shop-links.also { font-size: 12px; color: var(--ink-soft); align-items: center; }
.plan .shop-links.also a { background: none; border-color: color-mix(in srgb, var(--ink) 14%, transparent); font-weight: 500; }
.plan .set-aside { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 500; }

/* ---------- Mobile cleanup ---------- */
@media (max-width: 700px) {
  /* Home hero: one search box (the header's), short kicker, chips scroll sideways */
  .home-hero .hh-search { display: none; }
  .home-hero .hh-kicker { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .home-hero h1 { font-size: 34px; }
  .home-hero .hh-quick { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); }
  .home-hero .hh-quick::-webkit-scrollbar { display: none; }
  .home-hero .hh-quick a { flex: none; }
  /* Departments: compact tiles; the long lists live in the menu */
  .dept-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dept-cards > li { position: relative; }
  .dept-cards .dc-art { height: 84px; }
  .dept-cards .dc-art .stock, .dept-cards .dc-art .img-ph { min-height: 84px; height: 84px; }
  .dept-cards .dc-body { padding: 10px 12px 12px; }
  .dept-cards .dc-body h3 { font-size: 18px; margin: 0; }
  .dept-cards .dc-body ul { display: none; }
  .dept-cards .dc-body h3 a, .dept-cards .dc-body a.dc-go { color: inherit; }
  /* Big buys and other card rows: swipe sideways instead of a tall grid */
  .big-cards, .vs-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); scrollbar-width: none; }
  .big-cards::-webkit-scrollbar, .vs-cards::-webkit-scrollbar { display: none; }
  .big-cards > li, .vs-cards > li { flex: 0 0 72%; scroll-snap-align: start; }
  /* List pages: quick filter chips in one swipeable row */
  .qchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .qchips::-webkit-scrollbar { display: none; }
  .qchips > * { flex: none; }
  .ck-legend { border-radius: 16px; font-size: 11px; }
  /* Section spacing */
  main > section, main section[data-band] { padding-top: 28px; padding-bottom: 28px; }
}
.dc-link { color: inherit; text-decoration: none; }
@media (max-width: 700px) { .dept-cards .dc-link::after { content: ''; position: absolute; inset: 0; } }
@media (max-width: 700px) {
  .need-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 6px; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); }
  .need-chips::-webkit-scrollbar { display: none; }
  .need-chips > * { flex: none; }
  .need-chips .nc-k { align-self: center; white-space: nowrap; }
  .hub-photo .stock { aspect-ratio: 16 / 7; border-radius: 18px; box-shadow: none; }
  .hub-photo figcaption { font-size: 10px; }
  .product-hero.slim-hero { padding-bottom: 40px; }
  .plan-opts fieldset { margin-bottom: 4px; }
}

/* Draft banner on private guide previews */
.post-draft { background: #fff3c4; border-bottom: 2px solid #e2c55a; padding: 10px 0; font-size: 15px; }
.post-draft a { margin-left: 6px; }

/* Footer social links */
.mf-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; }
.mf-social > span { font-family: var(--hand); font-weight: 700; font-size: 17px; margin-right: 2px; }
.mf-social a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #fffdf7; border: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); text-decoration: none; font-weight: 600; }
.mf-social a:hover { background: var(--dept-l, #f4efe1); }
.mf-social svg { width: 18px; height: 18px; }
/* Guides: main-nav link and filter bar */
.nav-guides .nav-g-ico { width: 18px; height: 18px; fill: var(--ico-fill, #f3dfa6); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.g-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; margin: 20px 0 6px; padding: 16px; background: var(--cloud, #fffdf6); border-radius: 22px; box-shadow: 0 2px 0 rgba(61, 58, 51, .08); }
.g-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid rgba(61, 58, 51, .15); border-radius: 999px; padding: 0 14px; }
.g-search:focus-within { border-color: var(--rain, #8fa382); }
.g-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.g-search input { all: unset; flex: 1; min-width: 0; padding: 11px 0; font: 400 16px/1.2 var(--body, inherit); color: var(--ink); }
.g-dept { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.g-dept select { font: 600 15px var(--body, inherit); color: var(--ink); padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(61, 58, 51, .15); background: #fff; }
.g-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 2px solid rgba(61, 58, 51, .12); font: 700 18px/1 var(--hand, inherit); color: var(--ink); }
.g-chip small { font: 600 12px var(--body, inherit); color: var(--ink-soft); }
.g-chip:hover { border-color: var(--rain, #8fa382); }
.g-chip:focus-visible { outline: 3px solid var(--rain, #8fa382); outline-offset: 2px; }
.g-chip[aria-pressed="true"] { background: var(--ink, #3d3a33); border-color: var(--ink, #3d3a33); color: #fff; }
.g-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.g-count { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-soft); }
.g-empty { padding: 30px; text-align: center; color: var(--ink-soft); }
.g-reset { all: unset; cursor: pointer; text-decoration: underline; font-weight: 600; color: var(--ink); }
@media (max-width: 700px) {
  .g-filter { grid-template-columns: 1fr; padding: 12px; }
  .g-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .g-chip { flex: none; }
  .g-dept { justify-content: space-between; }
}

/* Home: brand tiles without logos — the name as a typeset mark on the brand's main department tint */
.brand-tiles a { gap: 10px; padding: 10px; text-align: left; }
.bt-mark { display: grid; place-items: center; gap: 8px; min-height: 120px; padding: 14px 10px 10px; border-radius: 14px; background: var(--dept-l, #f3eedf); background-image: radial-gradient(rgba(61, 58, 51, .07) 1.2px, transparent 1.4px); background-size: 12px 12px; }
.bt-name { font: 600 clamp(18px, 1.6vw, 23px)/1.1 var(--head); text-align: center; text-wrap: balance; color: var(--ink); }
.bt-icos { display: flex; gap: 4px; justify-content: center; }
.bt-icos .ico { width: 30px; height: 30px; box-shadow: none !important; background: none !important; }
.bt-meta { display: grid; gap: 1px; padding: 0 4px 2px; }
.bt-meta b { font-size: 15px; }
.bt-meta span { font-size: 13px; color: var(--ink-soft); }
.brand-tiles a:hover .bt-mark { background-color: var(--dept, #e9dcc0); }

/* Home: head-to-head cards — category art for each side, brand under it, and the first real spec difference */
.vs-row { gap: 10px; }
.vs-side { display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 16px; background: var(--dept-l, #f3eedf); background-image: radial-gradient(rgba(61, 58, 51, .07) 1.2px, transparent 1.4px); background-size: 12px 12px; }
.vs-art .ico { width: 64px; height: 64px; box-shadow: none !important; background: none !important; }
.vs-side small { font: 700 17px/1 var(--hand); color: var(--ink-soft); text-align: center; }
.vs-row i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 16px var(--hand); }
.vs-diff { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--dept-l, #f3eedf); font-size: 14px; line-height: 1.4; color: var(--ink); }
.brand-tiles .bt-mark .bt-name { font: 600 21px/1.1 var(--head); color: var(--ink); }
.brand-tiles .bt-icos svg { width: 32px; height: 32px; }
.vs-cards .vs-side .vs-art { display: grid; place-items: center; width: 100%; }
.vs-cards .vs-side .vs-art svg { width: 76px; height: 76px; }
@media (max-width: 1024px) { .brand-tiles .bt-mark .bt-name { font-size: 18px; } }
.brand-tiles a { height: 100%; align-content: start; }

/* Seasonal footer critters, standing on the hill line */
.mf-critter { position: absolute; top: 50px; height: auto; transform: translate(-50%, -100%); pointer-events: none; }
.mf-fireflies { top: 46px; }
.mf-acorn { top: 54px; }
@media (max-width: 700px) { .mf-critter { scale: .8; transform-origin: bottom center; } .mf-fireflies { width: 140px !important; } }
/* Department row + Guides: compact up to wide screens so the row never runs past the page edge. */
@media (min-width: 1181px) {
  .dept-btn { padding: 10px 6px; gap: 6px; font-size: 14.5px; }
  .dept-ico { width: 28px; height: 28px; border-radius: 9px; }
  .dept-btn .chev { display: none; }
  .nav-link { padding: 10px 6px; font-size: 14.5px; }
}
@media (min-width: 1181px) { .site-nav { min-width: 0; } .nav-menu { min-width: 0; } }
@media (min-width: 1181px) { .nav-guides .nav-g-ico { width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 9px; background: #efe6d2; } .nav-guides .nav-link { gap: 6px; } }
/* Head-to-heads: centered cards using the illustrated category art */
.vs-cards a { text-align: center; justify-items: center; }
.vs-cards .vs-row { width: 100%; justify-items: stretch; }
.vs-cards .vs-side { justify-items: center; align-content: center; }
.vs-cards .vs-side .vs-art { display: flex; justify-content: center; align-items: center; }
.vs-cards .vs-side .vs-art svg { width: 84px; height: 84px; margin: 0 auto; }
.vs-cards .vs-diff { width: 100%; box-sizing: border-box; }
.brand-tiles a { text-align: center; }
.brand-tiles .bt-mark { min-height: 96px; }
.brand-tiles .bt-mark .bt-name { font-size: 23px; }
/* Department row: chevrons back so each department reads as a dropdown. The row may run wider than the logo/search
   row (up to 1360px) so everything fits; below 1300px the icon tiles shrink. */
@media (min-width: 1181px) {
  .site-nav { --navw: min(calc(100vw - 64px), 1360px); width: var(--navw); flex: 0 0 var(--navw); margin-left: calc((100% - var(--navw)) / 2); margin-right: calc((100% - var(--navw)) / 2); }
  .nav-menu { justify-content: center; gap: 4px; }
  .dept-btn .chev { display: inline-block; width: 10px; opacity: .7; margin-left: 1px; }
  .dept-btn:hover .chev, .dept.open .chev { opacity: 1; }
  .dept.open .chev { transform: rotate(180deg); }
}
@media (min-width: 1181px) and (max-width: 1399px) {
  .dept-ico { width: 24px; height: 24px; border-radius: 8px; }
  .dept-ico .ico { width: 18px; height: 15px; }
  .dept-btn, .nav-link { padding: 10px 4px; font-size: 14px; gap: 4px; }
  .nav-menu { gap: 0; }
}
@media (min-width: 1181px) and (max-width: 1399px) { .dept-btn, .nav-link { font-size: 13.5px; padding: 10px 3px; } .dept-btn .chev { width: 8px; } }
@media (min-width: 1181px) { .site-nav .nav-menu { width: 100%; } }

/* Seasonal cursor (desktop mice only); text fields keep the text cursor. */
@media (hover: hover) and (pointer: fine) {
  body.season-fall, body.season-fall a, body.season-fall button, body.season-fall label, body.season-fall summary, body.season-fall select, body.season-fall [role="button"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%2022v8%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M16.0%202.6%20L18.3%207.4%20L21.6%205.9%20L20.9%2011.1%20L26.2%209.2%20L24.7%2013.6%20L29.2%2015.1%20L24.0%2018.8%20L25.5%2021.8%20L18.8%2020.7%20L16.8%2023.6%20L15.2%2023.6%20L13.2%2020.7%20L6.5%2021.8%20L8.0%2018.8%20L2.8%2015.1%20L7.3%2013.6%20L5.8%209.2%20L11.1%2011.1%20L10.4%205.9%20L13.7%207.4Z%22%20fill%3D%22%23e07b3c%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%2022V6.5M16%2017l6.5-5.5M16%2017l-6.5-5.5M16%2020.5l6-1.2M16%2020.5l-6-1.2%22%20fill%3D%22none%22%20stroke%3D%22%23a8461f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 16 3, auto; }
  body.season-winter, body.season-winter a, body.season-winter button, body.season-winter label, body.season-winter summary, body.season-winter select, body.season-winter [role="button"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%2016L16.0%203.5M16.0%207.8L13.5%204.6M16.0%207.8L18.5%204.6M16%2016L26.8%209.8M23.1%2011.9L24.6%208.2M23.1%2011.9L27.1%2012.5M16%2016L26.8%2022.2M23.1%2020.1L27.1%2019.5M23.1%2020.1L24.6%2023.8M16%2016L16.0%2028.5M16.0%2024.2L18.5%2027.4M16.0%2024.2L13.5%2027.4M16%2016L5.2%2022.2M8.9%2020.1L7.4%2023.8M8.9%2020.1L4.9%2019.5M16%2016L5.2%209.7M8.9%2011.9L4.9%2012.5M8.9%2011.9L7.4%208.2%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M16%2016L16.0%203.5M16.0%207.8L13.5%204.6M16.0%207.8L18.5%204.6M16%2016L26.8%209.8M23.1%2011.9L24.6%208.2M23.1%2011.9L27.1%2012.5M16%2016L26.8%2022.2M23.1%2020.1L27.1%2019.5M23.1%2020.1L24.6%2023.8M16%2016L16.0%2028.5M16.0%2024.2L18.5%2027.4M16.0%2024.2L13.5%2027.4M16%2016L5.2%2022.2M8.9%2020.1L7.4%2023.8M8.9%2020.1L4.9%2019.5M16%2016L5.2%209.7M8.9%2011.9L4.9%2012.5M8.9%2011.9L7.4%208.2%22%20stroke%3D%22%23eaf3fa%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222.6%22%20fill%3D%22%23eaf3fa%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.3%22/%3E%3C/svg%3E") 16 16, auto; }
  body.season-spring, body.season-spring a, body.season-spring button, body.season-spring label, body.season-spring summary, body.season-spring select, body.season-spring [role="button"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23f6b3c0%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.4%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%224.7%22%20ry%3D%226.2%22%20transform%3D%22rotate%280%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%224.7%22%20ry%3D%226.2%22%20transform%3D%22rotate%2872%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%224.7%22%20ry%3D%226.2%22%20transform%3D%22rotate%28144%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%224.7%22%20ry%3D%226.2%22%20transform%3D%22rotate%28216%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%224.7%22%20ry%3D%226.2%22%20transform%3D%22rotate%28288%2016%2016%29%22/%3E%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fde3e8%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M16%205.2c-1.2%201.4-1.4%203.2-.6%204.6%22%20transform%3D%22rotate%280%2016%2016%29%22/%3E%3Cpath%20d%3D%22M16%205.2c-1.2%201.4-1.4%203.2-.6%204.6%22%20transform%3D%22rotate%2872%2016%2016%29%22/%3E%3Cpath%20d%3D%22M16%205.2c-1.2%201.4-1.4%203.2-.6%204.6%22%20transform%3D%22rotate%28144%2016%2016%29%22/%3E%3Cpath%20d%3D%22M16%205.2c-1.2%201.4-1.4%203.2-.6%204.6%22%20transform%3D%22rotate%28216%2016%2016%29%22/%3E%3Cpath%20d%3D%22M16%205.2c-1.2%201.4-1.4%203.2-.6%204.6%22%20transform%3D%22rotate%28288%2016%2016%29%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%223.8%22%20fill%3D%22%23f2c94c%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215.2%22%20r%3D%22.8%22%20fill%3D%22%23c98f1f%22/%3E%3Ccircle%20cx%3D%2217.2%22%20cy%3D%2216.4%22%20r%3D%22.8%22%20fill%3D%22%23c98f1f%22/%3E%3C/svg%3E") 16 16, auto; }
  body.season-summer, body.season-summer a, body.season-summer button, body.season-summer label, body.season-summer summary, body.season-summer select, body.season-summer [role="button"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M14.85%2010.80%20L10.00%2013.60%20L5.15%2010.80%20L5.15%205.20%20L10.00%202.40%20L14.85%205.20Z%22%20fill%3D%22%23f2c94c%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M24.55%2010.80%20L19.70%2013.60%20L14.85%2010.80%20L14.85%205.20%20L19.70%202.40%20L24.55%205.20Z%22%20fill%3D%22%23e9b23a%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M19.70%2019.20%20L14.85%2022.00%20L10.00%2019.20%20L10.00%2013.60%20L14.85%2010.80%20L19.70%2013.60Z%22%20fill%3D%22%23f6d77a%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M10.00%2019.20%20L5.15%2022.00%20L0.30%2019.20%20L0.30%2013.60%20L5.15%2010.80%20L10.00%2013.60Z%22%20fill%3D%22%23e9b23a%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M14.8%2021.4c0%202.2%201.4%203%201.4%204.6a1.4%201.4%200%200%201-2.8%200c0-1.6%201.4-2.4%201.4-4.6z%22%20fill%3D%22%23e9b23a%22%20stroke%3D%22%233d3a33%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M7.4%206.6l1.6-.9%22%20stroke%3D%22%23fff4c4%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 10 4, auto; }
  body input:not([type=checkbox]):not([type=radio]):not([type=range]), body textarea { cursor: text; }
}
/* Your car picker */
.car-pick { border: 0; margin: 10px 0 4px; padding: 12px 14px; border-radius: 16px; background: var(--dept-l, #f4efe1); }
.car-pick legend { font: 700 19px var(--hand); padding: 0; float: left; width: 100%; margin-bottom: 6px; }
.cp-row, .cp-manual { display: grid; grid-template-columns: .8fr 1fr 1.3fr; gap: 8px; clear: both; }
.cp-manual { grid-template-columns: .8fr 1fr 1.3fr auto; align-items: end; margin-top: 8px; }
.cp-manual[hidden] { display: none; }
.car-pick label { font-size: 13px; font-weight: 600; display: grid; gap: 4px; min-width: 0; }
.car-pick select, .car-pick input { width: 100%; min-width: 0; font: 500 15px var(--body, inherit); padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.car-pick select:disabled { opacity: .55; }
.cp-miss, .cp-use, .cp-clear { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; display: inline-block; }
.cp-use { text-decoration: none; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 12px; margin: 0; }
.cp-out p { margin: 8px 0 0; }
.cp-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cp-links a { font-weight: 600; }
@media (max-width: 560px) { .cp-row { grid-template-columns: 1fr 1fr; } .cp-row label:last-child { grid-column: 1 / -1; } .cp-manual { grid-template-columns: 1fr 1fr; } }

/* Hospital bag checklist */
.hb-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.hb-check { display: inline-flex !important; flex-direction: row !important; gap: 8px; align-items: center; }
.hb-progress { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.hb-list { list-style: none; padding: 0; margin: 0 0 18px; }
.hb-item { padding: 10px 0; border-bottom: 1px dotted var(--line); display: grid; gap: 2px; }
.hb-item[hidden] { display: none; }
.hb-item label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.hb-item input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--rain); flex: none; }
.hb-item input:checked + .hb-label { text-decoration: line-through; color: var(--ink-soft); }
.hb-item small, .hb-link, .hb-stat { margin-left: 30px; font-size: 13px; }
.hb-tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: #e3eefc; margin-left: 4px; white-space: nowrap; }
.hb-prov { background: #e6f2ea; }
.hb-stat { color: var(--rain-dark, #2f5e2a); font-weight: 600; }
.hb-stat:empty { display: none; }
.hb-share-box { background: #fff3c4; border: 2px solid #e2c55a; border-radius: 20px; padding: 16px 20px; margin: 22px 0; }
.hb-share-box h2 { margin-top: 0; }
@media print { .site-head, .site-foot, .hb-controls, .hb-progress button, .hb-share-box, .hb-link, .post-disclose, .faq, .hb-page .prose > :not(.hb-tool) { display: none !important; } .hb-item { break-inside: avoid; } }

.hb-top-cta { background: #fff3c4; border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.hb-controls .hb-check { flex-direction: row; align-self: center; }
.hb-controls .hb-check input { width: 18px; height: 18px; margin: 0; }
.tool-page .tool { max-width: 760px; margin: 0 auto; }
.tool-page .tool-title { display: none; }
.tool-more { max-width: 760px; margin: 14px auto 0; font-weight: 700; }
.hub-tool .tool-more { margin-left: 0; }

.hb-pdf { background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 16px 20px; margin: 22px 0; }
.hb-pdf h2 { margin-top: 0; }
.hb-mail-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-mail-row input { flex: 1 1 220px; padding: 11px 14px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; }
.hb-consent { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; font-size: 14px; }
.hb-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--rain); }
.hb-hp { position: absolute; left: -9999px; }

/* Tools hub */
.tc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tc-jump a { padding: 7px 14px; border-radius: 999px; background: #fffdf7; border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.tc-jump a:hover { background: var(--dept-l, #f4efe1); }
.tc-group { padding: 26px 0 6px; }
.tc-group h2 { margin: 0 0 4px; }
.tool-cards a { position: relative; grid-template-rows: auto auto 1fr auto; padding: 18px 20px 16px; background: #fffdf7; box-shadow: 0 4px 0 color-mix(in srgb, var(--dept, #c3d3b0) 35%, transparent); transition: transform .15s, box-shadow .15s; }
.tool-cards a:hover { transform: translateY(-2px); box-shadow: 0 7px 0 color-mix(in srgb, var(--dept, #c3d3b0) 45%, transparent); }
.tc-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--dept-l, #f4efe1); }
.tc-ico svg, .tc-ico .ico { width: 30px; height: 26px; }
.tc-ico.sm { width: 34px; height: 34px; border-radius: 11px; flex: none; } .tc-ico.sm svg, .tc-ico.sm .ico { width: 22px; height: 19px; }
.tc-badge { position: absolute; top: 16px; right: 16px; font-style: normal; font-family: var(--hand); font-weight: 700; font-size: 15px; padding: 1px 10px; border-radius: 999px; background: #fff3c4; }
.tc-go { font-style: normal; font-weight: 700; font-size: 14px; color: var(--rain-dark, #2f5e2a); align-self: end; }
.tc-mini { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 14px; }
.tc-mini a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.tc-mini a:hover { background: var(--dept-l, #f4efe1); }
.tc-mini b { display: block; font-size: 14.5px; } .tc-mini small { display: block; color: var(--ink-soft); font-size: 12.5px; }
/* Combo images: softened photo + illustrated sticker + hand-lettered label */
.combo { position: relative; margin: 0; }
.combo .combo-photo { display: block; aspect-ratio: 4 / 3; height: auto; border-radius: 26px 26px 26px 8px; box-shadow: 0 0 0 6px var(--linen, #fffdf7), 0 10px 24px rgba(47, 59, 44, .14); }
.combo-badge { position: absolute; right: -10px; bottom: 22px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--linen, #fffdf7); box-shadow: 0 0 0 4px var(--dept, #e9dcc0), 0 6px 14px rgba(47, 59, 44, .18); transform: rotate(-6deg); }
.combo-badge .ico, .combo-badge svg { width: 60px; height: 60px; box-shadow: none !important; background: none !important; }
.combo-label { position: absolute; left: 14px; top: 14px; padding: 4px 12px 5px; border-radius: 999px; background: var(--linen, #fffdf7); font: 700 18px/1.1 var(--hand); color: var(--ink); box-shadow: 0 3px 0 var(--dept, #e9dcc0); max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo figcaption { font-size: 11px; color: var(--ink-soft); margin-top: 10px; }
.combo figcaption a { color: inherit; }
.hero-side.has-combo { max-width: 400px; width: 100%; }
.hero-side.has-combo .combo { margin-bottom: 14px; }
.tc-art .combo .combo-photo { aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: none; }
.tc-art .combo-badge { width: 50px; height: 50px; right: 8px; bottom: 8px; box-shadow: 0 0 0 3px var(--dept, #e9dcc0); }
.tc-art .combo-badge svg { width: 36px; height: 36px; }
@media (max-width: 700px) { .combo-badge { width: 64px; height: 64px; right: 6px; } .combo-badge svg { width: 46px; height: 46px; } .combo .combo-photo { aspect-ratio: 16 / 9; } }
/* Big-buy cards v2: same shape everywhere, sticker on the photo, type chips, link pinned to the bottom */
.big-cards li { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; background: var(--dept-l); border-radius: 22px; padding: 12px 12px 16px; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.big-cards li:hover { border-color: var(--dept); transform: translateY(-2px); }
.big-cards .bc-art { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: visible; }
.big-cards .bc-art .stock, .big-cards .bc-art .img-ph { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 16px; }
.big-cards .bc-art .combo-badge { right: 10px; bottom: -14px; width: 62px; height: 62px; z-index: 2; }
.big-cards .bc-art .combo-badge svg { width: 44px; height: 44px; }
.bc-name { margin: 8px 4px 0; font: 600 21px var(--head); }
.bc-link { color: var(--ink); text-decoration: none; }
.bc-link::after { content: ""; position: absolute; inset: 0; border-radius: 22px; z-index: 1; }
.big-cards .bc-meta { padding: 0 4px; color: var(--ink-soft); font-size: 14.5px; }
.bc-subs { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px; align-content: start; }
.bc-subs a { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--linen, #fffdf7); border-radius: 999px; padding: 5px 11px; box-shadow: 0 2px 0 var(--dept, #e9dcc0); }
.bc-subs a:hover { background: var(--dept); }
.big-cards .bc-cta { padding: 4px 4px 0; font-weight: 700; color: var(--rain-dark, #4f6b47); }
.stock::after { background: color-mix(in srgb, var(--dept-l, #f8f4ea) 22%, transparent); }
.stock img { filter: saturate(.85) sepia(.08) contrast(.97) brightness(1.02); }
details.photo-credits { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }
details.photo-credits summary { cursor: pointer; font-weight: 600; width: max-content; }
details.photo-credits[open] summary { margin-bottom: 6px; }
.big-cards .bc-name { padding: 0; margin-left: 4px; }
/* Clothes menu: all 25 types in six groups */
.drop-sub { display: block; font: 700 18px var(--hand); color: var(--ink-soft); margin: 2px 0 6px; }
@media (min-width: 1181px) { .drop-cols:has(.cloth-col) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cloth-col ul { margin: 0 0 8px; }
@media (max-width: 1180px) { .drop-col.cloth-col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 0 0 8px 8px; } .drop-col.cloth-col li a { padding: 7px 0; font-size: 15px; } }
/* Clothes menu v2: six tinted group cards, a small icon per type, and a full-width "All baby clothes" bar */
.cloth-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.drop-cols:has(.cloth-menu) { display: block; }
.cloth-menu .cloth-col { background: var(--dept-l, #e6eff6); border-radius: 16px; padding: 12px 14px 10px; }
.cloth-menu .cloth-wide { grid-row: span 2; }
.cloth-menu .cloth-wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cloth-menu .drop-sub { font-size: 19px; color: var(--ink); margin: 0 0 6px; }
.cloth-menu li a { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.cloth-menu li a:hover { background: var(--linen, #fffdf7); text-decoration: none; }
.cm-ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--linen, #fffdf7); }
.cm-ico .ico, .cm-ico svg { width: 20px; height: 16px; }
.cloth-all { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; }
.cloth-all svg { width: 34px; height: 34px; background: var(--linen, #fffdf7); border-radius: 10px; padding: 3px; }
.cloth-all span { display: grid; flex: 1; }
.cloth-all small { font-weight: 500; opacity: .8; font-size: 12.5px; }
.cloth-all b { font-size: 20px; }
.cloth-all:hover { background: var(--rain-dark, #4f6b47); }
.faq-src { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.faq-src a { color: inherit; }
@media (max-width: 1180px) {
  .cloth-menu { grid-template-columns: 1fr; gap: 8px; }
  .cloth-menu .cloth-wide { grid-row: auto; }
  .cloth-menu .cloth-col ul, .cloth-menu .cloth-wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 0; }
}
/* Category cards with a photo: let the photo set the art height so it never overlaps the name */
.tc-art:has(.combo) { height: auto; display: block; padding: 0; background: none; }
.tc-art .combo { width: 100%; }
.tc-art .combo .combo-photo { width: 100%; object-fit: cover; border-radius: 16px 16px 0 0; }
.cloth-menu { align-items: start; }
.cloth-menu .cloth-wide { grid-row: auto; }
.site-nav .cloth-all, .site-nav .cloth-all:visited, .site-nav .cloth-all span, .site-nav .cloth-all small { color: #fff; text-decoration: none; border: 0; }
.tc-art .img-ph em { display: none; }
/* Clothes menu v3: plain columns like the other dropdowns */
@media (min-width: 1181px) { .drop-cols:has(.cloth-col) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
span.drop-head:hover { background: none; }
/* ---------- Clothing pages (src/clothing.mjs) ---------- */
.cl-types h3.cl-group { font: 700 20px/1.2 var(--hand); color: var(--ink-soft); margin: 22px 0 10px; }
.cl-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cl-card a { display: grid; gap: 6px; height: 100%; padding: 0 0 12px; border-radius: 18px; background: var(--dept-l, #e6eff6); color: var(--ink); text-decoration: none; overflow: hidden; box-shadow: 0 2px 0 rgba(47, 59, 44, .06); transition: transform .15s; }
.cl-card a:hover { transform: translateY(-2px); }
.cl-art { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--dept, #dde9f2); overflow: hidden; }
.cl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-art .stock { display: block; width: 100%; height: 100%; }
.cl-ico .ico, .cl-ico svg { width: 64px; height: 52px; }
.cl-name { font: 600 17px/1.2 var(--head); padding: 4px 14px 0; }
.cl-meta { font-size: 13px; color: var(--ink-soft); padding: 0 14px; }
.tier-bar { display: flex; height: 7px; margin: 2px 14px 0; border-radius: 99px; overflow: hidden; background: var(--linen, #fffdf7); }
.tier-bar i { display: block; }
.tier-bar .tb0, .lane-1 .lane-head b { background: #b9cfa8; }
.tier-bar .tb1, .lane-2 .lane-head b { background: #e8cf86; }
.tier-bar .tb2, .lane-3 .lane-head b { background: #d9a08a; }
.tier-key { display: flex; gap: 10px; padding: 0 14px; font-size: 11.5px; color: var(--ink-soft); }
.tier-key em { font-style: normal; }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lane { background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 18px; padding: 14px; min-width: 0; }
.lane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lane-head b { display: grid; place-items: center; min-width: 44px; height: 36px; padding: 0 8px; border-radius: 10px; font: 700 16px var(--body); color: var(--ink); }
.lane-head span { display: grid; font: 600 16px/1.2 var(--head); }
.lane-head small { font: 400 12.5px var(--body); color: var(--ink-soft); }
.lane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lane li a { display: grid; padding: 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.lane li a:hover { background: var(--dept-l, #e6eff6); }
.lane li a b { font-weight: 600; font-size: 14.5px; }
.lane li a span { font-size: 13px; color: var(--ink-soft); }
.lane li a small { font-size: 12px; color: var(--ink-soft); opacity: .85; }
.lane-more summary { cursor: pointer; font-size: 13.5px; color: var(--rain-dark, #4f6b47); padding: 6px 8px; }
.shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.shelf { background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 16px; padding: 4px 14px; }
.shelf summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; list-style: none; }
.shelf summary::-webkit-details-marker { display: none; }
.shelf summary > span:last-child { display: grid; }
.shelf summary b { font: 600 15.5px var(--head); }
.shelf summary small { font-size: 12.5px; color: var(--ink-soft); }
.shelf-n { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 12px; background: var(--dept-l, #e6eff6); font: 700 15px var(--body); }
.brand-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.brand-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--dept-l, #e6eff6); color: var(--ink); font-size: 13.5px; text-decoration: none; }
.brand-chips a:hover { background: var(--dept, #dde9f2); }
.brand-chips .ico, .brand-chips svg { width: 18px; height: 15px; }
.spot-card { border-radius: 24px; padding: 24px; background: linear-gradient(135deg, #f6efe0, #e9f0e4); border: 1px solid var(--line, #e6dfcf); }
.spot-tag { display: inline-block; font: 700 17px var(--hand); background: var(--linen, #fffdf7); padding: 3px 12px; border-radius: 99px; }
.spot-head h2 { margin: 8px 0 4px; }
.spot-head p { color: var(--ink-soft); margin: 0 0 14px; }
.spot-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; }
.spot-cols h3 { font: 700 18px var(--hand); margin: 8px 0 6px; }
.spot-cols .brand-chips a { background: var(--linen, #fffdf7); }
.hm-table td sup { font-size: 10px; color: var(--ink-soft); margin-left: 2px; }
.hm-src { margin: 8px 0 0; padding-left: 20px; }
.hm-notes { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); }
.cl-explain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 18px; align-items: start; }
.cl-explain-grid:not(:has(.rule-box)) { grid-template-columns: 1fr; }
.look-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.rule-box { background: #fff4dc; border: 1px solid #ecd9a6; border-radius: 16px; padding: 14px 16px; }
.rule-box b { font: 600 16px var(--head); }
.rule-box p { margin: 6px 0; font-size: 14.5px; }
.rule-box a { font-size: 13px; }
.size-list { margin-top: 14px; }
.size-list summary { cursor: pointer; font-weight: 600; }
.size-list ul { columns: 2; font-size: 14px; }
.cl-brand { background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 18px; padding: 18px 20px; }
.cl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; margin: 0 0 8px; }
.cl-facts .full { grid-column: 1 / -1; }
.cl-facts dt { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.cl-facts dd { margin: 3px 0 0; }
.cl-brand h3 { font: 600 16px var(--head); margin: 14px 0 6px; }
.cl-examples, .cl-recalls { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.cl-examples span { display: inline-block; min-width: 150px; color: var(--ink-soft); }
@media (max-width: 900px) { .lanes { grid-template-columns: 1fr; } .cl-explain-grid { grid-template-columns: 1fr; } .size-list ul { columns: 1; } }
@media (max-width: 500px) { .cl-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cl-name { font-size: 15px; padding: 2px 10px 0; } .cl-meta, .tier-key { padding: 0 10px; font-size: 11.5px; } .tier-bar { margin: 2px 10px 0; } .shelves { grid-template-columns: 1fr; } }
.spot-cols h3 small { font: 600 12px var(--body); color: var(--ink-soft); }
.hm-table th small { display: block; font: 400 11.5px var(--body); color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.hm-cell summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; list-style: none; }
.hm-cell summary::-webkit-details-marker { display: none; }
.hm-cell summary b { font: 700 18px var(--body); }
.hm-cell summary small { color: var(--ink-soft); font-size: 12px; text-decoration: underline dotted; }
.hm-cell ul { margin: 6px 0 0; padding-left: 16px; font-size: 13px; color: var(--ink-soft); }
.hm-src summary { cursor: pointer; margin-top: 10px; }
/* ---------- Brand pages (src/brand-page.mjs) ---------- */
.brand-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.brand-mark { width: 168px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: hsl(var(--bh) 35% 90%); box-shadow: 0 0 0 8px var(--linen, #fffdf7), 0 0 0 10px hsl(var(--bh) 30% 80%); }
.brand-mark span { font: 600 54px/1 var(--head); color: hsl(var(--bh) 30% 28%); letter-spacing: -.02em; }
.brand-mark small { font: 700 15px var(--hand); color: hsl(var(--bh) 25% 32%); margin-top: 6px; max-width: 130px; }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 22px; background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 18px; padding: 18px 20px; margin: 0; }
.bf-grid .full { grid-column: 1 / -1; }
.bf-grid dt { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.bf-grid dd { margin: 3px 0 0; }
.bf-recalls { margin: 4px 0 0; padding-left: 18px; }
.bgrid { margin: 6px 0 14px; }
.bg-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.bg-pick > span { font-size: 13px; color: var(--ink-soft); }
.bg-pick .chip { text-transform: none; }
.bg-pick .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bg-diff { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; margin-bottom: 8px; cursor: pointer; }
.bg-table th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--linen, #fffdf7); z-index: 1; }
.bg-table thead th { text-align: left; min-width: 130px; }
.bg-table td, .bg-table thead th { vertical-align: top; }
.bg-table .q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f3e7c3; font-size: 12px; font-weight: 700; }
.bgrid.diff-only tr.same { display: none; }
.bg-table .hit { background: #e7f1df; }
.bg-table .miss { opacity: .45; }
.bsteps { margin: 6px 0 12px; }
.bsteps h3 { font: 600 16px var(--head); margin: 0 0 6px; }
.bsteps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.step-p { font-weight: 700; color: var(--rain-dark, #4f6b47); margin-left: 6px; }
.step-d { display: block; color: var(--ink-soft); font-size: 13.5px; }
.brand-alts { margin: 8px 0 0; }
.brand-alts summary { cursor: pointer; font-weight: 600; }
.alt-group h4 { font: 600 14px var(--body); margin: 10px 0 6px; color: var(--ink-soft); }
.brand-chips small { color: var(--ink-soft); margin-left: 4px; }
.ld-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0; }
.ld-k { font-weight: 600; font-size: 14px; }
.ld-track { position: relative; height: 10px; border-radius: 99px; background: var(--dept-l, #e6eff6); }
.ld-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--rain-dark, #4f6b47); border: 2px solid var(--linen, #fffdf7); }
.ld-dot span { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ld-dot:hover span, .ld-dot:focus span { opacity: 1; }
.ld-scale { display: flex; justify-content: space-between; margin-left: 172px; font-size: 12.5px; color: var(--ink-soft); }
.bp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bp-list a { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); color: var(--ink); text-decoration: none; }
.bp-list b { display: block; font-size: 14.5px; }
.bp-list small { color: var(--ink-soft); font-size: 12.5px; }
.bp-ico svg { width: 30px; height: 26px; }
@media (max-width: 700px) { .brand-hero .wrap { grid-template-columns: 1fr; } .brand-mark { width: 110px; } .brand-mark span { font-size: 36px; } .ld-row { grid-template-columns: 1fr; gap: 4px; } .ld-scale { margin-left: 0; } }
.product-hero.brand-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.bf-scope { display: block; font-size: 13px; color: var(--ink-soft); margin: 2px 0; }
@media (max-width: 700px) { .product-hero.brand-hero .wrap { grid-template-columns: 1fr; } }
/* ---------- Mobile fixes (Oct 27) ---------- */
/* Big-buy cards: the generic ".big-cards a" card rule was turning sub-type chips and the title link into tall blocks */
.big-cards .bc-subs a { display: inline-flex; align-items: center; height: auto; min-height: 0; padding: 5px 11px; border: 0; background: var(--linen, #fffdf7); }
.big-cards .bc-link { display: inline; height: auto; padding: 0; background: none; border: 0; }
/* Brand tiles: the name block was wider than its tile on phones */
.brand-tiles a, .bt-mark, .bt-meta { min-width: 0; }
.bt-name { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .brand-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-tiles .bt-mark { min-height: 84px; }
  .brand-tiles .bt-mark .bt-name { font-size: 20px; }
}
.brand-ladder { overflow-x: clip; }
@media (max-width: 700px) {
  /* Keep the icon badge on photo heroes (the generic mobile rule hides hero icons) */
  .product-hero .combo-badge .ico { display: block; }
  /* Type-page hero: photo full width, facts in a row underneath */
  .hero-side.has-combo { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: none; }
  .hero-side.has-combo .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .hero-side.has-combo .facts li { padding: 10px 6px; }
  .hero-side.has-combo .facts b { font-size: 17px; }
  /* Product page: smaller photo placeholder */
  .img-ph.ph-hero { max-height: 170px; aspect-ratio: auto; height: 170px; }
  /* Full specs with one product: two columns that wrap instead of a cut-off scroll */
  table.compare.cols-1 { width: 100%; min-width: 0; table-layout: fixed; }
  table.compare.cols-1 th[scope=row] { width: 40%; position: static; }
  table.compare.cols-1 td, table.compare.cols-1 th { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  .product-hero .hero-side.has-combo { display: flex !important; flex-direction: column; align-items: stretch; width: 100%; }
  .product-hero .hero-side.has-combo .combo { width: 100%; }
  .product-hero .hero-side.has-combo .facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-hero .combo-badge svg.ico { display: block !important; }
  .product-hero .img-ph.ph-hero { height: 150px !important; min-height: 0 !important; aspect-ratio: auto !important; }
}
.combo-badge .bico { display: block !important; width: 60px; height: 60px; }
.tc-art .combo-badge .bico { width: 36px; height: 36px; }
.big-cards .bc-art .combo-badge .bico { width: 44px; height: 44px; }
@media (max-width: 700px) { .combo-badge .bico { width: 46px; height: 46px; } }
.combo-badge .ico, .combo-badge svg { padding: 0 !important; max-width: none; border-radius: 0; }
@media (max-width: 700px) { .brand-mark { display: none; } .product-hero.brand-hero .wrap { grid-template-columns: 1fr; } }
/* Clothing "What to look for" v2: tip cards, sleepwear rule card, sizing panel */
.lk-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lk-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 16px 58px; background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 18px; }
.lk-card b { font: 600 16.5px/1.3 var(--head); color: var(--ink); }
.lk-card span { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.lk-n { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dept-l, #e6eff6); font: 700 18px/1 var(--hand); color: var(--ink) !important; }
.lk-rule { padding-left: 18px; background: #fff4dc; border-color: #ecd9a6; }
.lk-tag { justify-self: start; font: 700 15px var(--hand) !important; color: #7a5b12 !important; background: #fde9b8; padding: 2px 10px; border-radius: 99px; }
.lk-size { background: var(--dept-l, #e6eff6); border-radius: 18px; padding: 16px 18px; }
.lk-size-head { display: flex; align-items: center; gap: 14px; }
.lk-size-head > div { display: grid; gap: 2px; }
.lk-size-head b { font: 600 16.5px var(--head); }
.lk-size-head span { font-size: 14.5px; color: var(--ink-soft); }
.lk-ruler { width: 48px; height: 20px; flex: none; color: var(--rain-dark, #4f6b47); }
.lk-sizes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.lk-sizes li { display: grid; gap: 2px; background: var(--linen, #fffdf7); border-radius: 12px; padding: 9px 12px; }
.lk-sizes a { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.lk-sizes a:hover { text-decoration: underline; }
.lk-sizes span { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 560px) { .lk-grid, .lk-sizes { grid-template-columns: 1fr; } }
/* Shelves v2: playful colored tiles with a hand-drawn icon and a count sticker */
.cl-shelves .section-lede { margin-bottom: 18px; }
.shelves { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.shelf { background: var(--sh, #eef3d6); border: 0; border-radius: 22px; padding: 6px 16px; transform: rotate(var(--tilt, 0deg)); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 3px 0 color-mix(in srgb, var(--sk) 22%, transparent); }
.shelf:hover, .shelf[open] { transform: rotate(0deg) translateY(-3px); box-shadow: 0 8px 18px color-mix(in srgb, var(--sk) 18%, transparent); }
.shelf summary { gap: 14px; padding: 12px 0; }
.shelf-art { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--linen, #fffdf7); }
.shelf-ico { width: 38px; height: 38px; }
.shelf-art .shelf-n { position: absolute; right: -8px; top: -8px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; background: var(--sk); color: #fff; font: 700 15px/28px var(--hand); text-align: center; box-shadow: 0 0 0 3px var(--sh); }
.shelf-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.shelf-txt b { font: 600 16.5px/1.25 var(--head); color: var(--ink); }
.shelf-txt small { font-size: 13px; color: color-mix(in srgb, var(--ink) 72%, var(--sk)); }
.shelf-go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--linen, #fffdf7); color: var(--sk); font: 700 18px/1 var(--body); transition: transform .2s; }
.shelf[open] .shelf-go { transform: rotate(45deg); }
.shelf .brand-chips a { background: var(--linen, #fffdf7); }
/* "What to look for" cards: friendlier number stickers */
.lk-card { border: 0; background: var(--dept-l, #e6eff6); }
.lk-card:nth-child(3n+2) { background: #f4ecdc; }
.lk-card:nth-child(3n) { background: #e8f0e1; }
.lk-n { background: var(--linen, #fffdf7); transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(47, 59, 44, .12); }
@media (prefers-reduced-motion: reduce) { .shelf, .shelf:hover, .shelf[open] { transform: none; transition: none; } }
/* ---------- Budget lanes v2 (src/lanes.mjs): coin-stack headers, tinted lanes, no empty lanes ---------- */
.ln-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; align-items: start; }
.ln { background: var(--lb); border-radius: 24px; padding: 16px 14px 14px; color: var(--ink); }
.ln:nth-child(2) { transform: translateY(10px); }
.ln-head { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; color: var(--lk); }
.ln-ico { width: 48px; height: 40px; flex: none; }
.ln-head span { display: grid; flex: 1; }
.ln-head b { font: 600 19px/1.15 var(--head); color: var(--ink); }
.ln-head small { font: 700 15px var(--hand); color: var(--lk); }
.ln-count { font: 700 16px/30px var(--hand); font-style: normal; min-width: 30px; height: 30px; text-align: center; border-radius: 99px; background: var(--linen, #fffdf7); color: var(--lk); transform: rotate(-5deg); }
.ln ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ln li a { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--linen, #fffdf7); color: var(--ink); text-decoration: none; box-shadow: 0 2px 0 color-mix(in srgb, var(--lk) 18%, transparent); transition: transform .15s; }
.ln li a:hover { transform: translateY(-2px) rotate(-.4deg); }
.ln li b { font-weight: 600; font-size: 15px; padding-right: 64px; }
.ln li span { font-size: 13.5px; color: var(--ink-soft); }
.ln li small { font-size: 12px; color: var(--ink-soft); opacity: .85; }
.ln li em { position: absolute; right: 10px; top: 10px; font: 700 14px var(--body); font-style: normal; color: var(--lk); background: var(--lb); border-radius: 99px; padding: 2px 9px; }
.ln-more summary { cursor: pointer; list-style: none; text-align: center; margin-top: 8px; padding: 8px; border-radius: 99px; border: 2px dashed color-mix(in srgb, var(--lk) 40%, transparent); font-weight: 600; font-size: 14px; color: var(--lk); }
.ln-more summary::-webkit-details-marker { display: none; }
.ln-more ul { margin-top: 8px; }
@media (max-width: 900px) { .ln-grid { grid-template-columns: 1fr; } .ln:nth-child(2) { transform: none; } }

/* ---------- How many to have v2: one friendly card per type ---------- */
.hm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.hm-card { display: grid; gap: 10px; align-content: start; background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 22px; padding: 16px; }
.hm-name { display: flex; align-items: center; gap: 8px; font: 600 17px var(--head); color: var(--ink); text-decoration: none; }
.hm-name .ico, .hm-name svg { width: 30px; height: 26px; }
.hm-stage { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 4px; padding: 10px 12px; border-radius: 16px; background: var(--dept-l, #e6eff6); }
.hm-later { background: #f4ecdc; }
.hm-k { grid-column: 1 / -1; font: 700 15px var(--hand); color: var(--ink-soft); }
.hm-num { font: 600 40px/1 var(--head); color: var(--ink); }
.hm-later .hm-num { font-size: 30px; }
.hm-pips { display: flex; flex-wrap: wrap; gap: 2px; }
.hm-pips i { display: grid; place-items: center; width: 20px; height: 20px; }
.hm-pips .ico, .hm-pips svg { width: 20px; height: 18px; }
.hm-src { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); }
.hm-src summary { cursor: pointer; text-decoration: underline dotted; width: max-content; }
.hm-src ul { margin: 6px 0 0; padding-left: 16px; }
.hm-one { grid-template-columns: minmax(0, 560px); }
.hm-big .hm-num { font-size: 56px; }
.hm-big .hm-pips i { width: 26px; height: 26px; }
.hm-big .hm-pips svg { width: 26px; height: 22px; }
.hm-tips { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; max-width: 760px; background: #fff4dc; border-radius: 18px; padding: 12px 16px; }
.hm-tips > span { font-size: 24px; line-height: 1; }
.hm-tips p { margin: 0; font-size: 14.5px; }
.hm-srclist { margin-top: 10px; }
.hm-srclist summary { cursor: pointer; }
.hm-basket { width: 34px; height: 28px; flex: none; }
/* Clothing on brand pages: one section per clothing type (anchor targets for links from type pages) */
.cb-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.cb-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--dept-l, #e6eff6); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cb-jump svg { width: 18px; height: 16px; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cb-type { scroll-margin-top: 90px; display: grid; gap: 10px; align-content: start; background: var(--cloud, #fff); border: 1px solid var(--line, #e6dfcf); border-radius: 20px; padding: 16px; }
.cb-type:target { box-shadow: 0 0 0 3px var(--rain, #8fb3cf); }
.cb-type header { display: flex; align-items: center; gap: 10px; }
.cb-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dept-l, #e6eff6); flex: none; }
.cb-ico svg { width: 28px; height: 24px; }
.cb-type h3 { font: 600 17px/1.2 var(--head); margin: 0; flex: 1; }
.cb-tier { font: 700 14px var(--body); background: #fbeccb; color: #9a6b14; border-radius: 99px; padding: 2px 9px; }
.cb-ex { margin: 0; display: grid; gap: 2px; font-size: 14.5px; }
.cb-ex span { font: 700 14px var(--hand); color: var(--ink-soft); }
.cb-dl { margin: 0; display: grid; gap: 6px; }
.cb-dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: 13.5px; }
.cb-dl dt { color: var(--ink-soft); }
.cb-dl dd { margin: 0; }
.cb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cb-chips:empty { display: none; }
.cb-chips li { font-size: 12px; font-weight: 600; background: #e3efd8; color: #3f5f2c; border-radius: 99px; padding: 3px 9px; }
.cb-type footer { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.cb-shop { color: var(--rain-dark, #4f6b47); }
/* What to look for + How many to buy, side by side */
.look-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.look-calc.no-calc { grid-template-columns: 1fr; }
.look-col .lk-grid { grid-template-columns: 1fr; }
.calc { background: var(--linen, #fffdf7); border: 1px solid var(--line, #e6dfcf); border-radius: 24px; padding: 20px; box-shadow: 0 4px 0 rgba(47, 59, 44, .06); }
.calc h2 { margin-top: 0; }
.calc-lede { margin: -4px 0 12px; color: var(--ink-soft); font-size: 14.5px; }
.calc-form { display: grid; gap: 12px; }
.calc-form fieldset { border: 0; padding: 0; margin: 0; }
.calc-form legend { font: 700 16px var(--hand); color: var(--ink-soft); margin-bottom: 6px; }
.calc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-opts label { cursor: pointer; }
.calc-opts input { position: absolute; opacity: 0; pointer-events: none; }
.calc-opts span { display: inline-block; padding: 7px 14px; border-radius: 99px; background: var(--dept-l, #e6eff6); font-size: 14px; font-weight: 600; border: 2px solid transparent; transition: background .15s; }
.calc-opts input:checked + span { background: var(--ink); color: #fff; }
.calc-opts input:focus-visible + span { border-color: var(--rain, #8fb3cf); }
.calc-out { margin-top: 16px; }
.calc-total { margin: 0 0 8px; font-size: 15px; }
.calc-total b { font: 600 34px/1 var(--head); margin-right: 6px; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calc-table th { text-align: left; font-size: 12.5px; padding: 6px 8px; border-bottom: 2px solid var(--line, #e6dfcf); }
.calc-table th small { display: block; font: 600 12px var(--hand); color: var(--ink-soft); text-transform: capitalize; }
.calc-table td { padding: 6px 8px; border-bottom: 1px dashed var(--line, #e6dfcf); }
.calc-table .n { text-align: center; }
.calc-table tr.hl td { background: #fff4dc; font-weight: 600; }
.calc-table a { color: var(--ink); }
.calc-how { margin-top: 10px; color: var(--ink-soft); }
.calc-how summary { cursor: pointer; }
.calc-empty { color: var(--ink-soft); }
.cl-calc-sec .calc { max-width: 900px; }
@media (max-width: 960px) { .look-calc { grid-template-columns: 1fr; } }
/* Calculator icon counts */
.calc-table td.pips { white-space: nowrap; }
.calc-table .pip { display: inline-block; width: 16px; height: 15px; margin-right: 1px; vertical-align: middle; }
.calc-table td.pips em { font: 700 13px var(--hand); font-style: normal; color: var(--ink-soft); margin-left: 4px; }
@media (max-width: 700px) { .calc-table td.pips, .calc-table th:last-child { display: none; } }
/* Cleaner tip cards: one calm color, lighter type */
.look-col .lk-card { background: var(--cloud, #fff); border: 1px solid var(--line, #e6dfcf); }
.look-col .lk-card b { font: 600 15.5px/1.35 var(--body); }
.look-col .lk-rule { background: #fff4dc; border-color: #ecd9a6; }
/* Made in the USA (maker's own words) */
.usa-claim { display: flex; gap: 10px; align-items: flex-start; max-width: 620px; margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: #eef2f8; font-size: 14px; }
.usa-claim b { display: block; font-size: 14.5px; }
.usa-flag { flex: none; width: 26px; height: 18px; margin-top: 2px; border-radius: 3px; background: linear-gradient(#b8443a 0 14%, #fff 14% 28%, #b8443a 28% 42%, #fff 42% 57%, #b8443a 57% 71%, #fff 71% 85%, #b8443a 85%); position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.usa-flag::before { content: ""; position: absolute; left: 0; top: 0; width: 44%; height: 57%; background: #34508a; border-radius: 3px 0 0 0; }
.row-tags .usa-tag, i.usa-tag { background: #eef2f8; color: #34508a; }
/* Where to buy v2: playful store tiles in the style of the homepage brand tiles */
.stores { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.stores li { transform: rotate(var(--tilt, 0deg)); transition: transform .2s; }
.stores li:hover { transform: rotate(0deg) translateY(-3px); }
.stores a { display: grid; gap: 8px; justify-content: stretch; padding: 10px; background: var(--cloud, #fff); border: 1px solid var(--line, #e6dfcf); border-radius: 20px; height: 100%; }
.stores a:hover { border-color: var(--rain, #8fb3cf); }
.st-mark { position: relative; display: grid; place-items: center; min-height: 78px; padding: 12px 10px; border-radius: 14px; text-align: center; background: var(--dept-l, #f3eedf); background-image: radial-gradient(rgba(61, 58, 51, .07) 1px, transparent 1.2px); background-size: 10px 10px; }
.stores li:nth-child(6n+2) .st-mark { background-color: #f6e3e7; }
.stores li:nth-child(6n+3) .st-mark { background-color: #e3efd8; }
.stores li:nth-child(6n+4) .st-mark { background-color: #fbeccb; }
.stores li:nth-child(6n+5) .st-mark { background-color: #ece6f5; }
.stores li:nth-child(6n) .st-mark { background-color: #dfeaf4; }
.st-mark b { font: 600 19px/1.15 var(--head); color: var(--ink); text-wrap: balance; }
.st-mark .store-logo { max-height: 34px; max-width: 120px; }
.st-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg); font: 700 13px var(--hand); font-style: normal; white-space: nowrap; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 99px; }
.st-maker .st-mark { background-color: #fff4dc; box-shadow: inset 0 0 0 2px #ecd9a6; }
.stores .st-cta { font-size: 13.5px; font-weight: 700; color: var(--rain-dark, #4f6b47); text-align: center; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .stores li, .stores li:hover { transform: none; } }
.drop-calc { color: var(--rain-dark, #4f6b47) !important; font-weight: 700; }
.cl-calc-sec { padding-top: 0; } .cl-calc-sec .calc { margin: 0; max-width: 980px; }
/* ---------- Playful pass: tips, calculator, size chart ---------- */
.look-col .lk-card { border: 0; background: var(--dept-l, #e6eff6); border-radius: 20px; transform: rotate(var(--t, 0deg)); }
.look-col .lk-card:nth-child(4n+1) { --t: -.5deg; background: #e6eff6; }
.look-col .lk-card:nth-child(4n+2) { --t: .4deg; background: #f6ecdc; }
.look-col .lk-card:nth-child(4n+3) { --t: -.3deg; background: #e7f0df; }
.look-col .lk-card:nth-child(4n) { --t: .5deg; background: #f3e6ee; }
.look-col .lk-rule { background: #fff1cf !important; }
.look-col .lk-n { width: 34px; height: 34px; font-size: 20px; background: var(--linen, #fffdf7); transform: rotate(-8deg); box-shadow: 0 3px 0 rgba(47, 59, 44, .14); }
.look-col .lk-card b { font: 600 16px/1.35 var(--head); }
.calc { position: relative; background: var(--linen, #fffdf7); border: 2px dashed #e3d6b6; border-radius: 28px; box-shadow: 0 6px 0 #efe4c9; }
.calc-sticker { position: absolute; top: -14px; right: 22px; transform: rotate(4deg); font: 700 16px var(--hand); background: #fde9b8; color: #7a5b12; padding: 3px 12px; border-radius: 99px; box-shadow: 0 2px 0 rgba(122, 91, 18, .25); }
.calc-month { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 16px var(--hand); color: var(--ink-soft); }
.calc-month select { font: 600 15px var(--body); padding: 8px 34px 8px 14px; border-radius: 99px; border: 2px solid var(--line, #e6dfcf); background: var(--cloud, #fff); color: var(--ink); }
.calc-time { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.calc-time li { display: grid; padding: 8px 12px; border-radius: 16px; min-width: 104px; }
.calc-time b { font-size: 13.5px; }
.calc-time span { font-size: 12.5px; color: var(--ink-soft); }
.calc-time i { font: 700 14px var(--hand); font-style: normal; text-transform: capitalize; }
.s-winter { background: #e3edf8; } .s-winter i { color: #3d6290; }
.s-spring { background: #e6f2dc; } .s-spring i { color: #3f6a2c; }
.s-summer { background: #fdf0c8; } .s-summer i { color: #7f5810; }
.s-fall { background: #f8e2d3; } .s-fall i { color: #8a3f2a; }
.calc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.calc-cards li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 18px; }
.cc-k { font: 700 14px var(--hand); color: var(--ink-soft); text-transform: none; }
.calc-cards b { font: 600 42px/1 var(--head); color: var(--ink); }
.pips { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.pips .pip { width: 18px; height: 16px; }
.pips em { font: 700 13px var(--hand); font-style: normal; color: var(--ink-soft); margin-left: 3px; }
.calc-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.calc-notes li { position: relative; padding: 8px 12px 8px 34px; background: #fff4dc; border-radius: 14px; font-size: 14px; }
.calc-notes li::before { content: "!"; position: absolute; left: 10px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: #e9c46a; color: #5a3f05; font: 700 12px/18px var(--body); text-align: center; }
.calc-total { margin: 12px 0 0; }
/* Size chart */
.size-chart { border-collapse: separate; border-spacing: 0 6px; width: 100%; min-width: 640px; }
.size-chart th { font-size: 12.5px; font-weight: 700; text-align: center; padding: 4px; }
.size-chart th:first-child { text-align: left; }
.size-chart th small { display: block; font: 700 13px var(--hand); color: var(--ink-soft); }
.size-chart td { background: var(--cloud, #fff); padding: 8px 4px; text-align: center; }
.size-chart td:first-child { text-align: left; padding-left: 14px; border-radius: 14px 0 0 14px; font-weight: 600; font-size: 14px; }
.size-chart td:last-child { border-radius: 0 14px 14px 0; }
.size-chart td a { color: var(--ink); text-decoration: none; }
.size-chart td a:hover { text-decoration: underline; }
.sz-on, .sz-off { display: inline-block; width: 100%; max-width: 54px; height: 14px; border-radius: 99px; vertical-align: middle; }
.sz-on { background: #a9c79a; }
.sz-on.sz-p, .sz-on.sz-nb { background: #e9c46a; }
.sz-on.sz-2t { background: #b9a7d8; }
.sz-off { background: transparent; border: 2px dashed #e6dfcf; height: 10px; }
.cc-when { font-size: 12.5px; color: var(--ink-soft); } .cc-when i { font: 700 13px var(--hand); font-style: normal; text-transform: capitalize; }

/* ---------- Baby budget wizard (src/budget-wizard.*) ---------- */
.bw-hero .lede { max-width: 640px; }
.bw-hero-sticker { display: inline-block; font: 700 18px/1 var(--hand); background: #ffe0d2; color: #8a3f2a; padding: 6px 14px 7px; border-radius: 999px; transform: rotate(-3deg); margin-bottom: 10px; box-shadow: 0 3px 0 #f2c5b3; }
.bw-sec { padding: 8px 0 48px; }
.bw { position: relative; max-width: 980px; margin: -56px auto 0; background: var(--cloud); border-radius: 30px; padding: 22px clamp(14px, 3vw, 34px) 30px; box-shadow: 0 10px 30px rgba(91, 70, 50, .10), 0 0 0 2px #efe7d3 inset; scroll-margin-top: 80px; }
.bw-trail { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bw-trail button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: var(--st); padding: 6px 13px 6px 6px; border-radius: 999px; transform: rotate(var(--tilt)); font: 700 16px/1 var(--hand); color: var(--ink); transition: transform .15s; } /* A-17: no fade */
.bw-trail button i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cloud); font: 700 14px/1 var(--body); }
.bw-trail button:hover, .bw-trail button[aria-current] { transform: rotate(0) scale(1.06); }
.bw-trail button[aria-current] { box-shadow: 0 3px 0 rgba(47, 59, 44, .25); }
.bw-trail button.done i { background: var(--rain); color: #fff; }
.bw-trail button:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; }
.bw-pig { position: sticky; top: 8px; z-index: 5; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #fff8ee; border: 2px dashed #f0c9b8; border-radius: 22px; padding: 8px 16px 10px 10px; margin: 0 0 18px; }
.bw-pig-art { width: 54px; height: 44px; grid-row: span 2; transition: transform .3s; }
.bw-pig:hover .bw-pig-art { transform: rotate(-6deg); }
.bw-pig-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; }
.bw-spent { font: 600 26px/1 var(--head); }
.bw-left { margin-left: auto; font: 700 18px/1 var(--hand); color: #3f6a34; }
.is-over .bw-left { color: #a3523a; }
.bw-bar { height: 12px; border-radius: 99px; background: #f3e9db; overflow: hidden; margin-top: 6px; }
.bw-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: repeating-linear-gradient(-45deg, #9fbf8a 0 8px, #b3cf9f 8px 16px); transition: width .35s ease; }
.is-over .bw-bar i { background: repeating-linear-gradient(-45deg, #e09a7f 0 8px, #ecb29b 8px 16px); }
.bw-low { background: #fff1c2; border-radius: 16px; padding: 10px 14px; font-size: 15px; margin: -6px 0 16px; }
.bw-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.bw-num { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px 20px 14px 22px; background: var(--st); font: 700 26px/1 var(--hand); transform: rotate(-5deg); }
.bw-step h2 { margin: 2px 0 4px; }
.bw-lede { color: var(--ink-soft); margin: 0; max-width: 680px; }
.bw-start { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 18px; }
.bw-amt, .bw-due { background: #fff1c2; border-radius: 22px; padding: 16px 18px; transform: rotate(-.6deg); display: grid; gap: 8px; align-content: start; }
.bw-due { background: #dbeaf5; transform: rotate(.7deg); }
.bw-amt > label, .bw-due > span { font: 700 18px/1 var(--hand); color: var(--ink-soft); }
.bw-money { display: flex; align-items: center; gap: 4px; background: var(--cloud); border-radius: 16px; padding: 4px 14px; }
.bw-money b { font: 600 34px/1 var(--head); color: var(--sun-ink); }
.bw-money input { border: 0; background: transparent; font: 600 38px/1.1 var(--head); color: var(--ink); width: 100%; min-width: 0; padding: 4px 0; }
.bw-money input:focus { outline: none; }
.bw-money:focus-within { box-shadow: 0 0 0 3px var(--rain); }
.bw-range { width: 100%; accent-color: #c8693a; }
.bw-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-quick button { font: 700 15px/1 var(--hand); border: 0; border-radius: 99px; padding: 7px 12px; background: var(--cloud); cursor: pointer; color: var(--ink); }
.bw-quick button:hover { background: #fde4a6; }
.bw-due select { font: 600 22px var(--head); border: 0; border-radius: 14px; padding: 10px 12px; background: var(--cloud); color: var(--ink); width: 100%; }
.bw-life { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.bw-life fieldset, .bw-cl-form fieldset, .bw-dm { border: 0; margin: 0; padding: 12px 14px; background: #f7f3e8; border-radius: 18px; min-width: 0; }
.bw-life legend, .bw-cl-form legend, .bw-dm legend { font: 700 17px/1 var(--hand); color: var(--ink-soft); padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 6px; clear: both; }
.bw-chips label { cursor: pointer; }
.bw-chips input { position: absolute; opacity: 0; pointer-events: none; }
.bw-chips span { display: inline-grid; padding: 7px 13px; border-radius: 14px; background: var(--cloud); font-size: 14.5px; font-weight: 600; border: 2px solid #e8dfca; transition: background .15s, transform .15s; }
.bw-chips span small { font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.bw-chips input:checked + span { background: var(--rain); border-color: var(--rain); color: #fff; transform: rotate(-1.5deg); }
.bw-chips input:checked + span small { color: #e8f0e2; }
.bw-chips input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.bw-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--line); }
.bw-back { all: unset; cursor: pointer; font: 700 18px var(--hand); color: var(--ink-soft); }
.bw-back:hover { color: var(--ink); }
.bw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.bw-cards:empty { display: none; }
.bw-card { position: relative; background: #fffdf8; border: 2px solid #ece4cf; border-radius: 24px; padding: 14px 14px 12px; transform: rotate(var(--tilt)); transition: transform .2s, opacity .2s; display: grid; gap: 10px; align-content: start; min-width: 0; }
.bw-card:hover { transform: rotate(0); }
.bw-card.is-skip { opacity: .62; background: #f6f2e8; }
.bw-card.is-have { background: #eef5e6; border-color: #cfe0bf; }
.bw-card-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.bw-card-head h3 { font-size: 19px; margin-top: 2px; }
.bw-card-head p { font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.4; }
.bw-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #f3eedf; flex: none; }
.bw-ico svg { width: 32px; height: 32px; }
.bw-tag { font: 700 20px/1 var(--hand); background: #fff1c2; padding: 6px 10px; border-radius: 12px; transform: rotate(3deg); white-space: nowrap; }
.is-have .bw-tag { background: #d6e8c6; }
.is-skip .bw-tag { background: #ece6d8; color: var(--ink-soft); }
.bw-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bw-lane { all: unset; cursor: pointer; display: grid; justify-items: center; text-align: center; gap: 1px; padding: 8px 4px 7px; border-radius: 16px; border: 2px solid transparent; color: var(--ink); transition: transform .15s, border-color .15s; min-width: 0; }
.bw-lane.l0 { background: #e3efd8; --lk: #476530; } .bw-lane.l1 { background: #fbeccb; --lk: #7f5810; } .bw-lane.l2 { background: #f6e0d8; --lk: #8a3f2a; } /* A-14 */
.bw-lane b { font: 700 16px/1.1 var(--hand); color: var(--lk); }
.bw-lane span { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.bw-lane small { font-size: 11.5px; color: var(--ink-soft); }
.bw-coins { width: 30px; height: 22px; color: var(--lk); }
.bw-lane:hover { transform: translateY(-2px); }
.bw-lane[aria-pressed="true"] { border-color: var(--lk); box-shadow: 0 3px 0 var(--lk); transform: rotate(-1.5deg); }
.bw-lane:focus-visible, .bw-mini:focus-visible { outline: 3px solid var(--rain); outline-offset: 2px; }
.is-skip .bw-lane[aria-pressed], .is-have .bw-lane { box-shadow: none; border-color: transparent; transform: none; }
.bw-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.bw-card-foot a { margin-left: auto; font-weight: 600; }
.bw-mini { all: unset; cursor: pointer; font: 700 15px/1 var(--hand); padding: 6px 11px; border-radius: 99px; background: #f1ecdf; color: var(--ink); }
.bw-mini[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bw-fit { position: absolute; top: -12px; right: 16px; font: 700 14px/1 var(--hand); padding: 5px 10px; border-radius: 99px; transform: rotate(4deg); }
.bw-fit.yes { background: #d6e8c6; color: #3f6a34; } .bw-fit.no { background: #f3e1d8; color: #a3523a; }
.bw-cl-form { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-bottom: 14px; }
.bw-time { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bw-time li { display: grid; padding: 8px 12px; border-radius: 16px; min-width: 104px; }
.bw-time b { font-size: 13.5px; } .bw-time span { font-size: 12.5px; color: var(--ink-soft); }
.bw-time i { font: 700 14px var(--hand); font-style: normal; text-transform: capitalize; }
.bw-ctab { overflow-x: auto; margin-bottom: 12px; border-radius: 18px; border: 2px solid #ece4cf; }
.bw-ctab table { border-collapse: collapse; width: 100%; font-size: 14.5px; background: #fffdf8; }
.bw-ctab th, .bw-ctab td { padding: 7px 10px; text-align: left; border-bottom: 1px dashed #ece4cf; vertical-align: middle; }
.bw-ctab thead th { font: 700 15px/1.1 var(--hand); white-space: nowrap; }
.bw-ctab thead th small { display: block; font: 400 11.5px var(--body); color: var(--ink-soft); }
.bw-ctab tbody th { font-weight: 600; white-space: nowrap; }
.bw-ctab td b { font: 700 18px/1 var(--hand); margin-right: 6px; }
.bw-ctab .pips { display: inline-flex; flex-wrap: wrap; gap: 0; vertical-align: middle; max-width: 150px; }
.bw-ctab .pip { width: 14px; height: 13px; }
.bw-ctab .pips em { font: 700 13px var(--hand); font-style: normal; color: var(--ink-soft); }
@media (max-width: 640px) { .bw-ctab .pips { display: none; } }
.bw-sub { font-size: 18px; margin: 14px 0 8px; }
.bw-notes { margin: 0 0 10px; padding-left: 18px; font-size: 14.5px; }
.bw-empty { background: #f7f3e8; border-radius: 16px; padding: 12px 14px; }
.bw-dtabs { display: inline-flex; gap: 4px; background: #f1ecdf; padding: 4px; border-radius: 99px; margin-bottom: 12px; }
.bw-dtabs button { all: unset; cursor: pointer; font: 700 17px/1 var(--hand); padding: 8px 14px; border-radius: 99px; }
.bw-dtabs button[aria-pressed="true"] { background: var(--cloud); box-shadow: 0 2px 0 #e0d6bf; }
.bw-dm { margin-bottom: 14px; }
.bw-dstack { list-style: none; margin: 0 0 14px; padding: 12px 6px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; align-items: end; }
.bw-dstack li { display: grid; justify-items: center; text-align: center; gap: 2px; transform: rotate(var(--tilt)); }
.bw-stack { display: flex; align-items: flex-end; height: 120px; width: 70px; }
.bw-stack i { display: block; width: 100%; height: var(--h); border-radius: 12px 12px 8px 8px; background: repeating-linear-gradient(0deg, #fdfaf2 0 10px, #e8eef6 10px 12px); border: 2px solid #c8d6e6; transition: height .35s ease; }
.bw-dstack li:nth-child(2) .bw-stack i { background: repeating-linear-gradient(0deg, #fdfaf2 0 10px, #e6f0dc 10px 12px); border-color: #c3d6b3; }
.bw-dstack li:nth-child(3) .bw-stack i { background: repeating-linear-gradient(0deg, #fdfaf2 0 10px, #fbecc8 10px 12px); border-color: #ecd59b; }
.bw-dstack li:nth-child(4) .bw-stack i { background: repeating-linear-gradient(0deg, #fdfaf2 0 10px, #f6e0d8 10px 12px); border-color: #e9c1b2; }
.bw-dstack b { font: 600 24px/1 var(--head); margin-top: 6px; }
.bw-dstack span { font-weight: 700; font-size: 14px; } .bw-dstack small { font-size: 12px; color: var(--ink-soft); }
.bw-raffle { background: #f6e3e7; border-radius: 22px; padding: 14px 16px; margin-bottom: 14px; }
.bw-guests { display: inline-flex; align-items: center; gap: 8px; font: 700 18px var(--hand); margin: 0 14px 8px 0; }
.bw-guests input { width: 84px; font: 600 22px var(--head); border: 0; border-radius: 12px; padding: 6px 10px; background: var(--cloud); }
.bw-easy { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.bw-easy input { width: 18px; height: 18px; accent-color: var(--rain); }
.bw-tickets { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bw-tickets li { display: grid; justify-items: center; gap: 0; background: var(--cloud); border-radius: 14px; padding: 12px 8px; border: 2px dashed #e2b9c3; transform: rotate(var(--tilt)); }
.bw-tickets b { font: 600 30px/1 var(--head); color: #9a4f60; }
.bw-tickets span { font-size: 13px; color: var(--ink-soft); }
.bw-tickets em { font: 700 18px var(--hand); font-style: normal; }
.bw-tips { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.bw-tips li { background: #fff1c2; border-radius: 18px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
.bw-tips li:nth-child(2) { background: #e4e9d6; } .bw-tips li:nth-child(3) { background: #dbeaf5; }
.bw-send-slot { margin-top: 18px; max-width: 640px; }
.bw-receipt { background: #fffdf8; border: 2px solid #ece4cf; border-radius: 22px; padding: 16px 18px; }
.bw-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); margin-bottom: 8px; }
.bw-total b { font: 600 36px/1 var(--head); }
.bw-total span { color: var(--ink-soft); }
.bw-total em { flex-basis: 100%; font: 700 18px var(--hand); font-style: normal; color: #3f6a34; }
.bw-total em.over { color: #a3523a; }
.bw-sg h3 { font: 700 19px var(--hand); color: var(--ink-soft); margin: 12px 0 4px; }
.bw-sg ul { list-style: none; margin: 0; padding: 0; }
.bw-sg li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px dashed #efe7d3; font-size: 15px; }
.bw-sg .bw-ico { width: 32px; height: 32px; border-radius: 10px; } .bw-sg .bw-ico svg { width: 24px; height: 24px; }
.bw-sg li i { font: 700 14px var(--hand); font-style: normal; color: var(--ink-soft); }
.bw-sg li b { min-width: 60px; text-align: right; }
.bw-send { position: relative; background: linear-gradient(160deg, #e4e9d6, #fbf1dc); border-radius: 26px; padding: 22px 18px 18px; transform: rotate(.6deg); }
.bw-send h3 { font-size: 23px; margin-bottom: 6px; }
.bw-send-sticker { position: absolute; top: -14px; left: 18px; font: 700 16px/1 var(--hand); background: #ffe0d2; color: #a3523a; padding: 6px 12px; border-radius: 99px; transform: rotate(-4deg); }
.bw-mail-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bw-mail-row input { flex: 1 1 180px; min-width: 0; font: inherit; padding: 11px 14px; border-radius: 99px; border: 2px solid #d9cfb6; background: var(--cloud); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.bw-alt { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.bw-mail-msg:empty { display: none; }
@media (max-width: 760px) {
  .bw { margin-top: -40px; border-radius: 24px; }
  .bw-start, .bw-cl-form { grid-template-columns: 1fr; }
  .bw-trail span { display: none; }
  .bw-trail button[aria-current] span { display: inline; }
  .bw-cards { grid-template-columns: 1fr; }
  .bw-card { transform: none; }
  .bw-pig-art { width: 42px; height: 34px; }
  .bw-spent { font-size: 22px; }
}

.bw-step { padding: 0; margin: 0; }
.bw-card.is-off { opacity: .8; background: #fbf8f1; border-style: dashed; }
.is-off .bw-tag { background: #eef3e6; color: #3f6a34; font-size: 16px; }
.is-off .bw-lane[aria-pressed] { box-shadow: none; border-color: transparent; transform: none; }
.bw-dstack { grid-template-columns: repeat(auto-fit, minmax(110px, 150px)); justify-content: center; }
.bw-tickets { grid-template-columns: repeat(auto-fit, minmax(120px, 170px)); justify-content: center; }
.bw-ctab table { width: auto; min-width: min(100%, 420px); }
.bw-alt .bw-mini { background: var(--cloud); padding: 10px 15px; font-size: 16px; box-shadow: 0 2px 0 #d9cfb6; }

/* Clothing type pages, round 3: legend, calculator hints, baby blocks, shelf filter chips, compact lanes */
.sz-on.sz-p, .sz-on.sz-nb, .sz-on.sz-2t { background: #a9c79a; }
.sz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.sz-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sz-legend i { width: 36px; flex: none; }
.calc-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); max-width: 560px; }
.look-col { display: flex; flex-direction: column; align-self: stretch; }
.look-col .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lk-card.lk-block { aspect-ratio: 1; align-content: center; justify-items: center; text-align: center; padding: 18px; border: 3px solid rgba(47, 59, 44, .14); border-radius: 18px; box-shadow: 6px 6px 0 rgba(47, 59, 44, .12), inset 0 0 0 5px rgba(255, 255, 255, .55); background: var(--blk, #e6eff6); }
.lk-card.lk-block:nth-child(4n+1) { --blk: #e6eff6; transform: rotate(-1deg); }
.lk-card.lk-block:nth-child(4n+2) { --blk: #f8edcb; transform: rotate(1deg); }
.lk-card.lk-block:nth-child(4n+3) { --blk: #f4e6e9; transform: rotate(.6deg); }
.lk-card.lk-block:nth-child(4n) { --blk: #e8efdd; transform: rotate(-.8deg); }
.lk-block .lk-n { position: static; width: 46px; height: 46px; border-radius: 12px; font: 700 28px/1 var(--head); background: var(--linen, #fffdf7); border: 2px solid rgba(47, 59, 44, .18); transform: rotate(-6deg); margin-bottom: 6px; }
.lk-block b { font-size: 17.5px; }
@media (max-width: 560px) { .look-col .lk-grid { grid-template-columns: 1fr; } .lk-card.lk-block { aspect-ratio: auto; } }
.shelf-filter { margin: 4px 0 14px; }
.sf-title { font: 600 20px/1.2 var(--head); margin: 0 0 10px; }
.sf-title small { display: block; font: 400 14px var(--body); color: var(--ink-soft); margin-top: 4px; }
.sf-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sf { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 2px solid transparent; background: var(--sh); color: var(--ink); font: 600 14.5px var(--body); cursor: pointer; transition: transform .15s; }
.sf:hover { transform: translateY(-2px); }
.sf .shelf-ico { width: 28px; height: 28px; background: var(--linen, #fffdf7); border-radius: 50%; padding: 4px; }
.sf i { font: 700 15px/24px var(--hand); font-style: normal; min-width: 24px; text-align: center; border-radius: 99px; background: var(--linen, #fffdf7); color: var(--sk); }
.sf[aria-pressed="true"] { border-color: var(--sk); box-shadow: 0 3px 0 var(--sk); }
.ln-compact .ln { padding: 12px 12px 10px; }
.ln-compact .ln-head { padding-bottom: 8px; }
.ln-compact .ln-ico { width: 36px; height: 30px; }
.ln-compact .ln ul { gap: 5px; }
.ln-compact .ln li a { padding: 6px 10px; border-radius: 12px; }
.ln-compact .ln li span, .ln-compact .ln li small { display: none; }
.ln-compact .ln li em { top: 5px; }

/* ---------- Homepage blocks picked from the concepts (src/home-blocks.mjs) ---------- */
.hp-copy h1 em { font-style: normal; color: var(--fox, #c8693a); }
.hp-season { display: inline-flex; align-items: center; gap: 8px; background: #fff4dd; border: 2px solid #f0d49a; border-radius: 99px; padding: 5px 14px 6px 8px; font: 700 18px/1.1 var(--hand); color: var(--ink); transform: rotate(-2deg); margin-bottom: 16px; }
.hp-search { border: 2px solid var(--bark, #5b4632); box-shadow: 0 6px 0 rgba(91, 70, 50, .18); }
.hp-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 15px; }
.hp-quick span { font: 700 18px var(--hand); }
.hp-quick a { text-decoration: none; background: var(--cloud, #fffdf7); border: 1.5px solid var(--line); padding: 6px 12px; border-radius: 99px; font-weight: 600; color: var(--ink); }
.hp-quick a:hover { background: #fff4dd; }
.hp-signs { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: -26px auto 0; position: relative; z-index: 4; padding: 0 16px; }
.hp-sign { background: #7a5d40; color: #fffdf7; border: 3px solid var(--bark, #5b4632); border-radius: 10px; padding: 8px 18px; font: 700 21px/1.2 var(--hand); box-shadow: 0 5px 0 rgba(91, 70, 50, .25); transform: rotate(-2deg); }
.hp-sign:nth-child(2) { transform: rotate(2deg); } .hp-sign:nth-child(3) { transform: rotate(-1deg); }
.hp-sign b { font: 600 25px var(--head); margin-right: 4px; }
.hp-sh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hp-sh h2 { margin: 0; }
.hp-scrawl { font: 700 21px/1.1 var(--hand); color: #a4522a; transform: rotate(-2deg); display: inline-flex; align-items: center; gap: 6px; }
.hp-tape { position: absolute; top: -13px; left: 50%; width: 120px; height: 28px; margin-left: -60px; background: rgba(143, 163, 130, .55); border-inline: 2px dashed rgba(255, 255, 255, .6); transform: rotate(2deg); z-index: 2; }
.hp-sheet { position: relative; background: #e9dcc0; border-radius: 26px; padding: 34px 26px 28px; box-shadow: inset 0 0 0 2px rgba(91, 70, 50, .08); }
.hp-stickers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px 22px; }
.hp-stk { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.hp-blob-link { position: relative; display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ink); transform: rotate(var(--r)); transition: transform .2s; }
.hp-blob-link:hover { transform: rotate(0) scale(1.04); }
.hp-blob { display: block; width: 168px; height: 168px; border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%; overflow: hidden; background: var(--t); border: 6px solid #fff; box-shadow: 0 8px 14px -8px rgba(91, 70, 50, .55); }
.hp-blob .stock, .hp-blob img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hp-crit { position: absolute; top: 118px; right: 2px; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 4px 6px rgba(91, 70, 50, .25)); }
.hp-blob-link b { font: 600 20px/1.1 var(--head); background: #fff; padding: 4px 14px; border-radius: 99px; }
.hp-blob-link small { color: var(--ink-soft); font-size: 13.5px; }
.hp-cats { list-style: none; margin: 4px 0 0; padding: 12px 14px; width: 100%; max-width: 300px; display: grid; gap: 2px; text-align: left; background: #fffdf7; border-radius: 14px; box-shadow: 0 6px 12px -10px rgba(91, 70, 50, .6); background-image: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--t) 80%, #d9cfb6) 27px 28px); background-position: 0 10px; }
.hp-cats li { min-width: 0; }
.hp-cats a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 28px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cats a::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--t) 40%, #8fa382); }
.hp-cats a:hover { color: var(--rain); text-decoration: underline; }
.hp-season-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center; background: #f1e1c6; border-radius: 26px; padding: 36px clamp(18px, 3vw, 40px); }
.hp-season-box h2 { margin: 4px 0 8px; }
.hp-season-box p { color: var(--ink-soft); }
.hp-note { display: flex; gap: 8px; align-items: flex-start; background: #fff; border-radius: 10px; padding: 12px 14px; font-size: 15px; color: var(--ink) !important; }
.hp-check { position: relative; background: #fff; border-radius: 8px; padding: 26px 28px; box-shadow: 0 10px 20px -14px rgba(91, 70, 50, .6); transform: rotate(1.2deg); }
.hp-check .hp-tape { background: rgba(233, 196, 106, .55); }
.hp-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hp-check li { display: flex; gap: 10px; align-items: center; font: 700 21px var(--hand); }
.hp-check li::before { content: ""; width: 20px; height: 20px; border: 2.5px solid var(--bark, #5b4632); border-radius: 5px; flex: none; }
.hp-check li.done::before { background: var(--sun, #e9c46a); }
.hp-check a { color: var(--ink); }
.hp-pressed { position: absolute; right: -10px; bottom: -16px; transform: rotate(14deg); }
.hp-tags { list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; position: relative; }
.hp-tags::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: repeating-linear-gradient(90deg, var(--bark, #5b4632) 0 10px, transparent 10px 14px); }
.hp-tags li { transform: rotate(var(--r)); transform-origin: 50% -20px; transition: transform .25s; }
.hp-tags li:hover { transform: rotate(0); }
.hp-tags a { position: relative; display: grid; gap: 6px; align-content: start; height: 100%; background: var(--t); border-radius: 12px 12px 18px 18px; padding: 32px 18px 20px; text-decoration: none; color: var(--ink); }
.hp-tags a::before { content: ""; position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--mist, #f8f4ea); box-shadow: inset 0 0 0 2px var(--bark, #5b4632); }
.hp-tags a::after { content: ""; position: absolute; top: -22px; left: 50%; width: 2px; height: 34px; background: var(--bark, #5b4632); }
.hp-tags b { font: 600 20px/1.2 var(--head); }
.hp-tags small { font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 820px) { .hp-season-box { grid-template-columns: 1fr; } .hp-blob { width: 140px; height: 140px; } .hp-crit { top: 96px; } .hp-signs { margin-top: -18px; gap: 10px; } .hp-sign { font-size: 17px; padding: 6px 12px; } .hp-sign b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .hp-blob-link, .hp-tags li { transition: none; } }
@media (min-width: 900px) { .hp-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-season-box.hp-s-winter { background: #dfe8ef; } .hp-season-box.hp-s-spring { background: #e3ecd6; } .hp-season-box.hp-s-summer { background: #f7ebc4; }

/* ===== Storybook hub (car seats first): scrapbook hero, burrow types, meadow table, envelope lanes, tip card, hedgehog FAQ ===== */
.sb-hand { font-family: var(--hand); font-weight: 700; }
.sb-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.sb-sh h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0; }
.sb-sh p, .sb-sub { margin: 6px 0 0; color: var(--ink-soft); }
.sb-sh .sb-hand { font-size: 22px; color: #a4522a; transform: rotate(-2deg); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .sb-bob { animation: sbBob 3.4s ease-in-out 1; } }
@keyframes sbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sb-tape { position: absolute; top: -12px; left: 22px; width: 110px; height: 28px; background: rgba(233, 196, 106, .55); border-inline: 2px dashed rgba(255, 255, 255, .6); transform: rotate(-5deg); z-index: 3; }
.sb-tape.b { background: rgba(191, 211, 214, .75); }
.sb-stk { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 4px 6px rgba(91, 70, 50, .25)); }
/* hero */
.sb-hero { padding-block: 28px 40px; background-image: radial-gradient(rgba(91, 70, 50, .07) 1px, transparent 1.2px); background-size: 18px 18px; }
.sb-ch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 30px; align-items: center; }
.sb-ch > * { min-width: 0; }
.sb-hero h1 { font-size: clamp(44px, 5vw, 66px); margin: 8px 0 0; }
.sb-stamps { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.sb-stamp { font-family: var(--hand); font-weight: 700; font-size: 20px; border: 3px double #a4522a; color: #a4522a; border-radius: 10px; padding: 3px 12px; transform: rotate(-3deg); background: rgba(255, 255, 255, .6); }
.sb-stamp:nth-child(2) { transform: rotate(2deg); border-color: var(--rain); color: var(--rain); }
.sb-stamp:nth-child(3) { transform: rotate(-1deg); border-color: var(--bark); color: var(--bark); }
.sb-lede { color: var(--ink-soft); font-size: 18.5px; max-width: 560px; margin: 0 0 18px; }
.sb-memo { position: relative; background: #fff8d8; padding: 18px 18px 16px; border-radius: 4px; box-shadow: 0 8px 16px -12px rgba(91, 70, 50, .6); font-size: 15.5px; transform: rotate(-.8deg); max-width: 560px; }
.sb-memo .sb-hand { font-size: 19px; color: #a4522a; }
.sb-collage { position: relative; height: 380px; }
.sb-pol { position: absolute; background: #fff; padding: 10px 10px 38px; box-shadow: 0 10px 20px -10px rgba(91, 70, 50, .45); width: 230px; max-width: 58%; }
.sb-pol .stock, .sb-pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sb-pol > .sb-hand { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 20px; }
.sb-pol .sb-tape { left: 50%; margin-left: -55px; transform: rotate(3deg); }
.sb-pol1 { left: 4%; top: 20px; transform: rotate(-7deg); }
.sb-pol2 { right: 2%; top: 80px; transform: rotate(6deg); z-index: 2; }
.sb-sq { position: absolute; left: 30%; bottom: 0; z-index: 4; }
.sb-press { position: absolute; left: 46%; top: 0; transform: rotate(-14deg); }
/* burrow type windows */
.sb-burrows-sec { padding-block: 40px; }
.sb-burrows { list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 30px 22px; }
.sb-burrow { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; text-decoration: none; color: var(--ink); }
.sb-door { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.05; border-radius: 50% 50% 22px 22px; overflow: hidden; border: 4px solid var(--bark); background: var(--sky); box-shadow: inset 0 -14px 0 rgba(91, 70, 50, .12); }
.sb-door .stock, .sb-door img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sb-burrow:hover .sb-door img { transform: scale(1.06); }
.sb-moss { position: absolute; left: -6px; right: -6px; bottom: 0; height: 18px; background: radial-gradient(circle at 10px 18px, var(--sage) 9px, transparent 10px) 0 0 / 20px 18px repeat-x; }
.sb-peek { position: absolute; top: -26px; right: 8%; z-index: 2; }
.sb-burrow b { font: 600 21px/1.15 var(--head); margin-top: 8px; }
.sb-burrow i { font-style: normal; font-weight: 700; font-size: 14px; background: var(--sun); border-radius: 99px; padding: 1px 10px; }
.sb-burrow small { color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }
/* ranger's log table (trail concept C) on the real explorer */
.sb-table { position: relative; }
.sb-table .wrap { position: relative; }
.sb-snail { align-self: end; margin-right: 12px; }
.sb-table .facets { background: #c9a06c; border: 3px solid #8a6a4a; border-radius: 18px; color: #2f2a1f; }
.sb-table .facets > summary { font-family: var(--head); color: #2f2a1f; }
.sb-table .fgroup { border-top-color: rgba(91, 70, 50, .25); }
.sb-table .fgroup > summary { font-family: var(--hand); font-size: 18px; }
.sb-table .fgroup > summary::after { color: #2f2a1f; }
.sb-table .fbody label:has(input[type=checkbox]) { background: rgba(255, 250, 240, .78); border-radius: 10px; padding: 5px 10px; font-size: 14.5px; font-weight: 600; }
.sb-table .fbody label:has(input:checked) { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--rain); }
.sb-table .fbody input[type=checkbox] { accent-color: var(--rain); }
.sb-table .fsearch input, .sb-table .facets select { background: #fffaf0; border-color: #8a6a4a; }
.sb-table .range span, .sb-table .fbody .count { color: #2f2a1f; }
.sb-table #f-clear { background: #fffaf0; }
.sb-table .results .table-scroll { background: #fffaf0; border: 0; border-radius: 6px; box-shadow: 0 14px 26px -18px rgba(91, 70, 50, .7); }
.sb-table .explorer thead th { font-family: var(--hand); font-weight: 700; font-size: 18px; color: #5d7d52; background: #f3ead2; }
.sb-table .explorer th.c span { font-family: var(--body); }
.sb-table .explorer td { border-bottom: 1px solid #e9e0c8; }
.sb-table .explorer tbody tr:hover { background: #fbf3e0; }
@media (max-width: 900px) { .sb-snail { display: none; } }
/* envelope lanes */
.sb-env-sec { padding-block: 40px; }
.sb-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; }
.sb-env { position: relative; background: var(--t); border-radius: 8px; padding: 34px 20px 18px; box-shadow: 0 10px 18px -14px rgba(91, 70, 50, .6); transform: rotate(var(--r)); }
.sb-env::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .45) 50%) left / 50% 100% no-repeat, linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, .45) 50%) right / 50% 100% no-repeat; }
.sb-env h3 { font-size: 24px; margin: 0; }
.sb-env p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.sb-env ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.sb-env li a { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(91, 70, 50, .2); padding-bottom: 4px; text-decoration: none; color: var(--ink); }
.sb-env li a:hover span { text-decoration: underline; }
.sb-env b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-env details { margin-top: 10px; }
.sb-env summary { cursor: pointer; font-weight: 700; color: var(--rain); font-size: 14px; }
.sb-env details ul { margin-top: 8px; }
/* season tip */
.sb-tip-sec { padding-block: 10px 40px; }
.sb-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; background: #e9eef4; border: 2px solid #cfd9e4; border-radius: 26px; padding: 22px 26px; }
.sb-tip-warm { background: #fbf1dc; border-color: #f0d49a; }
.sb-tip .sb-hand { font-size: 20px; color: #a4522a; }
.sb-tip h2 { font-size: 28px; margin: 4px 0 6px; }
.sb-tip p { margin: 0; color: var(--ink-soft); }
/* hedgehog FAQ */
.sb-faq .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; }
.sb-host { display: grid; justify-items: center; gap: 6px; text-align: center; top: 60px; }
.sb-bubble { position: relative; background: var(--cloud); border: 2.5px solid var(--bark); border-radius: 28px; padding: 20px 22px; margin-bottom: 14px; }
.sb-bubble::after { content: ''; position: absolute; bottom: -14px; left: 50%; width: 24px; height: 24px; background: var(--cloud); border-right: 2.5px solid var(--bark); border-bottom: 2.5px solid var(--bark); transform: translateX(-50%) rotate(45deg); }
.sb-bubble .sb-hand { font-size: 21px; color: #a4522a; }
.sb-bubble h2 { font-size: clamp(26px, 3vw, 36px); margin: 2px 0 6px; }
.sb-bubble p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.sb-faq .faq-list details { background: var(--cloud); border: 2px solid var(--line); border-radius: 22px; transition: background .2s; }
.sb-faq .faq-list details[open] { background: #fff8e8; border-color: #ecd6a6; }
.sb-faq summary { display: flex; align-items: center; gap: 12px; }
.sb-faq summary h3 { flex: 1; }
.sb-leaf { flex: none; display: grid; }
.sb-still { font-size: 20px; color: #a4522a; margin-top: 10px; }
@media (max-width: 900px) {
  .sb-ch, .sb-faq .faq-grid { grid-template-columns: 1fr; }
  .sb-collage { height: 250px; } .sb-pol { max-width: 46%; padding-bottom: 32px; }
  .sb-lanes { grid-template-columns: 1fr; }
  .sb-host { position: static; }
  .sb-host .sb-bob svg { width: 110px; height: auto; }
}
@media (max-width: 560px) { .sb-burrows { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-tip { grid-template-columns: 1fr; justify-items: start; } }

/* ===== Homepage season band (concept A "in the meadow", picked Oct 2026) ===== */
.hp-band { position: relative; overflow: hidden; padding-block: 56px; background: #f6e2c9; border-block: 3px solid #e7c9a2; }
.hp-band-winter { background: #e6eef3; border-color: #cbdae4; }
.hp-band-spring { background: #e8f0dc; border-color: #c8d9b4; }
.hp-band-summer { background: #fbedc6; border-color: #efd68f; }
.hp-band .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px; align-items: center; }
.hp-band .wrap > * { min-width: 0; }
.hp-band h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 4px 0 8px; }
.hp-band p { color: var(--ink-soft); margin: 0; }
.hp-band .hp-scrawl { font-size: 22px; color: #a4522a; }
.hp-band-note { display: flex; gap: 10px; align-items: flex-start; background: var(--cloud); border: 2px dashed #d9a777; border-radius: 16px; padding: 12px 16px; font-size: 15px; margin-top: 18px !important; }
.hp-band-note svg { flex: none; }
.hp-band-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-band-list a { display: flex; gap: 12px; align-items: center; background: var(--cloud); border: 2px solid rgba(91, 70, 50, .14); border-radius: 18px; padding: 10px 14px; text-decoration: none; font-weight: 600; color: var(--ink); min-height: 58px; transition: transform .15s; }
.hp-band-list a:hover { transform: translateY(-2px) rotate(-.5deg); }
.hp-band-list a > span { flex: none; width: 40px; display: grid; place-items: center; }
.hp-band-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hp-fall { position: absolute; top: 0; opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .hp-fall { animation: hpFall 9s linear infinite; } }
@keyframes hpFall { 0% { transform: translateY(-40px) rotate(0); } 100% { transform: translateY(520px) rotate(320deg); } }
@media (max-width: 900px) { .hp-band .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hp-band-list { grid-template-columns: 1fr; } }

/* ===== Season touches on every homepage band ===== */
.home-hero ~ section[data-band] { position: relative; }
.sz-deco { position: absolute; top: 18px; z-index: 1; pointer-events: none; opacity: .95; }
.sz-deco.sz-r { right: max(16px, 4%); transform: rotate(8deg); }
.sz-deco.sz-l { left: max(10px, 2%); transform: rotate(-10deg); }
.sz-note { font-family: var(--hand); font-weight: 700; font-size: 20px; color: #a4522a; transform: rotate(-2deg); display: inline-block; margin-left: 10px; }
@media (max-width: 700px) { .sz-deco { top: 6px; } .sz-deco svg { width: 28px; } .sz-note { display: block; margin: 2px 0 0; font-size: 18px; } }
/* winter: cool tints and snow caps on cards */
body.season-winter .home-sec.alt, body.season-winter .home-how { background: #eef3f6; }
body.season-winter .home-leaps { background: linear-gradient(135deg, #e9f0f4, #f6f8f8); }
body.season-winter .hp-sheet { background: #dfe6ea; }
body.season-winter .big-cards > li, body.season-winter .vs-cards > li, body.season-winter .brand-tiles a, body.season-winter .hp-tags a, body.season-winter .hb-jar { position: relative; }
body.season-winter .big-cards > li::before, body.season-winter .vs-cards > li::before, body.season-winter .brand-tiles a::before, body.season-winter .hp-tags a::before { content: ''; position: absolute; left: 10px; right: 10px; top: -6px; height: 14px; z-index: 2; pointer-events: none; background: radial-gradient(circle at 8px 10px, #fff 7px, transparent 8px) 0 0 / 16px 14px repeat-x; filter: drop-shadow(0 1px 0 rgba(120, 150, 170, .35)); }
body.season-winter .sz-note { color: #4d7590; }
/* spring: fresh greens and blossom dots */
body.season-spring .home-sec.alt, body.season-spring .home-how { background: #eef4e6; }
body.season-spring .home-leaps { background: linear-gradient(135deg, #eef4e6, #fbeef0); }
body.season-spring .hp-sheet { background: #e4ead6; }
body.season-spring .big-cards > li, body.season-spring .vs-cards > li, body.season-spring .brand-tiles a { box-shadow: inset 0 4px 0 #f2c3cd; }
body.season-spring .sz-note { color: #b0546a; }
/* summer: warm sunshine */
body.season-summer .home-sec.alt, body.season-summer .home-how { background: #fdf4dc; }
body.season-summer .home-leaps { background: linear-gradient(135deg, #fdf3d6, #eaf3f6); }
body.season-summer .hp-sheet { background: #f3e2b3; }
body.season-summer .big-cards > li, body.season-summer .vs-cards > li, body.season-summer .brand-tiles a { box-shadow: 0 6px 0 rgba(233, 196, 106, .45); }
body.season-summer .sz-note { color: #b9772a; }
/* fall */
body.season-fall .home-sec.alt, body.season-fall .home-how { background: #f8efdf; }
/* season preview bar (concept pages only) */
.sz-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 8px 16px; background: #2f3b2c; color: #fffdf7; font: 600 13px/1.3 var(--body); }
.sz-bar a { color: #fffdf7; text-decoration: none; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.sz-bar a[aria-current] { background: var(--sun); color: var(--ink); }

/* ===== Homepage mix picks (Oct 28): trail map C, camp badges C, ranger notes C, stages A, budget B, h2h A, brands A, how A ===== */
.tr-sec { position: relative; }
.tr-sh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.tr-sh h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }
.tr-hand { font-family: var(--hand); font-weight: 700; font-size: 22px; color: #a4522a; }
.tr-map { position: relative; background: #fffaf0; border: 3px solid #d9c9a0; border-radius: 30px; padding: 40px 30px 34px; box-shadow: 0 14px 30px -24px rgba(91, 70, 50, .7); background-image: repeating-radial-gradient(circle at 18% 22%, transparent 0 38px, rgba(143, 163, 130, .1) 38px 40px), repeating-radial-gradient(circle at 82% 70%, transparent 0 46px, rgba(181, 138, 90, .08) 46px 48px); }
.tr-path { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); z-index: 0; pointer-events: none; }
.tr-compass { position: absolute; right: 24px; top: -28px; z-index: 2; }
.tr-stops { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
.tr-stop { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.tr-stops > li:nth-child(3n+2) { margin-top: 36px; }
.tr-pin-link { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; color: var(--ink); }
.tr-pin { display: block; width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 5px solid #fffaf0; box-shadow: 0 0 0 3px var(--t), 0 8px 16px -8px rgba(91, 70, 50, .6); background: var(--t); }
.tr-pin .stock, .tr-pin img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr-who { position: absolute; top: 92px; right: -8px; }
.tr-board { background: #c9a06c; color: #2f2a1f; font: 600 18px var(--head); padding: 4px 14px; border-radius: 6px; border: 2px solid #8a6a4a; margin-top: 6px; }
.tr-pin-link small { color: var(--ink-soft); font-size: 13.5px; }
.tr-pin-link:hover .tr-board { background: #d8b384; }
.tr-cats { list-style: none; margin: 0; padding: 10px 14px; width: 100%; max-width: 280px; display: grid; gap: 0; background: #fffdf7; border: 2px solid #e2d6b8; border-radius: 14px; background-image: repeating-linear-gradient(transparent 0 27px, #efe6cf 27px 28px); background-position: 0 10px; }
.tr-cats a { display: flex; align-items: center; gap: 8px; line-height: 28px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-cats a::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 1.5px #8a6a4a; }
.tr-cats a:hover { color: var(--rain); text-decoration: underline; }
.tr-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 26px; }
.tr-badges > li { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.tr-badge { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.tr-patch { position: relative; display: block; width: 210px; height: 210px; border-radius: 50%; padding: 11px; background: var(--t); box-shadow: 0 0 0 6px var(--t), 0 0 0 9px #5b4632; transition: transform .2s; }
.tr-patch::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 3px dashed rgba(91, 70, 50, .55); }
.tr-patch .stock, .tr-patch img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tr-badge:hover .tr-patch { transform: rotate(-4deg) scale(1.03); }
.tr-ribbon { background: #c8693a; color: #fffaf0; font: 600 21px var(--head); padding: 6px 28px; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.tr-badge small { font-weight: 700; color: #a4522a; font-size: 14px; }
.tr-subs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tr-subs a { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1.5px dashed #b58a5a; border-radius: 99px; padding: 2px 10px; background: #fffaf0; }
.tr-subs a:hover { background: #f3e2c6; }
.tr-journal { position: relative; background: #fffaf0; border-radius: 6px; box-shadow: 0 14px 26px -18px rgba(91, 70, 50, .7); padding: 34px 34px 30px 72px; background-image: linear-gradient(90deg, transparent 52px, #e8b4a4 52px 54px, transparent 54px), repeating-linear-gradient(transparent 0 33px, #e9e0c8 33px 34px); }
.tr-j-winter { background-color: #f6f9fb; }
.tr-rings { position: absolute; left: 14px; top: 20px; bottom: 20px; display: flex; flex-direction: column; justify-content: space-around; }
.tr-rings i { width: 22px; height: 22px; border-radius: 50%; background: var(--mist); box-shadow: inset 0 0 0 3px #b8a57d; }
.tr-jgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.tr-jgrid > * { min-width: 0; }
.tr-jgrid h2 { font-size: clamp(30px, 3.2vw, 42px); margin: 4px 0 6px; }
.tr-jgrid p { color: var(--ink-soft); margin: 0; }
.tr-note { display: flex; gap: 8px; align-items: flex-start; background: #fff3cf; border-radius: 8px; padding: 12px 14px; font-size: 15px; margin-top: 14px !important; color: var(--ink) !important; }
.tr-note svg { flex: none; }
.tr-jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tr-jlist a { display: flex; gap: 12px; align-items: center; font: 700 22px/1.3 var(--hand); color: var(--ink); min-height: 34px; }
.tr-jlist a > span { flex: none; width: 40px; display: grid; place-items: center; }
@media (max-width: 900px) {
  .tr-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-stops > li:nth-child(3n+2) { margin-top: 0; }
  .tr-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-patch { width: 160px; height: 160px; }
  .tr-jgrid { grid-template-columns: 1fr; }
  .tr-journal { padding-left: 56px; background-image: linear-gradient(90deg, transparent 40px, #e8b4a4 40px 42px, transparent 42px), repeating-linear-gradient(transparent 0 33px, #e9e0c8 33px 34px); }
  .tr-rings { left: 8px; }
}
@media (max-width: 520px) { .tr-pin { width: 112px; height: 112px; } .tr-who { top: 70px; } .tr-who svg { width: 36px; } .tr-map { padding: 30px 14px; } .tr-stops { gap: 26px 12px; } .tr-patch { width: 130px; height: 130px; padding: 8px; } .tr-ribbon { font-size: 17px; padding: 5px 20px; } }
/* stages A: due-date card with hedgehog, stepping stones */
.hp2-stages .hl-copy { position: relative; background: var(--cloud); border: 2px solid var(--line); border-radius: 26px; padding: 22px; }
.hp2-hog { position: absolute; right: 16px; top: -46px; }
@media (prefers-reduced-motion: no-preference) { .hp2-hog { animation: sbBob 3.4s ease-in-out 1; } }
.hp2-stages .hl-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
.hp2-stages .hl-strip a { background: #ebe3cc; border: 2.5px solid var(--bark); border-radius: 46% 54% 50% 50% / 56% 50% 50% 44%; padding: 14px 10px; text-align: center; box-shadow: 0 5px 0 rgba(91, 70, 50, .2); height: 100%; align-content: center; }
.hp2-stages .hl-strip li:nth-child(odd) a { transform: translateY(8px) rotate(-2deg); }
.hp2-stages .hl-strip li:nth-child(even) a { transform: rotate(2deg); }
.hp2-stages .hl-strip a:hover { background: #f3ead2; }
.hp2-stages .hl-strip span { font-family: var(--hand); font-size: 17px; text-transform: none; letter-spacing: 0; color: #a4522a; }
.hp2-stages .hl-strip b { font-size: 13.5px; line-height: 1.3; }
@media (max-width: 820px) { .hp2-stages .hl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* budget B: ticket + envelopes */
.hp2-budget .hb-play { background: none; border: 0; box-shadow: none; padding: 0; }
.hp2-budget .hb-controls { position: relative; background: #fff; border: 2px dashed var(--line); border-radius: 14px; padding: 24px 26px; box-shadow: 0 12px 24px -18px rgba(91, 70, 50, .6); }
.hp2-budget .hb-controls::before, .hp2-budget .hb-controls::after { content: ''; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--mist); }
.hp2-budget .hb-controls::before { left: -14px; } .hp2-budget .hb-controls::after { right: -14px; }
.hp2-budget .hb-amount output { color: var(--rain); }
.hp2-budget .hb-env svg { max-width: 160px; filter: drop-shadow(0 8px 10px rgba(91, 70, 50, .2)); }
.hp2-budget .hb-env:nth-child(1) { transform: rotate(-2deg); } .hp2-budget .hb-env:nth-child(2) { transform: rotate(1.5deg); } .hp2-budget .hb-env:nth-child(3) { transform: rotate(-1deg); }
.hp2-budget .hb-jar figcaption span { font-size: 18px; }
/* head-to-heads A: round icon portraits */
.hp2-h2h .vs-cards a { text-align: center; justify-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 24px; padding: 18px; }
.hp2-h2h .vs-row { grid-template-columns: auto auto auto; justify-content: center; gap: 10px; }
.hp2-h2h .vs-side { display: grid; justify-items: center; gap: 4px; background: none; padding: 0; }
.hp2-h2h .vs-side .vs-art { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; padding: 0; border-radius: 50%; background: var(--dept-l, #f3eedf); border: 3px solid var(--bark); }
.hp2-h2h .vs-cards .vs-side .vs-art svg { width: 62px; height: 62px; margin: 0; }
.hp2-h2h .vs-side small { font: 700 16px/1 var(--hand); color: var(--ink-soft); }
.hp2-h2h .vs-row i { background: none; width: auto; height: auto; font: 700 22px var(--hand); color: #a4522a; }
.hp2-h2h .vs-cards b { font-family: var(--head); font-size: 16.5px; }
.hp2-h2h .vs-v { font-family: var(--hand); color: #a4522a; }
.hp2-h2h .vs-sec { font-size: 13px; font-weight: 700; background: #f3eedf; border-radius: 99px; padding: 2px 10px; }
/* brands A: wooden plaques */
.hp2-brands .brand-tiles a { background: none; border: 0; padding: 0; text-align: center; justify-items: center; }
.hp2-brands .bt-mark { width: 100%; aspect-ratio: 1.5; min-height: 0 !important; border-radius: 50% !important; background: #c9a77c !important; background-image: none !important; border: 3px solid var(--bark); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .2), 0 5px 0 rgba(91, 70, 50, .25); padding: 8px !important; }
.hp2-brands .bt-mark .bt-name { color: #fffdf7 !important; font-size: 18px !important; }
.hp2-brands .brand-tiles a:hover .bt-mark { background: #b8925f !important; }
.hp2-brands .bt-meta { text-align: center; }
/* how A: numbered mushrooms */
.hp2-how ol { list-style: none; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hp2-how li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; background: var(--cloud); border: 2px dashed var(--line); border-radius: 22px; padding: 18px; }
.hp2-how li b { display: block; font-family: var(--head); font-size: 19px; }
.hp2-how li span { font-size: 15px; color: var(--ink-soft); }
.hp2-how li span b { color: var(--ink); }
@media (max-width: 820px) { .hp2-how ol { grid-template-columns: 1fr; } }
.sb-h2-note { font-size: 21px; color: #a4522a; font-weight: 700; margin-left: 8px; display: inline-block; transform: rotate(-2deg); }

/* ===== Homepage flow (Oct 28): stops without category lists, alternating bands with soft wavy edges, one heading style ===== */
.tr-stops { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; }
.tr-stops > li:nth-child(3n+2) { margin-top: 0; }
.tr-stops > li:nth-child(even) { margin-top: 44px; }
.tr-pin { width: 128px; height: 128px; }
.tr-who { top: 84px; right: -4px; }
.tr-map { padding: 34px 26px 30px; }
.tr-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-badges > li:nth-child(even) .tr-patch { transform: rotate(3deg); }
.tr-badges > li:nth-child(odd) .tr-patch { transform: rotate(-2deg); }
body { --flow-alt: #f2e8d2; }
body.season-winter { --flow-alt: #e8eef1; }
body.season-spring { --flow-alt: #eaf1df; }
body.season-summer { --flow-alt: #fbefd2; }
.home-hero ~ .flow { position: relative; padding-block: 64px; background: var(--mist); }
.home-hero ~ .flow.flow-alt { background: var(--flow-alt) !important; }
.home-hero ~ .flow.flow-alt::before, .home-hero ~ .flow.flow-alt::after { content: ''; position: absolute; left: 0; right: 0; height: 34px; background: var(--flow-alt); pointer-events: none; z-index: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20C120 4 240 4 360 16s240 18 360 6 240-20 360-8 240 16 360 2V34z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20C120 4 240 4 360 16s240 18 360 6 240-20 360-8 240 16 360 2V34z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.home-hero ~ .flow.flow-alt::before { top: -33px; }
.home-hero ~ .flow.flow-alt::after { bottom: -33px; transform: scaleY(-1); }
.home-hero ~ .flow > .wrap { position: relative; z-index: 1; }
.home-hero ~ .flow + .flow { border-top: 0; }
/* one heading style everywhere */
.home-hero ~ .flow .hs-head, .home-hero ~ .flow .hb-head, .home-hero ~ .flow .hp-sh, .home-hero ~ .flow .tr-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 24px; }
.home-hero ~ .flow h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }
.home-hero ~ .flow .hs-head p, .home-hero ~ .flow .hb-head p, .home-hero ~ .flow .hb-head .section-lede { flex-basis: 100%; margin: 0; color: var(--ink-soft); }
.home-hero ~ .flow .hs-head > a { margin-left: auto; }
.home-hero ~ .flow .hp-scrawl, .home-hero ~ .flow .tr-hand, .home-hero ~ .flow .sz-note { font: 700 21px var(--hand); color: #a4522a; transform: rotate(-2deg); display: inline-block; margin: 0; }
.hp2-stages .hl-copy h2 { font-size: clamp(28px, 3vw, 38px); }
.hp2-how h2 { margin-bottom: 20px !important; }
.home-hero ~ .flow .sz-deco { top: 26px; }
@media (max-width: 1000px) { .tr-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-stops > li:nth-child(even) { margin-top: 0; } .tr-stops > li:nth-child(3n+2) { margin-top: 30px; } }
@media (max-width: 700px) { .tr-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-stops > li:nth-child(3n+2) { margin-top: 0; } .tr-stops > li:nth-child(even) { margin-top: 26px; } .home-hero ~ .flow { padding-block: 48px; } .tr-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-hero ~ .flow.flow-alt { z-index: 1; }
@media (max-width: 700px) { .tr-path { display: none; } }

/* ===== Homepage storybook kit (Oct 28 pm): one card, one label, one round frame, illustrated joins ===== */
body { --k-paper: #fffaf0; --k-line: #e2d6b8; --k-wood: #c9a06c; --k-wood-dk: #8a6a4a; --k-shadow: 0 12px 24px -18px rgba(91, 70, 50, .65); }
/* joins replace the plain wave edges */
.home-hero ~ .flow.flow-alt::before, .home-hero ~ .flow.flow-alt::after { display: none; }
.home-hero ~ .flow { padding-block: 40px 56px; }
.fx { position: relative; display: block; height: 90px; margin: -1px 0; line-height: 0; }
.fx svg { display: block; width: 100%; height: 100%; }
.fx-to-alt .fx-a { fill: var(--mist); } .fx-to-alt .fx-b { fill: var(--flow-alt); }
.fx-to-base .fx-a { fill: var(--flow-alt); } .fx-to-base .fx-b { fill: var(--mist); }
.fx-crit { position: absolute; bottom: 22px; line-height: 1; }
.fx-crit.fx-l { left: calc(31% + 10px); } .fx-crit.fx-r { right: calc(31% - 10px); }
@media (prefers-reduced-motion: no-preference) { .fx-crit { animation: sbBob 3.6s ease-in-out 1; } }
@media (max-width: 700px) { .fx { height: 54px; } .fx-crit svg { width: 34px; height: auto; } .fx-crit { bottom: 10px; } }
/* one card */
.home-hero ~ .flow .hl-copy, .hp2-budget .hb-controls, .hp2-h2h .vs-cards a, .hp2-how li, .tr-map { background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 22px; box-shadow: var(--k-shadow); }
.hp2-budget .hb-controls { border-style: solid; }
.hp2-budget .hb-controls::before, .hp2-budget .hb-controls::after { display: none; }
.tr-journal { border: 2.5px solid var(--k-line); border-radius: 22px; box-shadow: var(--k-shadow); }
/* one label: the wooden board */
.k-board, .hp2-h2h .vs-sec, .hp2-stages .hh-kicker, .hp2-budget .hb-amount span, .hp2-how li b, .tr-board { display: inline-block; background: var(--k-wood); color: #2f2a1f; border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 2px 12px; font: 600 15px/1.4 var(--head); box-shadow: 0 3px 0 rgba(91, 70, 50, .25); }
.tr-board { font-size: 18px; padding: 4px 14px; }
.hp2-stages .hh-kicker { background: var(--k-wood); text-transform: none; letter-spacing: 0; margin: 0 0 10px; }
.hp2-budget .hb-amount { align-items: center; }
.hp2-budget .hb-amount span { font-size: 16px; color: #2f2a1f; }
.hp2-how li b { margin-bottom: 6px; font-size: 16px; }
.hp2-how li span { display: block; }
/* one round frame: paper rim, tint ring, stitched edge */
.tr-pin, .tr-patch, .hp2-h2h .vs-side .vs-art { position: relative; border: 5px solid var(--k-paper); box-shadow: 0 0 0 3px var(--t, var(--dept-l, #e9dcc0)), 0 0 0 5px var(--k-wood-dk), 0 10px 18px -10px rgba(91, 70, 50, .6); }
.tr-patch { padding: 0; box-shadow: 0 0 0 6px var(--t), 0 0 0 9px var(--k-wood-dk), 0 12px 20px -12px rgba(91, 70, 50, .6); }
.tr-patch::after { inset: 8px; }
.hp2-h2h .vs-side .vs-art { width: 80px; height: 80px; background: var(--dept-l, #f3eedf); }
.hp2-h2h .vs-cards a { padding: 22px 18px 18px; }
.hp2-h2h .vs-v { display: block; line-height: 1; }
/* stages: stones sit on the band, no white panel */
.hp2-stages .hl-card { background: none; box-shadow: none; padding: 0; }
.hp2-stages .hl-strip a { background: var(--k-paper); border-color: var(--k-wood-dk); }
.hp2-stages .hl-strip a:hover { background: #f6ecd6; }
/* tools: paper tags on the same string, icon in a round frame */
.hp-tags a { background: var(--k-paper) !important; border: 2.5px solid var(--k-line); box-shadow: var(--k-shadow); }
.hp-tags a > span:first-child { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--t); border: 3px solid var(--k-paper); box-shadow: 0 0 0 2px var(--k-wood-dk); margin-bottom: 4px; }
.hp-tags a > span:first-child svg { width: 40px; height: auto; }
/* brands: wooden signs with nails */
.hp2-brands .bt-mark { aspect-ratio: auto !important; min-height: 74px !important; border-radius: 10px !important; background: var(--k-wood) !important; border: 2.5px solid var(--k-wood-dk); box-shadow: inset 0 0 0 4px rgba(255, 250, 240, .18), 0 4px 0 rgba(91, 70, 50, .25); position: relative; background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(91, 70, 50, .08) 9px 10px) !important; }
.hp2-brands .bt-mark::before, .hp2-brands .bt-mark::after { content: ''; position: absolute; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--k-wood-dk); }
.hp2-brands .bt-mark::before { left: 9px; } .hp2-brands .bt-mark::after { right: 9px; }
.hp2-brands .bt-mark .bt-name { color: #2f2a1f !important; font-size: 19px !important; }
.hp2-brands .brand-tiles li:nth-child(odd) .bt-mark { transform: rotate(-1.5deg); }
.hp2-brands .brand-tiles li:nth-child(even) .bt-mark { transform: rotate(1.2deg); }
.hp2-brands .brand-tiles a:hover .bt-mark { background-color: #d8b384 !important; }
/* season stickers off the waves; joins carry the critters now */
.home-hero ~ .flow .sz-deco { display: none; }
/* footer menu: no white box, sits on the meadow */
.mf-top { background: none; border: 0; box-shadow: none; padding: 8px 0 0; }
.meadow-foot h3 { display: inline-block; background: var(--k-wood); color: #2f2a1f; border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 1px 12px; font: 600 15px/1.5 var(--head); box-shadow: 0 3px 0 rgba(91, 70, 50, .25); margin-bottom: 12px; }
.mf-depts a { background: rgba(255, 250, 240, .72); border: 1.5px solid rgba(91, 70, 50, .18); }
.mf-depts a:hover { background: var(--k-paper); }
.mf-brand p, .mf-links a, .mf-cta, .mf-all, .mf-legal { color: #2f2a1f; }
.mf-brand p { color: #3d3a33; }
.mf-logo img { filter: drop-shadow(0 2px 0 rgba(255, 250, 240, .6)); }
.hp2-how li span > b { display: table; margin-bottom: 8px; }
.meadow-foot h3 { text-transform: none; letter-spacing: 0; }
.meadow-foot .mf-cta { color: #2f2a1f !important; }
.meadow-foot .mf-social a { background: var(--k-paper); border: 1.5px solid rgba(91, 70, 50, .18); }

/* ===== Homepage story concepts (/concepts/story-*) ===== */
.st-blurb { margin: 0; padding: 10px 16px; text-align: center; background: #fff3cf; font-size: 14.5px; color: #2f2a1f; }
.st-markrow { display: flex; margin-bottom: 10px; position: relative; z-index: 2; }
.st-note { font: 700 21px var(--hand); color: #a4522a; transform: rotate(-2deg); display: inline-block; }
.story .tr-sh, .story .hs-head, .story .hb-head, .story .hp-sh { align-items: baseline; }
/* 1 meadow walk: a wooden stop post on the path before every section */
.st-post { position: relative; display: inline-block; padding-left: 26px; }
.st-post::before { content: ''; position: absolute; left: 8px; top: 4px; width: 7px; height: 40px; background: var(--k-wood-dk); border-radius: 3px; }
.st-post b { position: relative; display: inline-block; background: var(--k-wood); border: 2px solid var(--k-wood-dk); color: #2f2a1f; font: 700 18px var(--hand); padding: 1px 18px 1px 12px; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); box-shadow: 0 3px 0 rgba(91, 70, 50, .25); }
.story-meadow .flow { padding-top: 26px; }
/* 2 storybook: each section is a page on a reading table */
.story-book { background: #e9dcc0; padding-bottom: 40px; background-image: repeating-linear-gradient(90deg, transparent 0 180px, rgba(91, 70, 50, .05) 180px 182px); }
.story-book > section[data-page] { background: #fffaf0 !important; max-width: 1240px; margin: 46px auto 0; border-radius: 6px 18px 18px 6px; box-shadow: inset 14px 0 18px -14px rgba(91, 70, 50, .35), 0 2px 0 #e2d6b8, 0 4px 0 #fffaf0, 0 6px 0 #e2d6b8, 0 20px 30px -20px rgba(60, 40, 20, .5); position: relative; padding-block: 34px 60px !important; }
.story-book > section[data-page]::after { content: '~ ' attr(data-page) ' ~'; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: italic 600 15px var(--head); color: #8a6a4a; }
.story-book > section[data-page]::before { display: none !important; }
.st-chap { display: inline-flex; align-items: center; gap: 12px; font: italic 600 18px var(--head); color: #a4522a; letter-spacing: .04em; }
.st-chap::before, .st-chap::after { content: ''; width: 46px; height: 2px; background: linear-gradient(90deg, transparent, #c9a06c); }
.st-chap::after { transform: scaleX(-1); }
.story-book .st-markrow { justify-content: center; }
.story-book .tr-sh, .story-book .hs-head, .story-book .hb-head, .story-book .hp-sh { justify-content: center; text-align: center; }
.story-book h2 { font-style: italic; }
.story-book .tr-map, .story-book .tr-journal, .story-book .hl-copy, .story-book .hb-controls, .story-book .vs-cards a, .story-book .hp2-how li, .story-book .hp-tags a { box-shadow: none; }
@media (max-width: 1280px) { .story-book > section[data-page] { margin-inline: 12px; } }
/* 3 one year: light moves from morning to dusk, timeline down the side */
.story-year { position: relative; }
.story-year > section[style*="--si"] { background: color-mix(in srgb, #fbf1d6 calc(100% - var(--si) * 11%), #ddd6ec) !important; }
.story-year > section[style*="--si"]::before, .story-year > section[style*="--si"]::after { display: none !important; }
.st-spine { position: absolute; left: max(18px, calc(50% - 650px)); top: 0; bottom: 0; width: 0; border-left: 4px dotted #c9a06c; z-index: 1; pointer-events: none; }
.story-year .hero-banner ~ * .st-spine { display: none; }
.st-time { position: relative; display: inline-block; margin-left: -6px; background: #fffaf0; border: 2.5px solid #c9a06c; border-radius: 99px; padding: 2px 16px 2px 30px; font: 700 18px var(--hand); color: #2f2a1f; }
.st-time::before { content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #e9c46a; box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5px #c9a06c; }
@media (max-width: 1340px) { .st-spine { left: 8px; } }
/* 4 village: hanging shop signs and rooftops between buildings */
.st-shop { position: relative; display: inline-block; margin-top: 18px; background: var(--k-wood); border: 3px solid var(--k-wood-dk); border-radius: 8px; padding: 4px 18px; font: 700 20px var(--hand); color: #2f2a1f; box-shadow: 0 4px 0 rgba(91, 70, 50, .3); }
.st-shop::before, .st-shop::after { content: ''; position: absolute; top: -20px; width: 2px; height: 18px; background: #3a2e22; }
.st-shop::before { left: 22%; } .st-shop::after { right: 22%; }
.story-village .st-markrow::before { content: ''; position: absolute; left: max(16px, calc(50% - 620px)); top: 0; width: 200px; height: 4px; background: #3a2e22; border-radius: 2px; }
.st-roofs { display: block; height: 80px; line-height: 0; margin-bottom: -1px; }
.st-roofs svg { width: 100%; height: 100%; display: block; }
.st-roofs .r-a { fill: var(--flow-alt); } .st-roofs .r-b { fill: #c9a06c; } .st-roofs .r-w { fill: #fff3cf; }
.story-village > section[style*="--si"] { background: var(--mist) !important; }
.story-village > section[style*="--si"]::before, .story-village > section[style*="--si"]::after { display: none !important; }
.story-village > section[style*="--si"]:nth-of-type(odd) { background: #f2e8d2 !important; }

/* ===== Meadow v2 (Oct 29): path through the department circles, one-card seasonal budget, three blended head-to-heads ===== */
.tr-off { display: none; }
.tr-path2 { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.tr-map2 .tr-stops { position: relative; z-index: 1; }
.tr-map2 .tr-pin { position: relative; z-index: 1; }
@media (max-width: 700px) { .tr-path2 { display: block; } }
/* budget: the whole section is one paper card; the containers change with the season */
.hp3-budget .hb-play { background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 22px; box-shadow: var(--k-shadow); padding: 28px 30px; gap: 36px; }
.hp3-budget .hb-controls { background: none; border: 0; box-shadow: none; padding: 0; }
.hp3-budget .hb-presets button { background: var(--k-paper); border: 2px solid var(--k-line); }
.hp3-budget .hb-presets button:hover { border-color: var(--k-wood-dk); }
.hp3-budget .hb-stage span { background: #f3ead6; border: 1.5px solid var(--k-line); }
.hp3-budget .hb-stage input:checked + span { background: var(--rain); border-color: var(--rain); }
.hp3-budget #hb-range { background: linear-gradient(90deg, #d9895a 0 var(--p), #efe6d2 var(--p)); }
.hp3-budget .hb-jars { gap: 18px; }
.hp3-budget .hb-sz svg { max-width: 150px; filter: none; }
.hp3-budget .hb-env, .hp3-budget .hb-sz { transform: none !important; }
.hp3-budget .hb-jar figcaption b { font-size: 30px; color: var(--ink); }
.hp3-budget .hb-jar figcaption span { font-size: 18px; }
@media (max-width: 820px) { .hp3-budget .hb-play { padding: 20px 16px; } .hp3-budget .hb-jar figcaption b { font-size: 22px; } }
/* head-to-heads: three cards, icons centered, no tinted boxes */
.hp3-h2h .vs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp3-h2h .vs-cards > li { display: flex; }
.hp3-h2h .vs-cards a { width: 100%; display: grid; justify-items: center; align-content: start; gap: 8px; background: var(--k-paper); border: 2.5px solid var(--k-line); box-shadow: var(--k-shadow); padding: 24px 22px 22px; }
.hp3-h2h .vs-row { display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; margin: 0 0 6px; }
.hp3-h2h .vs-side { justify-items: center; }
.hp3-h2h .vs-cards b { font-size: 17px; text-align: center; }
.hp3-h2h .vs-v { font-size: 18px; margin: -2px 0; }
.hp3-h2h .vs-diff { background: none !important; padding: 0; font-style: italic; color: var(--ink-soft); font-size: 14.5px; text-align: center; }
.hp3-h2h .vs-sec { margin-top: 4px; }
@media (max-width: 900px) { .hp3-h2h .vs-cards { display: grid; grid-template-columns: 1fr; overflow: visible; } .hp3-h2h .vs-cards > li { flex: none; } }

/* department stops: centered rows, labels sized to their text */
.tr-stops { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px 18px; }
.tr-stops > li { flex: 0 0 calc(20% - 15px); min-width: 0; }
.tr-pin-link { align-content: start; grid-template-rows: auto auto auto; }
.tr-board { line-height: 1.25 !important; align-self: start; height: auto; }
@media (max-width: 1000px) { .tr-stops > li { flex-basis: calc(33.333% - 12px); } }
@media (max-width: 700px) { .tr-stops > li { flex-basis: calc(50% - 9px); } }

/* ===== Site-wide meadow kit (Oct 29): same bands, joins, cards, labels and frames as the homepage ===== */
main .flow { position: relative; background: var(--mist); padding-block: 36px 48px; }
main .flow.flow-alt { background: var(--flow-alt) !important; }
main .flow.flow-first { padding-top: 30px; }
main .flow > .wrap { position: relative; z-index: 1; }
main .flow h2 { font-size: clamp(26px, 2.8vw, 38px); }
main .fx + .flow { padding-top: 22px; }
/* heroes: cream band, stats as wooden boards, photos in round frames */
main .product-hero.flow { background: var(--flow-alt) !important; padding-bottom: 34px; }
.product-hero .facts { gap: 10px 12px; }
.product-hero .facts li { display: inline-flex; align-items: baseline; gap: 6px; background: var(--k-wood); border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 3px 12px; color: #2f2a1f; font-size: 14px; box-shadow: 0 3px 0 rgba(91, 70, 50, .25); }
.product-hero .facts li b { font: 600 18px var(--head); color: #2f2a1f; }
.hub-photo .stock, .cat-hero .combo .stock { border-radius: 50% !important; aspect-ratio: 1 !important; overflow: hidden; border: 6px solid var(--k-paper); box-shadow: 0 0 0 3px var(--dept-l, #e9dcc0), 0 0 0 5px var(--k-wood-dk), 0 14px 24px -14px rgba(91, 70, 50, .6) !important; }
.hub-photo .stock img, .cat-hero .combo .stock img { width: 100%; height: 100%; object-fit: cover; }
.hub-photo, .cat-hero .combo { max-width: 280px; justify-self: center; }
.hero-media .photo, .hm-main img, .ph-hero { background: var(--k-paper) !important; border: 2.5px solid var(--k-line); border-radius: 22px !important; box-shadow: var(--k-shadow); }
/* cards: one paper card everywhere */
main .pcard, main .sl, main .vs a, main .tc a, main .tc > div, main .blog-card, main .key-facts .wrap > ul, main .notice, main .stores a, main .bf-grid, main .ln, main .callout, main .hl-card, main .bp-list li, main .faq-list details, main .peers a {
  background: var(--k-paper) !important; border: 2.5px solid var(--k-line) !important; border-radius: 20px; box-shadow: var(--k-shadow); }
main .pcard:hover, main .sl:hover, main .vs a:hover, main .tc a:hover, main .blog-card:hover, main .stores a:hover, main .peers a:hover { border-color: var(--k-wood) !important; }
main .key-facts .wrap > ul { padding: 18px 22px 18px 40px; }
main .ln { --lb: var(--k-paper); }
main .ln-head { border-bottom: 2px dashed var(--k-line); padding-bottom: 8px; margin-bottom: 6px; }
main .ln-head b { display: inline-block; background: var(--k-wood); border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 0 10px; color: #2f2a1f; font-family: var(--head); }
/* labels: wooden boards for small tags that name things */
main .award-tag, main .sl-tag, main .vs-sec, main .blog-topic, main .tc-stats i:first-child { display: inline-block; background: var(--k-wood); color: #2f2a1f; border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 1px 10px; font: 600 13px/1.5 var(--head); box-shadow: 0 2px 0 rgba(91, 70, 50, .25); }
/* round frames for category art */
main .tc-art .stock, main .tc-art .combo .stock { border-radius: 50%; aspect-ratio: 1; width: 150px; margin: 14px auto 0; border: 5px solid var(--k-paper); box-shadow: 0 0 0 3px var(--dept-l, #e9dcc0), 0 0 0 5px var(--k-wood-dk); overflow: hidden; display: block; }
main .tc a, main .tc > div { text-align: center; justify-items: center; padding: 0 14px 16px; }
/* tables: the wooden filter kit and logbook table everywhere */
main .facets { background: var(--k-wood); border: 3px solid var(--k-wood-dk); border-radius: 18px; color: #2f2a1f; }
main .facets > summary { font-family: var(--head); color: #2f2a1f; }
main .fgroup { border-top-color: rgba(91, 70, 50, .25); }
main .fgroup > summary { font-family: var(--hand); font-size: 18px; }
main .fbody label:has(input[type=checkbox]) { background: rgba(255, 250, 240, .78); border-radius: 10px; padding: 5px 10px; font-weight: 600; }
main .fbody label:has(input:checked) { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--rain); }
main .fsearch input, main .facets select { background: #fffaf0; border-color: var(--k-wood-dk); }
main .range span, main .fbody .count { color: #2f2a1f; }
main .results .table-scroll, main .table-scroll { background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 16px; box-shadow: var(--k-shadow); }
main .explorer thead th, main table.compare thead th { font-family: var(--hand); font-weight: 700; font-size: 17px; color: #5d7d52; background: #f3ead2; }
main .explorer th.c span { font-family: var(--body); }
main .explorer td { border-bottom: 1px solid #e9e0c8; }
main .explorer tbody tr:hover { background: #fbf3e0; }
/* jump bar: wooden boards on a paper strip */
.jumpbar { background: color-mix(in srgb, var(--k-paper) 94%, transparent) !important; border-bottom: 2px solid var(--k-line); }
.jb-k { font-family: var(--hand) !important; font-weight: 700; }
/* section kickers and ledes */
main .flow .section-lede, main .flow .hs-head p { color: var(--ink-soft); }
main .flow .rail-head h2, main .flow .hs-head h2 { margin: 0; }
/* FAQ host on every page */
main .sb-faq .faq-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
@media (max-width: 900px) { main .sb-faq .faq-grid { grid-template-columns: 1fr; } }
/* stat signs sit on the hill under the crib, inside the hero */
.home-hero { position: relative; }
.home-hero .hp-signs { position: absolute; right: max(16px, calc(50% - 600px)); bottom: 22px; margin: 0; padding: 0; gap: 12px; justify-content: flex-end; z-index: 4; }
.home-hero .hp-sign { font-size: 17px; padding: 5px 14px; }
.home-hero .hp-sign b { font-size: 21px; }
@media (max-width: 900px) { .home-hero .hp-signs { position: static; justify-content: center; margin: 14px 0 0; padding: 0 16px 16px; } }
/* footer social: icons only, one line */
.meadow-foot .mf-social { flex-wrap: nowrap; gap: 8px; }
.meadow-foot .mf-social a { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
.meadow-foot .mf-social svg { width: 19px; height: 19px; }
/* department pages */
.dp-ico { display: grid; place-items: center; width: 100%; height: 100%; background: var(--t, #f3eedf); }
.dp-ico svg { width: 62%; height: auto; }
.dt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.dt-card { display: grid; align-content: start; gap: 8px; background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 20px; box-shadow: var(--k-shadow); padding: 18px 18px 16px; }
.dt-head { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dt-ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--dept-l, #f3eedf); border: 3px solid var(--k-paper); box-shadow: 0 0 0 2px var(--k-wood-dk); }
.dt-ico svg { width: 36px; height: auto; }
.dt-card > small { color: var(--ink-soft); }
.dt-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background-image: repeating-linear-gradient(transparent 0 27px, #efe6cf 27px 28px); }
.dt-subs a { display: flex; align-items: center; gap: 8px; line-height: 28px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.dt-subs a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dept, #c9a06c); flex: none; }
.dt-subs a:hover { color: var(--rain); text-decoration: underline; }
.dt-all { font-weight: 700; color: var(--rain); font-size: 14px; margin-top: 4px; }
/* footer department chips: one line each, all the same height */
.mf-depts ul { grid-auto-rows: 1fr; align-items: stretch; }
.mf-depts a { height: 100%; white-space: nowrap; min-width: 0; font-size: 13.5px; }
@media (max-width: 1100px) { .mf-depts a { white-space: normal; } }
/* big buys as burrows: arched doorways with a mossy sill */
.tr-burrow { position: relative; display: block; width: 220px; max-width: 100%; aspect-ratio: 1 / 1.08; border-radius: 50% 50% 18px 18px; overflow: hidden; border: 5px solid var(--bark, #5b4632); background: var(--t); box-shadow: inset 0 -14px 0 rgba(91, 70, 50, .12), 0 12px 20px -12px rgba(91, 70, 50, .6); transition: transform .2s; }
.tr-burrow .stock, .tr-burrow img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr-moss { position: absolute; left: -6px; right: -6px; bottom: 0; height: 18px; background: radial-gradient(circle at 10px 18px, var(--sage, #8fa382) 9px, transparent 10px) 0 0 / 20px 18px repeat-x; }
.tr-badge:hover .tr-burrow { transform: translateY(-4px); }
.tr-badges > li .tr-burrow { transform: none; }
.tr-badge .tr-board { margin-top: 4px; }
@media (max-width: 700px) { .tr-burrow { width: 150px; border-width: 4px; } }
/* hillside burrows (big buys) */
.hh-hole { position: relative; display: block; width: 280px; max-width: 100%; aspect-ratio: 240 / 200; }
.hh-hill { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hh-g { fill: #9fb38e; }
.hh-tuft { fill: none; stroke: #5d7d52; stroke-width: 2.4; stroke-linecap: round; }
body.season-winter .hh-g { fill: #eef3f6; } body.season-winter .hh-tuft { stroke: #9fb8c8; }
body.season-fall .hh-g { fill: #b5ad78; }
body.season-summer .hh-g { fill: #a9c47e; }
.hh-door { position: absolute; left: 50%; top: 52%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: var(--k-paper); box-shadow: 0 0 0 8px #a07a52, 0 0 0 11px #5b4632, 0 10px 18px -6px rgba(60, 40, 20, .45); }
.hh-door::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(91, 70, 50, .35); pointer-events: none; }
.hh-door .stock, .hh-door img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hh-knob { position: absolute; right: 12%; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #e9c46a; border: 2px solid #5b4632; z-index: 2; }
.tr-badge:hover .hh-door { box-shadow: 0 0 0 8px #b88c5e, 0 0 0 11px #5b4632, 0 14px 22px -6px rgba(60, 40, 20, .5); }
@media (max-width: 700px) { .hh-hole { width: 170px; } .hh-door { box-shadow: 0 0 0 5px #a07a52, 0 0 0 7px #5b4632; } }

/* ===== fixes after the site-wide pass ===== */
.mf-depts ul a { height: 100%; }
.mf-depts a.mf-all, .mf-all { height: auto !important; background: none !important; border: 0 !important; padding: 0 !important; white-space: normal; display: inline-block; margin-top: 4px; }
.mf-depts a { height: auto; }
.mf-depts ul li > a { height: 100%; }
.home-hero .hp-signs { bottom: 6px; transform: scale(.9); transform-origin: right bottom; }
.dept-hero .wrap { grid-template-columns: minmax(0, 1fr) 280px !important; }
@media (max-width: 760px) { .dept-hero .wrap { grid-template-columns: 1fr !important; } }
/* section hubs (car seats layout) in the meadow kit */
.sb-hero { background-image: none; }
.sb-stamp { background: var(--k-wood); color: #2f2a1f; border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 3px 12px; font: 600 16px var(--head); transform: none !important; box-shadow: 0 3px 0 rgba(91, 70, 50, .25); }
.sb-stamp:nth-child(2), .sb-stamp:nth-child(3) { border-color: var(--k-wood-dk); color: #2f2a1f; }
.sb-memo { transform: none; background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 18px; box-shadow: var(--k-shadow); }
.sb-tape { display: none !important; }
.sb-collage { display: grid; place-items: center; height: auto; min-height: 300px; }
.sb-pol { position: absolute; width: 190px; aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden; background: var(--k-paper); box-shadow: 0 0 0 6px var(--k-paper), 0 0 0 9px var(--dept-l, #e9dcc0), 0 0 0 11px var(--k-wood-dk), 0 14px 24px -14px rgba(91, 70, 50, .6); transform: none !important; }
.sb-pol .stock, .sb-pol img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.sb-pol > .sb-hand { display: none; }
.sb-pol1 { left: 6%; top: 20px; } .sb-pol2 { right: 6%; top: 110px; }
.sb-press { display: none; }
.sb-burrow b { display: inline-block; background: var(--k-wood); border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 2px 12px; font-size: 18px; box-shadow: 0 3px 0 rgba(91, 70, 50, .25); }
.sb-burrow i { background: none; font-weight: 600; color: var(--ink-soft); padding: 0; }
.sb-peek { display: none; }
.sb-env { background: var(--k-paper) !important; border: 2.5px solid var(--k-line); border-radius: 20px; box-shadow: var(--k-shadow); transform: none !important; padding: 20px 20px 16px; }
.sb-env::before { display: none; }
.sb-env h3 { display: inline-block; background: var(--k-wood); border: 2px solid var(--k-wood-dk); border-radius: 6px; padding: 1px 12px; font-size: 19px; box-shadow: 0 3px 0 rgba(91, 70, 50, .25); }
.sb-tip { background: var(--k-paper); border: 2.5px solid var(--k-line); box-shadow: var(--k-shadow); }
@media (max-width: 900px) { .sb-collage { min-height: 260px; } .sb-pol { width: 150px; } .sb-pol2 { top: 80px; } }
.hh-door { top: 63%; width: 40%; }
.home-hero .hp-signs { right: auto; left: max(16px, calc(50% - 545px)); bottom: 128px; justify-content: flex-start; transform: scale(.88); transform-origin: left bottom; }
@media (max-width: 1100px) { .home-hero .hp-signs { bottom: 40px; } }
.home-hero .hp-signs { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: var(--wrap, 1120px); margin: 18px auto 0; padding: 0 max(16px, env(safe-area-inset-left)); justify-content: flex-start; }
.home-hero .hp-signs { max-width: none; margin: 18px 0 0; padding: 0 16px 0 max(16px, calc(50% - 543px)); }
/* little houses: door sizes come from each house (inline style) */
.hh-door { top: auto; width: auto; }
.hh-v1 .hh-door, .hh-v4 .hh-door { box-shadow: 0 0 0 6px #a07a52, 0 0 0 9px #5b4632, 0 8px 14px -6px rgba(60, 40, 20, .45); }
/* head-to-head icons centered in their frames */
.hp2-h2h .vs-side .vs-art { display: flex !important; align-items: center; justify-content: center; }
.hp2-h2h .vs-cards .vs-side .vs-art svg { display: block; width: 58px !important; height: 58px !important; margin: auto !important; flex: none; }
/* big buys: the name board runs the full width of its house, like a sign along the front */
.tr-badge .tr-board { display: block; width: 280px; max-width: 100%; margin-top: -8px; text-align: center; font-size: 19px; padding: 6px 12px; border-radius: 8px; position: relative; z-index: 2; }
@media (max-width: 700px) { .tr-badge .tr-board { width: 170px; font-size: 16px; } }

/* ===== tables: one header style everywhere, no tinted corner cell ===== */
main .explorer thead th, main .explorer thead td { background: #f3ead2 !important; }
main .explorer thead th button, main .explorer thead th > span, main .explorer thead th.c span, main .explorer thead th { font: 700 13.5px/1.2 var(--body) !important; color: var(--ink) !important; letter-spacing: .01em; text-transform: none; }
main .explorer thead th button::after { color: var(--ink-soft); }
main .size-chart thead th { font: 700 13.5px/1.2 var(--body); }

/* ===== sizes by brand: one bar per run of sizes on a shared ruler ===== */
.sr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; }
.sr-filter > span { font: 700 18px var(--hand); color: #a4522a; margin-right: 6px; }
.sr-filter button { font: 600 13.5px var(--body); border: 2px solid var(--k-line); background: var(--k-paper); color: var(--ink); border-radius: 99px; padding: 5px 11px; cursor: pointer; }
.sr-filter button i { font-style: normal; color: var(--ink-soft); font-weight: 500; margin-left: 2px; }
.sr-filter button[aria-pressed=true] { background: var(--rain); border-color: var(--rain); color: #fff; }
.sr-filter button[aria-pressed=true] i { color: #e8efdd; }
.sr-filter .sr-clear { border-style: dashed; }
.sr-chart { background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 20px; box-shadow: var(--k-shadow); padding: 6px 18px 12px; overflow-x: auto; }
.sr-row { display: grid; grid-template-columns: 200px minmax(560px, 1fr); align-items: center; gap: 16px; padding: 7px 0; border-bottom: 1px solid #efe6cf; }
.sr-row:last-of-type { border-bottom: 0; }
.sr-row[hidden] { display: none; }
.sr-name { font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sr-name:hover { color: var(--rain); text-decoration: underline; }
.sr-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; position: relative; min-height: 28px; align-items: center; background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n) - 1px), #efe6cf calc(100% / var(--n) - 1px) calc(100% / var(--n))); }
.sr-bar { grid-row: 1; height: 26px; border-radius: 99px; background: #b8c9a6; border: 2px solid #8fa382; color: #2f3b2c; font: 700 12.5px/22px var(--body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; margin: 0 3px; }
.sr-head { position: sticky; top: 0; background: var(--k-paper); z-index: 1; border-bottom: 2px solid var(--k-line); padding: 10px 0 8px; }
.sr-head .sr-name { font: 700 13.5px var(--body); color: var(--ink-soft); }
.sr-head .sr-track { background-image: none; }
.sr-tick { grid-row: 1; text-align: center; font: 700 12.5px var(--body); color: var(--ink); }
.sr-empty { margin: 14px 0 4px; color: var(--ink-soft); }
@media (max-width: 700px) { .sr-row { grid-template-columns: 130px minmax(520px, 1fr); } }
/* product photos from makers */
.hm-gal { max-width: 320px; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.hm-gal button { padding: 0; border: 2px solid var(--k-line); border-radius: 10px; overflow: hidden; background: var(--k-paper); cursor: pointer; aspect-ratio: 1; }
.hm-gal button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-gal button[aria-pressed=true] { border-color: var(--k-wood-dk); box-shadow: 0 0 0 2px var(--k-wood); }
.hm-credit { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.hm-main img.photo { width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; padding: 0 !important; }
.uses-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 18px; }
.uses-grid li { display: grid; justify-items: center; gap: 8px; text-align: center; background: var(--k-paper); border: 2.5px solid var(--k-line); border-radius: 20px; box-shadow: var(--k-shadow); padding: 14px 14px 16px; }
.uses-pic { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #f3f1ec; }
.uses-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uses-grid .tr-board { font-size: 15px; }
.uses-grid small { color: var(--ink-soft); font-size: 13.5px; }
@media (max-width: 1095px) { .hm-gal { display: grid !important; } }
#uses .wrap > p.small { margin-top: 14px; }
/* photo lightbox */
.lb-zoom { cursor: zoom-in; }
button.uses-pic { padding: 0; border: 0; cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; background: rgba(36, 30, 22, .88); padding: max(16px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.lb[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb-fig { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 14px; background: #fffaf0; box-shadow: 0 0 0 5px #fffaf0, 0 0 0 7px var(--k-wood-dk, #8a6a4a); }
.lb-fig figcaption { display: flex; gap: 14px; align-items: baseline; color: #fffaf0; font-size: 15px; }
.lb-cap { font: 600 17px var(--head); }
.lb-n { font: 700 16px var(--hand); color: #e9c46a; }
.lb-prev, .lb-next, .lb-x { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--k-wood-dk, #8a6a4a); background: var(--k-wood, #c9a06c); color: #2f2a1f; font: 700 28px/1 var(--body); cursor: pointer; justify-self: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.lb-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); font-size: 26px; }
.lb-prev[hidden], .lb-next[hidden] { visibility: hidden; display: block; }
@media (max-width: 600px) { .lb { grid-template-columns: 0 minmax(0, 1fr) 0; } .lb-prev, .lb-next { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); } .lb-prev { left: 30%; } .lb-next { right: 30%; } .lb-fig img { max-height: calc(100vh - 170px); } }
/* uses v2: photo-first, grouped, bigger */
#uses .uses-group + .uses-group { margin-top: 30px; }
.uses-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: inherit; }
.uses-h .tr-board { font-size: 16px; }
#uses .uses-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
#uses .uses-grid li { display: block; padding: 0; overflow: hidden; text-align: left; border-radius: 22px; }
#uses .uses-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 0; background: #ecebe6; }
#uses .uses-pic img { transition: transform .35s; }
#uses .uses-pic:hover img, #uses .uses-pic:focus-visible img { transform: scale(1.04); }
.uses-zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 250, 240, .92); border: 2px solid var(--k-wood-dk); color: #2f2a1f; font: 700 20px/1 var(--body); font-style: normal; }
#uses .uses-grid p { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px 14px; border-top: 2px solid var(--k-line); }
.uses-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--k-wood); border: 2px solid var(--k-wood-dk); color: #2f2a1f; font: 700 14px var(--head); }
#uses .uses-grid p span { font: 600 16px/1.3 var(--head); color: var(--ink); padding-top: 3px; }
#uses .uses-grid p small { display: block; font: 400 13.5px var(--body); color: var(--ink-soft); margin-top: 2px; }
.uses-credit { margin-top: 16px !important; }
@media (max-width: 700px) {
  #uses .uses-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-right: calc(-1 * max(16px, env(safe-area-inset-right))); padding-right: 16px; padding-bottom: 6px; }
  #uses .uses-grid li { flex: 0 0 84%; scroll-snap-align: start; }
}
/* stacks-up: section heading outside, rows are the cards, plain-language line */
.gl-rows { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.gl-row { background: var(--k-paper) !important; border: 2.5px solid var(--k-line) !important; border-radius: 20px !important; box-shadow: var(--k-shadow); padding: 16px 20px 12px !important; }
.gl-say { margin: 6px 0 0; color: var(--ink); font-size: 15px; }
.gl-rank { background: #f3ead2 !important; }
/* product pages on phones: photo first, tighter hero */
@media (max-width: 760px) {
  .product-hero .hero-media { order: -1; }
  .product-hero .wrap { gap: 18px; }
  .product-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .hm-main img.photo { max-width: none; }
  .hm-gal { max-width: none; }
  .product-hero .summary { font-size: 16px; }
  #glance .gl-head { gap: 4px 10px; }
  #glance .gl-rank { order: 3; }
}
#uses .uses-grid p { border-top: 0; box-shadow: inset 0 2px 0 var(--k-line); }
/* photo placeholders: a quiet icon tile, no dashed outline or label */
.img-ph { border: 0 !important; background: color-mix(in srgb, var(--dept-l, #efe8d6) 70%, var(--k-paper, #fffaf0)) !important; background-image: none !important; }
.img-ph em { display: none !important; }
.img-ph .ico, .img-ph svg { opacity: .75; }
/* brand social links on product pages */
.brand-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.brand-social > span { font: 700 17px var(--hand); color: var(--ink-soft); margin-right: 2px; }
.brand-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--k-paper); border: 2px solid var(--k-line); color: var(--ink); }
.brand-social a:hover { border-color: var(--k-wood-dk); background: #fff; }
.brand-social svg { width: 18px; height: 18px; }
/* placeholder art: the illustrated section icons, sized to sit nicely in the tile */
.img-ph svg:not(.ico) { width: 46%; max-width: 150px; height: auto; opacity: 1; }
.ph-hero svg:not(.ico) { width: 42%; }
.thumb svg:not(.ico) { width: 34px; height: 30px; }
/* section types: swipe carousel of wide doorways that show the whole photo */
.sb-car { position: relative; }
.sb-car .sb-burrows { display: flex !important; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; padding: 34px 2px 14px; scrollbar-width: none; }
.sb-car .sb-burrows::-webkit-scrollbar { display: none; }
.sb-car .sb-burrows > li { flex: 0 0 300px; scroll-snap-align: start; }
.sb-car .sb-door { aspect-ratio: 16 / 9; border-radius: 120px 120px 16px 16px / 60px 60px 16px 16px; box-shadow: none; }
.sb-car .sb-door .stock, .sb-car .sb-door img { object-fit: cover; object-position: center; }
.sb-car .sb-moss { position: relative; display: block; left: auto; right: auto; bottom: auto; width: 100%; height: 12px; margin-top: -2px; background: radial-gradient(circle at 8px 12px, #8fa382 7px, transparent 8px) 0 0 / 16px 12px repeat-x; }
.sb-car .sb-door { overflow: hidden; }
.sb-car .sb-burrow:hover .sb-door img { transform: scale(1.03); }
.sb-car-btn { position: absolute; top: calc(34px + 300px * 9 / 32 - 22px); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--k-wood-dk); background: var(--k-wood); color: #2f2a1f; font: 700 26px/1 var(--body); cursor: pointer; box-shadow: 0 3px 0 rgba(91, 70, 50, .3); }
.sb-car-btn.prev { left: -18px; } .sb-car-btn.next { right: -18px; }
.sb-car-btn:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .sb-car .sb-burrows > li { flex-basis: 78%; } .sb-car-btn { display: none; } .sb-car .sb-burrows { margin-right: calc(-1 * max(16px, env(safe-area-inset-right))); padding-right: 16px; } }
/* Registry not launched yet: hide add-to-registry buttons that are drawn in the browser (budget planner). */
html.no-registry .reg-mini, html.no-registry .reg-add, html.no-registry a[href*="/registry/add/"] { display: none !important; }
.ha-bag { background: #e6f2ea; }

/* Legal audit S-39: photographer credit on every Unsplash photo. */
.stock { position: relative; }
.stock-credit { position: absolute; right: 6px; bottom: 6px; z-index: 2; font: 600 11px/1.3 var(--body, sans-serif); background: rgba(255, 253, 247, .92); color: #2f3a30; padding: 2px 7px; border-radius: 8px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-credit a { color: inherit; }
/* short notes ride along in the band above: tight spacing, no hill join */
main .flow.flow-note { padding-block: 20px 4px !important; }
main .flow.flow-note + .fx, main .flow.flow-note:last-of-type { margin-top: 24px; }
main .flow.flow-note .notice, main .flow.flow-note > .wrap > p { margin: 0; }
/* Guides: body column matches the hero and key facts width; running text stays at a readable line length */
.post-body.prose { max-width: var(--wrap); }
.post-body > p, .post-body > ul, .post-body > ol, .post-body > blockquote { max-width: 78ch; }

/* Good-to-know note card under Where to buy (Nov 2): replaces the three notice boxes at the top of product pages */
.pn-card { position: relative; max-width: 860px; margin: 0 auto; background: #fffaf0; border: 2px dashed #d9c9a8; border-radius: 18px; padding: 28px 28px 22px; transform: rotate(-.4deg); box-shadow: 0 6px 0 rgba(91,70,50,.06); }
.pn-card .sb-tape { position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; transform: rotate(-3deg); }
.pn-kick { display: block; font-size: 1.15rem; color: #b5533a; margin-bottom: 10px; }
.pn-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pn-card li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: .95rem; line-height: 1.55; color: #4a3f33; }
.pn-card li + li { padding-top: 12px; border-top: 1px dotted #e3d6bc; }
.pn-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f3ead6; }
.pn-ic svg { width: 24px; height: 24px; }
.pn-critter { position: absolute; right: -14px; bottom: -18px; transform: scaleX(-1); }
.pn-card ul { padding-right: 56px; }
@media (max-width: 640px) { .pn-card { padding: 24px 18px 18px; transform: none; } .pn-card ul { padding-right: 0; padding-bottom: 36px; } .pn-critter { right: 4px; bottom: -14px; } }
.pn-sec .pn-card { margin: 0; max-width: 820px; }
.pn-critter { right: 34px; bottom: auto; top: -52px; transform: none; }
.pn-card ul { padding-right: 0; }
main .flow.pn-sec, main .flow.flow-note.pn-sec { padding-block: 8px 48px !important; }
@media (max-width: 640px) { .pn-critter { right: 14px; top: -46px; } .pn-card ul { padding-bottom: 0; } }
.pn-critter, .pn-sec .pn-critter { top: -38px; }

/* ===== Guides, storybook pass: same paper, boards and stitched frames as the homepage ===== */
.post-body { --gp: var(--k-paper, #fffaf0); --gl: var(--k-line, #e2d6b8); --gw: var(--k-wood, #c9a06c); --gwd: var(--k-wood-dk, #8a6a4a); --gs: var(--k-shadow, 0 12px 24px -18px rgba(91, 70, 50, .65)); }
.post-body h2 { margin-top: 48px; }
/* opening scene */
.g-scene { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; background: var(--gp); border: 2.5px solid var(--gl); border-radius: 26px; padding: 20px 26px; margin: 8px 0 26px; box-shadow: var(--gs); }
.g-scene-art svg { width: 132px; height: auto; display: block; }
.g-scene-txt { font: 400 20px/1.5 var(--head); font-variation-settings: 'SOFT' 100; max-width: 62ch; }
.g-scene-txt p { margin: 0 0 .5em; } .g-scene-txt p:last-child { margin: 0; }
@media (max-width: 640px) { .g-scene { grid-template-columns: 1fr; padding: 18px; } .g-scene-art svg { width: 96px; } .g-scene-txt { font-size: 18px; } }
/* stitched round frame for little drawings */
.g-frame { display: grid; place-items: center; width: 92px; height: 92px; flex: none; border-radius: 50%; background: var(--t, var(--dept-l, #f3eedf)); border: 5px solid var(--gp); box-shadow: 0 0 0 3px var(--t, #e9dcc0), 0 0 0 5px var(--gwd), 0 10px 18px -10px rgba(91, 70, 50, .6); }
.g-frame svg { width: 84%; height: 84%; overflow: visible; }
/* specimen cards */
.g-specs { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.g-specs > li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; background: var(--gp); border: 2.5px solid var(--gl); border-radius: 22px; padding: 18px; box-shadow: var(--gs); }
.g-spec-body { min-width: 0; }
.g-spec-body h3 { font-size: 19px; margin: 2px 0 6px; }
.g-spec-body h3 a { color: var(--ink); text-decoration-color: var(--gw); }
.g-tag { display: inline-block; font: 700 17px/1.2 var(--hand); color: var(--bark, #5b4632); background: #f3e6c8; border-radius: 8px; padding: 1px 9px; transform: rotate(-1.5deg); }
.g-facts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-soft); }
.g-specs .g-facts { justify-items: center; }
.g-facts li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sage, #8fa382); margin: 0 8px 2px 0; }
/* side-by-side face-off */
.g-vs { margin: 22px 0 30px; overflow-x: auto; }
.g-vs table { width: 100%; border-collapse: separate; border-spacing: 12px 0; table-layout: fixed; min-width: 600px; }
.g-vs-2 table { min-width: 470px; }
.g-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-vs thead td { background: none; border: 0; }
.g-vs thead td { width: 22%; }
.g-vs thead th { background: var(--gp); border: 2.5px solid var(--gl); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 22px 14px 12px; text-align: center; vertical-align: bottom; }
.g-vs thead th .g-frame { margin: 0 auto 12px; width: 86px; height: 86px; }
.g-vs thead th b { display: block; font: 600 19px/1.2 var(--head); }
.g-vs thead th b a { color: var(--ink); }
.g-vs thead th small { display: block; font: 700 16px var(--hand); color: var(--bark, #5b4632); margin-top: 4px; }
.g-vs tbody th { text-align: right; font: 600 14px/1.3 var(--body); color: var(--ink-soft); padding: 12px 4px; vertical-align: top; }
.g-vs tbody td { background: var(--gp); border-left: 2.5px solid var(--gl); border-right: 2.5px solid var(--gl); padding: 12px 14px; font-size: 15px; vertical-align: top; text-align: center; border-top: 1px dashed var(--gl); }
.g-vs tbody tr:last-child td { border-bottom: 2.5px solid var(--gl); border-radius: 0 0 22px 22px; padding-bottom: 18px; }
.g-meter { display: block; height: 8px; margin: 8px auto 0; max-width: 140px; background: #efe6d2; border-radius: 99px; overflow: hidden; }
.g-meter i { display: block; height: 100%; background: var(--rain); border-radius: 99px; }
.g-vs figcaption { padding: 10px 12px 0; }
@media (max-width: 640px) { .g-vs table { border-spacing: 8px 0; } .g-vs thead td { width: 92px; } .g-vs tbody th { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--mist); font-size: 12.5px; } .g-vs thead td { position: sticky; left: 0; z-index: 1; } .g-vs tbody td { font-size: 14px; padding: 10px; } .g-vs thead th .g-frame { width: 64px; height: 64px; } }
/* tools: a paper card with a wooden sign for a title */
.post-body .post-tool { background: var(--gp); border: 2.5px solid var(--gl); border-radius: 26px; padding: 24px 26px; box-shadow: var(--gs); position: relative; margin: 28px 0 34px; }
.post-body .post-tool > h3 { display: inline-block; background: var(--gw); color: #2f2a1f; border: 2px solid var(--gwd); border-radius: 8px; padding: 4px 16px; font: 600 18px/1.3 var(--head); box-shadow: 0 3px 0 rgba(91, 70, 50, .25); margin: 0 0 10px; transform: rotate(-1deg); }
.post-body .post-tool form { gap: 16px 18px; }
.post-body .post-tool input, .post-body .post-tool select { background: #fff; border: 2px solid var(--gl); border-radius: 14px; }
.post-body .post-tool input:focus-visible, .post-body .post-tool select:focus-visible { border-color: var(--rain); }
.post-body .post-tool output { background: #fff; border: 2px dashed var(--gl); border-radius: 18px; padding: 16px 18px; margin-top: 14px; }
.post-body .post-tool output a { font-weight: 600; }
.g-pills { border: 0; padding: 0; margin: 0; min-width: 0; flex-basis: 100%; }
.g-pills legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 8px; }
.g-pills > div { display: flex; flex-wrap: wrap; gap: 8px; }
.g-pills label { cursor: pointer; }
.g-pills input { position: absolute; opacity: 0; pointer-events: none; }
.g-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: #fff; border: 2px solid var(--gl); font-size: 15px; font-weight: 600; transition: background .15s, border-color .15s; }
.g-pills label:hover span { border-color: var(--sage, #8fa382); }
.g-pills input:checked + span { background: var(--rain); border-color: var(--rain); color: #fff; }
.g-toggles input:checked + span::before { content: '✓'; }
.g-pills input:focus-visible + span { outline: 3px solid var(--rain); outline-offset: 2px; }
.g-results { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.g-results li { background: var(--gp); border: 2px solid var(--gl); border-radius: 16px; padding: 12px 14px; font-size: 14.5px; }
.g-results li b { display: block; font: 600 17px/1.25 var(--head); margin-bottom: 2px; }
.g-results li.off { opacity: .45; }
.g-big { font: 600 22px/1.3 var(--head); margin: 0 0 4px; }
/* charts: chunkier bars in the site greens, values in the hand font */
.post-body .gbars { background: var(--gp); border: 2.5px solid var(--gl); border-radius: 22px; padding: 20px 22px; box-shadow: var(--gs); max-width: none; }
.post-body .gbars h3 { font-size: 20px; }
.post-body .gbars ol { gap: 10px; margin-top: 14px; }
.post-body .gbars li { grid-template-columns: minmax(120px, 1.1fr) minmax(0, 2fr) minmax(64px, auto); font-size: 15px; }
.post-body .gbar { height: 16px; background: #efe6d2; }
.post-body .gbar i { background: var(--rain); }
.post-body .gbars li b { font: 700 18px/1 var(--hand); color: var(--bark, #5b4632); }
@media (max-width: 560px) { .post-body .gbars li { grid-template-columns: 1fr auto; } .post-body .gbars li .gbar { grid-column: 1 / -1; grid-row: 2; } }
/* tables: paper card, cream header, roomy rows */
.post-body .post-table table { background: var(--gp); border: 2.5px solid var(--gl); border-radius: 20px; border-collapse: separate; border-spacing: 0; }
.post-body .post-table thead th { background: #f3ead6; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); padding: 12px; }
.post-body .post-table th, .post-body .post-table td { border-bottom: 1px dashed var(--gl); }
.post-body .post-table tbody tr:last-child > * { border-bottom: 0; }
.post-body .post-table tbody tr:hover > * { background: #fbf4e4; }
.post-body .post-table caption { font-size: 19px; }
/* callouts and checklists */
.post-body .post-callout { background: #fdf6e3; border: 2px solid #ecd9a6; border-radius: 20px; padding: 16px 20px 16px 56px; position: relative; }
.post-body .post-callout::before { content: ''; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--sun, #e9c46a); box-shadow: 0 0 0 4px #fdf6e3, 0 0 0 6px #ecd9a6; }
.post-body .post-check { background: var(--gp); border: 2.5px solid var(--gl); border-radius: 22px; padding: 20px 24px; box-shadow: var(--gs); }
.post-body .post-check h3 { display: inline-block; background: var(--gw); border: 2px solid var(--gwd); border-radius: 8px; padding: 2px 14px; font-size: 17px; transform: rotate(-1deg); }
.post-body .post-check li { padding-left: 30px; position: relative; }
.post-body .post-check li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 2px solid var(--sage, #8fa382); border-radius: 6px; background: #fff; }

.post-body .post-tool output ul.g-results { padding-left: 0; margin-top: 10px; }
.post-body .post-tool .g-pills input { width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; }
/* Spec map: every dot labeled (Nov 2) */
.sm-pt text.sm-name { opacity: 1; font-size: 11px; font-weight: 600; fill: var(--ink-soft); stroke: var(--cloud); stroke-width: 3px; paint-order: stroke; }
.sm-pt.on text.sm-name { fill: var(--ink); font-weight: 700; }
.sm-pt:hover text.sm-name, .sm-pt:focus text.sm-name { fill: var(--ink); }
.sm-pt text.sm-k { font-size: 10px; }
.sm-more { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; font-size: 13px; color: var(--ink-soft); }
.sm-more a { text-decoration: none; color: var(--ink); }
.sm-more a b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--cloud); border: 1.5px solid var(--rain); font-size: 11px; margin-right: 3px; }

/* What sets it apart (Nov 2) */
.apart { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.apart li { background: #fffaf0; border: 2px solid #e3d6bc; border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; }
.apart li b { font-family: var(--display, inherit); font-size: 1.05rem; color: #3b4a36; }
.apart li span { font-size: .92rem; color: #5b4f42; line-height: 1.5; }
.apart-h3 { margin: 26px 0 8px; font-size: 1.1rem; }
.apart-vs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.apart-vs li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px dotted #e3d6bc; }
.apart-vs li a { font-weight: 700; }
.apart-vs li span { font-size: .95rem; color: #4a3f33; line-height: 1.55; }

/* Section extras (Nov 2) */
.agency-box { margin: 14px 0; padding: 14px 18px; background: #f3f0e4; border-left: 4px solid #8fa382; border-radius: 10px; font-size: .95rem; line-height: 1.55; }
.agency-box p { margin: 0; }
.sx-sec table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.sx-sec th, .sx-sec td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e3d6bc; vertical-align: top; }
.sx-sec th { background: #f6efdd; font-weight: 700; }
.sx-tbl { overflow-x: auto; }
.sx-links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sx-links li a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fffaf0; border: 1.5px solid #e3d6bc; text-decoration: none; font-size: .92rem; }

/* Burrow carousel: taller round-top doors so the photos aren't squished (Nov 3) */
.sb-car .sb-burrows > li { flex: 0 0 270px; }
.sb-car .sb-door { aspect-ratio: 1 / 1.08; border-radius: 50% 50% 18px 18px / 46% 46% 18px 18px; }
.sb-car .sb-door .stock, .sb-car .sb-door img { object-position: center 60%; }
.sb-car-btn { top: calc(34px + 270px * 1.08 / 2 - 22px); }
@media (max-width: 700px) { .sb-car .sb-burrows > li { flex-basis: 64%; } }

/* Status label under the product title (Nov 4): discontinued / previous generation, with the replacement link. */
.gen-flag { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; padding: 6px 14px; border-radius: 999px; background: #f6e7cf; color: var(--ink); font-size: 15px; }
.gen-flag b { font-weight: 700; }
.gen-flag a { color: inherit; font-weight: 600; }
#generations { padding: 32px 0; }

/* Discontinued made obvious (Nov 4): a full banner on the page, a tag in every list. */
.gen-flag { display: flex; flex-direction: column; gap: 2px; border-radius: 16px; padding: 10px 16px; max-width: 640px; }
.gen-flag span { font-size: 15px; line-height: 1.45; }
.gen-flag.gone { background: #f6dcd4; border-left: 6px solid #b4533c; }
.gen-flag.gone b { color: #8c3a27; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.row-tags .gone-tag { background: #f6dcd4; color: #8c3a27; font-weight: 700; font-style: normal; }
.row-tags .gone-tag.prev { background: #f6e7cf; color: #6e5320; }
tr[data-gone="1"] td { opacity: .72; }
tr[data-gone="1"] td.nm, tr[data-gone="1"] td.cmp { opacity: 1; }

/* Check-column features repeated as tags only in the mobile cards. */
.explorer .row-tags i.ck-tag { display: none; }
/* Mobile spec cards (Nov 5): calmer cards. Specs sit in an even three-column grid (label over value), only "maker says
   yes" features show as small tags, and unknown or "no" features are left out of the card (the filters still use them). */
@container results (max-width: 860px) {
  .explorer tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 12px 14px; border-radius: 16px; border-width: 1.5px; box-shadow: 0 2px 0 color-mix(in srgb, var(--dept, #c3d3b0) 35%, transparent); }
  .explorer td.cmp { position: absolute; top: 12px; right: 12px; }
  .explorer td.nm { grid-column: 1 / -1; padding-right: 30px !important; margin-bottom: 2px; }
  .explorer td.nm a { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.3; }
  .explorer td.nm .thumb { width: 36px; height: 36px; flex: none; }
  .explorer td.nm small { display: inline; margin-left: 4px; font-size: 12.5px; }
  .explorer td.nm small::before { content: "· "; }
  .explorer .row-desc { font-size: 12.5px; margin-top: 3px; }
  .explorer td.n, .explorer td.t, .explorer .hide-sm { display: none; }
  .explorer td.n:not(:has(> .na:only-child)), .explorer td.t:not(:has(> .na:only-child)) { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--dept-l, #f4efe1) 70%, #fffdf7); font-size: 14px; font-weight: 700; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
  .explorer td.n::before, .explorer td.t::before { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
  .explorer td.c, .explorer tbody tr > td.c:last-child { display: none !important; }
  .explorer .row-tags i.ck-tag { display: inline-block; }
  .explorer tbody tr > td:last-child:not(.c):not(.n) { position: absolute; top: 40px; right: 12px; }
}

/* Search result cards (Nov 5): photo thumb when the maker supplied one, a soft initial otherwise. */
.sr-grid { list-style: none; margin: 10px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.sr-card { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: var(--linen, #fffdf7); border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.sr-card:hover { border-color: color-mix(in srgb, var(--rain, #5d7d52) 55%, transparent); transform: translateY(-1px); }
.sr-img { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.sr-img img { width: 100%; height: 100%; object-fit: contain; }
.sr-img.none { background: color-mix(in srgb, var(--dept-l, #f4efe1) 80%, #fffdf7); font-family: var(--head); font-size: 26px; color: color-mix(in srgb, var(--ink) 45%, transparent); }
.sr-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-txt b { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--rain-d, #3f5a37); }
.sr-txt small { font-size: 12.5px; color: var(--ink-soft); }
.sr-card.gone { opacity: .7; }

/* Affiliate note under the store buttons (Nov 5): its own line with breathing room, quieter than the buttons. */
.product-hero .aff-note, .aff-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); max-width: 60ch; }
.aff-note a { color: inherit; }

/* Spec map (Nov 5): a soft "better and cheaper than most" corner (split at the medians) and round axis ticks. */
.sm-sweet { fill: color-mix(in srgb, var(--rain) 9%, transparent); }
.sm-sweet-lab { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; fill: color-mix(in srgb, var(--rain) 70%, var(--ink)); opacity: .75; }
.sm-tick { font-variant-numeric: tabular-nums; }

/* Spec map on phones (Nov 5): the whole chart fits the screen, dots only (bigger, still tappable), and the
   names move to a list under the chart. Desktop keeps the labelled chart. */
.sm-list { display: none; }
@media (max-width: 640px) {
  .smap { padding: 8px; overflow: visible; }
  .smap svg { min-width: 0; }
  .sm-pt text.sm-name, .sm-pt text.sm-k, .sm-more, .sm-sweet-lab { display: none; }
  .sm-pt circle { r: 13px; stroke-width: 3px; }
  .sm-pt.on circle { r: 20px; }
  .sm-pt.on text { font-size: 22px; }
  .sm-tick { font-size: 22px; }
  .sm-lab { font-size: 24px; }
  .sm-list { display: block; margin: 10px 2px 0; border-top: 1px dashed var(--line); padding-top: 8px; }
  .sm-list summary { font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); }
  .sm-list ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
  .sm-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); padding-bottom: 5px; }
  .sm-list li a { color: var(--ink); font-weight: 600; min-width: 0; }
  .sm-list li span { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
}

/* Product hero photos: show the whole photo (no cropping), slightly larger frame */
.hm-main img.photo { max-width: 380px; aspect-ratio: 1; object-fit: contain; background: #fff !important; padding: 8px !important; }
.hm-gal { max-width: 380px; }
.hm-gal button { background: #fff; }
.hm-gal button img { object-fit: contain; padding: 3px; }
@media (max-width: 760px) { .hm-main img.photo { max-width: none; } .hm-gal { max-width: none; } }
@media (min-width: 1096px) { .product-hero .wrap:not(.pair-wrap):has(.hm-main img.photo) { grid-template-columns: minmax(0, 1fr) 380px; } }

/* 404 page (Nov 6) */
.nf { padding-block: 40px 56px; }
.nf .wrap { max-width: 960px; }
.nf-code { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin: 0 0 4px; }
.nf h1 { margin: 0 0 8px; text-wrap: balance; }
.nf-lede { max-width: 60ch; margin: 0 0 20px; }
.nf-search { display: flex; gap: 8px; max-width: 560px; margin: 0 0 28px; }
.nf-search input { flex: 1; min-width: 0; }
.nf-guess { margin: 0 0 32px; }
.nf-guess h2, .nf-h { font-size: 1.15rem; margin: 0 0 12px; }
.nf-depts { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.nf-depts > li { border-radius: 14px; padding: 14px 16px; background: var(--tint, rgba(0,0,0,0.03)); }
.nf-dept { font-weight: 700; display: inline-block; margin-bottom: 6px; }
.nf-depts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.92rem; }
.nf-more { font-size: 0.95rem; }
.nf-depts { align-items: start; }

/* Clothing guide (Nov 10): "What is a ...?" block on type pages, one-line definitions on hub cards, compact brand cards. Append-only. */
.cl-def { font-size: 13.5px; line-height: 1.4; color: var(--ink); padding: 0 14px; }
.cl-what { padding: 28px 0 8px; }
.cl-what .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cl-what h2 { margin: 0 0 10px; }
.cl-what h3 { font: 600 16px/1.3 var(--head); margin: 18px 0 8px; }
.cw-def { font-size: 18px; line-height: 1.55; margin: 0; max-width: 62ch; }
.cw-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 62ch; }
.cw-why li { position: relative; padding-left: 26px; line-height: 1.5; }
.cw-why li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--dept, #dde9f2); box-shadow: inset 0 0 0 2px rgba(47, 59, 44, .25); }
.cw-vs { background: var(--dept-l, #e6eff6); border-radius: 18px; padding: 16px; }
.cw-vs h3 { margin-top: 0; }
.cw-vs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cw-vs a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink); text-decoration: none; background: #fff; border-radius: 14px; padding: 8px; }
.cw-vs a:hover b { text-decoration: underline; }
.cw-art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--dept, #dde9f2); }
.cw-art img, .cw-art .stock { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-vs b { display: block; font: 600 15px/1.3 var(--head); }
.cw-vs span span, .cw-vs a > span:last-child { font-size: 14px; line-height: 1.45; }
@media (max-width: 800px) { .cl-what .wrap { grid-template-columns: 1fr; gap: 18px; } .cw-def { font-size: 16.5px; } }
@media (max-width: 500px) { .cl-def { font-size: 12px; padding: 0 10px; } .cw-vs a { grid-template-columns: 72px minmax(0, 1fr); } }
.cb-about { max-width: 70ch; line-height: 1.55; margin: 0 0 14px; }
.cb-similar { margin: 22px 0 0; }
.cb-similar h3 { font: 600 16px/1.3 var(--head); margin: 0 0 8px; }
.cb-similar ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cb-similar a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--dept-l, #e6eff6); color: var(--ink); text-decoration: none; font-size: 14px; }
.cb-similar a:hover { text-decoration: underline; }
/* Clothing type pages (Nov 10): order is budget, then the calculator, then what to look for, then the table. */
.look-calc:not(.no-calc) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.look-calc:not(.no-calc) .look-col { order: 2; }
@media (max-width: 960px) { .look-calc:not(.no-calc) { grid-template-columns: 1fr; } }

/* Brand page clothing rows (Nov 10): grouped compact rows replace the per-type cards. */
.cbr-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px 28px; margin: 18px 0 0; align-items: start; }
.cbr-group h3 { font: 600 15px/1.2 var(--head); margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.cbr-group h3 span { font: 600 12px var(--body); color: var(--ink-soft); }
.cbr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #e6dfcf); }
.cbr { scroll-margin-top: 90px; display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto; grid-template-areas: "pick ico main price" "pick ico main all"; align-items: center; column-gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line, #e6dfcf); }
.cbr:target, .cbr.on { background: var(--dept-l, #e6eff6); }
.cbr-pick { grid-area: pick; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.cbr-pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--rain-dark, #4f6b47); }
.cbr .cb-ico { grid-area: ico; width: 34px; height: 34px; border-radius: 10px; }
.cbr .cb-ico svg { width: 23px; height: 20px; }
.cbr-main { grid-area: main; min-width: 0; display: grid; gap: 1px; }
.cbr-main b { font: 600 14.5px/1.25 var(--body); }
.cbr-ex { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.cbr-main small { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.cbr-price { grid-area: price; font: 700 14px var(--body); text-align: right; white-space: nowrap; align-self: end; }
.cbr-all { grid-area: all; font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; align-self: start; color: var(--ink-soft); }
.cbr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--cloud, #fff); border: 1px solid var(--line, #e6dfcf); font-size: 13.5px; }
.cbr-copy[disabled] { opacity: .5; cursor: default; }
.brand-checked { padding: 8px 0 20px; }
.bc-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 28px; counter-reset: bc; }
.bc-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "k p"; gap: 1px 12px; padding: 8px 2px; border-bottom: 1px solid var(--line, #e6dfcf); font-size: 14px; }
.bc-list a { grid-area: n; overflow-wrap: anywhere; }
.bc-kind { grid-area: k; font-size: 12px; color: var(--ink-soft); }
.bc-price { grid-area: p; font-weight: 700; align-self: center; white-space: nowrap; }

.cbr-groups { display: block; columns: 2 420px; column-gap: 28px; }
.cbr-group { break-inside: avoid; margin: 0 0 20px; padding: 0; }
.cbr-bar .cbr-copy { width: auto; flex: none; }

/* Brand page pass 2 (Nov 10): brand intro, good-to-know, price context, single-group layout. */
.brand-about { font-size: 18px; line-height: 1.5; max-width: 62ch; color: var(--ink); }
.summary.sub { font-size: 14.5px; margin-top: 6px; }
.cb-know { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 28px; margin: 16px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--cloud, #fff); border: 1px solid var(--line, #e6dfcf); }
.cl-brand .cb-know h3 { margin: 0 0 6px; font: 600 15px/1.2 var(--head); }
.cb-know ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.4; }
.cbr-range { font-style: italic; }
.cbr-groups.one { columns: auto; }
.cbr-groups.one .cbr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: 28px; }

/* Brand page rebuild (Nov 10): fact tiles in the header, closet tiles with tabs, my list, price bars, side by side. */
.bh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; align-self: center; min-width: min(100%, 420px); }
.bh-tiles div { background: var(--cloud); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; }
.bh-tiles dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.bh-tiles dd { margin: 3px 0 0; font: 600 15.5px/1.25 var(--head); }
.bk { display: grid; gap: 40px; }
.bk-h { font: 600 26px/1.15 var(--head); margin: 0 0 6px; }
.bk-lede { margin: 0 0 16px; color: var(--ink-soft); max-width: 70ch; }
.bk-know { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 40px; }
.bk-know h3 { font: 600 22px/1.15 var(--head); margin: 0 0 10px; }
.bk-tick { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 16px; }
.bk-tick li { padding-left: 30px; position: relative; }
.bk-tick li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #e3efd8; color: #3f5f2c; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.bk-tick.warn li::before { content: "!"; background: #fbeccb; color: #6f5310; }
.bk-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.bk-tabs button { font: 600 14.5px var(--body); border: 1.5px solid var(--birch-deep, #d9cfb6); background: var(--cloud); border-radius: 999px; padding: 9px 16px; color: var(--ink); cursor: pointer; min-height: 44px; }
.bk-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--cloud); }
.bk-tabs i { font-style: normal; opacity: .75; font-size: 12px; margin-left: 4px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bk-tile { scroll-margin-top: 90px; background: var(--cloud); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: grid; gap: 7px; justify-items: start; align-content: start; }
.bk-tile:target { box-shadow: 0 0 0 3px var(--dept, #b8cfe0); }
.bk-ico { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: var(--dept-l, #e6eff6); }
.bk-ico svg { width: 46px; height: 38px; }
.bk-ico.sm { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.bk-ico.sm svg { width: 30px; height: 25px; }
.bk-tile h3 { font: 600 19px/1.2 var(--head); margin: 2px 0 0; }
.bk-ex { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.bk-bits { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.bk-price { margin: 2px 0 0; }
.bk-pill { display: inline-block; background: #fbeccb; color: #6f5310; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 3px 11px; }
.bk-nop { font-size: 12.5px; color: var(--ink-soft); }
.bk-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bk-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--rain-dark, #4f6b47); color: #fff; font: 600 14px var(--body); border: 1.5px solid var(--rain-dark, #4f6b47); border-radius: 999px; padding: 8px 15px; text-decoration: none; cursor: pointer; min-height: 40px; }
.bk-btn:hover { color: #fff; filter: brightness(.94); }
.bk-btn.ghost, .bk-add { background: var(--cloud); color: var(--ink); border: 1.5px solid var(--rain-dark, #4f6b47); }
.bk-add { font: 600 13.5px var(--body); border-radius: 999px; padding: 8px 13px; cursor: pointer; min-height: 40px; }
.bk-add[aria-pressed="true"] { background: #e3efd8; }
.bk-btn[disabled] { opacity: .5; cursor: default; }
.bk-all { font-size: 12.5px; color: var(--ink-soft); }
.bk-listbox { background: var(--cloud); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; display: grid; gap: 12px; max-width: 760px; }
.bk-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-items:empty { display: none; }
.bk-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 12px; align-items: center; border: 1.5px solid var(--rain-dark, #4f6b47); background: #f4f8ef; border-radius: 16px; padding: 10px 14px; }
.bk-in { display: grid; min-width: 0; }
.bk-in small { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.bk-qty { display: flex; align-items: center; gap: 10px; }
.bk-qty button { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--birch-deep, #cfc6b0); background: #fff; font-size: 17px; cursor: pointer; color: var(--ink); }
.bk-qty span { font-weight: 700; min-width: 16px; text-align: center; }
.bk-lt { font-weight: 700; text-align: right; }
.bk-empty { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.bk-total small { color: var(--ink-soft); }
.bk-total b { font: 600 26px var(--head); }
.bk-listact { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-msg { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.bk-msg:empty { display: none; }
.bk-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.bk-pc { background: var(--cloud); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.bk-ph { display: flex; gap: 12px; align-items: center; }
.bk-ph h4 { font: 600 18px/1.2 var(--head); margin: 0; }
.bk-ph span { font-size: 13px; color: var(--ink-soft); }
.bk-bar { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #e3efd8, #fbeccb, #f3c9b5); margin: 30px 10px 0; }
.bk-bar i { position: absolute; top: -4px; width: 2px; height: 18px; background: #8a7f68; }
.bk-bar em { position: absolute; top: -6px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--ink); border: 3px solid var(--cloud); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.bk-bar em span { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font: 700 14px var(--body); white-space: nowrap; }
.bk-bl { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-soft); margin: 0 4px; }
.bk-pn { margin: 0; font-size: 13px; color: var(--ink-soft); }
.bk-pnote { margin: 0; font-size: 14.5px; line-height: 1.45; background: #f6f1e4; border-radius: 12px; padding: 12px; }
.bk-side { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--cloud); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.bk-side th, .bk-side td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.bk-side thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); background: #f6f1e4; border-top: 0; }
.bk-side .n { text-align: right; }
.bk-side tr.me th, .bk-side tr.me td { background: #eef4e8; }
.bk-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bk-more a { background: var(--cloud); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 4px; justify-items: center; text-decoration: none; text-align: center; color: var(--ink); }
.bk-more small { color: var(--ink-soft); font-size: 12.5px; }
.bk-mk { width: 54px; height: 54px; border-radius: 50%; background: var(--dept-l, #e6eff6); display: grid; place-items: center; font: 600 22px var(--head); }
.bk-foot { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ---------- Clothing type pages: storybook sections (src/clothing-type.mjs) ---------- */
.ct-tiles { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) !important; max-width: none; gap: 18px; margin: 0; }
@media (max-width: 980px) { .ct-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) { .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } .ct-tiles .lk-card.lk-block { aspect-ratio: auto; } }
.ct-prices .pr-card { background: var(--cloud); border: 1px solid var(--line); border-radius: 24px; padding: 56px 34px 22px; box-shadow: 0 3px 0 rgba(47, 59, 44, .06); }
.ct-prices .pr-track { position: relative; height: 14px; margin: 0 11px; border-radius: 999px; background: #efe7d3; }
.ct-prices .pr-track i { position: absolute; top: -6px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 3px solid var(--cloud); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); opacity: .92; }
.ct-prices .pr-track i.pk, .ct-prices .pr-key i.pk { border-radius: 5px; }
.ct-prices .pr-mid { position: absolute; top: -22px; bottom: -12px; width: 2px; margin-left: -1px; background: #2f3b2c; }
.ct-prices .pr-mid span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 18px var(--hand); color: #2f3b2c; padding-bottom: 2px; }
.ct-prices .pr-axis { position: relative; height: 46px; margin: 18px 11px 0; font: 600 15px var(--body); }
.ct-prices .pr-end { position: absolute; left: 0; top: 0; display: grid; }
.ct-prices .pr-hi { left: auto; right: 0; justify-items: end; text-align: right; }
.ct-prices .pr-axis small { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.ct-prices .pr-tick { position: absolute; top: 0; transform: translateX(-50%); color: var(--ink-soft); font-weight: 400; }
.ct-prices .pr-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.ct-prices .pr-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ct-prices .pr-key a { margin-left: auto; font-weight: 600; }
@media (max-width: 620px) { .ct-prices .pr-card { padding: 52px 16px 18px; } .ct-prices .pr-tick { display: none; } .ct-prices .pr-key a { margin-left: 0; flex-basis: 100%; } }
.ct-inhow { background: none !important; padding: 0 !important; }
.ct-inhow ol { grid-template-columns: 1fr !important; gap: 12px; margin: 0; padding: 0; }
.ct-circle { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: var(--dept-l, #e6eff6); border: 3px solid #fff; outline: 2px solid #8a6a4a; margin: 0 auto; }
.ct-circle svg { width: 86px; height: 70px; }
.ct-shop .tc-name { font-size: 17px; line-height: 1.2; margin-top: 12px; }
.ct-shop .tc-art { background: none !important; aspect-ratio: auto !important; height: auto !important; overflow: visible !important; padding-top: 14px; }
.ct-shop .tc a { padding-bottom: 16px; }
.ct-see { font-size: 13.5px; font-weight: 600; color: #4f6b47; margin-top: 6px; }
.ct-fork .vs-card { width: 100%; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; background: var(--k-paper, #fffaf0); border: 2.5px solid var(--k-line, #e2d6b8); border-radius: 24px; box-shadow: var(--k-shadow); padding: 24px 22px 22px; color: var(--ink); }
.ct-fork .vs-card > b { font: 600 17px/1.3 var(--head); }
.ct-price { font: 600 15px var(--body); color: var(--ink-soft); margin-top: -4px; }
.ct-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.ct-links a { background: var(--dept-l, #e6eff6); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.ct-links a:hover { background: var(--dept, #dde9f2); }
.ct-tags { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.ct-tags em { font-style: normal; font-weight: 600; font-size: 13px; color: #4f6b47; margin-top: 4px; }
@media (max-width: 900px) { .ct-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ct-tags { grid-template-columns: 1fr; } }
.ct-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
@media (max-width: 900px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-foot { margin: 18px 0 0; color: var(--ink-soft); font-size: 15px; text-align: center; }
.ct-foot a { font-weight: 600; }
.ct-fork .vs-cards .ct-links a { display: inline-block; width: auto; height: auto; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--dept-l, #e6eff6); box-shadow: none; font: 600 14px var(--body); }
.ct-fork .vs-cards .ct-links a:hover { background: var(--dept, #dde9f2); }
.ct-kinds .shelf[open], .ct-made .shelf[open] { grid-column: 1 / -1; }
.ct-grid { align-items: stretch; }
.ct-grid > li { display: grid; }

/* ---------- Brand pages for clothes (Nov 11 picks): tag hero, closet carousel, notebook list, price rows ---------- */
.bh-tagged .wrap { display: block; }
.bh-tags { margin-top: 10px; }
.bh-tags b { overflow-wrap: anywhere; }
.bk-card { scroll-margin-top: 90px; }
.bk-card > div { justify-items: center; align-content: start; }
.bk-card .bk-add { margin-top: 4px; }
.bk-card .bk-all { text-align: center; padding: 0 10px; }
.bk-pick .bk-total { border-top: 0; justify-content: flex-start; align-items: flex-start; padding-top: 12px; }
.bk-pick .bk-total b { font: 700 17px var(--body); }
.bk-pick .bk-listact { margin-top: 14px !important; }
.bk-pick .bk-msg { margin-top: 8px !important; }
.bk-pick .bk-items li { background: transparent; border: 0; border-bottom: 1px dashed #d9cdb0; border-radius: 0; padding: 8px 0; }
.bk-pick .bk-in b { font: 700 21px/1.2 var(--hand); }
.bk-pick .bk-empty { font: 700 21px var(--hand); }
.bk-prrows { display: grid; gap: 26px; padding: 30px 34px 26px !important; }
.bk-prrows .pr-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 110px; gap: 22px; align-items: center; }
.pr-lab b { display: block; font: 600 19px var(--head); }
.pr-lab small { color: var(--ink-soft); font-size: 13px; }
.bk-prrows .pr-track i { background: #cfc6b0; width: 14px; height: 14px; top: 0; margin-left: -7px; border-width: 2px; }
.bk-prrows .pr-track i.me { background: #c8693a; width: 26px; height: 26px; top: -6px; margin-left: -13px; border-width: 3px; opacity: 1; z-index: 2; }
.bk-prrows .pr-mid { top: -8px; bottom: -8px; }
.bk-prrows .pr-axis { height: 20px; margin-top: 10px; font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.pr-me b { font: 600 22px var(--head); color: #a4522a; }
.pr-pack { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 720px) { .bk-prrows { padding: 22px 16px !important; } .bk-prrows .pr-row { grid-template-columns: minmax(0, 1fr) auto; } .bk-prrows .pr-row > div:nth-child(2), .bk-prrows .pr-pack { grid-column: 1 / -1; order: 3; } }
.bk-agencies .bk-foot { margin-top: 16px; }
.product-hero.bh-tagged .wrap { display: block !important; }
.product-hero.bh-tagged .wrap > div { max-width: none !important; width: auto !important; flex: none; }
.product-hero.bh-tagged .summary { max-width: 70ch; }
main .bk-card a { display: inline; height: auto; padding: 0; background: none; border: 0 !important; border-radius: 0; box-shadow: none; transform: none; text-align: center; }
main .bk-card a.ct-see { text-decoration: underline; text-underline-offset: 3px; }
main .bk-card a.bk-all { padding: 0 10px; }
.bk-total[hidden] { display: none !important; }
.bk-pick .bk-listact .btn { width: auto; margin: 0; }
.bk-pick .bk-empty { margin-top: 10px; }
@media (max-width: 520px) { .bh-tags { grid-template-columns: 1fr 1fr !important; gap: 12px; } .bh-tags a { padding: 28px 12px 14px; } .bh-tags b { font-size: 16px; } .bh-tags small { font-size: 12.5px; } }