/* Mobia2Z, version three — the shop every look shares. Structure, controls and motion live here; each look
   (look-placa.css, look-caja.css, look-mercado.css) sets the tokens: palette, type, density and its one signature. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --maxw: 1600px;
  --gut: clamp(16px, 2.6vw, 40px);
  --head-h: 64px;
  --nav-h: 44px;
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 10px;
  /* neutral defaults; every look overrides them */
  --bg: #f3f4f6; --surface: #fff; --surface-2: #f7f8f9; --sunk: #eceef1;
  --ink: #111318; --ink-2: #4a505c; --ink-3: #646a78;
  --line: #e1e4e9; --line-2: #c9ced6;
  --brand: #111318; --brand-ink: #fff;
  --action: #111318; --action-ink: #fff; --action-hover: #2a2e36;
  --accent: #111318; --accent-soft: #eceef1;
  --head-bg: #fff; --head-ink: var(--ink); --head-line: var(--line);
  --nav-bg: var(--head-bg); --nav-ink: var(--ink-2);
  --focus: #2b59ff;
  --ok: #157a46; --warn: #a15c00; --bad: #c42b2b;
  --shadow-1: 0 1px 2px rgba(16, 20, 28, .06), 0 1px 1px rgba(16, 20, 28, .04);
  --shadow-2: 0 2px 6px rgba(16, 20, 28, .06), 0 8px 24px rgba(16, 20, 28, .08);
  --shadow-pop: 0 4px 12px rgba(16, 20, 28, .08), 0 18px 48px rgba(16, 20, 28, .16);
  --font-display: system-ui, sans-serif;
  --font-ui: system-ui, sans-serif;
  --font-code: ui-monospace, monospace;
  --display-wdth: 100%;
  --display-wght: 700;
  --display-track: -0.025em;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: calc(var(--head-h) + var(--nav-h) + 16px) }
