/* Storefront styles. Brand colors come from Settings and arrive as --brand / --button on :root. */
:root {
  --brand: #1F3FD1;
  --brand-ink: #ffffff;
  --button: #FFC738;
  --button-ink: #15192A;
  --ink: #15192A;
  --ink-2: #4A5163;
  --ink-3: #6E7487;
  --line: #E2E5EC;
  --line-2: #CDD1DB;
  --surface: #F4F5F8;
  --paper: #ffffff;
  --good: #13784A;
  --warn: #B24A00;
  --bad: #B42318;
  --star: #E8A100;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(21, 25, 42, .06), 0 8px 24px rgba(21, 25, 42, .08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); font-feature-settings: "tnum" 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 650; }
h2 { font-size: 1.375rem; font-weight: 650; }
h3 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.price, .num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }

/* Test mode strip */
.testbar { background: #FFF4D6; color: #6B4A00; font-size: .8125rem; text-align: center; padding: 6px 12px; border-bottom: 1px solid #F1DE9F; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.logo img { max-height: 48px; width: auto; height: auto; }
.search { position: relative; max-width: 640px; width: 100%; justify-self: center; }
.search input { width: 100%; height: 46px; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 0 52px 0 20px; background: var(--surface); transition: border-color .15s, background .15s; }
.search input:focus { outline: none; border-color: var(--brand); background: var(--paper); }
.search button { position: absolute; right: 5px; top: 5px; height: 36px; width: 42px; border: 0; border-radius: 999px; background: var(--brand); color: var(--brand-ink); cursor: pointer; display: grid; place-items: center; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: none; max-height: 70vh; overflow: auto; }
.search-results.open { display: block; }
.search-results a { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: var(--radius-sm); text-decoration: none; }
.search-results a:hover, .search-results a.active { background: var(--surface); color: var(--ink); }
.search-results img, .search-results .ph { width: 48px; height: 48px; object-fit: contain; background: var(--surface); border-radius: 6px; }
.search-results .t { font-weight: 550; font-size: .9375rem; }
.search-results .s { font-size: .8125rem; color: var(--ink-3); }
.search-results .empty { padding: 14px; color: var(--ink-3); font-size: .9375rem; }
.search-results .all { display: block; text-align: center; padding: 10px; font-weight: 600; color: var(--brand); }
.head-actions { display: flex; align-items: center; gap: 6px; }
.head-link { display: flex; flex-direction: column; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: .8125rem; line-height: 1.2; color: var(--ink-2); }
.head-link b { font-size: .9375rem; color: var(--ink); font-weight: 600; }
.head-link:hover { background: var(--surface); color: var(--ink-2); }
.cart-btn { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; cursor: pointer; font-weight: 600; text-decoration: none; }
.cart-btn:hover { color: #fff; background: #000; }
.cart-btn .count { min-width: 22px; height: 22px; border-radius: 999px; background: var(--button); color: var(--button-ink); font-size: .8125rem; display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.cart-btn.bump .count { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
.subnav { border-top: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 10px 12px; font-size: .9375rem; text-decoration: none; white-space: nowrap; color: var(--ink-2); border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 760px) {
  .site-header .bar { grid-template-columns: auto auto; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px 12px; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .head-actions { justify-self: end; }
  .head-link.hide-sm { display: none; }
}

/* ---------- Buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none; transition: filter .15s, background .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .6; cursor: not-allowed; }
.btn-cart { background: var(--button); color: var(--button-ink); }
.btn-cart:hover { filter: brightness(.95); color: var(--button-ink); }
.btn-buy { background: var(--brand); color: var(--brand-ink); }
.btn-buy:hover { filter: brightness(1.1); color: var(--brand-ink); }
.btn-ghost { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font-size: .875rem; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { text-decoration-thickness: 2px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.input, .field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--paper); }
.field textarea { min-height: 120px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9375rem; }
.alert-bad { background: #FDECEA; color: var(--bad); border: 1px solid #F5C2BC; }
.alert-good { background: #E7F5EE; color: var(--good); border: 1px solid #B7E0CB; }
.alert-info { background: var(--surface); border: 1px solid var(--line); }
.flash { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow); font-size: .9375rem; max-width: calc(100vw - 32px); }

/* ---------- Stars ---------- */
.stars { --pct: 0%; display: inline-block; position: relative; font-size: 1rem; line-height: 1; letter-spacing: 1px; color: var(--line-2); }
.stars::before { content: "★★★★★"; }
.stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; color: var(--star); }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--ink-2); text-decoration: none; }
.rating .n { color: var(--brand); }

/* ---------- Product grid ---------- */
.section { padding: 40px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
.card { position: relative; display: flex; flex-direction: column; text-decoration: none; }
.card .img { aspect-ratio: 1; background: var(--surface); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; margin-bottom: 12px; }
.card .img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; transition: transform .3s ease; }
.card:hover .img img { transform: scale(1.04); }
.card .t { font-weight: 550; line-height: 1.3; margin-bottom: 4px; }
.card:hover .t { color: var(--brand); }
.card .s { font-size: .875rem; color: var(--ink-3); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card .p { font-size: 1.125rem; font-weight: 650; margin-top: 4px; }
.card .p s { font-size: .875rem; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.card .tag { position: absolute; top: 10px; left: 10px; background: var(--paper); border-radius: 999px; padding: 3px 10px; font-size: .75rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.card .tag.out { color: var(--ink-3); }
.card .tag.sale { color: var(--bad); }
.ph { background: var(--surface); width: 100%; height: 100%; }

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .card .img { border-radius: 8px; margin-bottom: 8px; }
  .card .t { font-size: .9375rem; }
  .card .s { display: none; }
  .card .p { font-size: 1.0625rem; }
  .card .tag { top: 6px; left: 6px; font-size: .6875rem; padding: 2px 8px; }
  .section { padding: 28px 0; }
  .section-head { flex-wrap: wrap; }
  .wrap { padding: 0 14px; }
}

/* ---------- Home hero: one flat color, the headline, one picture. No gradient, no shadow. ---------- */
.hero { background: var(--hero-bg, #EEF0F4); color: var(--ink); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 0; }
.hero.has-pic .wrap, .hero:has(.hero-pic) .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; min-height: 430px; }
.hero .copy { padding: 52px 0; }
.hero h1 { font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem); font-weight: 800; letter-spacing: -.04em; line-height: .96; margin: 0 0 16px; color: var(--brand); }
.hero .eyebrow { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; line-height: 1.3; }
.hero .sub { font-size: 1.1875rem; color: var(--ink-2); margin: 0 0 26px; max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-cta .btn-ghost { background: transparent; border-color: var(--ink); }
.hero-pic { align-self: end; display: block; }
.hero-pic img { width: 100%; height: auto; display: block; }
.hero-pic.product { align-self: center; padding: 28px 0; }
.hero-pic.product img { max-height: 380px; object-fit: contain; border-radius: 16px; }
@media (max-width: 860px) {
  .hero.has-pic .wrap, .hero:has(.hero-pic) .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .hero .copy { padding: 30px 0 22px; }
  .hero .sub { font-size: 1.0625rem; margin-bottom: 20px; }
  .hero-pic { margin: 0 -20px; }
  .hero-pic.product { padding: 0 20px 24px; margin: 0; }
}
@media (max-width: 600px) { .hero-pic { margin: 0 -14px; } }

.promises { border-bottom: 1px solid var(--line); }
.promises ul { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.promises li { display: flex; gap: 12px; align-items: center; font-size: .9375rem; color: var(--ink-2); }
.promises svg { flex: none; color: var(--brand); }
.promises b { color: var(--ink); display: block; }
@media (max-width: 900px) { .promises ul { grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 16px 0; } .promises li { font-size: .8125rem; gap: 10px; align-items: flex-start; line-height: 1.35; } .promises svg { width: 22px; height: 22px; margin-top: 1px; } }

/* Shop by type: one picture tile per kind of product */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tile .img { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface); margin-bottom: 10px; }
.tile .img img { width: 100%; height: 100%; object-fit: cover; }
.tile b { font-weight: 650; line-height: 1.25; }
.tile small { color: var(--ink-3); font-size: .8125rem; }
.tile:hover b { color: var(--brand); }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; gap: 14px 12px; } .tile .img { border-radius: 8px; margin-bottom: 8px; } }
.chips-row { margin-bottom: 18px; }
.pvideo { width: 100%; max-width: 560px; border-radius: 12px; background: #000; display: block; margin: 0 0 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.chip:hover, .chip[aria-current="page"] { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="page"] { background: var(--ink); color: #fff; }

/* ---------- Product page ---------- */
.crumbs { font-size: .875rem; color: var(--ink-3); padding: 16px 0 6px; }
.crumbs a { color: var(--ink-3); }
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 320px; gap: 36px; align-items: start; padding: 10px 0 40px; }
.gallery { display: grid; grid-template-columns: 64px 1fr; gap: 12px; position: sticky; top: 140px; }
.thumbs { display: flex; flex-direction: column; gap: 8px; }
.thumbs button { width: 64px; height: 64px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); padding: 4px; cursor: pointer; }
.thumbs button[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.stage { aspect-ratio: 1; background: var(--surface); border-radius: 14px; overflow: hidden; position: relative; cursor: zoom-in; }
.track { width: 100%; height: 100%; }
.slide { display: none; width: 100%; height: 100%; }
.slide.on { display: block; }
.stage img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: transform .2s ease; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.stage.zoom .slide.on img { transform: scale(2); }
.dots { display: none; }
.info h1 { margin-bottom: 6px; }
.info .sub { color: var(--ink-2); font-size: 1.0625rem; margin-bottom: 10px; }
.info .rating { margin-bottom: 14px; }
.info hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.big-price { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.big-price sup { font-size: .5em; vertical-align: .9em; margin-right: 1px; font-weight: 600; }
.was { color: var(--ink-3); font-size: .9375rem; margin-top: 6px; }
.was .off { color: var(--bad); font-weight: 600; margin-left: 4px; }
.opt { margin: 18px 0; }
.opt-label { font-size: .9375rem; margin-bottom: 8px; }
.opt-label b { font-weight: 600; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { min-width: 48px; min-height: 42px; padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--paper); cursor: pointer; font-weight: 500; }
.swatches button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.swatches button.oos { color: var(--ink-3); border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface) 6px 7px); }
.bullets { padding-left: 18px; margin: 0; }
.bullets li { margin-bottom: 6px; }

.buybox { border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; position: sticky; top: 140px; }
.buybox .big-price { font-size: 1.75rem; margin-bottom: 12px; }
.promise { font-size: .9375rem; margin-bottom: 6px; }
.promise b { font-weight: 650; }
.countdown { color: var(--good); font-weight: 600; }
.stock { font-size: 1.0625rem; font-weight: 650; margin: 14px 0 12px; }
.stock.in { color: var(--good); }
.stock.low { color: var(--warn); }
.stock.out { color: var(--bad); }
.qty { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qty select { min-height: 40px; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--surface); padding: 0 12px; font-weight: 600; }
.buybox .btn { width: 100%; margin-bottom: 10px; }
.facts { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .8125rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }
.secure { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 1100px) {
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buybox { grid-column: 2; position: static; }
  .info { grid-column: 2; grid-row: 1; }
  .gallery { grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .crumbs { display: none; }
  .pdp { grid-template-columns: 1fr; gap: 16px; padding-top: 0; }
  .gallery, .info, .buybox { grid-column: 1; grid-row: auto; position: static; }
  .gallery { grid-template-columns: 1fr; margin: 0 -14px; }
  .thumbs { display: none; }
  .stage { border-radius: 0; cursor: default; aspect-ratio: 1; }
  .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .slide { display: block; flex: 0 0 100%; scroll-snap-align: center; }
  .dots { display: flex; justify-content: center; gap: 6px; position: absolute; bottom: 10px; left: 0; right: 0; }
  .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
  .dots i.on { background: var(--ink); width: 18px; border-radius: 99px; }
  .info .sub { font-size: 1rem; }
  .info .mini-specs { display: none; }
  .info hr { margin: 12px 0; }
  .buybox { border: 0; padding: 0; border-radius: 0; }
  .buybox > .big-price { display: none; }
  .swatches button { min-height: 46px; min-width: 56px; }
  .qty select { min-height: 46px; }
}

/* Sticky buy bar for phones: always one thumb away from buying */
.buybar { display: none; }
@media (max-width: 760px) {
  .buybar { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .2s ease; box-shadow: 0 -6px 20px rgba(21,25,42,.08); }
  .buybar.show { transform: none; }
  .buybar .bp { font-weight: 700; font-size: 1.125rem; padding-right: 4px; }
  .buybar .btn { min-height: 46px; padding: 0 10px; font-size: .9375rem; }
  body.has-buybar { padding-bottom: 76px; }
}

.detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; padding: 32px 0; border-top: 1px solid var(--line); }
.prose { max-width: 68ch; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .4em; }
.specs { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.specs th, .specs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 40%; color: var(--ink-2); font-weight: 500; background: var(--surface); }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; gap: 24px; } }

