@font-face {
  font-family: Inter;
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #101014;
  --ink: #f5f5f7;
  --accent: #b7a6d8;
  --purchase: #c5b0ed;
  --price-value: #72e9a6;
  --price-deal: #ff838e;
  --review-star: #edc485;
  --surface: #17171c;
  --raised: #1e1e25;
  --control: #24242c;
  --muted: #b3b1be;
  --border: #f5f5f71c;
  --line: #f5f5f72b;
  --tint: #b7a6d81a;
  --photo-bg: #f2f1ef;
  --glass: #1d1d25e6;
  --glass-highlight: linear-gradient(155deg, #f5f5f70d, transparent 63%);
  --glass-edge: inset 0 1px #f5f5f71a;
  --glass-blur: 8px;
  --shadow: 0 6px 22px #0004;
  --font: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
  --title: clamp(27px, 7vw, 34px);
  --section: 19px;
  --body: 14px;
  --small: 13px;
  --xs: 12px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --r1: 10px;
  --r2: 14px;
  --r3: 20px;
  --campaign-radius: 26px;
  --campaign-height: clamp(210px, 58vw, 246px);
  --pill: 999px;
  --motion-tap: 130ms;
  --motion-select: 220ms;
  --motion-sheet: 280ms;
  --motion-page: 300ms;
  --motion-stagger: 40ms;
  --ease-out: cubic-bezier(.22, .68, .24, 1);
  --gutter: clamp(14px, 4.2vw, 32px);
  --content-width: 960px;
  --tap: 44px;
  --nav-height: 54px;
  --nav-gap: 8px;
  --viewport-gap: 0px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  --dock-bottom: calc(var(--safe-bottom) + var(--viewport-gap) + var(--nav-gap));
  --above-tabs: calc(var(--dock-bottom) + var(--nav-height) + var(--s2));
  --cart-shortcut-lift: var(--s5);
  font: 400 var(--body)/1.45 var(--font);
  background: var(--bg);
  color: var(--ink);
  scroll-padding-bottom: calc(var(--above-tabs) + 80px);
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden], .sprites { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
p, h1, h2, h3, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3, .price, .offer-price { font-optical-sizing: auto; }
h1 { font-size: var(--title); font-weight: 620; line-height: 1.12; letter-spacing: -.04em; }
h2 { font-size: var(--section); font-weight: 590; line-height: 1.24; letter-spacing: -.024em; }
h3 { font-size: 15px; line-height: 1.3; font-weight: 570; }
strong { font-weight: 620; }
button, input, select { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button {
  cursor: pointer; scale: 1;
  transition: scale var(--motion-tap) var(--ease-out), opacity var(--motion-tap) var(--ease-out),
    background-color var(--motion-select), color var(--motion-select), border-color var(--motion-select);
}
button:active:not(:disabled) { scale: .97; opacity: .86; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.muted { color: var(--muted); font-size: var(--small); line-height: 1.46; }
.price, .offer-price, .line-price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.price { font-size: 18px; font-weight: 600; letter-spacing: -.032em; }
.price-stack { display: inline-grid; justify-items: start; gap: 2px; min-width: 0; }
.price-saving {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--s2);
  font-size: var(--xs); color: var(--muted); font-variant-numeric: tabular-nums;
}
.price-saving del { white-space: nowrap; }
.discount-badge {
  padding: 1px 6px; border-radius: var(--pill); background: #ff838e25;
  color: #ffabb2; font-size: 10px; font-weight: 650; line-height: 1.45; white-space: nowrap;
}
[data-price-tone=value] { color: var(--price-value); }
[data-price-tone=deal] { color: var(--price-deal); }
.stack { display: grid; gap: var(--s4); min-width: 0; }
.surface, .notice, .banner {
  min-width: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface);
}
.notice, .banner { font-size: var(--small); color: var(--muted); }
.notice.warning { border-color: var(--line); color: var(--ink); }
.banner { background: var(--raised); color: var(--ink); }
.empty-state { display: grid; justify-items: center; gap: var(--s2); padding: var(--s8) var(--s4); text-align: center; }
.empty-state > .icon { width: 25px; height: 25px; color: var(--muted); margin-bottom: var(--s1); }
.empty-state .btn { margin-top: var(--s1); }

@keyframes motion-enter {
  from { opacity: var(--enter-opacity, .65); translate: 0 var(--enter-offset, 6px); }
}
@keyframes motion-fade { from { opacity: .76; } }
.page-enter { --enter-opacity: .82; animation: motion-enter var(--motion-page) var(--ease-out); }
.cart-page.page-enter { animation-name: motion-fade; }
.tile-enter {
  animation: motion-enter var(--motion-page) var(--ease-out) calc(var(--stagger-index) * var(--motion-stagger)) backwards;
}
.cart-action-enter { --enter-opacity: .4; --enter-offset: 3px; animation: motion-enter var(--motion-select) var(--ease-out); }
.cart-shortcut:not([hidden]), .toast:not([hidden]) { animation: motion-enter var(--motion-select) var(--ease-out); }

.shell {
  width: min(100%, var(--content-width)); min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100dvh); margin: auto;
  padding: calc(var(--safe-top) + var(--s5)) max(var(--gutter), var(--safe-right))
    calc(var(--above-tabs) + var(--s4)) max(var(--gutter), var(--safe-left));
}
.page-heading, .detail-heading { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); }
.page-heading h1, .detail-heading h1 { min-width: 0; overflow-wrap: anywhere; }