@media (pointer: fine) { html { overscroll-behavior-y: none } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-ui); text-rendering: optimizeLegibility; min-height: 100dvh; display: flex; flex-direction: column }
main { flex: 1 0 auto; min-width: 0 }
img, svg { display: block; max-width: 100% }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0 }
ul, ol { padding: 0; list-style: none }
h1, h2, h3 { text-wrap: balance; font-family: var(--font-display); font-stretch: var(--display-wdth); letter-spacing: var(--display-track); line-height: 1.12 }
p { text-wrap: pretty }
::selection { background: var(--accent); color: var(--accent-ink, #fff) }
input, textarea { caret-color: var(--accent) }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s) }
* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin }
.num, .price { font-variant-numeric: tabular-nums }
.code { font-family: var(--font-code); font-size: .86em; letter-spacing: 0; color: var(--ink-2) }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut) }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--action); color: var(--action-ink); padding: 10px 14px; border-radius: var(--r-m) }
.skip:focus { top: 12px }
.i { width: 20px; height: 20px; flex: none }
.i-s { width: 16px; height: 16px; flex: none }
.i-l { width: 26px; height: 26px; flex: none }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--r-m); background: var(--action); color: var(--action-ink); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background-color 160ms ease, transform 150ms var(--ease-out), box-shadow 160ms ease }
.btn:not(:disabled):active { transform: scale(.96) }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn-2 { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2) }
.btn-3 { background: transparent; color: var(--ink); box-shadow: none; padding: 0 12px }
.btn-s { height: 36px; padding: 0 14px; font-size: 14px }
.btn-l { height: 52px; padding: 0 24px; font-size: 16px }
.btn-w { width: 100% }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background: var(--action-hover) }
  .btn-2:not(:disabled):hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-3) }
  .btn-3:not(:disabled):hover { background: var(--sunk) }
}
.link { color: var(--link, var(--ink)); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); transition: text-decoration-color 160ms ease }
@media (hover: hover) { .link:hover { text-decoration-color: currentColor } }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease }
.chip small { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums }
.chip[aria-pressed="true"], .chip.on { background: var(--chip-on, var(--ink)); color: var(--chip-on-ink, #fff); box-shadow: none }
.chip[aria-pressed="true"] small, .chip.on small { color: inherit; opacity: .72 }
@media (hover: hover) { .chip:not(.on):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink) } }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 40; background: var(--head-bg); color: var(--head-ink) }
.top-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search links"; align-items: center; gap: 18px; height: var(--head-h) }
.menu-btn { grid-area: menu; display: none; width: 40px; height: 40px; border-radius: var(--r-m); align-items: center; justify-content: center }
.top-bar > .brand { grid-area: brand }
.top-bar > .search { grid-area: search }
.top-links { grid-area: links }
.brand { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding-right: 8px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap }
.brand svg { height: 26px; width: auto }
.search { position: relative; display: flex; align-items: center; height: 44px; max-width: 760px; width: 100%; justify-self: center; background: var(--search-bg, var(--surface)); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--search-line, var(--line-2)); transition: box-shadow 160ms ease }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--focus) }
.search > .i { margin-left: 13px; color: var(--ink-3) }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 10px; font-size: 15px; color: var(--ink); outline: 0 }
.search input::placeholder { color: var(--ink-3) }
.search kbd { font: 500 12px var(--font-code); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; margin-right: 6px }
.search .go { height: 36px; margin-right: 4px; padding: 0 14px; border-radius: calc(var(--r-m) - 2px); background: var(--search-go, var(--action)); color: var(--search-go-ink, var(--action-ink)); font-weight: 600; font-size: 14px; transition: transform 150ms var(--ease-out), background-color 160ms ease }
.search .go:active { transform: scale(.96) }
.top-links { display: flex; align-items: center; gap: 4px }
.top-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: var(--r-m); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color 150ms ease }
@media (hover: hover) { .top-link:hover { background: var(--head-hover, rgba(127, 127, 127, .12)) } }
.cart-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--r-m); background: var(--cart-bg, var(--action)); color: var(--cart-ink, var(--action-ink)); font-weight: 600; font-size: 14px; white-space: nowrap; transition: transform 150ms var(--ease-out), background-color 160ms ease }
.cart-btn:active { transform: scale(.96) }
.cart-btn .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--cart-n-bg, rgba(255, 255, 255, .18)); font-size: 12.5px; font-variant-numeric: tabular-nums }
.cart-btn .t { font-variant-numeric: tabular-nums; opacity: .9; font-weight: 500 }
.cart-btn .cm { display: none }
.cart-btn.bump { animation: bump 420ms var(--ease-out) }
@keyframes bump { 30% { transform: scale(1.06) } 60% { transform: scale(.98) } }
.top-nav { background: var(--nav-bg); color: var(--nav-ink); border-top: 1px solid var(--nav-line, var(--head-line)); border-bottom: 1px solid var(--head-line) }
.top-nav .wrap { display: flex; align-items: center; gap: 2px; height: var(--nav-h); overflow-x: auto; scrollbar-width: none }
.top-nav .wrap::-webkit-scrollbar { display: none }
.nav-i { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-s); font-size: 14px; font-weight: 500; white-space: nowrap; color: inherit; transition: background-color 150ms ease, color 150ms ease }
.nav-i .i-s { opacity: .7; transition: transform 200ms var(--ease-out) }
.nav-i[aria-expanded="true"] { background: var(--nav-on, rgba(127, 127, 127, .14)); color: var(--nav-on-ink, var(--head-ink)) }
.nav-i[aria-expanded="true"] .i-s { transform: rotate(180deg) }
@media (hover: hover) { .nav-i:hover { background: var(--nav-on, rgba(127, 127, 127, .14)); color: var(--nav-on-ink, var(--head-ink)) } }
.nav-sep { width: 1px; height: 18px; background: var(--nav-line, var(--head-line)); margin: 0 8px; flex: none }
.nav-promise { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; padding-left: 16px }
@media (max-width: 1280px) { .nav-promise { display: none } }

