/* LimitlessMind — catalogue (shop.html) + product detail (product.html)
 * Builds on shared/css/base.css tokens. Owner: CATALOGUE.
 */

/* ---------- tint (one neutral brand tint for every tile + vial liquid; change order 3: nothing is colour-coded by product group) ---------- */
.tint { --tint: var(--accent); }
.tile {
  background:
    linear-gradient(0deg, transparent 0 calc(100% - 1px), color-mix(in srgb, var(--tint) 22%, transparent) calc(100% - 1px)) 0 0 / 100% 18px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, var(--tint) 22%, transparent) calc(100% - 1px)) 0 0 / 18px 100%,
    linear-gradient(150deg, color-mix(in srgb, var(--tint) 18%, var(--surface)), color-mix(in srgb, var(--tint) 7%, var(--surface)));
}

/* ---------- vial illustration ---------- */
.vial { width: 100%; height: 100%; overflow: visible; }
.vial .v-cap   { fill: color-mix(in srgb, var(--ink) 78%, var(--tint)); }
.vial .v-crimp { fill: color-mix(in srgb, var(--ink) 55%, var(--surface)); }
.vial .v-glass { fill: color-mix(in srgb, var(--surface) 82%, var(--tint)); stroke: color-mix(in srgb, var(--ink) 30%, var(--tint)); stroke-width: 1.5; }
.vial .v-liquid{ fill: var(--tint); opacity: .9; }
.vial .v-menisc{ fill: color-mix(in srgb, var(--surface) 45%, var(--tint)); opacity: .7; }
.vial .v-label { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.vial .v-shine { stroke: var(--surface); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.vial .v-text  { font-family: var(--font-head); font-weight: 700; fill: var(--ink); }
.vial .v-sub   { font-family: var(--font-mono); fill: var(--muted); }
.vial .v-rule  { stroke: var(--accent); stroke-width: 2; }
.vial .v-shadow{ fill: color-mix(in srgb, var(--ink) 14%, transparent); }

/* ---------- shop page ---------- */
.shop-head { padding-top: 28px; padding-bottom: 8px; }
.shop-head h1 { margin-bottom: 4px; }
.shop-head .lead { margin: 0; }

.tier-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--ink); font-size: 14px;
}
.tier-banner svg { width: 22px; height: 22px; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tier-banner .steps { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tier-banner .steps span { font-family: var(--font-mono); font-size: 12.5px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
body.is-partner .tier-banner { display: none; }

/* toolbar */
.toolbar {
  position: sticky; top: var(--header-h); z-index: 40;
  margin-top: 20px; padding: 12px 0 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.toolbar__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* "Skip to results": parked off-screen to the left (not clipped to 1px, so it keeps a real ≥44px box; negative left never adds scroll width), slides into the toolbar on keyboard focus */
.skip-results { position: absolute; left: -9999px; top: 8px; z-index: 41; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--shadow); }
.skip-results:focus, .skip-results:focus-visible { left: 16px; outline: 2px solid var(--ink); outline-offset: 2px; }
.grid-shop:focus { outline: none; }
/* explicit order: #az/#ctl move in and out of the mobile sheet, so DOM order must not matter */
.search { order: 1; } .filter-toggle { order: 2; } .ctl { order: 3; } .partner-badge { order: 4; } .count { order: 5; } .az { order: 6; }
.ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 0; }
.search input { width: 100%; min-width: 0; }
.search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input { padding-left: 38px; padding-right: 48px; min-height: 44px; border-radius: var(--radius-pill); }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search .clear { position: absolute; right: 2px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.search .clear:hover { background: var(--accent-soft); color: var(--accent); }
.search .clear[hidden] { display: none; }

.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.seg button:hover { color: var(--accent); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:focus-visible { outline-offset: -2px; }

.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.sort select { min-height: 44px; padding: 0 34px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface) no-repeat right 12px center / 12px; color: var(--ink); font-weight: 600; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%235D6C64' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.sort select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.count { margin-left: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.count b { color: var(--ink); font-weight: 600; }
.partner-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.partner-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.partner-badge[hidden] { display: none; }

/* A–Z letter index: jump links to the first product starting with that letter (#letter=B). Letters with no product are inert. */
.az { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex-basis: 100%; margin-top: 2px; }
.az__lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 6px; white-space: nowrap; }
.az__l {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
a.az__l:hover { border-color: var(--accent); color: var(--accent); }
.az__l[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.az__l.is-off { color: var(--muted); opacity: .35; }                                   /* no product starts with this letter */
.az__l[aria-disabled="true"] { color: var(--muted); opacity: .45; cursor: default; }   /* none visible under the current filters */
.toolbar.is-stuck .az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.toolbar.is-stuck .az::-webkit-scrollbar { display: none; }
.toolbar.is-stuck .az__l { min-height: 34px; }
/* the row fits the 1200px container (label + 27 × 40px); narrower, it becomes a scroll strip with a fade at the right edge */
@media (max-width: 1199px) {
  .toolbar.is-stuck .az { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); padding-right: 56px; }
}

.filter-toggle { display: none; }

/* mobile filter sheet (lives in <body>, above the sticky header z-index 50; toast is 100) */
.fsheet { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end; }
.fsheet__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 48%, transparent); animation: fade-in .2s ease; }
.fsheet__panel { position: relative; display: flex; flex-direction: column; max-height: 84vh; max-height: 84dvh; background: var(--surface); color: var(--ink);
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px color-mix(in srgb, var(--ink) 20%, transparent); padding-bottom: env(safe-area-inset-bottom); animation: sheet-in .24s ease; }
.fsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--line); }
.fsheet__head h2 { font-size: 17px; margin: 0; }
.fsheet__head .btn { min-height: 44px; }
.fsheet__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.fsheet__lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.fsheet .az { order: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.fsheet .az__lbl { display: none; }
.fsheet .az__l { min-width: 44px; min-height: 44px; }
.fsheet .ctl { order: 0; gap: 12px; }
.fsheet .sort { width: 100%; }
.fsheet .sort select { flex: 1; min-width: 0; }
.fsheet__foot { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.fsheet__foot .btn { min-height: 48px; }
.fsheet__foot .btn-primary { flex: 1; }
body.sheet-open { overflow: hidden; }
@keyframes sheet-in { from { translate: 0 24px; opacity: .6; } to { translate: 0 0; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* grid */
.grid-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
@media (max-width: 1100px) { .grid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-shop { grid-template-columns: 1fr; gap: 14px; } }

/* product card */
.pc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .18s, border-color .18s, transform .18s; }
.pc:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.pc[hidden] { display: none; }
.pc__tile { position: relative; height: 128px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.pc__tile a { display: block; width: 100%; height: 100%; display: grid; place-items: center; text-decoration: none; }
.pc__tile .vial { width: 62px; height: 104px; transition: transform .25s; }
.pc:hover .pc__tile .vial { transform: translateY(-3px) rotate(-2deg); }
.pc__tile .strengths-n { position: absolute; right: 12px; top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 8px; }
.pc__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.pc__name { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.pc__name a { color: var(--ink); text-decoration: none; display: inline-block; padding: 13px 0; margin: -13px 0; }   /* ≥44px hit height without moving layout */
.pc__name a:hover { color: var(--accent); }
.pc__from { font-size: 13px; color: var(--muted); margin: 0; }
.pc__from .price { color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.pc .pills { margin-top: 2px; }

/* Withdrawn strength / product (avail: false, SPEC §4). The pill stays visible so the customer
   can see the size exists, but it is struck through, disabled and says why. */
.pill.is-oos { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); border-style: dashed; background: var(--bg); cursor: not-allowed; }
.pill.is-oos:hover { border-color: var(--line-strong); color: var(--muted); }
.pill.is-oos[aria-pressed="true"] { background: var(--bg); border-color: var(--line-strong); color: var(--muted); font-weight: 500; }
/* Only the strength itself is struck through — text-decoration inherits into children and a
   child cannot cancel it, so the "Out of stock" label is a sibling span, never a descendant. */
.pill__s { text-decoration: line-through; }
.pill__oos { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); }
.pc.is-oos .pc__tile .vial { opacity: .5; }
.oos { margin: 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--muted); font-size: 14.5px; font-weight: 600; }

.formsel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.formsel button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; line-height: 1.2; }
.formsel button:hover { border-color: var(--accent); }
.formsel button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.formsel .f-name { font-size: 12px; font-weight: 600; color: var(--muted); }
.formsel button[aria-pressed="true"] .f-name { color: var(--accent); }
.formsel .f-price { font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.formsel .f-price small { font-family: var(--font-body); font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 2px; }

.tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--muted); margin: 0; min-height: 22px; }
.tiers .t-lbl { font-weight: 600; margin-right: 2px; }
.tiers .t { display: inline-flex; gap: 5px; align-items: baseline; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiers .t b { font-weight: 600; color: var(--ink); }
.tiers .t.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tiers .t.is-active b { color: var(--accent); }
.tiers .t-partner { font-weight: 600; color: var(--accent); }
body.is-partner .tiers .t, body.is-partner .tiers .t-lbl { display: none; }
body:not(.is-partner) .tiers .t-partner { display: none; }

.pc__buy { display: flex; gap: 8px; align-items: stretch; margin-top: auto; }
.pc__buy .qty { flex: none; }
.pc__buy .btn-primary { flex: 1; min-width: 0; padding-inline: 12px; }
.pc__buy .btn-primary .price { font-weight: 600; opacity: .9; }
.pc__foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.pc__foot a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 13px 8px; margin: -13px -8px; }   /* ≥44px hit box */
.tbc { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; display: flex; gap: 6px; align-items: center; }
.tbc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.pc__foot a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc__foot a:hover { text-decoration: underline; }
.pc__foot .kit-of { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.pc.is-added { animation: pc-pop .45s ease; }
@keyframes pc-pop { 0% { transform: scale(1); } 30% { transform: scale(1.015); } 100% { transform: scale(1); } }

.qty button { width: 44px; min-height: 44px; }
.qty input { min-height: 44px; width: 48px; }

/* empty state */
.empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty[hidden] { display: none; }
.empty h2 { font-size: 22px; margin-bottom: 6px; }
.empty p { color: var(--muted); }
.empty .vial { width: 48px; height: 80px; margin: 0 auto 14px; }

/* ---------- toast ---------- */
.toast-region { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(92vw, 520px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: var(--radius); background: var(--ink); color: var(--bg); box-shadow: var(--shadow); font-size: 14.5px; pointer-events: auto; animation: toast-in .25s ease; max-width: 100%; }
.toast.is-leaving { animation: toast-out .25s ease forwards; }
.toast svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.toast .toast__msg { flex: 1; min-width: 0; }
.toast a { color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.toast a:hover { color: var(--accent); }
@media (prefers-color-scheme: dark) { .toast svg { stroke: var(--accent); } }
@keyframes toast-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes toast-out { to { opacity: 0; translate: 0 10px; } }

/* ---------- product page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--muted); padding-top: 18px; margin: 0; list-style: none; }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-block; padding: 13px 8px; margin: -13px -8px; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs li:last-child { color: var(--ink); font-weight: 600; }

.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 16px; }
.pdp__hero { position: sticky; top: calc(var(--header-h) + 20px); border-radius: 16px; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 1 / 1.02; display: grid; place-items: center; }
.pdp__hero .vial { width: 46%; height: auto; max-height: 82%; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--ink) 18%, transparent)); }
.pdp__hero .hero-tag { position: absolute; left: 18px; top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pdp__hero .hero-tag .badge { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
/* The hero tags sit on the tinted tile, so they get an opaque ground — but "Out of stock" must not
   come out looking like the neutral "N strengths" chip beside it, so the warn variant keeps its own
   colours here (same specificity as the rule above, declared after it). */
.pdp__hero .hero-tag .badge--warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); }
.pdp__hero .hero-foot { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.pdp__info { display: flex; flex-direction: column; gap: 18px; }
.pdp__info h1 { margin: 0; font-size: clamp(30px, 3.4vw, 42px); }
.pdp__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdp__rou { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--warn); font-weight: 600; }
.pdp__rou svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.opt { display: flex; flex-direction: column; gap: 8px; }
.opt__label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; }
.opt__label .val { font-weight: 500; color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; }
.pdp .pill { min-height: 44px; padding: 0 16px; font-size: 14px; }
.pdp .qty { width: max-content; }
.pdp .formsel button { min-height: 60px; padding: 9px 14px; }
.pdp .formsel .f-price { font-size: 17px; }
.pdp .formsel .f-name { font-size: 13px; }

.pricebox { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: end; padding: 16px 18px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.pricebox .u { font-size: 13.5px; color: var(--muted); }
.pricebox .u .price { color: var(--ink); }
.pricebox .tot { text-align: right; }
.pricebox .tot .price { font-size: 30px; font-weight: 700; letter-spacing: -.02em; display: block; line-height: 1; }
.pricebox .tot .lbl { font-size: 12.5px; color: var(--muted); }
.pricebox .tierhint { grid-column: 1 / -1; font-size: 13px; color: var(--accent); font-weight: 600; margin: 0; min-height: 18px; }
.pricebox .tierhint.is-muted { color: var(--muted); font-weight: 500; }
.pricebox .pb-partner { display: inline-flex; margin-bottom: 6px; background: var(--accent); color: var(--accent-ink); }
.pricebox .tbc { grid-column: 1 / -1; }
.bb-partner { display: inline-flex; background: var(--accent); color: var(--accent-ink); font-size: 12px; line-height: 1.5; padding: 0 8px; margin-bottom: 2px; }
.bb-partner[hidden] { display: none; }

.tiertable { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.tiertable th, .tiertable td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.tiertable th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; background: var(--bg); }
.tiertable tr:last-child td { border-bottom: 0; }
.tiertable td.price, .tiertable th.r { text-align: right; }
.tiertable td.price { font-size: 15px; }
.tiertable .save { color: var(--muted); font-size: 12.5px; font-family: var(--font-mono); }
.tiertable tr.is-active td { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tiertable tr.is-active td.price { font-weight: 700; }
.tiertable tr.is-active .save { color: var(--accent); }
.tiertable tr.is-active td:first-child::before { content: "●"; font-size: 9px; margin-right: 8px; vertical-align: middle; }
.tiertable tr:not(.is-active) td:first-child { padding-left: 34px; }
.tiertable caption { text-align: left; caption-side: top; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.tiertable caption span { font-weight: 400; color: var(--muted); }
.tiertable-wrap[hidden] { display: none; }

.pdp__cta { display: flex; flex-direction: column; gap: 10px; }
.pdp__cta .btn-lg { width: 100%; }
.pdp__cta .go-bag { animation: toast-in .25s ease; }
.pdp__cta .go-bag[hidden] { display: none; }
.pdp__notes { font-size: 13.5px; color: var(--muted); display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.pdp__notes li { display: flex; gap: 8px; align-items: flex-start; }
.pdp__notes svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* product content accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-right: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; transition: rotate .18s; }
.acc__item[open] summary::after { rotate: -135deg; translate: 0 3px; }
.acc__item summary:hover { color: var(--accent); }
.acc__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.acc__body { padding: 0 0 16px; font-size: 14.5px; color: var(--muted); }
.acc__body p { margin: 0 0 8px; }
.acc__body p:last-child { margin-bottom: 0; }
.acc__body em { font-style: normal; color: var(--ink); font-weight: 600; }
.acc__tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.acc__tiers span { font-family: var(--font-mono); font-size: 13px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); white-space: nowrap; }
.acc__tiers b { font-weight: 600; color: var(--muted); }
.acc__partner { color: var(--accent); font-weight: 600; }

/* sticky bottom bar (mobile) */
.buybar { display: none; }

/* related */
.related { margin-top: 56px; }
.related h2 { font-size: 22px; margin-bottom: 4px; }
.related .sub { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.related__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .18s, transform .18s; }
.rc:hover { box-shadow: var(--shadow); color: var(--ink); }
.rc:hover .vial { transform: translateY(-3px) rotate(-2deg); }
.rc__tile { height: 110px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.rc__tile .vial { width: 50px; height: 86px; transition: transform .25s; }
.rc__body { padding: 12px 14px 14px; }
.rc__name { font-family: var(--font-head); font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.rc__from { font-size: 12.5px; color: var(--muted); margin: 0; }
.rc__n { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.rc__from .price { color: var(--ink); }

/* not found */
.notfound { text-align: center; padding: 64px 20px; max-width: 520px; margin: 0 auto; }
.notfound .vial { width: 64px; height: 108px; margin: 0 auto 18px; }
.notfound code { font-family: var(--font-mono); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 24px; }
  .pdp__hero { position: relative; top: auto; aspect-ratio: 16 / 10; }   /* relative: stays the containing block for .hero-tag/.hero-foot (static let them escape onto the buy row); top:auto: the desktop sticky offset must not become a relative offset */
  .pdp__hero .vial { width: 34%; height: auto; max-height: 50%; }
  .related__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buybar {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
    translate: 0 0; transition: translate .2s ease;
  }
  .buybar.is-hidden { translate: 0 110%; }
  .buybar .bb-info { flex: 1; min-width: 0; line-height: 1.2; }
  .buybar .bb-info .price { font-size: 20px; font-weight: 700; display: block; }
  .buybar .bb-info small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .buybar .btn { flex: none; min-width: 150px; min-height: 48px; }
  body.has-buybar { padding-bottom: calc(var(--buybar-h, 76px) + 12px); }
  /* toast sits above the buy bar while the bar is on screen: bar height (incl. safe-area padding) + 12px */
  body.buybar-shown .toast-region { bottom: calc(var(--buybar-h, 76px) + 12px); }
}

/* 641–900px, stuck only: the 3-row toolbar (search / unit+sort / letters) took >25% of a 700px-tall viewport together with the
   header. Once stuck it compacts to two rows — search | count | unit  and  letter strip | sort — nothing is hidden. */
@media (min-width: 641px) and (max-width: 900px) {
  .toolbar.is-stuck { padding: 6px 0 6px; }
  .toolbar.is-stuck .toolbar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; }
  .toolbar.is-stuck .ctl { display: contents; }
  .toolbar.is-stuck .search { grid-area: 1 / 1; max-width: none; }
  .toolbar.is-stuck .search input { padding-block: 0; }   /* 44px row (the base .input padding made it 47px) */
  .toolbar.is-stuck .count { grid-area: 1 / 2; margin-left: 0; }
  .toolbar.is-stuck .seg { grid-area: 1 / 3; justify-self: end; }
  .toolbar.is-stuck .az { grid-area: 2 / 1 / 3 / 3; margin-top: 0; min-width: 0; }
  .toolbar.is-stuck .sort { grid-area: 2 / 3; justify-self: end; }
  .toolbar.is-stuck .sort select { min-height: 40px; }
  .toolbar.is-stuck .partner-badge { grid-area: 3 / 1 / 4 / -1; justify-self: start; }
}

@media (max-width: 640px) {
  .shop-head { padding-top: 20px; }
  .tier-banner { font-size: 13.5px; gap: 10px; padding: 10px 12px; }
  .tier-banner .steps { margin-left: 0; }
  .toolbar { padding: 10px 0 8px; }
  /* one row: search | Filter · n (never wraps); unit/sort/letter index live in the bottom sheet */
  .toolbar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .search { max-width: none; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); white-space: nowrap; }
  .filter-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .filter-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  .toolbar .az, .toolbar .ctl, .toolbar .count { display: none; }
  .seg button { min-height: 44px; min-width: 44px; padding: 0 16px; }   /* "iu" was 43px wide */
  .pc__name a { min-width: 44px; padding: 13px 8px; margin: -13px -8px; }   /* short names (VIP, EPO, KPV…) were <44px wide; text position unchanged */
  .seg { padding: 0; }
  .pill { min-height: 44px; padding: 0 14px; }
  .partner-badge { grid-column: 1 / -1; justify-content: center; min-height: 32px; }
  .pc__tile { height: 112px; }
  .pc__buy .btn-primary { font-size: 14.5px; }
  .pdp__info h1 { font-size: 30px; }
  .related__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rc__tile { height: 96px; }
  .pricebox { padding: 14px; }
  .pricebox .tot .price { font-size: 26px; }
}