.btn, .round, .variant-chip, .choice {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); min-width: 0; padding: var(--s2) var(--s3);
  background: var(--raised); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r1);
  font-size: var(--body); font-weight: 550; line-height: 1.25;
}
.btn .icon, .round .icon { width: 17px; height: 17px; }
.btn.primary {
  background: linear-gradient(166deg, #c9bbe4, var(--accent) 55%, #ae9bce);
  border-color: #e2d5f278; color: var(--bg); box-shadow: inset 0 1px #f5f5f74d, 0 2px 7px #1010143b;
}
.btn.primary[aria-busy=true] { opacity: .84; cursor: progress; }
.button-spinner {
  width: 15px; height: 15px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: button-loading 850ms linear infinite;
}
@keyframes button-loading { to { transform: rotate(1turn); } }
.btn.full { width: 100%; min-height: 48px; }
.round { flex: none; width: var(--tap); padding: 0; }
.btn[aria-pressed=true], .round[aria-pressed=true], .variant-chip[aria-pressed=true], .choice[aria-pressed=true] {
  border-color: var(--accent); color: var(--accent); background: var(--tint);
}
.round[aria-pressed=true] .icon { fill: currentColor; }
.actions, .chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.text-action {
  min-height: var(--tap); padding: var(--s2); background: transparent;
  border: 0; color: var(--muted); font-size: var(--small);
}
.external-link {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  color: var(--accent); text-decoration: none; font-weight: 550;
}
.external-link .icon { width: 15px; height: 15px; }

.field { display: grid; gap: var(--s2); font-weight: 550; font-size: var(--small); }
input:not([type=checkbox], [type=radio]), select {
  width: 100%; min-width: 0; min-height: 48px; padding: var(--s2) var(--s3);
  border: 1px solid var(--border); border-radius: var(--r1);
  background: var(--raised); color: var(--ink); font-size: 16px; scroll-margin-block: var(--s4);
}
input::placeholder { color: var(--muted); opacity: 1; }
input[type=search]::-webkit-search-cancel-button { appearance: none; }
input[type=radio], input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }

.catalog { gap: var(--s3); }
.catalog > h1 { margin-bottom: var(--s1); text-align: center; }
.catalog-search {
  position: sticky; top: var(--safe-top); z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
}
#view[data-page=home]::before {
  content: ""; position: fixed; z-index: 3; inset: 0 0 auto; height: var(--safe-top);
  background: var(--bg); pointer-events: none;
}
:root:has(#view[data-page=home]) { scroll-padding-top: calc(var(--safe-top) + 64px); }
.search { position: relative; min-width: 0; }
.search > .icon {
  position: absolute; top: 50%; left: 14px; transform: translateY(-50%); pointer-events: none;
  width: 18px; height: 18px; color: var(--muted);
}
.catalog-search .search input, .catalog-search > .filter-button {
  min-height: 46px; border-radius: var(--pill); border: 1px solid #f5f5f720;
  background: var(--glass-highlight), var(--surface); box-shadow: var(--glass-edge);
}
.catalog-search .search input { padding-inline: 40px 46px; }
.search input, .catalog-search > .btn, .filter-button { transition: border-color var(--motion-select), box-shadow var(--motion-select), scale var(--motion-tap), opacity var(--motion-tap); }
.catalog-search .search input:focus {
  outline: none; border-color: #b7a6d8ae; box-shadow: 0 0 0 3px #b7a6d812;
}
.search:focus-within > .icon { color: var(--accent); }
.catalog:has(.catalog-results[aria-busy=true]) .search::after {
  content: ""; position: absolute; bottom: 1px; left: 12px; right: 12px; height: 1px;
  background: var(--accent); opacity: 0; animation: search-ready var(--motion-tap) 120ms both;
}
@keyframes search-ready { to { opacity: .55; } }
.clear-search {
  position: absolute; top: 1px; right: 1px; width: var(--tap); height: var(--tap);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--pill);
  background: transparent; color: var(--muted);
}
.clear-search .icon { width: 16px; height: 16px; }
.clear-search:not([hidden]) { --enter-offset: 0; animation: motion-enter var(--motion-select) var(--ease-out); }
.catalog-search .search:has(.clear-search[hidden]) input { padding-right: var(--s3); }