/* search suggestions */
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--surface); color: var(--ink); border-radius: var(--r-l); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); padding: 8px; max-height: min(72vh, 640px); overflow: auto; overscroll-behavior: contain; transform-origin: top center; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out) }
.suggest[hidden] { display: block !important; opacity: 0; transform: translateY(-4px) scale(.99); pointer-events: none; visibility: hidden }
.sg-h { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 500 }
.sg-fix { padding: 8px 10px; font-size: 14px; color: var(--ink-2) }
.sg-fix b { color: var(--ink) }
.sg-i { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-m); cursor: pointer }
.sg-i[aria-selected="true"] { background: var(--sunk) }
.sg-i img { width: 40px; height: 40px; object-fit: contain }
.sg-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--sunk); color: var(--ink-2) }
.sg-t { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sg-t mark { background: none; color: inherit; font-weight: 700 }
.sg-s { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sg-p { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px }
.sg-all { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); font-weight: 600; font-size: 14px; border-radius: 0 0 var(--r-m) var(--r-m) }
.sg-empty { padding: 14px 10px; color: var(--ink-2); font-size: 14px }

/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: var(--surface); color: var(--ink); box-shadow: 0 24px 48px rgba(16, 20, 28, .14), 0 1px 0 var(--line); transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out) }
.mega[hidden] { display: block !important; opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden }
.mega .wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; padding-block: 14px 18px; min-height: 360px }
.mg-brands { border-right: 1px solid var(--line); padding-right: 12px; display: flex; flex-direction: column; gap: 1px; max-height: 64vh; overflow: auto }
.mg-b { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--r-m); font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-align: left }
.mg-b svg, .mg-b .mono-logo { width: 20px; height: 20px; justify-self: center }
.mg-b small { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums }
.mg-b.on { background: var(--sunk); color: var(--ink) }
.mg-all { margin-top: 6px; padding: 10px; font-size: 14px; font-weight: 600 }
.mg-body { padding-left: 22px; min-width: 0 }
.mg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.mg-head h3 { font-size: 20px }
.mg-fams { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.mg-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.mg-m { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-m); font-size: 14px; font-weight: 500 }
.mg-m img { width: 44px; height: 44px; object-fit: contain }
.mg-m small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12.5px }
@media (hover: hover) { .mg-b:hover, .mg-m:hover { background: var(--sunk); color: var(--ink) } }

/* ---------------------------------------------------------------- page scaffolding */
.page { padding-block: 24px 72px }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px }
.crumbs a { color: var(--ink-2); padding: 2px 2px; border-radius: 3px }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px } }
.crumbs .i-s { width: 14px; height: 14px; opacity: .5 }
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px }
.phead h1 { font-size: clamp(30px, 3.2vw, 44px); font-weight: var(--display-wght) }
.phead p { color: var(--ink-2); margin-top: 6px; font-size: 15.5px }
.sec { margin-top: 56px }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px }
.sec-h h2 { font-size: clamp(22px, 2vw, 28px); font-weight: var(--display-wght) }
.sec-h p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px }
.sec-h .link { font-size: 14.5px; font-weight: 500; white-space: nowrap }
.card { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
.muted { color: var(--ink-2) }
.empty { padding: 48px 20px; text-align: center; color: var(--ink-2) }
.empty h2 { font-size: 22px; color: var(--ink); margin-bottom: 8px }
.empty .btn { margin-top: 18px }

/* ---------------------------------------------------------------- tiles: devices, brands, models */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.kind { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 220px; padding: 20px 20px 0; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; transition: box-shadow 200ms ease, transform 200ms var(--ease-out) }
.kind h3 { font-size: 22px; font-weight: var(--display-wght) }
.kind p { font-size: 13.5px; color: var(--ink-2); margin-top: 2px }
.kind img { align-self: end; justify-self: center; width: min(70%, 220px); height: auto; margin-top: 8px; margin-bottom: -14px; transition: transform 300ms var(--ease-out) }
.kind .kind-ic { align-self: center; justify-self: center; width: 76px; height: 76px; color: var(--ink-3) }
@media (hover: hover) { .kind:hover { box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2) } .kind:hover img { transform: translateY(-4px) } }
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.brandt { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 160ms ease }
.brandt svg, .brandt .mono-logo { width: 24px; height: 24px; justify-self: center; color: var(--ink) }
.brandt b { font-weight: 600; font-size: 14.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.brandt small { display: block; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums }
@media (hover: hover) { .brandt:hover { box-shadow: 0 0 0 1px var(--ink-3) } }
.mono-logo { display: inline-grid; place-items: center; border-radius: 5px; background: var(--sunk); color: var(--ink-2); font: 700 10px/1 var(--font-ui); letter-spacing: 0 }
.mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px }
.mtile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 200ms ease }
.mtile .ph { aspect-ratio: 1; display: grid; place-items: center; margin: -2px -4px 8px; border-radius: var(--r-m); background: var(--tile-bg, var(--surface-2)); overflow: hidden }
.mtile .ph img { width: 92%; height: 92%; object-fit: contain; transition: transform 300ms var(--ease-out) }
.mtile b { font-weight: 600; font-size: 15px; line-height: 1.3 }
.mtile small { font-size: 13px; color: var(--ink-2) }
.mtile .from { margin-top: 4px; font-size: 13.5px; color: var(--ink-2) }
.mtile .from b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums }
@media (hover: hover) { .mtile:hover { box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2) } .mtile:hover .ph img { transform: scale(1.04) } }
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px }
.zone-t { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 160ms ease }
.zone-t .zi { width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--zone-bg, var(--sunk)); color: var(--zone-ink, var(--ink)) }
.zone-t b { display: block; font-weight: 600; font-size: 15px }
.zone-t small { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums }
@media (hover: hover) { .zone-t:hover { box-shadow: 0 0 0 1px var(--ink-3) } }