.together { border-top: 1px solid var(--line); padding: 32px 0; }
.bundle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bundle .item { width: 120px; text-align: center; font-size: .8125rem; }
.bundle .item .img { aspect-ratio: 1; background: var(--surface); border-radius: 10px; margin-bottom: 6px; display: grid; place-items: center; overflow: hidden; }
.bundle .item img { object-fit: contain; width: 100%; height: 100%; padding: 8%; mix-blend-mode: multiply; }
.bundle .plus { font-size: 1.5rem; color: var(--ink-3); }
.bundle .total { margin-left: 12px; }
.bundle .total .p { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.bundle label { display: flex; gap: 6px; justify-content: center; align-items: flex-start; text-align: left; cursor: pointer; }
@media (max-width: 600px) {
  .bundle { display: grid; gap: 0; }
  .bundle .plus { display: none; }
  .bundle .item { width: auto; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
  .bundle .item .img { margin: 0; }
  .bundle label { justify-content: flex-start; }
  .bundle label input { width: 20px; height: 20px; margin-top: 2px; }
  .bundle .total { margin: 14px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .bundle .total .p { margin: 0; }
}

/* Reviews */
.reviews { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: 32px 0 56px; border-top: 1px solid var(--line); }
.summary .avg { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.summary .avg .stars { font-size: 1.25rem; }
.bars { margin: 16px 0 24px; }
.bars div { display: grid; grid-template-columns: 50px 1fr 40px; gap: 10px; align-items: center; font-size: .875rem; margin-bottom: 8px; color: var(--ink-2); }
.bars .track { height: 18px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.bars .fill { height: 100%; background: var(--star); }
.review { padding: 18px 0; border-bottom: 1px solid var(--line); }
.review .who { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 550; }
.review .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: .875rem; color: var(--ink-2); font-weight: 600; }
.review .head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.review .head b { font-weight: 650; }
.verified { color: var(--warn); font-size: .8125rem; font-weight: 600; }
.review .photos { display: flex; gap: 8px; margin-top: 10px; }
.review .photos img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.review .reply { background: var(--surface); border-radius: 8px; padding: 10px 14px; margin-top: 10px; font-size: .9375rem; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Cart drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(21, 25, 42, .45); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--paper); z-index: 61; transform: translateX(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: none; }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer header h2 { margin: 0; font-size: 1.125rem; }
.icon-btn { width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: var(--line); }
.drawer .body { flex: 1; overflow: auto; padding: 8px 20px; }
.drawer footer { border-top: 1px solid var(--line); padding: 16px 20px 20px; background: var(--paper); }
.added { display: flex; align-items: center; gap: 8px; color: var(--good); font-weight: 600; font-size: .9375rem; padding: 12px 0 4px; }
.freebar { margin: 10px 0 6px; font-size: .875rem; }
.freebar .track { height: 6px; background: var(--surface); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.freebar .fill { height: 100%; background: var(--good); border-radius: 99px; transition: width .3s; }
.line { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line .img { width: 72px; height: 72px; background: var(--surface); border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.line .img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.line .t { font-weight: 550; line-height: 1.3; text-decoration: none; display: block; }
.line .v { font-size: .8125rem; color: var(--ink-3); }
.line .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.line .lp { font-weight: 650; }
.line .acts { display: flex; gap: 12px; margin-top: 8px; }
.line .warn { color: var(--warn); font-size: .8125rem; font-weight: 600; margin-top: 4px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 999px; height: 34px; }
.stepper button { width: 32px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 1.125rem; color: var(--ink-2); border-radius: 999px; }
.stepper button:hover { background: var(--surface); }
.stepper span { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.sum-row.total { font-size: 1.125rem; font-weight: 700; margin: 10px 0 14px; }
.empty-state { text-align: center; padding: 48px 12px; color: var(--ink-2); }
.empty-state svg { color: var(--line-2); margin: 0 auto 12px; }

/* Cart page */
.cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding: 24px 0 56px; align-items: start; }
.cart-page .panel { border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }
.cart-page .side { border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; position: sticky; top: 140px; }
.cart-page .line { grid-template-columns: 120px 1fr; }
.cart-page .line .img { width: 120px; height: 120px; }
@media (max-width: 860px) { .cart-page { grid-template-columns: 1fr; } .cart-page .side { position: static; } .cart-page .line { grid-template-columns: 84px 1fr; } .cart-page .line .img { width: 84px; height: 84px; } }

/* ---------- Simple pages ---------- */
.page-narrow { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.page-mid { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }
.box { border: 1px solid var(--line); border-radius: 14px; padding: 24px; }

/* Order status page */
.progress { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.progress::before { content: ""; position: absolute; top: 13px; left: 12.5%; right: 12.5%; height: 3px; background: var(--line); }
.progress::after { content: ""; position: absolute; top: 13px; left: 12.5%; height: 3px; background: var(--good); width: var(--w, 0%); }
.progress li { position: relative; text-align: center; font-size: .875rem; color: var(--ink-3); }
.progress li i { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 8px; border-radius: 50%; background: var(--paper); border: 3px solid var(--line); position: relative; z-index: 1; }
.progress li.done { color: var(--ink); font-weight: 600; }
.progress li.done i { background: var(--good); border-color: var(--good); color: #fff; }
.progress li small { display: block; font-weight: 400; color: var(--ink-3); }
.progress.p5 { grid-template-columns: repeat(5, 1fr); }
.progress.p5::before { left: 10%; right: 10%; }
.progress.p5::after { left: 10%; }
@media (max-width: 480px) { .progress.p5 li { font-size: .75rem; } }
.scans { list-style: none; margin: 16px 0 0; padding: 0; position: relative; }
.scans::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.scans li { position: relative; padding: 0 0 12px 24px; font-size: .9375rem; }
.scans li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); }
.scans li:first-child::before { background: var(--good); border-color: var(--good); }
.scans li span { display: block; color: var(--ink-3); font-size: .8125rem; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 24px 0; }
.order-grid h3 { font-size: .9375rem; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
@media (max-width: 700px) { .order-grid { grid-template-columns: 1fr; } }
.thanks { display: flex; gap: 14px; align-items: flex-start; }
.thanks .check { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; }

/* Review form */
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { font-size: 2.25rem; line-height: 1; color: var(--line-2); cursor: pointer; transition: color .1s; }
.star-pick input:checked ~ label, .star-pick label:hover, .star-pick label:hover ~ label { color: var(--star); }
.star-pick input:focus-visible + label { outline: 3px solid var(--brand); border-radius: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0 28px; margin-top: 40px; font-size: .9375rem; color: var(--ink-2); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.site-footer h3 { font-size: .9375rem; color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal { border-top: 1px solid var(--line); padding-top: 18px; font-size: .8125rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Phones: the category row tucks away once you scroll, keeping search and cart on screen. */
@media (max-width: 760px) {
  .site-header.compact .subnav { display: none; }
  .head-link { padding: 4px 6px; }
}

/* ---------- Checkout (phone first) ---------- */
.checkout-body { background: var(--surface); }
.co-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.co-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.co-secure { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--ink-2); font-weight: 600; }
.co { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 16px; padding-bottom: 120px; }
.co-title { font-size: 1.375rem; margin: 4px 0 14px; }
.co-title .muted { font-weight: 400; font-size: 1rem; }
.co-step, .co-express { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px; margin-bottom: 12px; }
.co-express { padding: 16px; }
.co-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; margin-bottom: 14px; }
.co-step h2 .n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8125rem; display: grid; place-items: center; flex: none; }
.co-el + .co-el { margin-top: 12px; }
.co-or { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--ink-3); font-size: .875rem; }
.co-or::before, .co-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.co-row3 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.co-fields .field input, .co-fields .field select { font-size: 16px; } /* 16px stops iPhone zooming into fields */
.co-saved { margin-bottom: 14px; }
.co-saved .chips { margin-top: 6px; }
.co-saved .chip { font-size: .875rem; padding: 8px 12px; background: var(--paper); cursor: pointer; }
.co-saved .chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--paper); color: var(--ink); }
.co-methods { display: grid; gap: 10px; }
.co-method { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 10px; cursor: pointer; min-height: 64px; }
.co-method:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--surface) 50%, white); }
.co-method input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.co-method .when { font-weight: 650; color: var(--good); }
.co-method .name { font-size: .875rem; color: var(--ink-2); }
.co-method .cost { font-weight: 650; text-align: right; }
.co-method .cost s { display: block; font-weight: 400; font-size: .8125rem; color: var(--ink-3); }
.co-promo { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.co-promo summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .9375rem; padding: 6px 0; }
.co-promo-row { display: flex; gap: 8px; margin-top: 10px; }
.co-promo-row .input { text-transform: uppercase; font-size: 16px; }
.co-promo p:empty { display: none; }
.co-review .line { grid-template-columns: 64px 1fr; padding: 12px 0; }
.co-review .line .img { width: 64px; height: 64px; }
.co-review .line .stepper { height: 38px; }
.co-review .line .stepper button { width: 38px; }
.co-review .unavailable { font-size: .875rem; color: var(--warn); margin-top: 8px; }
.co-place { min-height: 52px; font-size: 1.0625rem; }
.co-place-inline { padding: 4px 2px 20px; }
.co-legal { margin: 10px 0 0; }
.co-side { display: none; }
.co-summary .sum-row { font-size: .9375rem; }
.co-summary .sum-row.total { font-size: 1.1875rem; color: var(--bad); border-top: 1px solid var(--line); padding-top: 12px; }
.co-summary .save { color: var(--good); }
.co-totals-inline { margin-top: 12px; }
.co-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(21,25,42,.08); }
.co-bar > div { display: flex; flex-direction: column; line-height: 1.2; }
.co-bar b { font-size: 1.1875rem; }
.co-bar .co-place { min-height: 48px; }
.co .busy-note { font-size: .875rem; color: var(--ink-2); margin-top: 8px; }

@media (min-width: 600px) {
  .co-row3 { grid-template-columns: 1.4fr 1fr 1fr; }
  .co-step { padding: 22px 24px; }
}
@media (min-width: 960px) {
  .co { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding-bottom: 60px; align-items: start; }
  .co-side { display: block; position: sticky; top: 20px; }
  .co-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
  .co-sum-title { font-size: 1.0625rem; margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
  .co-bar { display: none; }
  .co-place-inline .co-legal { display: none; }
  .co-place-inline { display: none; }
}

/* ---------- CHECKOUT v2, the Amazon way (2026-10-15) ----------
   Three steps in one card. A finished step shows one line + "Change"; a later step shows only its title, greyed.
   [data-step] on .co says which step is open. The yellow buttons say what comes next (public/js/checkout.js). */
.co-steps { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.co-steps .co-step { border: 0; border-radius: 0; margin: 0; border-top: 1px solid var(--line); background: none; }
.co-steps .co-step:first-child { border-top: 0; }
.co-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co-head h2 { font-size: 1.125rem; margin: 0; }
.co-change { background: none; border: 0; padding: 4px 0; color: #007185; font: inherit; font-size: .9375rem; cursor: pointer; flex: none; }
.co-change:hover { color: #C7511F; text-decoration: underline; }
.co-sum { font-size: .9375rem; line-height: 1.45; margin-top: 6px; }
.co-sum small { display: block; color: var(--ink-2); font-size: .8125rem; margin-top: 2px; }
.co-body { margin-top: 16px; }
.co .field > span i, .co-notes summary i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.co-hint { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: 5px; }
.co-notes { margin: 2px 0 14px; }
.co-notes summary { cursor: pointer; color: #007185; font-size: .9375rem; padding: 4px 0; }
.co-notes[open] summary { margin-bottom: 8px; }
.co-notes textarea { min-height: 84px; font-size: 16px; }
.co-ship-us { margin: 0 0 14px; }
.co-next { min-height: 46px; padding: 0 22px; border-radius: 100px; }
.co-billing { margin: 12px 0 0; }
.co-promo { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.co-promo .field { margin-bottom: 4px; }
.co-promo .co-promo-row { display: flex; gap: 8px; margin: 0; font-weight: 400; }
.co-promo-row .input { text-transform: uppercase; font-size: 16px; }
.co-promo-row .btn { flex: none; }
.co-promo p:empty { display: none; }
.co-promo + .co-next { margin-top: 16px; }
.co-row2 { grid-template-columns: 1fr 1fr !important; }
.co-arrive { color: var(--good); font-weight: 700; font-size: 1.0625rem; margin: 0 0 6px; }
.co-opt-title { font-size: 1rem; margin: 16px 0 10px; }
.co-method .name { font-size: .875rem; }
/* closed and later steps */
.co-step .co-change, .co-step .co-sum { display: none; }
.co[data-step="1"] [data-body="2"], .co[data-step="1"] [data-body="3"], .co[data-step="2"] [data-body="1"], .co[data-step="2"] [data-body="3"],
.co[data-step="3"] [data-body="1"], .co[data-step="3"] [data-body="2"] { display: none; }
.co[data-step="2"] [data-box="1"] .co-change, .co[data-step="2"] [data-box="1"] .co-sum,
.co[data-step="3"] [data-box="1"] .co-change, .co[data-step="3"] [data-box="1"] .co-sum,
.co[data-step="3"] [data-box="2"] .co-change, .co[data-step="3"] [data-box="2"] .co-sum { display: block; }
.co[data-step="1"] [data-box="2"] h2, .co[data-step="1"] [data-box="3"] h2, .co[data-step="2"] [data-box="3"] h2 { color: var(--ink-3); font-size: 1rem; font-weight: 600; }
.co[data-step="2"] [data-box="1"] h2, .co[data-step="3"] [data-box="1"] h2, .co[data-step="3"] [data-box="2"] h2 { font-size: 1rem; }
/* place box under the review step, summary lines */
.co-placebox { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.co-placebox p { margin: 0; line-height: 1.4; }
.co-place-total b { color: var(--bad); font-size: 1.125rem; }
.co-place { border-radius: 100px; }
.co-summary .sum-row.sub { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.co-sum-head { font-size: 1.0625rem; margin: 0 0 10px; }
.co-bar { grid-template-columns: 1fr; gap: 6px; padding-top: 10px; }
.co-bar .co-place { width: 100%; }
.co-bar p { margin: 0; text-align: center; font-size: .75rem; }
/* phone: summary under the steps, the pinned bar does the buying */
.co-placebox { display: none; }
@media (min-width: 960px) {
  .co-place-inline { display: none; }
  .co[data-step="3"] .co-place-inline { display: block; }
  .co[data-step="3"] .co-placebox { display: grid; }
  .co-summary-inline { display: none; }
  .co-steps .co-step { padding: 20px 24px; }
}

/* Reviews: recent list, helpful votes */
.sold-today { margin: 8px 0 0; font-size: .9375rem; color: var(--ink-2); }
.sold-today b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-recent { font-size: 1.0625rem; margin: 0 0 4px; }
.review[hidden] { display: none; }
.rv-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rv-helpful { border: 1.5px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 5px 14px; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.rv-helpful:hover { border-color: var(--ink); }
.rv-helpful:disabled { opacity: .6; cursor: default; }
.rv-more { margin-top: 16px; }

/* Product photos fill their tile edge to edge: no inner padding, no grey frame around the photo. */
.card .img, .hero-buy .img { background: none; }
.card .img img, .hero-buy .img img { padding: 0; mix-blend-mode: normal; border-radius: inherit; }

/* Product card actions: save for later (heart), add to cart, buy now */
.card { text-decoration: none; }
.card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
.card:hover .t { color: inherit; }
.card-link:hover .t { color: var(--brand); }
.card:hover .img img { transform: none; }
.card-link:hover .img img { transform: scale(1.04); }
.card .love { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.14); transition: transform .15s ease, color .15s ease; }
.card .love:hover { transform: scale(1.08); color: var(--bad); }
.card .love[aria-pressed="true"] { color: var(--bad); }
.card .love[aria-pressed="true"] svg { fill: currentColor; }
.card-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.card-acts > .btn:only-child { grid-column: 1 / -1; }
.card-acts form { margin: 0; display: grid; }
.card-acts .btn { width: 100%; padding: 0 8px; white-space: nowrap; }
@media (max-width: 640px) {
  .card-acts { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
  .card .love { top: 6px; right: 6px; width: 34px; height: 34px; }
}

/* Card: price with a round + (add to cart) beside it, Buy Now full width underneath */
.card-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; min-height: 40px; }
.card-price .p { margin-top: 0; }
.add-plus { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--button); color: var(--button-ink); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.add-plus:hover { filter: brightness(.95); transform: scale(1.06); }
.add-plus:disabled { opacity: .6; cursor: default; }
.card-acts { grid-template-columns: 1fr; margin-top: 10px; }
@media (max-width: 640px) { .add-plus { width: 36px; height: 36px; } .card-acts { margin-top: 8px; } }

/* ============================================================
   PHONE SHELL (2026-10-05, the owner's call): on a phone the store reads like an app, not a web page.
   The only difference from an app is the address bar.

   1. FIXED SCREEN. No pinch zoom, no double-tap zoom, no sideways drift, no rubber band. Same three layers as
      cycatel.com: the viewport line in the page head, the rules right below, and the listeners in /js/app.js.
      ACCESSIBILITY, on the record: this blocks the browser's own zoom, which WCAG 1.4.4 expects to reach 200%.
      It is a deliberate product decision. Undo it by deleting this first block, `maximum-scale=1, user-scalable=no`
      in views/partials/head.ejs, and the listeners in public/js/app.js.
   2. APP BARS. One slim bar on top (back or logo, search, cart) and five tabs at the bottom (Home, Shop, Saved,
      Cart, Account), the same five the store's bar on oui.blue has. On a product page the Add to Cart bar takes
      the bottom instead.
   Flat on purpose: solid fills and hairlines, no gradients, no raised look.
   ============================================================ */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
/* Nothing can be wider than the screen. `clip`, not `hidden`: it makes no scroll box, so the sticky bars keep working
   and the rows that are meant to slide sideways (photos, best sellers, chips) still do under one finger. */
html, body { max-width: 100%; overflow-x: clip; }
/* Bars, buttons and chips are furniture, not text: no selection handles, no long-press menu. Prices, names and
   descriptions stay selectable. */
.site-header, .co-header, .tabbar, .buybar, .co-bar, .btn, .chip, .subnav, .add-plus, .love, .stepper, .testbar,
.tile, .swatches, .thumbs, .dots, .rv-helpful, .site-footer h3 { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.btn, .chip, .add-plus, .love, .tile, .tabbar a, .back, .cart-btn, .swatches button, .stepper button { touch-action: manipulation; }
img { -webkit-user-drag: none; }

/* A "row" of products (best sellers): one line of cards at any width. On wide screens the cards that would wrap are
   simply not shown; on phones the row slides sideways (rules further down). */
@media (min-width: 761px) { .grid.row-scroll { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; } }

/* One screen hands over to the next with a short cross-fade instead of a white flash (browsers without it just load the page). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.back { display: none; }
.tabbar { display: none; }
.flash a { color: var(--button); font-weight: 700; margin-left: 14px; text-decoration: none; white-space: nowrap; }
.co-header .back { display: none; }

@media (max-width: 760px) {
  /* ---- top bar: one row ---- */
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-header .bar { grid-template-columns: auto minmax(0, 1fr) auto; height: 56px; padding-top: 0; padding-bottom: 0; gap: 8px; }
  .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .search { grid-column: auto; grid-row: auto; max-width: none; }
  .search input { height: 40px; padding: 0 46px 0 16px; font-size: 16px; }
  .search button { top: 4px; right: 4px; height: 32px; width: 36px; }
  .search-results { position: fixed; left: 8px; right: 8px; top: auto; margin-top: 6px; max-height: 60vh; }
  .head-link { display: none; }
  .head-actions { gap: 0; }
  .cart-btn { width: 44px; height: 44px; padding: 0; justify-content: center; background: none; color: var(--ink); border-radius: 12px; }
  .cart-btn:hover { background: none; color: var(--ink); }
  .cart-btn > span:not(.count) { display: none; }
  .cart-btn .count { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: .6875rem; font-weight: 700; background: var(--brand); color: var(--brand-ink); }
  .cart-btn .count[data-zero] { display: none; }
  .back { display: grid; place-items: center; width: 40px; height: 44px; margin-left: -10px; color: var(--ink); border-radius: 12px; text-decoration: none; }
  .back:active, .cart-btn:active { background: var(--surface); }
  .pg-home .site-header .back { display: none; }
  body:not(.pg-home) .site-header .logo { display: none; }
  .site-header .logo img { max-height: 42px; }
  /* The category row gives way to the chips and tiles inside each screen. */
  .subnav { display: none; }

  /* ---- bottom tabs ---- */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); border-top: 1px solid var(--line); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; text-decoration: none; font-size: .6875rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); }
  .tabbar a[aria-current="page"] { color: var(--brand); }
  .tabbar a[aria-current="page"] svg { stroke-width: 2.3; }
  .tabbar a:active { color: var(--ink); }
  .tabbar .badge { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); font-size: .6875rem; font-weight: 700; font-style: normal; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
  .tabbar .badge[data-zero] { display: none; }
  .flash { bottom: calc(70px + env(safe-area-inset-bottom)); border-radius: 14px; width: max-content; }
  .site-footer { margin-top: 24px; padding: 28px 0 20px; }

  /* ---- lists ---- */
  .section-head h2, h2 { font-size: 1.25rem; }
  .grid.row-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 14px; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .grid.row-scroll::-webkit-scrollbar { display: none; }
  .grid.row-scroll > .card { flex: 0 0 44%; scroll-snap-align: start; }
  .chips-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 16px; padding: 0 14px 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .chips-row::-webkit-scrollbar { display: none; }
  .chips-row .chip { flex: none; padding: 8px 14px; font-size: .875rem; }
  .btn { min-height: 48px; }
  .btn-sm { min-height: 40px; }

  /* ---- product screen: the buy bar is the bottom bar ---- */
  .pg-product .tabbar { display: none; }
  .pg-product .buybar { transform: none; box-shadow: none; }
  .pg-product .buybox form .btn { display: none; }
  body.pg-product, body.pg-product.has-buybar { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .pg-product .flash { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .buybar { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .buybar .btn { min-height: 48px; }
  .info h1 { font-size: 1.375rem; line-height: 1.25; margin-top: 12px; }

  /* ---- shop and collection screens: the title, a sliding row of chips, then count and sort on one line ---- */
  .pg-shop main > .wrap > .section:first-child { padding: 18px 0 0; }
  .pg-shop main > .wrap > .section:first-child h1 { font-size: 1.5rem; margin-bottom: 12px; }
  .pg-shop .section-head { display: block; margin: 0; }
  .pg-shop .section-head form { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .pg-shop .section-head form select { min-height: 40px; }
  .pg-shop main > .wrap > .section + .section { padding-top: 0; margin-top: -34px; }
  .pg-shop main > .wrap > .section + .section > p { margin: 0 0 16px; line-height: 40px; width: 50%; }

  /* ---- cart screen: the total and Checkout stay in reach above the tabs ---- */
  .line .acts { flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .line .acts .linkbtn { white-space: nowrap; }
  .cart-page { gap: 16px; padding-top: 16px; padding-bottom: 8px; }
  .cart-page .panel { border-radius: 12px; padding: 0 14px; }
  .cart-page .side { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 30; background: var(--paper); border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0 -14px; padding: 12px 14px; }
  .cart-page .side .sum-row.total { margin: 6px 0 10px; }
  .cart-page .side > p { display: none; }

  /* ---- checkout ---- */
  .co-header { padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 40; }
  .co-header .wrap { height: 56px; justify-content: flex-start; gap: 6px; }
  .co-header .back { display: grid; }
  .co-header .logo { display: none; }
  .co-header .co-secure { margin-left: auto; }
  .co-bar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); box-shadow: none; }
  .pg-checkout { padding-bottom: 0; }
  .pg-checkout .flash { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* ---- plain screens ---- */
  .page-narrow, .page-mid { padding: 20px 14px 40px; }
  .box { padding: 18px 16px; border-radius: 12px; }
}

/* Opened from the home-screen icon there is no browser bar to tint, so the top bar carries the status-bar gap itself. */
.standalone .testbar { padding-top: calc(6px + env(safe-area-inset-top)); }
.standalone .testbar + .site-header, .standalone .testbar + .co-header { padding-top: 0; }

/* Help and policies: plain rows, the way a phone's settings list reads. One list, shown on Help, Account, Contact. */
.help-list { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.help-list a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 14px 40px 14px 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.help-list a:last-child { border-bottom: 0; }
.help-list a span { font-weight: 600; }
.help-list a small { color: var(--ink-3); font-size: .8125rem; text-align: right; }
.help-list a::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-top: 2px solid var(--ink-3); transform: translateY(-50%) rotate(45deg); }
.help-list a:hover, .help-list a:active { background: var(--surface); color: var(--ink); }
@media (max-width: 600px) { .help-list a { grid-template-columns: minmax(0, 1fr); } .help-list a small { text-align: left; } }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Checkout: address suggestions under the street box (the list drops over the next field, flat, one line per address). */
.field.addr { position: relative; }
.field.addr > span label { cursor: default; }
.addr-hits { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.addr-hits[hidden] { display: none; }
.addr-hits button { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: .9375rem; line-height: 1.3; touch-action: manipulation; }
.addr-hits button:last-child { border-bottom: 0; }
.addr-hits button b { display: block; font-weight: 600; color: var(--ink); }
.addr-hits button small { display: block; color: var(--ink-3); font-size: .8125rem; margin-top: 1px; }
.addr-hits button:hover, .addr-hits button.active { background: var(--surface); }

/* ---------- THE HOME SLIDER (2026-10-15, views/partials/slider.ejs) ----------
   Phone: tall (4:5). Computer: wide (16:7). One file, cropped around the owner's focus point (--fx / --fy), unless a
   separate phone version exists (.hs-wide on computers, .hs-phone on phones). Slides swap in place: nothing here scrolls
   sideways, so the locked app screen stays locked. */
.hs { position: relative; background: #0F204A; }
.hs-view { position: relative; width: 100%; aspect-ratio: 16 / 7; max-height: 620px; overflow: hidden; touch-action: pan-y; }
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.hs-slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.hs-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); display: block; background: #0F204A; }
.hs-phone { display: none; }
.hs-hit { position: absolute; inset: 0; }
.hs-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 clamp(28px, 5vw, 64px); pointer-events: none; }
.hs-slide.ink-light .hs-copy { background: linear-gradient(to top, rgba(10, 16, 36, .55), rgba(10, 16, 36, 0)); padding-top: 80px; }
.hs-text { display: grid; gap: 10px; justify-items: start; max-width: 620px; pointer-events: auto; }
.hs-slide.al-center .hs-text { justify-items: center; text-align: center; margin: 0 auto; }
.hs-h { font-size: clamp(2rem, 1rem + 3.4vw, 3.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 0; text-wrap: balance; }
.hs-sub { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); margin: 0; }
.hs-slide.ink-light .hs-text { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hs-slide.ink-dark .hs-text { color: #0F204A; }
.hs-btn { margin-top: 6px; text-shadow: none; border-radius: 100px; min-height: 48px; padding: 0 26px; }
.hs-ctl { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 14px; display: flex; align-items: center; gap: 6px; background: rgba(15, 32, 74, .55); color: #fff; border-radius: 100px; padding: 4px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.hs-ctl button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.hs-ctl button:hover { background: rgba(255, 255, 255, .16); }
.hs-ctl [data-hs-pause][aria-pressed="true"] { background: rgba(255, 255, 255, .22); }
.hs-ctl span { padding: 0 4px; min-width: 38px; text-align: center; }
@media (max-width: 760px) {
  .hs-view { aspect-ratio: 4 / 5; max-height: 72svh; }
  .hs-wide { display: none; }
  .hs-phone { display: block; }
  .hs-copy { padding-bottom: 64px; }
  .hs-ctl [data-hs-prev], .hs-ctl [data-hs-next] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hs-slide, .hs-slide.on { transition: none; } }

/* ---------- VIDEOS IN THE PHOTO SLIDER AND ON SHOP CARDS (2026-10-15) ---------- */
.vslide { position: relative; background: #F1F1F3; }
.vslide video { width: 100%; height: 100%; object-fit: contain; display: block; background: #F1F1F3; }
.vslide.fill video { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.vsound, .vfull { position: absolute; bottom: 12px; border: 0; color: #fff; background: rgba(15, 17, 17, .62); border-radius: 100px; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; touch-action: manipulation; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vsound { left: 12px; padding: 7px 12px; }
.vfull { right: 12px; width: 34px; height: 34px; display: grid; place-items: center; }
.vsound[aria-pressed="true"] { background: rgba(15, 32, 74, .85); }
.stage:has(.slide.on.vslide) { cursor: default; }
.thumbs .vthumb { position: relative; padding: 0; overflow: hidden; }
.thumbs .vthumb img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.thumbs .vthumb i { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); transform: translateX(2px); }
.dots i.v { border-radius: 2px; }
.card .img { position: relative; }
.card-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); opacity: 0; transition: opacity .25s ease; pointer-events: none; border-radius: inherit; }
.card-loop.fill { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.card-loop.playing { opacity: 1; }

/* ---------- NEW-LOOK BANNER (2026-10-15, settings.banner, views/layout.ejs) ----------
   A thin navy bar above the header. It scrolls away with the page (the header stays pinned) and the X closes it for good. */
.nb { background: #0F204A; color: #fff; font-size: .875rem; line-height: 1.35; padding-top: env(safe-area-inset-top); }
.nb-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
.nb p { margin: 0; text-align: center; padding-left: 40px; }
.nb b { font-weight: 700; }
.nb a { color: #FFD814; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.nb-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.nb-x:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 760px) {
  .nb { font-size: .8125rem; }
  .nb-in { gap: 6px; min-height: 0; padding-top: 7px; padding-bottom: 7px; }
  .nb p { text-align: left; padding-left: 0; }
  .nb + .site-header { padding-top: 0; }
}