.offer-carousel { display: grid; min-width: 0; margin-top: var(--s1); }
.offer-track {
  display: flex; min-width: 0; overflow: auto hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-inline: contain; border-radius: var(--campaign-radius);
}
.offer-track::-webkit-scrollbar { display: none; }
.offer {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); align-items: center;
  flex: 0 0 100%; min-width: 0; min-height: var(--campaign-height); gap: var(--s2); scroll-snap-align: start;
  padding: var(--s3); border: 1px solid var(--border); border-radius: var(--campaign-radius); background: var(--surface);
}
.offer[data-campaign] {
  --campaign-base: #1c141f;
  --campaign-midtone: #251727d1;
  --campaign-clear: 53%;
  background: var(--campaign-base);
}
.offer[data-campaign=graphite] {
  --campaign-base: #17171e;
  --campaign-midtone: #191a23c9;
}
.offer-copy {
  position: relative; z-index: 1; display: grid; justify-items: start; align-content: center;
  min-width: 0; gap: var(--s4); padding: var(--s2) 0 var(--s2) var(--s2);
}
.offer h2 {
  font-size: clamp(28px, 8.3vw, 48px); line-height: 1;
  font-weight: 570; letter-spacing: -.052em;
}
.offer-family, .offer-edition { display: block; }
.offer-edition { margin-top: 3px; color: #e1d8e8; font-size: .89em; font-weight: 520; }
.offer-price { font-size: clamp(22px, 6.4vw, 34px); line-height: 1.15; letter-spacing: -.04em; font-weight: 650; }
.offer .price-stack { gap: var(--s1); }
.offer-cta {
  max-width: 100%; gap: var(--s2); padding-inline: var(--s3);
  border-color: #f5f5f734; background: #f5f5f70d; border-radius: var(--pill);
  color: var(--ink); font-size: var(--small); white-space: nowrap;
}
.offer-cta .icon { width: 15px; height: 15px; color: var(--accent); }
.offer-media { display: grid; align-self: stretch; min-width: 0; min-height: 174px; overflow: hidden; border-radius: var(--r2); }
.offer-media .photo { width: 100%; height: 100%; aspect-ratio: auto; padding: 2px; }
.offer-media .photo img { max-height: 300px; }
.offer[data-campaign] .offer-media { position: absolute; inset: 0; min-height: 0; border-radius: 0; pointer-events: none; }
.campaign-image { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; max-width: none; }
.offer[data-campaign] .offer-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--campaign-base) 7%, var(--campaign-midtone) 29%, transparent var(--campaign-clear));
}
.offer[data-active] .offer-copy {
  --enter-offset: 4px; --enter-opacity: .72;
  animation: motion-enter var(--motion-page) var(--ease-out);
}
.offer[data-campaign][data-active] .offer-media::before {
  content: ""; position: absolute; z-index: 1; inset: 0 49% 0 0;
  background: radial-gradient(ellipse at 42% 28%, #b7a6d819, transparent 65%);
  animation: campaign-light 380ms var(--ease-out);
}
@keyframes campaign-light {
  from { opacity: 0; translate: -8px 0; }
  to { opacity: 1; translate: 0 0; }
}
.offer-switcher { display: flex; justify-content: center; min-height: var(--tap); margin-bottom: calc(-1 * var(--s3)); }
.offer-switch {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  color: var(--muted); border: 0; border-radius: var(--r1); background: transparent;
}
.offer-progress {
  display: block; width: 6px; height: 5px; overflow: hidden;
  border-radius: var(--pill); background: var(--muted);
  transition: width var(--motion-select) var(--ease-out), background-color var(--motion-select);
}
.offer-switch[aria-pressed=true] .offer-progress { width: 30px; background: #b7a6d844; }
.offer-progress > span {
  display: block; width: 100%; height: 100%; background: var(--accent);
  transform: scaleX(var(--offer-progress, 0)); transform-origin: left;
}
.offer-switcher:not([data-autoplay]) .offer-switch[aria-pressed=true] .offer-progress > span { transform: none; }

.catalog-filters { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.catalog-filters .brand-segments {
  --segment-inset: 4px;
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 228px; max-width: 228px; min-width: 0; gap: 0; padding-inline: var(--segment-inset);
  border-radius: var(--pill); background: #f5f5f706;
}
.brand-indicator {
  position: absolute; pointer-events: none;
  inset: var(--segment-inset) auto var(--segment-inset) var(--segment-inset); z-index: -1;
  width: calc((100% - 2 * var(--segment-inset)) / 3); border-radius: var(--pill);
  background: var(--glass-highlight), #30283f; box-shadow: var(--glass-edge);
  border: 1px solid #b7a6d845;
  transform: translateX(calc(100% * var(--selected-brand, 0)));
  transition: transform var(--motion-select) var(--ease-out);
}
.chip {
  min-height: var(--tap); border: 0; border-radius: var(--pill); padding: 0 2px;
  background: transparent; color: var(--muted); font-size: var(--small); font-weight: 550; white-space: nowrap;
}
.chip[aria-pressed=true] { color: var(--ink); }
.filter-button { flex: none; padding-inline: var(--s3); font-size: var(--small); }
.catalog-search > .filter-button[data-active] { color: var(--purchase); border-color: #c5b0ed85; background-color: #252033; }
.finder-link {
  flex: none; min-inline-size: 88px; padding-inline: 10px; gap: 5px; white-space: nowrap;
  border-radius: var(--pill); background: #b7a6d810; border-color: #b7a6d838; font-size: var(--small);
}
.finder-link .icon {
  width: 15px; height: 15px; color: var(--accent); rotate: -35deg;
}
.result-count { margin-top: calc(-1 * var(--s1)); }
body:has(.filter-sheet[open]) { overflow: hidden; }
.filter-sheet {
  position: fixed; inset: auto 0 var(--viewport-gap); width: min(calc(100% - 2 * var(--s2)), 500px);
  max-width: none; max-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--safe-top) - var(--s4));
  margin: 0 auto; padding: 0; overflow: auto;
  color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r3) var(--r3) 0 0;
}
.filter-sheet::backdrop { background: #0009; }
.filter-sheet[open] { --enter-offset: 14px; animation: motion-enter var(--motion-sheet) var(--ease-out); }
.filter-sheet[open]::backdrop { animation: motion-fade var(--motion-sheet) var(--ease-out); }
.filter-sheet[open].sheet-leaving { animation: sheet-exit var(--motion-sheet) var(--ease-out) both; pointer-events: none; }
.filter-sheet[open].sheet-leaving::backdrop { animation: backdrop-exit var(--motion-sheet) var(--ease-out) both; }
@keyframes sheet-exit { to { opacity: 0; translate: 0 14px; } }
@keyframes backdrop-exit { to { opacity: 0; } }
.sheet-content { display: grid; gap: var(--s3); padding: var(--s4) var(--s4) calc(var(--s4) + var(--safe-bottom)); }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sheet-heading .round { background: transparent; }
.sort-options { min-width: 0; border: 0; padding: 0; margin: 0; }
.sort-options legend { color: var(--muted); padding: 0; font-size: var(--small); }
.filter-option { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) 0; }
.filter-option + .filter-option { border-top: 1px solid var(--border); }
.filter-option:has(input:disabled) { opacity: .55; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r3); background: var(--surface); overflow: hidden;
}
.tile-open {
  display: flex; flex: 1; flex-direction: column; width: 100%; min-width: 0;
  padding: 0; border: 0; color: inherit; background: none; text-align: left;
}
.tile-open:focus-visible { outline-offset: -3px; }
.tile-open:active:not(:disabled) { scale: .987; }
.photo {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  min-width: 0; min-height: 0; overflow: hidden; background: var(--photo-bg); color: var(--bg);
}
.photo img {
  display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain;
  opacity: 0; transition: opacity var(--motion-select) var(--ease-out);
}
.photo img.photo-loaded { opacity: 1; }
.photo .icon { width: 34px; height: 34px; opacity: .55; }
.tile-media {
  position: relative; align-self: stretch; aspect-ratio: 1.45;
  margin: var(--s2) var(--s2) 0; border-radius: var(--r2); overflow: hidden;
  background: #201d24;
}
.tile-media .photo {
  position: absolute; inset: 0 0 0 auto; width: 58%; height: 100%; aspect-ratio: auto;
  padding: 5px 3px; background: var(--photo-bg);
}
.tile-media .photo:not(.photo-studio) {
  inset: 7px 7px 7px auto; width: calc(58% - 7px); height: auto; border-radius: 9px;
}
.tile-media .photo-studio { padding: 0; background: transparent; }
.tile-media .photo-studio img { object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 19%); }
.tile-media .photo-studio-wide { width: 100%; }
.tile-media .photo-studio-wide img { object-position: right center; mask-image: none; }
.tile-media .photo-infographic { width: 100%; }
.tile-media .photo-infographic img { object-position: center; mask-image: none; }
.tile-media:has(.photo-infographic .photo-loaded) .tile-configuration { display: none; }
.tile-configuration {
  position: absolute; inset: auto auto 6px 5px; max-width: calc(43% - 5px);
  display: grid; gap: 2px; padding: 4px;
  border: 1px solid #f5f5f729; border-radius: 9px;
  border-inline-start: 2px solid var(--device-color, var(--muted));
  background: linear-gradient(150deg, #292630f5, #15141bed);
  box-shadow: var(--glass-edge), 0 2px 6px #100e1655;
  color: var(--muted); font-size: clamp(9px, 2.2vw, 10px); line-height: 1.12;
  overflow-wrap: anywhere;
}
.tile-config-memory {
  color: var(--ink); font-size: clamp(10px, 2.55vw, 12px); font-weight: 640; white-space: nowrap;
}
.tile-config-color { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-info { display: flex; flex: 1; flex-direction: column; align-items: start; width: 100%; gap: 5px; padding: var(--s3) var(--s3) 0; }
.tile-title { font-size: 15px; font-weight: 570; line-height: 1.23; letter-spacing: -.015em; overflow-wrap: anywhere; }
.tile-meta { display: grid; gap: 4px; justify-items: start; padding: 2px var(--s3) var(--s3); }
.tile-info .price-stack { margin-top: auto; }
.tile-info .price { font-size: clamp(18px, 5.3vw, 22px); }
.review-summary {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  justify-self: start; padding: 0; border: 0; background: transparent; text-align: left;
  color: var(--muted); font-size: var(--small); font-variant-numeric: tabular-nums;
}
.review-summary > span { display: inline-flex; align-items: center; gap: 4px; }
.review-summary .icon { width: 13px; height: 13px; }
.tile-meta .review-summary { min-height: 30px; gap: 6px; font-size: clamp(10px, 2.9vw, 12px); }
.review-summary .icon:last-child { flex: none; }
.review-summary .review-score { color: var(--ink); }
.review-score .icon { color: var(--review-star); fill: currentColor; }
.product-reviews-overview {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
}
.product-reviews-overview h2 { margin-bottom: 3px; }
.product-review-rating { display: grid; gap: 3px; }
.product-review-rating strong { font-size: 21px; }
.product-review-rating strong {
  display: inline-flex; align-items: center; gap: 5px;
}
.product-review-rating .icon {
  width: 14px; height: 14px; color: var(--review-star); fill: currentColor;
}
.favorite {
  position: absolute; top: var(--s2); right: var(--s2); z-index: 1; background: transparent;
  border: 0; border-radius: var(--r2); color: var(--ink);
}
.tile:has(.photo-infographic) .favorite { right: auto; left: var(--s2); }
.favorite::before {
  content: ""; position: absolute; inset: 7px; border-radius: var(--pill);
  background: #101014dd;
}
.favorite .icon { position: relative; width: 16px; height: 16px; transition: scale var(--motion-select) var(--ease-out); }
.favorite[aria-pressed=true] .icon { scale: 1.1; }
.favorite[aria-pressed=true] { color: var(--accent); background: transparent; }
.favorite:focus-visible { outline-offset: -3px; }
.tile-actions { padding: 0 var(--s3) var(--s3); }
.tile-add.btn {
  width: 100%; gap: 6px; padding-inline: var(--s1);
  font-size: var(--small);
}
.tile-quantity.quantity {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: var(--tap); gap: 0; border-radius: var(--pill);
  border-color: #b7a6d862; background: var(--glass-highlight), #302743;
  box-shadow: var(--glass-edge); color: var(--ink);
}
.tile-quantity .round { width: 100%; min-height: calc(var(--tap) - 2px); color: #e3d4ff; }
.tile-quantity output { min-width: 20px; text-align: center; font-weight: 640; font-variant-numeric: tabular-nums; }
.purchase-button.btn.primary {
  border-radius: var(--pill); border-color: #b7a6d87a; color: var(--ink);
  background: linear-gradient(158deg, #7357a2, #573c83 66%, #493269);
  box-shadow: inset 0 1px #f5f5f735, 0 2px 7px #10101460;
  font-weight: 600;
}
.purchase-button .cart-action .icon { color: #e7d8ff; }
.tile-add.btn .icon { width: 15px; height: 15px; }
.cart-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.purchase-button.btn.primary.is-added {
  background: var(--glass-highlight), #342a47; border-color: #c5b0ed75;
  color: #eadfff; box-shadow: var(--glass-edge);
}
.availability { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: var(--xs); line-height: 1.35; }
.availability::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.availability.stale { color: var(--muted); }
.availability.stale::before { background: transparent; border: 1px solid currentColor; }
.skeleton { border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); }
.loading-offer { min-height: var(--campaign-height); border-radius: var(--campaign-radius); }
.skeleton-card { min-height: 250px; }

.detail { gap: var(--s3); }
.detail-gallery { min-width: 0; }
.gallery-stage {
  --gallery-height: clamp(216px, 61vw, 450px);
  position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r3);
}
.gallery-frame { touch-action: pan-y pinch-zoom; user-select: none; }
.gallery-frame[role=button] { cursor: zoom-in; }
.gallery-frame:focus-visible { outline-offset: -3px; }
.gallery-expand {
  position: absolute; left: var(--s2); bottom: var(--s2); display: grid; place-items: center;
  width: 30px; height: 28px; border: 1px solid #fff2; border-radius: 9px;
  color: var(--ink); background: #15131abd; backdrop-filter: blur(10px); pointer-events: none;
}
.gallery-expand .icon { width: 15px; height: 15px; }
.gallery-stage .photo {
  height: var(--gallery-height); aspect-ratio: auto; padding: var(--s3);
  background: radial-gradient(ellipse at 50% 35%, #302c36, #19171f 75%);
}
.gallery-stage[tabindex] .photo:not(.photo-studio) { padding-inline: calc(var(--tap) - var(--s1)); }
.gallery-stage .photo-studio { padding: 0; background: #171519; }
.gallery-stage[tabindex] .photo-infographic { padding-inline: var(--s5); }
.gallery-stage .photo-studio-wide:not(.photo-infographic) img { object-fit: cover; object-position: right center; }
.gallery-fit {
  position: relative; display: block; overflow: hidden;
  width: min(100%, calc((var(--gallery-height) - 2 * var(--s3)) * var(--gallery-fit-ratio)));
  aspect-ratio: var(--gallery-fit-ratio);
}
.gallery-stage[tabindex]:focus-visible { outline-offset: 3px; }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: var(--tap); height: 52px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink);
}
.gallery-arrow::before {
  content: ""; position: absolute; width: 27px; height: 38px; border: 1px solid #fff2;
  border-radius: 10px; background: linear-gradient(155deg, #fff1, transparent), #131219b0;
  backdrop-filter: blur(12px); box-shadow: inset 0 1px #fff1, 0 4px 14px #0003;
}
.gallery-arrow .icon { position: relative; width: 15px; height: 15px; }
.gallery-arrow.prev { left: 2px; }
.gallery-arrow.next { right: 2px; }
.gallery-arrow:focus-visible { outline: 1px solid #dfd4f7; outline-offset: -4px; }
.gallery-count {
  position: absolute; bottom: var(--s2); right: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--pill);
  background: var(--raised); color: var(--ink); font-size: var(--xs); font-variant-numeric: tabular-nums; pointer-events: none;
}
.gallery-controls { display: flex; gap: var(--s2); margin-top: var(--s2); overflow-x: auto; }
.gallery-thumb {
  display: grid; flex: none; width: 48px; height: var(--tap); padding: 2px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface);
}
.gallery-thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 7px; }
.gallery-video-thumb {
  align-content: center; justify-items: center; gap: 1px; width: 56px;
  color: var(--muted); font-size: 10px;
}
.gallery-video-thumb .icon { width: 16px; height: 16px; color: var(--accent); }
.gallery-frame:has(.gallery-film) { touch-action: auto; }
.gallery-film {
  position: relative; display: grid; place-items: center; overflow: hidden;
  height: var(--gallery-height); background: #16151c;
}
.gallery-stage .gallery-film .photo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: .54; }
.gallery-film-play {
  position: relative; padding-inline: var(--s4); border-color: #fff3; border-radius: var(--pill);
  background: #16131abf; backdrop-filter: blur(12px); white-space: nowrap;
}
.gallery-frame img, .gallery-thumb img, .photo-viewer-canvas img { mask: var(--gallery-mask, none) center / contain no-repeat; }
.gallery-fit img { position: absolute; object-fit: fill; mask-size: 100% 100%; }
.gallery-thumb[aria-pressed=true] { border-color: var(--accent); }
.gallery-thumb:focus-visible { outline-offset: -3px; }
html:has(.photo-viewer[open]) { overflow: hidden; }
.photo-viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden;
  border: 0; color: var(--ink); background: #0d0c11;
}
.photo-viewer::backdrop { background: #0d0c11; }
.photo-viewer-layout {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%; height: 100%; padding-block: var(--safe-top) var(--safe-bottom);
  padding-inline: var(--safe-left) var(--safe-right);
}
.photo-viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s3);
}
.photo-viewer-count, .photo-viewer-button {
  display: grid; place-items: center; min-width: var(--tap); height: var(--tap); padding: 0 var(--s2);
  border: 1px solid var(--border); border-radius: var(--pill); color: var(--ink);
  background: var(--surface); font-variant-numeric: tabular-nums;
}
.photo-viewer-button { font-size: 18px; }
.photo-viewer-button .icon { width: 18px; height: 18px; }
.photo-viewer-reset, .photo-viewer-count { font-size: var(--small); }
.photo-viewer-framing { padding-inline: var(--s3); font-size: var(--xs); }
.photo-viewer-reset { min-width: 58px; }
.photo-viewer-count { height: 32px; }
.photo-viewer-controls { display: grid; grid-template-columns: 1fr auto 1fr; }
.photo-viewer-controls > button:first-child { justify-self: start; }
.photo-viewer-controls > button:last-child { grid-column: 3; justify-self: end; }
.photo-viewer-zoom { display: flex; grid-column: 2; gap: var(--s1); }
.photo-viewer-canvas {
  position: relative; overflow: hidden; display: grid; place-items: center;
  container-type: size; touch-action: none; user-select: none; cursor: zoom-in;
  background: radial-gradient(ellipse at center, #25222c, #0d0c11 85%);
}
.photo-viewer-canvas.is-zoomed { cursor: grab; }
.photo-viewer-canvas.is-zoomed:active { cursor: grabbing; }
.photo-viewer-canvas .photo {
  display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: auto;
  background: transparent; border-radius: 0; pointer-events: none;
}
.photo-viewer-canvas .photo > img { width: 100%; height: 100%; object-fit: contain; }
.photo-viewer-canvas .gallery-fit { width: min(100%, calc(100cqh * var(--gallery-fit-ratio))); }
.photo-viewer-canvas .gallery-fit img { object-fit: fill; }
.film-viewer-header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
}
.film-viewer-title { font-size: var(--small); color: var(--muted); }
.film-viewer-rotate { display: none; grid-auto-flow: column; gap: 5px; font-size: var(--xs); }
.film-viewer-header > button:last-child { grid-column: 3; }
.film-viewer-stage { position: relative; min-width: 0; container-type: size; background: #09080c; }
.film-viewer-screen {
  position: absolute; top: 50%; left: 50%; width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9; border: 0; transform: translate(-50%, -50%); background: #000;
}
.film-viewer-footer { justify-content: center; padding-block: 0 var(--s2); }
.film-viewer-footer .external-link { font-size: var(--xs); }
@media (orientation: portrait) {
  .film-viewer-rotate { display: grid; }
  .film-viewer[data-rotated] .film-viewer-screen {
    width: min(100cqh, calc(100cqw * 16 / 9)); transform: translate(-50%, -50%) rotate(90deg);
  }
}
.product-purchase { display: grid; gap: var(--s3); padding: var(--s3); }
.product-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.product-meta .price { font-size: clamp(25px, 6.9vw, 34px); line-height: 1.12; }
.product-status { display: grid; justify-items: end; gap: 2px; min-width: 0; }
.product-status .availability { padding: 4px 8px; border-radius: var(--pill); background: #72e9a614; color: var(--price-value); }
.product-status .availability::before { background: currentColor; }
.product-status .availability.stale { background: var(--raised); color: var(--muted); }
.product-status .availability.stale::before { background: transparent; }
.product-status .review-summary { min-height: 30px; font-size: var(--xs); justify-self: end; }
.variant-options { display: grid; border-block: 1px solid var(--border); padding-block: var(--s1); }
.variant-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center;
  gap: var(--s2); min-height: 38px; padding-block: 3px;
}
.variant-row > .muted { font-size: var(--xs); }
.variant-colors { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.variant-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.variant-chip { min-height: 34px; padding: 4px var(--s2); border-radius: 8px; font-size: var(--xs); }
.variant-chip[aria-pressed=true] { border-color: #b7a6d847; background: var(--tint); color: var(--ink); }
.variant-chip:focus-visible { outline: 1px solid #c3b6dcaa; }
.variant-color { width: 34px; padding: 0; }
.variant-swatch {
  position: relative; display: block; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid #f5f5f73b; background: var(--swatch);
}
.variant-value { font-size: var(--small); font-weight: 600; }
.variant-chip[data-sold-out] { text-decoration: line-through; color: var(--muted); }
.variant-color[data-sold-out] .variant-swatch::after {
  content: ""; position: absolute; inset: 7px -2px auto; height: 1px;
  background: var(--ink); transform: rotate(-45deg);
}
.detail-actions { flex-wrap: nowrap; }
.detail-buy { flex: 1; }
.detail-actions .btn:not(.detail-buy) { padding-inline: var(--s2); font-size: var(--small); }
.detail .delivery-info { align-items: center; padding: var(--s2) var(--s3); }
.detail .delivery-info > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); }
.detail .delivery-info h2 { margin: 0; font-size: var(--small); }
.product-details { gap: var(--s2); }
.product-recommendations { margin-top: var(--s2); gap: var(--s2); }
.product-specs { padding: var(--s3); }
.product-specs h2 { margin-bottom: var(--s2); font-size: 16px; }
.quick-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec-panel { min-width: 0; padding-inline: var(--s2); }
.spec-panel:first-child { padding-inline-start: 0; }
.spec-panel:last-child { padding-inline-end: 0; }
.spec-panel + .spec-panel { border-inline-start: 1px solid var(--border); }
.spec-panel .icon { width: 15px; height: 15px; color: var(--muted); }
.spec-panel dt { display: flex; align-items: center; gap: var(--s1); color: var(--muted); font-size: var(--xs); }
.spec-panel dd { margin-top: var(--s1); font-weight: 560; font-size: 12px; line-height: 1.25; text-wrap: pretty; }
.product-info { padding: 0 var(--s3); }
.product-info > * + :is(.description, .info-link) { border-top: 1px solid var(--border); }
.product-info-label { display: flex; align-items: center; gap: var(--s2); }
.product-info .info-link { min-height: var(--tap); gap: var(--s2); }
.product-info .info-icon { width: 16px; height: 16px; background: none; color: var(--muted); }
.product-info .info-icon .icon { width: 16px; height: 16px; }
.product-info .info-link strong, .product-info summary { font-size: var(--small); font-weight: 580; }
.product-info .external-link { min-height: 36px; font-size: var(--small); }
.product-info-content { padding-bottom: var(--s3); }
.product-info .description[open] > .product-info-content {
  --enter-offset: -3px; --enter-opacity: .5;
  animation: motion-enter var(--motion-select) var(--ease-out);
}
.product-faq { display: grid; gap: var(--s2); }
.product-faq dt { font-size: var(--small); font-weight: 580; }
.product-faq dd { margin-top: 2px; }
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .product-info .description { interpolate-size: allow-keywords; }
  .product-info .description::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size var(--motion-select) var(--ease-out),
      opacity var(--motion-select) var(--ease-out), content-visibility var(--motion-select) allow-discrete;
  }
  .product-info .description[open]::details-content { block-size: auto; opacity: 1; }
  .product-info .description[open] > .product-info-content { animation: none; }
}
.description summary, .request summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  min-height: var(--tap); font-weight: 580; cursor: pointer;
}
.description summary::-webkit-details-marker, .request summary::-webkit-details-marker { display: none; }
.description summary .icon, .request summary .icon { width: 16px; height: 16px; color: var(--muted); }
.description summary > .icon { transition: transform var(--motion-select) var(--ease-out); }
.description[open] > summary > .icon, .request[open] summary .icon { transform: rotate(180deg); }
.profile-links { padding: 0 var(--s4); }