/* ---------------------------------------------------------------- brand page */
.fam-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none }
.fam-tabs::-webkit-scrollbar { display: none }
.inline-find { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 260px }
.inline-find input { border: 0; outline: 0; background: none; height: 100%; flex: 1; min-width: 0 }
.inline-find:focus-within { box-shadow: inset 0 0 0 2px var(--focus) }
.fam { margin-top: 28px }
.fam h2 { font-size: 20px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px }
.fam h2 small { font-size: 14px; color: var(--ink-3); font-weight: 400; font-family: var(--font-ui); letter-spacing: 0 }

/* ---------------------------------------------------------------- model page */
.mhead { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: 8px 0 22px }
.mvis { position: relative; aspect-ratio: 1; border-radius: var(--r-l); background: var(--mvis-bg, var(--surface)); overflow: hidden; box-shadow: var(--mvis-shadow, 0 0 0 1px var(--line)) }
.mvis > img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain }
.mvis .d3-host { position: absolute; inset: 0 }
.mhead h1 { font-size: clamp(34px, 4vw, 56px); font-weight: var(--display-wght) }
.mfacts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--ink-2); font-size: 14.5px }
.mfacts span { display: inline-flex; align-items: center; gap: 6px }
.mcodes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px }
.mcodes .code { padding: 2px 7px; border-radius: 4px; background: var(--sunk); font-size: 12.5px }
.mactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.mzones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 20px }
.mz { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 1px var(--line); text-align: left; font-size: 14px; font-weight: 500; transition: box-shadow 160ms ease }
.mz small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400 }
.mz .i { color: var(--ink-2) }
@media (hover: hover) { .mz:hover { box-shadow: 0 0 0 1px var(--ink-3) } }
.znav { position: sticky; top: calc(var(--head-h) + var(--nav-h)); z-index: 20; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); margin-inline: calc(var(--gut) * -1); padding: 10px var(--gut) }
.znav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center }
.znav-in::-webkit-scrollbar { display: none }
.mbody { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start }
.filters { position: sticky; top: calc(var(--head-h) + var(--nav-h) + 72px); display: flex; flex-direction: column; gap: 22px; font-size: 14px }
.filters h3 { font: 600 13.5px/1.2 var(--font-ui); letter-spacing: 0; color: var(--ink); margin-bottom: 8px }
.fl-opts { display: flex; flex-direction: column; gap: 2px }
.fl-o { display: grid; grid-template-columns: 16px 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--r-s); cursor: pointer; color: var(--ink-2) }
.fl-o input { width: 16px; height: 16px; margin: 0; accent-color: var(--action) }
.fl-o small { color: var(--ink-3); font-variant-numeric: tabular-nums }
@media (hover: hover) { .fl-o:hover { background: var(--sunk); color: var(--ink) } }
.fl-o:has(input:checked) { color: var(--ink); font-weight: 500 }
.sel { height: 38px; padding: 0 10px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); width: 100% }
.zsec { scroll-margin-top: calc(var(--head-h) + var(--nav-h) + 70px) }
.zsec + .zsec { margin-top: 34px }
.zsec > h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin-bottom: 12px }
.zsec > h2 small { font: 400 14px var(--font-ui); letter-spacing: 0; color: var(--ink-3) }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px }
.pcard { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
.pc-pic { width: 88px; height: 88px; border-radius: var(--r-m); background: var(--pic-bg, var(--surface-2)); display: grid; place-items: center; color: var(--ink-2); overflow: hidden; box-shadow: var(--pic-shadow, none) }
.pc-pic img { width: 100%; height: 100%; object-fit: contain; outline: 1px solid rgba(0, 0, 0, .06); outline-offset: -1px }
.pc-pic .i-l { width: 34px; height: 34px }
.pc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.pc-h h3 { font: 600 17px/1.3 var(--font-ui); letter-spacing: -0.005em }
.pc-h a { border-radius: 3px }
@media (hover: hover) { .pc-h a:hover { text-decoration: underline; text-underline-offset: 3px } }
.pc-help { font-size: 13.5px; color: var(--ink-2); margin-top: 2px }
.opts { margin-top: 10px; display: flex; flex-direction: column }
.opt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--line) }
.opt:first-child { border-top: 0 }
.opt-q { min-width: 0 }
.opt-q b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.25 }
.opt-q small { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.opt .price { font-weight: 700; font-size: 16px; white-space: nowrap }
.opt-more { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 6px 0; text-align: left }
@media (hover: hover) { .opt-more:hover { color: var(--ink) } }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px }
.bars i { display: block; width: 4px; border-radius: 1px; background: var(--line-2) }
.bars i:nth-child(1) { height: 5px } .bars i:nth-child(2) { height: 8px } .bars i:nth-child(3) { height: 12px } .bars i:nth-child(4) { height: 16px }
.bars i.on { background: var(--bars-on, var(--ink)) }
.add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 12px; border-radius: var(--r-m); background: var(--add-bg, var(--action)); color: var(--add-ink, var(--action-ink)); font-weight: 600; font-size: 14px; transition: transform 150ms var(--ease-out), background-color 160ms ease }
.add:active { transform: scale(.96) }
@media (hover: hover) { .add:hover { background: var(--add-hover, var(--action-hover)) } }
.stepper { display: inline-grid; grid-template-columns: 34px 34px 34px; align-items: center; height: 36px; border-radius: var(--r-m); background: var(--step-bg, var(--sunk)); box-shadow: inset 0 0 0 1px var(--step-line, transparent) }
.stepper button { height: 36px; display: grid; place-items: center; border-radius: var(--r-m); transition: background-color 150ms ease, transform 150ms var(--ease-out) }
.stepper button:active { transform: scale(.92) }
@media (hover: hover) { .stepper button:hover { background: rgba(127, 127, 127, .16) } }
.stepper output { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14.5px }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--sunk); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap }

/* ---------------------------------------------------------------- product page */
.prod { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(24px, 4vw, 64px); align-items: start }
.gal { position: sticky; top: calc(var(--head-h) + var(--nav-h) + 20px); aspect-ratio: 1; border-radius: var(--r-l); background: var(--gal-bg, var(--surface)); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; overflow: hidden }
.gal img { width: 86%; height: 86%; object-fit: contain }
.gal .gal-ic { width: 34%; height: auto; color: var(--ink-3) }
.gal .gal-note { position: absolute; left: 16px; bottom: 14px; font-size: 13px; color: var(--ink-3) }
.buy h1 { font: 650 clamp(26px, 2.6vw, 36px)/1.15 var(--font-display); font-stretch: var(--display-wdth); letter-spacing: var(--display-track) }
.buy .for { margin-top: 8px; color: var(--ink-2); font-size: 15px }
.buy .refs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13.5px; color: var(--ink-3) }
.qual { margin-top: 22px }
.qual h2 { font: 600 14px var(--font-ui); letter-spacing: 0; margin-bottom: 8px }
.qual-l { display: grid; gap: 8px }
.qv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 1px var(--line); text-align: left; transition: box-shadow 150ms ease }
.qv b { display: block; font-weight: 600 }
.qv small { display: block; font-size: 13px; color: var(--ink-2) }
.qv .price { font-weight: 700 }
.qv[aria-current="true"] { box-shadow: 0 0 0 2px var(--qv-on, var(--ink)) }
@media (hover: hover) { .qv:not([aria-current="true"]):hover { box-shadow: 0 0 0 1px var(--ink-3) } }
.buybox { margin-top: 22px; padding: 20px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
.bb-price { font: 700 34px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em }
.bb-price small { font: 400 14px var(--font-ui); color: var(--ink-2); letter-spacing: 0; margin-left: 6px }
.bb-row { display: flex; gap: 10px; margin-top: 16px; align-items: center }
.bb-row .stepper { height: 52px; grid-template-columns: 44px 44px 44px }
.bb-row .stepper button { height: 52px }
.bb-facts { margin-top: 16px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2) }
.bb-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start }
.bb-facts b { color: var(--ink); font-weight: 600 }
.compat { margin-top: 28px }
.compat h2, .together h2 { font: 600 17px var(--font-ui); letter-spacing: 0; margin-bottom: 10px }
.compat-l { display: flex; flex-wrap: wrap; gap: 6px }
.together { margin-top: 48px }
.tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.tgi { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line) }
.tgi .pc-pic { width: 56px; height: 56px }
.tgi b { display: block; font-weight: 600; font-size: 14.5px }
.tgi small { color: var(--ink-2); font-size: 13px }
.tgi .row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 8px }