.finder-panel, .checkout-step { display: grid; gap: var(--s3); }
.step-heading { display: flex; align-items: center; gap: var(--s2); font-size: 17px; }
.step-heading > span { color: var(--muted); font-size: var(--xs); font-variant-numeric: tabular-nums; }
.finder-options { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { flex: 1 1 auto; font-size: var(--small); }
.finder-result { display: grid; gap: var(--s3); }
.finder-result .actions { justify-content: flex-end; }
.match { display: flex; align-items: center; gap: var(--s3); }
.match .photo { width: 62px; flex: none; border-radius: var(--r1); }
.match-info { min-width: 0; }
.match-info p { margin-top: var(--s1); }
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.compare-table th, .compare-table td { padding: var(--s2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.compare-table thead th { min-width: 105px; }
.compare-table tbody th { color: var(--muted); }

.cart-heading { display: flex; align-items: baseline; gap: var(--s2); }
.cart-count { color: var(--muted); font-size: var(--small); }
.cart-list { display: grid; gap: var(--s3); }
.cart-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: var(--s2) var(--s3); padding: var(--s3); }
.cart-photo { display: block; width: 100%; align-self: start; padding: 0; border: 0; border-radius: var(--r1); overflow: hidden; }
.cart-photo .icon { width: 24px; height: 24px; }
.cart-item { display: grid; min-width: 0; justify-items: start; gap: var(--s1); }
.cart-item h3, .order-line strong { overflow-wrap: anywhere; }
.cart-item-actions { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.cart-row > .notice, .cart-price-change { grid-column: 1 / -1; }
.quantity {
  display: flex; align-items: center; gap: var(--s1); padding: 0;
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--r1);
}
.quantity .round { border: 0; background: transparent; font-size: 19px; }
.quantity span { min-width: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.delivery-info {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface);
}
.delivery-info h2 { font-size: 15px; margin-block: 2px; }
.delivery-icon { color: var(--accent); padding-top: 3px; }
.delivery-caption { font-size: var(--xs); }
.cart-checkout {
  position: fixed; z-index: 3; inset-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
  bottom: var(--above-tabs); width: auto; max-width: 630px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--raised); box-shadow: var(--shadow);
}
.cart-checkout-total { display: grid; gap: 2px; }
.cart-checkout .price { font-size: clamp(17px, 4.7vw, 23px); }
.cart-checkout .btn { flex: none; }
.cart-checkout .btn .icon { width: 14px; }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.line-items { display: grid; }
.order-line {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--s1) var(--s3); padding: var(--s2) 0;
}
.order-line + .order-line { border-top: 1px solid var(--border); }
.order-line > div { flex: 1 1 135px; min-width: 0; }
.order-line .muted { margin-top: var(--s1); }
.line-price { font-size: var(--small); }
.checkout-step .total { border-top: 1px solid var(--border); padding-top: var(--s3); }
.field-error { font-size: var(--small); color: var(--ink); }
.checkout-form input[aria-invalid=true] { border-color: var(--accent); }
.shell:has(#view[data-page=checkout]) { padding-bottom: calc(var(--safe-bottom) + var(--viewport-gap) + var(--s4)); }
:root:has(#view[data-page=checkout]) { scroll-padding-bottom: calc(var(--safe-bottom) + var(--s4)); }

.profile {
  gap: var(--s3);
  background: radial-gradient(ellipse 40% 23% at 60% 23%, #573e7459, transparent),
    radial-gradient(ellipse 35% 24% at 37% 48%, #3a496346, transparent),
    radial-gradient(ellipse 34% 22% at 65% 75%, #7046553e, transparent);
}
.support-page { position: relative; isolation: isolate; }
.support-page::before {
  content: ""; position: absolute; z-index: -1; inset: -14px -12px; pointer-events: none;
  background: radial-gradient(ellipse at 86% 15%, #573e746e, transparent 54%),
    radial-gradient(ellipse at 8% 50%, #3a49634f, transparent 48%),
    radial-gradient(ellipse at 75% 86%, #70465546, transparent 49%);
  mask-image: linear-gradient(90deg, transparent, #000 35px, #000 calc(100% - 35px), transparent),
    linear-gradient(transparent, #000 48px, #000 calc(100% - 40px), transparent);
  mask-composite: intersect;
}
.profile .surface, .glass-panel {
  border-color: #e6d9ff27;
  box-shadow: inset 0 1px #f7ebff15, 0 8px 26px #09070f45;
}
.profile .surface {
  /* The background is already soft. Keep the glass tint without filtering content behind the cards. */
  background: linear-gradient(146deg, #eee1ff17, #bbb0d707 58%, #dca9eb0a), #1816228c;
}
.glass-panel { background: linear-gradient(146deg, #3b3045, #201f2a 60%, #292433); }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .glass-panel {
    background: linear-gradient(146deg, #eee1ff17, #bbb0d707 58%, #dca9eb0a), #1816228c;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}
.profile-build {
  display: grid; justify-items: center; gap: 3px; padding: var(--s1) var(--s2);
  color: var(--muted); font-size: 11px; line-height: 1.35; text-align: center;
  font-variant-numeric: tabular-nums;
}
.profile-hero { display: flex; align-items: center; gap: var(--s3); }
.profile-hero > div { min-width: 0; }
.profile-hero h2 { overflow-wrap: anywhere; }
.profile-avatar, .info-icon {
  display: grid; flex: none; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r1); background: var(--raised); color: var(--ink);
}
.profile-avatar {
  width: 49px; height: 49px; border: 1px solid #e6d9ff34; border-radius: var(--pill);
  background: linear-gradient(145deg, #d7bcf44a, #7e69a325); color: #f0e6ff;
  box-shadow: inset 0 1px #f7ebff24; font-size: 17px; font-weight: 620;
}
.profile-links .info-icon { background: #e4d4ff10; color: #dac8f1; }
.profile-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-block: var(--s2); }
.profile-setting h2 { font-size: 15px; }
.stock-switch {
  display: grid; place-items: center; flex: none; width: 50px; height: var(--tap); padding: 0;
  border: 0; border-radius: var(--r1); background: transparent;
}
.stock-track { position: relative; display: block; width: 39px; height: 22px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--control); }
.stock-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); transition: transform var(--motion-select) var(--ease-out);
}
.stock-switch[aria-checked=true] .stock-track { background: var(--accent); border-color: transparent; }
.stock-switch[aria-checked=true] .stock-track::after { transform: translateX(17px); background: var(--bg); }
.loyalty-section { gap: var(--s2); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.loyalty-card { display: grid; align-content: start; gap: var(--s1); padding: var(--s3); }
.loyalty-card:nth-child(2n) { border-inline-start: 1px solid var(--border); }
.loyalty-card:nth-child(n+3) { border-top: 1px solid var(--border); }
.loyalty-card .info-icon { width: 28px; height: 28px; background: transparent; color: var(--muted); }
.loyalty-card .muted { font-size: var(--xs); }
.info-link {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s2) 0;
  border: 0; background: transparent; color: var(--ink); text-align: left;
}
.info-link + .info-link { border-top: 1px solid var(--border); }
.info-link > .icon { width: 16px; height: 16px; color: var(--muted); }
.info-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.support-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s3); align-items: start;
  padding: var(--s3);
}
.support-card > .info-icon {
  width: 34px; height: 34px; border: 1px solid #efdaf333;
  background: #cfa4dd18; color: #f0dbf4;
}
.support-copy { display: grid; justify-items: start; gap: var(--s1); }
.support-copy h2 { font-size: 16px; }
.support-copy p { font-size: var(--small); }
.support-copy .external-link {
  min-height: 36px; margin-top: var(--s1); padding-inline: 10px; gap: 6px;
  border: 1px solid #e9d5f328; border-radius: var(--pill); background: #dfbaf014;
  color: #ebdbf8; font-size: var(--small);
}
.review-panel, .review-stage { display: grid; justify-items: start; gap: var(--s2); }
.review-panel { padding: var(--s3); }
.review-stage { width: 100%; }
.review-stage > p { font-size: var(--xs); }
.review-stage img { display: block; width: 100%; max-height: 60dvh; object-fit: contain; background: var(--bg); border-radius: var(--r1); }
.review-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); width: 100%; }
.review-controls { display: flex; align-items: center; gap: var(--s1); font-size: var(--xs); }
.review-controls .round { border: 0; background: transparent; width: 34px; min-height: 38px; }
.review-footer .external-link {
  gap: 5px; min-height: 36px; margin-left: auto; padding-inline: 9px;
  border: 1px solid var(--border); border-radius: var(--pill); font-size: var(--xs);
}
.review-footer .external-link .icon { width: 12px; height: 12px; }
.request summary { align-items: start; }
.request-heading { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.request-status { font-size: var(--xs); color: var(--muted); font-weight: 500; }
.request-body { display: grid; gap: var(--s2); border-top: 1px solid var(--border); margin-top: var(--s2); padding-top: var(--s2); }

.tabs {
  position: fixed; z-index: 4; inset-inline: max(var(--s2), var(--safe-left)) max(var(--s2), var(--safe-right));
  bottom: var(--dock-bottom); max-width: 630px; height: var(--nav-height); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 var(--s1);
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--r3); box-shadow: var(--shadow);
}
.tab-indicator {
  position: absolute; z-index: 1; pointer-events: none; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4);
  display: grid; justify-items: center; transform: translateX(calc(100% * var(--active-tab, 0)));
  transition: transform var(--motion-select) var(--ease-out);
}
.tab-indicator::after { content: ""; width: 11px; height: 2px; border-radius: var(--pill); background: var(--accent); }
.tab {
  position: relative; display: grid; align-content: center; justify-items: center; gap: var(--s1); min-height: var(--tap);
  padding: 0 0 3px; border: 0; border-radius: var(--r2); background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 540; line-height: 1.22;
}
.tab .icon { width: 19px; height: 19px; transition: translate var(--motion-select) var(--ease-out); }
.tab[aria-current=page] { color: var(--ink); }
.tab[aria-current=page] .icon { color: var(--accent); translate: 0 -1px; }
.badge, .shortcut-count {
  min-width: 20px; padding: 2px 5px; border-radius: var(--pill); background: var(--accent); color: var(--bg);
  text-align: center; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.badge { position: absolute; top: 4px; left: calc(50% + 5px); min-width: 16px; padding: 1px 4px; }
.cart-shortcut {
  position: fixed; z-index: 3; right: max(var(--gutter), var(--safe-right), calc((100% - var(--content-width)) / 2 + var(--gutter)));
  bottom: calc(var(--above-tabs) + var(--cart-shortcut-lift)); display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--raised); color: var(--ink); box-shadow: var(--shadow); font-size: var(--small); font-weight: 600;
}
.shortcut-icon { display: grid; place-items: center; }
.shortcut-icon .icon { width: 17px; height: 17px; }
#view[data-dock=shortcut] { padding-bottom: calc(50px + var(--cart-shortcut-lift)); }
#view[data-dock=checkout] { padding-bottom: 70px; }
.toast {
  position: fixed; z-index: 5; bottom: var(--above-tabs); left: 50%; transform: translateX(-50%);
  max-width: 88vw; width: max-content; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--raised); box-shadow: var(--shadow); color: var(--ink); font-size: var(--small);
}
#view[data-dock=shortcut] ~ .toast { bottom: calc(var(--above-tabs) + var(--cart-shortcut-lift) + 52px); }
:root[data-keyboard] { scroll-padding-bottom: var(--s4); }
:root[data-keyboard] .tabs, :root[data-keyboard] .cart-shortcut, :root[data-keyboard] .toast { visibility: hidden; }
:root[data-keyboard] .shell { padding-bottom: var(--s4); }
:root[data-keyboard] #view[data-dock=shortcut] { padding-bottom: 0; }

.tabs, .cart-shortcut, .filter-sheet {
  background-image: var(--glass-highlight);
  box-shadow: var(--glass-edge), var(--shadow);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .tabs, .cart-shortcut, .filter-sheet {
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  }
}
@media (prefers-reduced-transparency: reduce), (update: slow) {
  .tabs, .cart-shortcut, .filter-sheet {
    background-color: var(--raised);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

@media (min-width: 590px) {
  :root { --campaign-height: clamp(265px, 35vw, 340px); }
  .shell { padding-top: calc(var(--safe-top) + var(--s8)); }
  .offer { padding: var(--s4); }
  .offer[data-campaign] { --campaign-clear: 64%; }
  .offer-copy { padding-left: var(--s6); }
  .offer-media { min-height: 226px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 840px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .offer[data-campaign] { --campaign-clear: 50%; }
  .offer h2 { font-size: 27px; }
  .offer-cta { padding-inline: var(--s2); gap: var(--s1); }
  .offer-cta .icon { width: 12px; }
  .tile-configuration { padding-inline: 2px; }
  .catalog-filters .chip, .finder-link { font-size: var(--xs); }
  .tile-info { padding: var(--s2) var(--s2) 0; }
  .tile .price-saving { gap: 2px 4px; font-size: 10px; }
  .tile .discount-badge { padding-inline: 4px; font-size: 9px; }
  .tile-meta { padding-inline: var(--s2); }
  .tile-actions { padding-inline: var(--s2); }
  .cart-row { grid-template-columns: 56px minmax(0, 1fr); }
  .variant-row { grid-template-columns: 43px minmax(0, 1fr); }
  .variant-colors .variant-value, .spec-panel dt { font-size: 11px; }
  .spec-panel { padding-inline: var(--s1); }
  .spec-panel dd { font-size: 11px; }
}
@media (hover: hover) {
  .btn:not(.primary):hover, .info-link:hover, .chip:hover { border-color: var(--line); color: var(--ink); }
  .external-link:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  *, *::before, *::after { transition-delay: 0s !important; animation-delay: 0s !important; }
  .product-info .description::details-content { transition: none; }
  button:active:not(:disabled) { scale: 1; }
}