/* ---------------------------------------------------------------- order */
.order { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start }
.ogroup + .ogroup { margin-top: 18px }
.ogroup h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 8px }
.ogroup h2 img { width: 36px; height: 36px; object-fit: contain }
.oline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 36px; gap: 14px; align-items: center; padding: 12px 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) }
.oline:first-of-type { border-radius: var(--r-l) var(--r-l) 0 0 } .oline:last-of-type { border-radius: 0 0 var(--r-l) var(--r-l) } .oline:only-of-type { border-radius: var(--r-l) }
.oline + .oline { margin-top: 1px }
.oline .pc-pic { width: 56px; height: 56px }
.oline b { display: block; font-weight: 600; font-size: 14.5px }
.oline small { color: var(--ink-3); font-size: 12.5px }
.oline .price { font-weight: 700; min-width: 86px; text-align: right }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-m); color: var(--ink-3); transition: background-color 150ms ease, color 150ms ease }
@media (hover: hover) { .icon-btn:hover { background: var(--sunk); color: var(--ink) } }
.summary { position: sticky; top: calc(var(--head-h) + var(--nav-h) + 20px); padding: 20px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line) }
.summary h2 { font-size: 20px; margin-bottom: 14px }
.sum-r { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14.5px; color: var(--ink-2) }
.sum-r b { color: var(--ink); font-variant-numeric: tabular-nums }
.sum-t { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 17px; color: var(--ink) }
.sum-t b { font-size: 22px }
.meter { margin: 14px 0 16px; font-size: 13.5px; color: var(--ink-2) }
.meter-bar { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; margin-top: 8px }
.meter-bar i { display: block; height: 100%; width: 0; background: var(--meter, var(--ok)); border-radius: 3px; transition: width 500ms var(--ease-out) }
.notes { width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 10px 12px; background: var(--surface); font-size: 16px }
.ship { display: grid; gap: 8px; margin: 14px 0 }
.ship label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--line); cursor: pointer; font-size: 14px }
.ship label:has(input:checked) { box-shadow: 0 0 0 2px var(--ink) }
.ship input { margin: 2px 0 0; accent-color: var(--action) }
.ship small { display: block; color: var(--ink-3); font-size: 12.5px }
.wa { margin-top: 16px; padding: 14px; border-radius: var(--r-l); background: var(--wa-bg, #e7f6ec); color: #0b3d1f; font-size: 14px; white-space: pre-line; line-height: 1.5 }
.done { text-align: center; padding: 40px 20px 56px; max-width: 640px; margin: 0 auto }
.done h1 { font-size: clamp(28px, 3vw, 40px) }
.done p { color: var(--ink-2); margin-top: 10px }
.added { position: fixed; right: max(16px, env(safe-area-inset-right)); top: calc(var(--head-h) + var(--nav-h) + 10px); z-index: 70; width: min(380px, calc(100vw - 32px)); padding: 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); transform-origin: top right; transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out) }
.added[hidden] { display: block !important; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; visibility: hidden }
.added-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ok) }
.added-p { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px }
.added-p .pc-pic { width: 48px; height: 48px }
.added-p b { font-weight: 600; font-size: 14px; display: block; line-height: 1.3 }
.added-p small { color: var(--ink-3); font-size: 12.5px }
.added .meter { margin: 12px 0 }
.added-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }

/* quick order */
.qo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: start }
.qo textarea { width: 100%; min-height: 260px; resize: vertical; padding: 14px 16px; border-radius: var(--r-l); border: 1px solid var(--line-2); background: var(--surface); font: 16px/1.6 var(--font-ui) }
.qo textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent }
.qo-ex { margin-top: 10px; font-size: 13.5px; color: var(--ink-2) }
.qo-ex button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.ql { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) }
.ql:first-child { border-radius: var(--r-l) var(--r-l) 0 0 } .ql:last-child { border-radius: 0 0 var(--r-l) var(--r-l) } .ql:only-child { border-radius: var(--r-l) }
.ql + .ql { margin-top: 1px }
.ql .qty { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; font-size: 15px }
.ql .raw { font-size: 12.5px; color: var(--ink-3) }
.ql select { margin-top: 4px; max-width: 100%; height: 34px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); padding: 0 8px; font-size: 13.5px }
.ql.miss { box-shadow: 0 0 0 1px var(--bad) inset }
.ql.miss .raw { color: var(--bad) }
.qo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px }

/* service facts and footer */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden }
.fact { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.fact:nth-child(3n) { border-right: 0 }
.fact:nth-last-child(-n + 3) { border-bottom: 0 }
.fact b { display: block; font-weight: 600; font-size: 15px }
.fact span { font-size: 14px; color: var(--ink-2) }
.foot { margin-top: auto; background: var(--foot-bg, var(--surface)); color: var(--foot-ink, var(--ink-2)); border-top: 1px solid var(--line); font-size: 14px }
.foot .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; padding-block: 40px 28px }
.foot h3 { font: 600 14px var(--font-ui); letter-spacing: 0; color: var(--foot-head, var(--ink)); margin-bottom: 10px }
.foot li + li { margin-top: 6px }
.foot a { border-radius: 3px }
@media (hover: hover) { .foot a:hover { color: var(--foot-head, var(--ink)); text-decoration: underline; text-underline-offset: 3px } }
.foot-note { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--foot-line, var(--line)); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px }

/* the side switch between the three looks */
body { padding-bottom: 52px }
.looks { position: fixed; z-index: 90; right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 2px; padding: 3px; border-radius: 7px; background: rgba(20, 22, 26, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); font: 500 12px/1 system-ui, sans-serif }
.looks a { color: rgba(255, 255, 255, .72); padding: 7px 9px; border-radius: 5px; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease }
.looks a[aria-current="page"] { background: #fff; color: #111 }
@media (hover: hover) { .looks a:not([aria-current="page"]):hover { color: #fff; background: rgba(255, 255, 255, .12) } }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none }
.toast { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 8px; background: var(--toast-bg, #15171c); color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); transition: opacity 300ms ease, transform 300ms ease; @starting-style { opacity: 0; transform: translateY(10px) } }
.toast svg { width: 18px; height: 18px }
.toast.out { opacity: 0; transform: translateY(6px) }

/* drawers (menu on phones) */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(10, 12, 16, .42); transition: opacity 240ms ease }
.scrim[hidden] { display: block !important; opacity: 0; pointer-events: none; visibility: hidden }
.drawer { position: fixed; z-index: 85; top: 0; bottom: 0; left: 0; width: min(380px, 88vw); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overscroll-behavior: contain; transition: transform 320ms var(--ease-drawer) }
.drawer[hidden] { display: flex !important; transform: translateX(-104%); visibility: hidden }
.dr-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); min-height: 60px }
.dr-b { flex: 1; overflow: auto; padding: 8px }
.dr-i { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px; border-radius: var(--r-m); font-size: 16px; font-weight: 500; text-align: left }
.dr-i .i-s { margin-left: auto; opacity: .5 }
.dr-i small { color: var(--ink-3); font-weight: 400; font-size: 13px }
.dr-back { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; font-weight: 600; color: var(--ink-2) }
.dr-t { padding: 12px 12px 6px; font: 600 13px var(--font-ui); color: var(--ink-3) }

/* 3D stage: shared bits (each look styles its labels) */
.d3-host { position: relative; overflow: hidden }
.d3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y }
.d3-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 500ms ease }
.d3-ready + .d3-poster, .d3-ready .d3-poster { opacity: 0 }
.d3-labels { position: absolute; inset: 0; pointer-events: none }
.d3-label { position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap; transition: opacity 200ms ease, color 200ms ease }
.d3-label.gone, .d3-lines .gone { display: none }
.d3-label.hide { opacity: 0; pointer-events: none }
.d3-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.d3-lines path { fill: none; stroke-width: 1; transition: stroke 200ms ease, stroke-opacity 200ms ease }
.d3-lines circle { transition: r 200ms ease }

/* page changes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out) }
html[data-nav="forward"]::view-transition-old(root) { animation-name: vt-out }
html[data-nav="forward"]::view-transition-new(root) { animation-name: vt-in }
html[data-nav="back"]::view-transition-old(root) { animation-name: vt-out-b }
html[data-nav="back"]::view-transition-new(root) { animation-name: vt-in-b }
@keyframes vt-out { to { opacity: 0; transform: translateX(-14px); filter: blur(2px) } }
@keyframes vt-in { from { opacity: 0; transform: translateX(18px); filter: blur(2px) } }
@keyframes vt-out-b { to { opacity: 0; transform: translateX(14px); filter: blur(2px) } }
@keyframes vt-in-b { from { opacity: 0; transform: translateX(-18px); filter: blur(2px) } }
.top { view-transition-name: top }
::view-transition-group(top) { animation: none }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .top-link .lbl { display: none }
  .mbody { grid-template-columns: minmax(0, 1fr) }
  .filters { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 24px; padding: 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line) }
  .filters > div { min-width: 200px }
  .fl-opts { flex-direction: row; flex-wrap: wrap }
  .order { grid-template-columns: minmax(0, 1fr) }
  .summary { position: static }
  .foot .wrap { grid-template-columns: 1fr 1fr }
}
@media (max-width: 900px) {
  :root { --head-h: 58px }
  .top-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu brand links" "search search search"; gap: 6px 8px; height: auto; padding-top: 7px }
  .menu-btn { display: inline-flex }
  .brand { font-size: 19px; justify-self: start }
  .top-bar .search { margin-bottom: 10px; max-width: none }
  .top-links .top-link:not(.keep) { display: none }
  .top-nav { display: none }
  .search kbd { display: none }
  .search input { font-size: 16px }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kind { min-height: 170px }
  .mhead { grid-template-columns: minmax(0, 1fr) }
  .mvis { max-width: 520px; width: 100%; justify-self: center }
  .prod { grid-template-columns: minmax(0, 1fr) }
  .gal { position: static; max-width: 560px; width: 100%; justify-self: center }
  .qo { grid-template-columns: minmax(0, 1fr) }
  .facts { grid-template-columns: minmax(0, 1fr) }
  .fact { border-right: 0 !important; border-bottom: 1px solid var(--line) !important }
  .fact:last-child { border-bottom: 0 !important }
  .znav { top: var(--sticky-top, 106px) }
  .mega { display: none !important }
  .added { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; transform-origin: bottom center }
}
@media (max-width: 560px) {
  .page { padding-block: 16px 56px }
  .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .mtile { padding: 10px 10px 12px }
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .zone-t { grid-template-columns: 36px minmax(0, 1fr); padding: 10px; gap: 10px }
  .zone-t .zi { width: 36px; height: 36px }
  .pcard { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px }
  .pc-pic { width: 64px; height: 64px }
  .opt { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 0 }
  .opt > .add, .opt > .stepper { grid-column: 2 / -1; justify-self: end; margin-bottom: 8px }
  .oline { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .oline .stepper { grid-column: 2; justify-self: start }
  .oline .price { grid-column: 3; grid-row: 1 }
  .oline .icon-btn { grid-column: 3; grid-row: 2; justify-self: end }
  .foot .wrap { grid-template-columns: minmax(0, 1fr) }
  .cart-btn .t, .cart-btn .lbl { display: none }
  .looks { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)) }
  .looks a { padding: 7px 8px }
}

/* a phone drawn from one of the photo sheets: the box keeps the size the picture would have */
.atl { display: block; flex: none; background-repeat: no-repeat; background-color: #fff; border-radius: 4px; mix-blend-mode: multiply }
.mtile .ph .atl { width: 86% !important; height: 86% !important; transition: transform 300ms var(--ease-out) }
@media (hover: hover) { .mtile:hover .ph .atl { transform: scale(1.04) } }
.mvis > .atl { position: absolute; inset: 8%; width: 84% !important; height: 84% !important }
.sg-i .atl { width: 40px !important; height: 40px !important }
.mg-m .atl { width: 44px !important; height: 44px !important }
.ogroup h2 .atl { width: 36px !important; height: 36px !important }