@font-face { font-family: Onest; src: url('/onest-ru-latin-3faade534c19.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url('/inter-ru-latin-3a2bcb72a308.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #02040b;
  --panel: #0e1421;
  --line: #f3f7fe1c;
  --text: #f3f7fe;
  --muted: #9ba9c1;
  --accent: #6aaeff;
  --mono: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
}
.catalogue-price-note { color: var(--muted); font-size: 12px; margin: 12px 0 16px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; min-width: 0; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; background: var(--bg); }
@supports (overflow: clip) { html { overflow-x: clip; } }
body {
  margin: 0; color: var(--text); font-size: 14px; line-height: 1.5; overflow-x: clip;
  width: 100%; min-width: 0; min-height: 100vh; min-height: 100svh;
  background: transparent; isolation: isolate;
}
/* Paint past both viewport edges while Telegram/Safari toolbars expand or hide. */
body::before { content: ''; position: fixed; inset: -128px 0 auto; height: calc(100vh + 256px); height: calc(100lvh + 256px); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 76vw 90vh at -10vw calc(128px - 12vh),#185df18c 0%,#185df126 43%,transparent 76%),radial-gradient(ellipse 70vw 90vh at 118vw calc(128px + 112vh),#185df180 0%,#185df126 43%,transparent 76%); }
button,input,select { font: inherit; }
button,a,input,select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline: 2px solid #8bc9ff; outline-offset: 4px; }
input,select { min-width: 0; }
input::placeholder { color: #8495af; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1240px; min-width: 0; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
main,.hero-art,.toolbar,.grid,.collection-shortcuts,.section-heading,.gift-body,.gift-bottom { min-width: 0; }
.header { height: 60px; display: flex; align-items: center; gap: 62px; border-bottom: 1px solid #f3f7fe21; }
.brand { font-size: 19px; font-weight: 650; letter-spacing: .25px; display: inline-flex; align-items: center; }
.brand-accent { color: #c1d3ee; font-weight: 400; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; line-height: 0; border: 1px solid #b8d5ff26; border-radius: 10px; background: #b8d5ff08; margin-right: 10px; }
.brand-mark svg { display: block; width: 22px; height: 22px; stroke: #d6e5fb; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.header nav { display: flex; align-items: center; gap: 29px; font-size: 13px; color: #b7c4d8; }
.text-button { border: 0; background: none; padding: 10px 0; }
.header nav a:hover,.text-button:hover { color: #f3f7fe; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.profile-link { font-size: 11px; padding: 7px 12px; border: 1px solid #c5dfff2c; border-radius: 10px; color: #adc5e9; background: #a5caff08; white-space: nowrap; }
.profile-link:hover { color: #edf5ff; border-color: #7293be7a; }
.hero { display: grid; grid-template-columns: minmax(0,1fr) 454px; gap: 28px; align-items: center; min-height: 290px; position: relative; }
.hero-copy { position: relative; z-index: 2; padding: 14px 0; min-width: 0; }
.eyebrow { font: 9px var(--mono); letter-spacing: 1.6px; color: #a8bbdc; margin: 0 0 14px; }
.hero .eyebrow { display: flex; align-items: center; gap: 11px; color: #b9d7ff; margin-bottom: 8px; }
.hero h1 { margin: 0 0 10px; font-size: clamp(34px,4.1vw,55px); font-weight: 470; line-height: 1.12; letter-spacing: -1.8px; }
.hero h1>span { color: #cbdcf4; }
.hero-note { color: #a6b8d3; font-size: 13px; line-height: 1.8; margin: 0 0 14px; }
.hero-link { display: inline-flex; align-items: center; gap: 30px; font-size: 12px; color: #182336; padding: 12px 17px; border: 0; border-radius: 11px; background: #f3f7fe; }
.hero-link:hover { background: #f3f7fe; }
.hero-art { min-height: 290px; position: relative; }
.art-halo { position: absolute; width: 290px; height: 225px; left: 85px; top: 85px; background: radial-gradient(ellipse,#185df120,transparent 68%); }
.glass-gift { position: absolute; width: 430px; height: 390px; top: -46px; left: -9px; object-fit: contain; pointer-events: none; user-select: none; }
.hero-feature { position: absolute; right: 1px; bottom: 8px; display: flex; align-items: center; gap: 12px; padding: 10px 13px 10px 10px; width: 220px; min-height: 80px; border: 1px solid #b9dbff36; background: #0c1420ed; border-radius: 15px; box-shadow: 0 15px 45px #00000044; transform: rotate(3deg); text-align: left; transition: opacity .18s ease,transform .18s ease,border-color .18s ease,background .18s ease; }
.hero-feature:hover,.hero-feature:focus-visible { border-color: #9fcfff80; background: #111e30; }
.hero-feature.is-changing { opacity: 0; transform: rotate(3deg) translateY(5px); }
.hero-feature .hero-meta { min-width: 0; }
.hero-feature strong,.hero-meta-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-image { display: block; width: 57px; height: 57px; object-fit: cover; border-radius: 10px; border: 1px solid #d3e8ff50; }
.hero-meta { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-label { font-family: inherit; font-size: 11px; font-weight: 500; line-height: 17px; color: #a2b5ce; }
.hero-meta strong { font-family: inherit; font-weight: 650; font-size: 16px; line-height: 1.35; letter-spacing: -.35px; }
.hero-meta-number { margin-top: 2px; color: #8da7c3; font-family: inherit; font-size: 11px; font-weight: 500; line-height: 17px; letter-spacing: normal; }
.catalogue { padding-top: 8px; }
.market-total { font-size: 11px; color: #8fa9d1; margin: 0 0 7px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-heading .eyebrow { display: block; font-size: 8px; margin-bottom: 7px; }
.section-heading h2 { font-size: 28px; font-weight: 500; letter-spacing: -.8px; line-height: 1.3; margin: 0; }
.count { font-size: 11px; color: #889ec0; white-space: nowrap; padding-bottom: 3px; }
.toolbar { display: grid; grid-template-columns: minmax(175px,1fr) minmax(155px,.6fr) minmax(115px,.45fr) minmax(105px,.45fr) minmax(145px,.5fr); gap: 8px; margin-bottom: 10px; }
.toolbar .select-trigger,.toolbar select { width: 100%; }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger:disabled { cursor: default; opacity: .45; }
.search { flex: 1; height: 48px; background: #0e1522; border: 1px solid #c6d7ed22; border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 0 15px; min-width: 0; }
.search svg { width: 17px; height: 17px; stroke: #9db8da; stroke-width: 1.5; flex-shrink: 0; }
.search input { border: 0; background: transparent; outline: none; width: 100%; height: 100%; font-size: 13px; color: #e5f2ff; }
.search:focus-within { border-color: #80baff9c; box-shadow: 0 0 0 3px #3b86ff12; }
.select-wrap { display: flex; position: relative; min-width: 0; }
.select-wrap select { background: #0e1522; border: 1px solid #c6d7ed22; border-radius: 12px; height: 48px; padding: 0 35px 0 14px; color: #bbcee9; font-size: 12px; cursor: pointer; width: 100%; }
.select-wrap select option { background: #101a2d; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: 48px; padding: 0 14px; border: 1px solid #c6d7ed22; border-radius: 12px; background: #0e1522; color: #bbcee9; font-size: 12px; text-align: left; transition: border-color .16s,background .16s; }
.select-trigger:hover { border-color: #7188a84d; }
.select-trigger[aria-expanded=true] { border-color: #7293be7a; background: #101a2a; }
.select-trigger:focus-visible { outline: 1px solid #8bb4e0; outline-offset: 3px; }
.select-value { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.select-option-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.collection-image { display: block; flex-shrink: 0; order: -1; width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.select-chevron { width: 6px; height: 6px; flex-shrink: 0; border-right: 1px solid #95b3dc; border-bottom: 1px solid #95b3dc; transform: translateY(-2px) rotate(45deg); transition: transform .16s; }
.is-open .select-chevron { transform: translateY(1px) rotate(225deg); }
.select-wrap.is-open { z-index: 10; }
.select-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: max(100%,200px); max-width: calc(100vw - 38px); max-height: min(280px,45vh); overflow-y: auto; padding: 6px; border: 1px solid #2b394e; border-radius: 13px; background: #0c1422; box-shadow: 0 12px 30px #00000055; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity .16s ease,transform .16s ease,visibility 0s linear .16s; scrollbar-width: thin; scrollbar-color: #30496a #0c1422; }
.sort-wrap .select-menu { left: auto; right: 0; }
.opens-up .select-menu { top: auto; bottom: calc(100% + 8px); transform: translateY(5px); }
.is-open .select-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.select-menu:focus { outline: none; }
.select-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 37px; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: #a9bbd5; cursor: pointer; user-select: none; transition: background .12s,color .12s; }
.select-option[aria-selected=true] { color: #dbeaff; }
.select-option.is-active { color: #edf5ff; background: #192942; }
.select-check { opacity: 0; color: #a4caff; font-size: 12px; }
.select-option[aria-selected=true] .select-check { opacity: 1; }
.collection-shortcuts { margin-bottom: 12px; }
.collection-caption { display: block; font-size: 10px; color: #7e97bc; margin-bottom: 6px; }
.collections { display: flex; gap: 7px; width: 100%; max-width: 100%; min-width: 0; overflow: auto; overscroll-behavior-x: contain; padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: #365e9c66 transparent; }
.collection-button { flex-shrink: 0; border: 1px solid #b2d1ff1a; background: #85acfa06; color: #91a6c8; display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 11px; border-radius: 100px; transition: color .15s,background .15s,border-color .15s; }
.collection-button img { width: 21px; height: 21px; border-radius: 6px; object-fit: contain; }
.collection-button[aria-pressed=true] { color: #edf6ff; background: #1b2c4b; border-color: #7297c145; }
.collection-button:hover { color: #e4f1ff; border-color: #85b6ff66; }
.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.gift-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #101a29; border: 1px solid #c0d8ff26; border-top-color: #daeaff30; border-radius: 26px; overflow: hidden; padding: 8px 8px 0; box-shadow: inset 0 1px #f3f7fe05; transition: transform .2s,border-color .2s,box-shadow .2s; }
.gift-card:has(:focus-visible) { transform: translateY(-3px); border-color: #81b9ff82; box-shadow: 0 8px 30px #185df11c,inset 0 1px #f3f7fe16; }
.gift-visual { border: 1px solid #f3f7fe12; border-radius: 20px; background: #152139; position: relative; display: block; flex-shrink: 0; width: 100%; padding: 0; aspect-ratio: 1; overflow: hidden; }
.gift-visual>img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gift-card:has(:focus-visible) .gift-visual>img { transform: scale(1.025); }
.card-select { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.card-select:focus-visible { outline: 2px solid #a4cfff; outline-offset: -2px; }
.card-select:active { background: #8ebaff08; }
@media(hover:hover) { .gift-card:hover { transform: translateY(-3px); border-color: #81b9ff82; box-shadow: 0 8px 30px #185df11c,inset 0 1px #f3f7fe16; } .gift-card:hover .gift-visual>img { transform: scale(1.025); } }
.gift-number { color: #8da7c3; font-size: inherit; font-weight: 500; white-space: nowrap; flex-shrink: 0; margin-left: 0; }
.gift-body { display: flex; flex-direction: column; flex: 1; padding: 9px 0 8px; }
.gift-collection { display: flex; align-items: baseline; gap: 5px; color: #a2b5ce; font-size: 11px; font-weight: 500; line-height: 17px; margin: 0 0 3px; padding: 0 3px; }
.collection-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-model { font-size: 16px; font-weight: 650; letter-spacing: -.35px; line-height: 1.35; margin: 0; padding: 0 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.gift-tags { display: none; }
.gift-tag { font-size: 9px; display: inline-flex; align-items: center; gap: 5px; background: #92bdff08; border: 1px solid #b9d6ff15; color: #9eb3d2; padding: 3px 6px; border-radius: 5px; }
.gift-tag:before { content: ''; width: 3px; height: 3px; background: #91baff; border-radius: 50%; }
.gift-bottom { display: flex; margin-top: auto; padding-top: 7px; }
.gift-bottom { gap: 6px; }
.gift-bottom .gift-price { flex: 1; min-width: 0; width: auto; padding-left: 6px; padding-right: 6px; }
.card-cart { position: relative; z-index: 3; display: grid; place-items: center; flex: 0 0 38px; width: 38px; min-height: 36px; padding: 0; border: 1px solid #7abaff3b; border-radius: 11px; color: #a9d6ff; background: #172d45; }
.card-cart svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-cart:hover { color: #f3f7fe; background: #214366; }
.card-cart.in-cart { color: #f3f7fe; background: #185df1; }
.cart-trigger.browse-trigger { position: fixed; z-index: 12; right: max(24px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 16px; background: #122b49; border-color: #639bdd66; box-shadow: 0 6px 25px #00000066; }
.cart-trigger.browse-trigger svg { width: 25px; height: 25px; }
.cart-count { position: absolute; right: -5px; top: -6px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px; font-size: 10px; font-weight: 700; color: #f3f7fe; background: #185df1; }
.cart-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px,100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 18px 0 0 18px; overflow: hidden; }
.cart-dialog[open] { display: flex; flex-direction: column; animation: cart-in .2s ease-out both; }
.cart-dialog[open].is-closing { animation: cart-out .14s ease-in both; }
@keyframes cart-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cart-out { to { opacity: 0; transform: translateX(30px); } }
.cart-heading { position: relative; flex-shrink: 0; border-bottom: 1px solid #a5cbff26; padding: 25px 24px 18px; }
.cart-heading h2 { font-size: 25px; font-weight: 600; margin: 0; }
.cart-heading .close-button { top: 23px; }
.cart-items { flex: 1; min-height: 0; padding: 10px 17px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #365371 #0a1220; }
.cart-item { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #a7ceff1c; }
.cart-item-open { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; border: 0; background: none; color: inherit; text-align: left; padding: 0; }
.cart-thumb { width: 76px; height: 76px; flex-shrink: 0; object-fit: cover; border-radius: 11px; }
.cart-item-meta { display: flex; flex-direction: column; min-width: 0; }
.cart-item-collection,.cart-item-number { color: #8ea9cc; font-size: 10px; }
.cart-item-meta strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-price { color: #d6edff; font-weight: 600; font-size: 14px; margin-top: 5px; }
.cart-remove { width: 36px; height: 40px; flex-shrink: 0; border: 0; border-radius: 9px; color: #94adce; background: #82baff08; font-size: 23px; }
.cart-remove:hover { color: #e0edff; background: #82baff20; }
.cart-item.is-unavailable .cart-thumb { opacity: .45; }
.cart-item.is-unavailable .cart-item-price { color: #8ea9cc; text-decoration: line-through; }
.cart-item-stock { color: #9bbce3; font-size: 11px; font-weight: 600; margin-top: 4px; }
.cart-item-open:disabled { cursor: default; }
.cart-empty { padding: 40px 25px; margin: auto 0; text-align: center; }
.cart-empty p { font-size: 19px; font-weight: 500; margin: 0 0 8px; }
.cart-empty span { display: block; color: #9bb2d1; font-size: 12px; }
.cart-empty .button { margin-top: 22px; }
.cart-summary { flex-shrink: 0; border-top: 1px solid #a5cbff26; padding: 19px 23px max(20px,env(safe-area-inset-bottom)); background: #0b1526; }
.cart-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-total-row>span { color: #a6c0df; }
.cart-total-row strong { font-size: 26px; font-weight: 600; }
.cart-summary>.button { width: 100%; min-height: 44px; }
.cart-status { min-height: 32px; margin: 10px 0 13px; font-size: 11px; line-height: 1.5; color: #a4c0e1; }
.cart-caption { color: #7d9bbf; font-size: 10px; line-height: 1.5; text-align: center; margin: 9px 0; }
.cart-tools { display: flex; justify-content: space-between; gap: 12px; color: #8abde9; font-size: 10px; }
.detail-actions { display: flex; gap: 8px; margin-top: 12px; flex-shrink: 0; }
.detail-actions .button { margin-top: 0; }
.gift-price { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 36px; padding: 7px 12px; border: 0; border-radius: 999px; background: #185df1; font-size: 19px; font-weight: 700; line-height: 22px; letter-spacing: -.2px; font-variant-numeric: tabular-nums; margin: 0; color: #f3f7fe; transition: background .18s; }
.gift-currency { font-size: .92em; font-weight: 600; }
.gift-card:has(:focus-visible) .gift-price { background: #185df1; }
@media(hover:hover) { .gift-card:hover .gift-price { background: #185df1; } }
.gift-card:active .gift-price { background: #185df1; }
.catalogue-navigation { padding-top: 27px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 22px; }
.browse-settings { position: relative; }
.browse-trigger { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #c5dfff2c; border-radius: 10px; background: #a5caff08; color: #adc5e9; transition: color .16s,border-color .16s,background .16s; }
.browse-trigger svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.browse-trigger:hover,.browse-trigger[aria-expanded=true] { color: #e0eeff; border-color: #7293be7a; }
.browse-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: 235px; max-width: calc(100vw - 38px); border: 1px solid #2b394e; border-radius: 13px; padding: 7px; background: #0c1422f5; box-shadow: 0 12px 30px #00000055; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity .16s,transform .16s,visibility 0s .16s; }
.browse-settings.is-open .browse-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.browse-panel>p { margin: 5px 8px 8px; font-size: 10px; color: #829bbe; }
.browse-panel>button { display: flex; flex-direction: column; gap: 3px; width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 9px; text-align: left; }
.browse-panel strong { font-size: 12px; font-weight: 500; color: #dceaff; }
.browse-panel span { font-size: 10px; color: #91a7c7; }
.browse-panel>button:hover { background: #142236; }
.browse-panel>button[aria-pressed=true] { background: #1b2c46; }
.feed-controls { display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 42px; }
.feed-controls>span { font-size: 11px; color: #8fa6c5; }
.feed-sentinel { height: 1px; }
.simulation-banner { color: #a9c2e5; font-size: 12px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #abcfff26; }
.simulation-checkout { max-width: 540px; padding-top: 44px; padding-bottom: 44px; }
.simulation-payment-panel { margin-top: 28px; padding: 25px; border: 1px solid #a9cfff26; border-radius: 18px; background: #0a121ee8; }
.simulation-payment-panel h1 { margin: 0 0 16px; font-size: 28px; font-weight: 500; letter-spacing: -.7px; }
.simulation-disclaimer,.simulation-payment-panel #simulation-result { color: #99afce; font-size: 12px; line-height: 1.7; }
.simulation-summary { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; margin: 18px 0; border-top: 1px solid #a9cfff20; border-bottom: 1px solid #a9cfff20; }
.simulation-summary small { color: #879fbe; font-size: 11px; }
.simulation-recipient { display: flex; flex-direction: column; gap: 8px; color: #a9c2e5; font-size: 12px; margin-bottom: 18px; }
.simulation-recipient input { width: 100%; padding: 12px; border: 1px solid #a9cfff26; border-radius: 10px; background: #a5caff08; color: #e7f1ff; }
.simulation-payment-panel .detail-telegram { display: inline-block; margin-top: 14px; }
.pagination span { font-size: 11px; color: #8fa6c5; }
.page-button { background: #0d1726; border-color: #2b3a50; color: #c7d9ef; min-width: 100px; }
.page-button:hover:enabled { background: #17283e; }
.page-button:disabled { opacity: .35; }
.catalogue-error { text-align: center; padding: 38px 20px; background: #0c1420; border: 1px solid #26364b; border-radius: 16px; }
.catalogue-error p { color: #acbdd4; margin: 0 0 20px; }
.gift-skeleton { border: 1px solid #283346; border-radius: 17px; background: #0b121e; padding: 8px 8px 25px; }
.skeleton-image { aspect-ratio: 1; background: #142033; border-radius: 11px; animation: skeleton-pulse 1.5s ease-in-out infinite alternate; }
.skeleton-line { margin: 20px 8px 0; width: 65%; height: 13px; border-radius: 5px; background: #1a273b; }
.skeleton-line.short { width: 40%; margin-top: 12px; }
@keyframes skeleton-pulse { to { opacity: .45; } }
@media(min-width:701px) and (max-width:1100px) { .toolbar { grid-template-columns: repeat(4,minmax(0,1fr)); } .search { grid-column: 1/-1; } }
@media(max-width:700px) { .toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .search { grid-column: 1/-1; } .select-wrap .select-menu { min-width: min(260px,calc(100vw - 40px)); } .model-wrap .select-menu,.sort-wrap .select-menu { left: auto; right: 0; } .pagination { gap: 15px; } }
.empty { text-align: center; border: 1px solid var(--line); border-radius: 17px; padding: 45px 20px; background: #a9d0ff07; }
.empty>span { font-size: 42px; color: #9ac5ff; }
.empty h3 { font-size: 22px; font-weight: 500; margin: 12px 0 5px; }
.empty p { color: var(--muted); margin: 0 0 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; padding: 12px 22px; border-radius: 11px; font-size: 12px; font-weight: 500; }
.button-light { background: #f3f7fe; color: #182336; }
.button-light:hover { background: #f3f7fe; }
.button-muted { border-color: #f3f7fe16; background: #17243b; color: #8193b0; }
.footer { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 24px; margin-top: 48px; padding-top: 25px; padding-bottom: 30px; }
.footer .brand { font-size: 17px; gap: 4px; }
.footer>a:last-child { margin-left: auto; font-size: 11px; color: #9dbbe8; }
dialog { background: radial-gradient(ellipse at 0 0,#0d2345 0,transparent 65%),radial-gradient(ellipse at 100% 100%,#091e40 0,transparent 65%),#031130; color: var(--text); border: 1px solid #293447; border-radius: 20px; padding: 0; width: calc(100% - 48px); max-width: 890px; max-height: calc(100dvh - 40px); overflow: auto; box-shadow: 0 24px 80px #00000088; }
dialog[open] { animation: dialog-in .18s ease-out both; }
dialog[open].is-closing { animation: dialog-out .14s ease-in both; }
dialog::backdrop { background: #02040bc9; }
dialog[open]::backdrop { animation: backdrop-in .18s ease-out both; }
dialog[open].is-closing::backdrop { animation: backdrop-out .14s ease-in both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
body:has(dialog[open]) { overflow: hidden; }
.close-button { position: absolute; z-index: 5; right: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #a4bed326; border-radius: 10px; color: #bdcce1; background: #0c142080; }
.close-button svg { display: block; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.close-button:hover { background: #18325180; color: #eff6ff; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.07fr) minmax(0,1fr); }
.detail-visual { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; background: #080d16; }
.detail-image,.detail-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-image { z-index: 1; opacity: 0; transition: opacity .12s ease; }
.has-detail-photo .detail-image { opacity: 1; }
.detail-poster { z-index: 0; }
/* The square photo sets the height; longer details scroll within that height. */
.gift-dialog { overflow-x: hidden; scrollbar-width: none; border-radius: 28px; }
.gift-dialog::-webkit-scrollbar,.detail-info::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gift-dialog>.close-button { right: 22px; top: 20px; }
.detail-info { contain: size; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 23px 25px 22px; display: flex; flex-direction: column; scrollbar-width: none; }
.detail-info .eyebrow { color: #a8bedb; font-size: 12px; font-weight: 600; letter-spacing: 1px; padding-right: 42px; margin-bottom: 9px; }
.detail-info h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; font-size: 30px; font-weight: 650; line-height: 1.15; letter-spacing: -.8px; margin: 0 34px 18px 0; }
.detail-title-link { color: inherit; text-decoration: none; transition: color .15s; }
.detail-title-link:hover { color: #8dceff; }
.title-external { display: inline-block; margin-left: 8px; font-size: .65em; opacity: .45; transition: opacity .15s,transform .15s; }
.detail-title-link:hover .title-external { opacity: 1; transform: translate(1px,-1px); }
.detail-title-link { min-width: 0; overflow-wrap: anywhere; }
.detail-collection { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-right: 35px; margin: 0 0 9px; color: #9fb9d8; font-size: 13px; font-weight: 550; line-height: 1.4; }
.detail-number { color: #8eacd0; font-size: inherit; font-weight: 550; white-space: nowrap; }
.attribute-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.attribute-row { text-align: left; width: 100%; min-width: 0; border: 1px solid #c9dfff20; border-radius: 17px; padding: 9px 12px; background: #111e30; transition: background .15s,border-color .15s; }
.attribute-row:hover:enabled { background: #185df114; border-color: #72b8ff69; }
.attribute-label { display: block; color: #91afd8; font-size: 11px; margin-bottom: 4px; }
.attribute-value { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #dcecff; font-size: 13px; font-weight: 600; }
.attribute-name { min-width: 0; overflow-wrap: anywhere; }
.rarity-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 3px 7px; border: 1px solid #70c4ff38; border-radius: 8px; color: #f3f7fe; background: #185df1; font-size: 12px; font-weight: 750; line-height: 1.2; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-animation { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; contain: strict; transition: opacity .18s ease; }
.detail-animation.is-ready { opacity: 1; }
.detail-animation canvas,.detail-animation svg { display: block; width: 100%; height: 100%; }
.animation-loading { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; max-width: calc(100% - 30px); padding: 9px 13px; border: 1px solid #add8ff24; border-radius: 12px; color: #e0efff; background: #0c1a30eb; font-size: 12px; white-space: nowrap; }
.loading-orbit { width: 14px; height: 14px; flex-shrink: 0; border: 2px solid #85bfff40; border-top-color: #a7d6ff; border-radius: 50%; animation: loading-orbit .8s linear infinite; }
@keyframes loading-orbit { to { transform: rotate(360deg); } }
.filter-dialog { width: min(720px,calc(100% - 36px)); padding: 28px; max-height: calc(100dvh - 36px); overflow: hidden; }
.filter-dialog[open] { display: flex; flex-direction: column; }
.filter-dialog h2 { font-size: 25px; font-weight: 600; margin: 0 42px 18px 0; }
.filter-search { width: 100%; flex-shrink: 0; min-height: 48px; padding: 11px 14px; border: 1px solid #f3f7fe24; border-radius: 12px; background: #0e1421; color: #e4efff; font-size: 16px; }
.filter-search:focus-visible { outline: none; border-color: #80baff9c; box-shadow: 0 0 0 3px #3b86ff12; }
.filter-tools { display: flex; align-items: center; gap: 17px; min-height: 52px; font-size: 12px; flex-shrink: 0; }
.filter-count { margin-right: auto; color: #8daacb; }
.filter-availability { flex-shrink: 0; min-height: 16px; margin: -5px 0 9px; color: #8daacb; font-size: 11px; line-height: 16px; }
.filter-option-note { display: block; overflow: hidden; text-overflow: ellipsis; color: #a9bdd6; font-size: 10px; font-weight: 400; }
.filter-option-note[hidden] { display: none; }
.filter-tools .text-button { color: #79bfff; font-size: 12px; }
.filter-viewport { height: min(50dvh,448px); min-height: 120px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #34577c #0c1728; touch-action: pan-y; }
.filter-list { position: relative; contain: layout style; }
.filter-option { position: absolute; top: 0; left: 0; width: 100%; height: 60px; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid transparent; border-radius: 11px; padding: 7px 12px; color: #dceaff; background: #0e1b2d; }
.filter-option[aria-checked=true] { background: #123b60; border-color: #368bd25c; }
.filter-option:hover { border-color: #70b4ea80; }
.filter-option .collection-image { width: 36px; height: 36px; object-fit: contain; }
.trait-thumbnail { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: #a8cfff0c; }
.trait-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.trait-sprite { display: block; width: 44px; height: 44px; flex: none; background-repeat: no-repeat; }
.draft-dialog { width: min(460px,calc(100% - 28px)); }
.draft-dialog #draft-content { display: grid; gap: 16px; }
.draft-dialog #draft-content p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.draft-dialog .draft-price { font-size: 32px; }
.draft-dialog .button { text-align: center; text-decoration: none; margin: 0; }
.draft-dialog .draft-muted { font-size: 12px!important; }
.trait-thumbnail-symbol img { filter: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(1043%) hue-rotate(181deg) brightness(103%) contrast(101%); }
.filter-option-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-checkbox { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 1px solid #49617e; border-radius: 6px; font-size: 14px; }
.filter-checkbox svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filter-option[aria-checked=true] .filter-checkbox { background: #185df1; border-color: #185df1; }
.filter-empty { color: #9bb5d5; text-align: center; }
.filter-actions { display: flex; gap: 10px; padding-top: 16px; flex-shrink: 0; }
.filter-actions .button { flex: 1; min-height: 44px; }
.filter-apply { color: #f3f7fe; background: #185df1; }
.filter-apply:hover:enabled { background: #185df1; }
.filter-apply:disabled { opacity: .45; }
.detail-price-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #bad6ff26; padding-top: 14px; margin-top: auto; }
.detail-price-label { font-size: 13px; color: #8fafd8; line-height: 1.6; }
.detail-price { font-size: 34px; font-weight: 650; letter-spacing: -.8px; white-space: nowrap; color: #ebf5ff; }
.detail-actions .card-cart { flex-basis: 48px; width: 48px; min-height: 48px; border-radius: 12px; }
.detail-actions .button { min-height: 48px; font-size: 15px; }
.detail-info .button { width: 100%; margin-top: 12px; flex-shrink: 0; }
.detail-caption { font-size: 10px; color: #7d9cc8; text-align: center; margin: 9px 0 0; line-height: 1.7; white-space: pre-line; }
.detail-telegram { color: #a6cfff; display: block; font-size: 11px; text-align: center; margin-top: 13px; text-decoration: underline; text-underline-offset: 3px; }
.help-dialog { padding: 38px; max-width: 510px; border-radius: 18px; }
.help-dialog .eyebrow { color: #8ea4c2; }
.help-dialog h2 { font-size: 31px; font-weight: 470; line-height: 1.2; letter-spacing: -.9px; margin: 0 0 20px; }
.help-dialog>p:not(.eyebrow) { font-size: 13px; color: var(--muted); line-height: 1.8; }
.help-dialog .button { margin-top: 10px; }
.sr-only { position: absolute; clip: rect(0,0,0,0); clip-path: inset(50%); width: 1px; height: 1px; white-space: nowrap; overflow: hidden; }
.image-fallback { object-fit: contain !important; background: #122347; padding: 25% !important; }
@media(min-width:1100px) { .grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(min-width:1280px) { .grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media(max-width:950px) { .hero { grid-template-columns: minmax(0,1fr) 330px; gap: 20px; min-height: 280px; } .hero h1 { font-size: clamp(30px,4.05vw,40px); } .hero-art { min-height: 280px; } .glass-gift { width: 360px; height: 335px; top: -25px; left: -16px; } .hero-feature { bottom: 8px; right: -5px; } .grid { gap: 13px; } .gift-body { padding: 12px 0 8px; } .gift-model,.hero-meta strong { font-size: 17px; } .gift-tags .gift-tag:last-child { display: none; } }
@media(max-width:700px) {
  body::before { background: radial-gradient(ellipse 115vw 65vh at -25vw calc(128px - 12vh),#185df180 0%,#185df120 44%,transparent 75%),radial-gradient(ellipse 110vw 70vh at 128vw calc(128px + 115vh),#185df178 0%,#185df120 44%,transparent 75%); }
  .wrap { padding-left: 19px; padding-right: 19px; }
  .header { height: 75px; gap: 20px; }
  .header nav { display: none; }
  .brand { font-size: 18px; }
  .brand-mark { width: 33px; height: 33px; margin-right: 9px; border-radius: 9px; }
  .brand-mark svg { width: 21px; height: 21px; }
  .profile-link { font-size: 10px; padding: 7px 9px; }
  .hero { min-height: 284px; display: block; }
  .hero-copy { padding: 33px 0 29px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.5px; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(30px,8.8vw,43px); letter-spacing: -1.4px; margin-bottom: 15px; line-height: 1.12; }
  .hero-note { font-size: 12px; margin-bottom: 19px; }
  .hero-link { font-size: 11px; gap: 29px; padding: 9px 14px; }
  .hero-art { display: none; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .section-heading h2 { font-size: 25px; }
  .section-heading .eyebrow { font-size: 7px; letter-spacing: 1.5px; }
  .count { font-size: 10px; }
  .toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
  .search { flex-basis: 100%; height: 46px; }
  .search input { font-size: 12px; }
  .select-wrap { flex: 1; }
  .select-wrap select,.select-trigger { height: 41px; font-size: 11px; padding-left: 11px; }
  .select-trigger { gap: 12px; }
  .collection-shortcuts { margin-bottom: 18px; }
  .collections { gap: 6px; }
  .collection-button { font-size: 10px; padding: 6px 10px; gap: 5px; }
  .collection-button img { width: 19px; height: 19px; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .gift-card { border-radius: 13px; padding: 6px 6px 0; }
  .gift-visual { aspect-ratio: 1; border-radius: 18px; }
  .gift-number { font-size: inherit; padding: 0; }
  .gift-body { padding: 11px 0 6px; }
  .gift-collection { font-size: 11px; margin-bottom: 3px; }
  .gift-model { font-size: 16px; margin-bottom: 9px; }
  .gift-tags { min-height: 19px; }
  .gift-tag { font-size: 8px; padding: 2px 5px; }
  .gift-bottom { padding-top: 10px; }
  .gift-price { font-size: 19px; min-height: 39px; padding: 8px; border-radius: 999px; line-height: 22px; gap: 4px; }
  .footer { gap: 10px; margin-top: 32px; padding-top: 20px; padding-bottom: 25px; }
  .footer .brand { font-size: 16px; }
  .detail-layout { grid-template-columns: 1fr; min-height: 0; }
  .detail-visual { min-height: 0; aspect-ratio: 1; }
  .detail-image { width: 100%; height: 100%; }
  .detail-info { contain: none; overflow: visible; padding: 23px 20px; }
  .detail-info h2 { font-size: 29px; }
  .attribute-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
  .attribute-row:last-child { grid-column: 1/-1; }
  .attribute-row { padding: 8px 10px; }
  .detail-price { font-size: 32px; }
  .gift-dialog { width: calc(100% - 26px); border-radius: 26px; max-height: calc(100dvh - 26px); }
  .help-dialog { padding: 32px 23px; width: calc(100% - 30px); }
  .help-dialog h2 { font-size: 28px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*:before,*:after { transition: none !important; animation-duration: .001s !important; animation-delay: 0s !important; } }
@media(max-width:400px) { .header { gap: 8px; } .header .brand { font-size: 14px; letter-spacing: 0; white-space: nowrap; } .brand-mark { width: 28px; height: 30px; margin-right: 6px; } .header-actions { gap: 6px; } .profile-link { font-size: 9px; padding: 7px 6px; } .browse-trigger { width: 30px; height: 32px; } }
@media(max-width:700px) { .pagination { gap: 12px; } .pagination .page-button { min-width: 62px; padding: 11px 10px; font-size: 11px; } .pagination span { font-size: 10px; white-space: nowrap; } }

/* Keep offscreen cards out of style/layout/paint work during long scrolling. */
.gift-card { content-visibility: auto; contain-intrinsic-block-size: auto calc((min(100vw,1240px) - 96px) / 3 + 88px); }
.toolbar { grid-template-columns: repeat(5,minmax(0,1fr)); }
.toolbar .search { grid-column: 1/-1; }
@media(min-width:1100px) { .gift-card { contain-intrinsic-block-size: auto calc((100vw - 112px) / 4 + 88px); } }
@media(min-width:1280px) { .gift-card { contain-intrinsic-block-size: auto 300px; } }
@media(max-width:700px) {
  .toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .toolbar .sort-wrap { grid-column: 1/-1; }
  .search input { font-size: 16px; }
  .gift-card { box-shadow: none; contain-intrinsic-block-size: auto calc((100vw - 49px) / 2 + 103px); }
  .filter-dialog { width: calc(100% - 20px); padding: 22px 14px 14px; max-height: calc(100dvh - 20px); border-radius: 16px; }
  .filter-dialog h2 { font-size: 22px; margin-left: 3px; }
  .filter-tools { gap: 12px; font-size: 11px; }
  .filter-tools .text-button { font-size: 11px; }
  .filter-viewport { height: min(52dvh,448px); }
  .filter-actions { padding-bottom: env(safe-area-inset-bottom,0px); }
  .attribute-link { min-height: 32px; }
  .card-cart { min-height: 39px; }
  .gift-card:has(:focus-visible) { transform: none; }
  .cart-dialog { border-radius: 16px 0 0 16px; }
}
@media(max-width:540px) { .header .profile-link { display: none; } }
.detail-info .detail-actions .button { flex: 1 1 0; width: auto; min-width: 0; margin-top: 0; }
.search,.select-trigger,.filter-search { border-radius: 16px; }
.filter-dialog,.help-dialog { border-radius: 26px; }
.filter-option { border-radius: 17px; }
.gift-price { font-weight: 750; letter-spacing: -.3px; }
.price-filter { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; }
.price-filter-label { color: #a6bedb; font-size: 12px; font-weight: 550; margin-right: 3px; }
.price-filter label { display: flex; align-items: center; gap: 10px; padding: 9px 13px; width: 160px; min-width: 0; border: 1px solid #b7d4fa26; border-radius: 15px; background: #0f1929; color: #89a2c2; }
.price-filter label:focus-within { border-color: #72baff; }
.price-filter input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: #e7f2ff; font-size: 13px; font-weight: 550; appearance: textfield; }
.price-filter input:focus-visible { outline: none; }
.price-filter input::-webkit-inner-spin-button,.price-filter input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.price-budget { margin-left: auto; color: #88a6ce; font-size: 11px; }
#price-reset { color: #89c5ff; font-size: 12px; }
@media(max-width:700px) {
  .gift-card { border-radius: 24px; }
  .price-filter { gap: 8px; margin-bottom: 17px; }
  .price-filter-label { flex-basis: 100%; }
  .price-filter label { flex: 1; width: auto; padding: 10px 12px; }
  .price-filter input { font-size: 16px; }
  .price-budget { width: 100%; margin: 0; }
}

/* Complete small-screen layout; keep the hero illustration visible. */
.section-heading .market-total { margin: 0; padding-bottom: 3px; text-align: right; }
.card-cart svg,.cart-trigger svg { stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.card-cart.in-cart svg,.filter-checkbox svg { stroke-width: 2.8; }
.cart-item.is-unavailable .cart-item-meta { opacity: .55; }
.cart-item.is-unavailable .cart-item-price { text-decoration-thickness: 1.5px; }
@media(max-width:700px) {
  /* Share the lower hero row instead of stacking a full illustration section. */
  .hero { display: grid; grid-template-columns: minmax(0,1fr) clamp(150px,45vw,200px); gap: 10px 12px; min-height: 0; padding-top: 18px; padding-bottom: 10px; align-items: stretch; }
  .hero-copy { display: contents; padding: 0; }
  .hero .eyebrow { grid-column: 1/-1; margin: 0; }
  .hero h1 { grid-column: 1/-1; margin: 0; }
  .hero-note { grid-column: 1; grid-row: 3; align-self: end; margin: 0; }
  .hero-link { grid-column: 1; grid-row: 4; align-self: start; justify-self: start; max-width: 100%; }
  .hero-art { grid-column: 2; grid-row: 3/span 2; display: block; width: 100%; max-width: none; min-height: 190px; margin: 0; }
  .glass-gift { width: 215px; height: 200px; left: calc(50% - 107.5px); top: -14px; }
  .glass-gift { max-width: calc(100% + 24px); left: 50%; transform: translateX(-50%); }
  .art-halo { width: 180px; height: 150px; left: calc(50% - 90px); top: 10px; }
  .art-halo { max-width: 100%; left: 50%; transform: translateX(-50%); }
  .hero-feature { width: 100%; min-height: 70px; padding: 9px; gap: 9px; bottom: 4px; right: 0; transform: rotate(2deg); border-radius: 18px; }
  .hero-image { width: 46px; height: 46px; }
  .hero-feature .hero-image { flex-shrink: 0; }
  .hero-feature .hero-meta { flex: 1 1 0; }
  .hero-meta strong { font-size: 14px; line-height: 1.3; }
  .hero-meta-label { font-size: 10px; }
  .hero-meta-number { font-size: 10px; margin-top: 2px; }
  .catalogue { padding-top: 8px; }
  .section-heading { gap: 6px; margin-bottom: 12px; align-items: stretch; }
  .section-heading h2 { font-size: clamp(21px,5.6vw,27px); white-space: nowrap; }
  .section-heading .market-total { align-self: flex-end; max-width: none; white-space: normal; font-size: 11px; line-height: 1.4; padding: 0; }
  .search,.select-trigger,.select-wrap select { min-height: 46px; }
  .toolbar { gap: 6px; margin-bottom: 8px; }
  .collection-shortcuts { margin-bottom: 12px; }
  .price-filter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-bottom: 12px; }
  .price-filter-label { grid-column: 1/-1; }
  .price-filter label { width: auto; min-height: 44px; padding: 10px 12px; }
  .price-filter input { font-size: 16px; }
  .price-budget { grid-column: 1/-1; margin-left: 0; line-height: 1.5; }
  #price-reset { justify-self: start; min-height: 34px; }
  .gift-collection { font-size: 10px; gap: 5px; }
  .gift-number { font-size: 10px; }
  .gift-model { font-size: 14px; line-height: 1.3; }
  .card-actions { gap: 7px; }
  .card-cart { width: 38px; height: 38px; min-height: 38px; border-radius: 12px; }
  .gift-price { min-height: 38px; font-size: 17px; }
  .detail-info { padding: 24px 18px 20px; }
  .detail-info .detail-actions { gap: 9px; }
  .detail-info .detail-actions .button { min-height: 48px; font-size: 16px; }
  .detail-collection { flex-wrap: wrap; gap: 6px 10px; }
  .detail-info h2 { overflow-wrap: anywhere; }
  .cart-dialog { width: min(100%,430px); max-width: 100%; max-height: 100dvh; }
  .cart-heading { padding: 22px 18px 18px; }
  .cart-items { padding: 8px 18px; }
  .cart-summary { padding: 18px 18px max(18px,env(safe-area-inset-bottom)); }
  .cart-item-open { gap: 12px; }
  .cart-thumb { width: 68px; height: 68px; }
  .cart-remove { width: 38px; height: 38px; }
  .cart-tools { flex-wrap: wrap; gap: 8px 18px; }
  .filter-dialog { border-radius: 22px; }
  .filter-actions .button { min-height: 46px; }
  .filter-tools { flex-wrap: wrap; }
  .filter-search input { font-size: 16px; }
  .filter-viewport { overscroll-behavior: contain; }
  .help-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
}


@media(max-width:360px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .section-heading { gap: 8px; }
  .section-heading .market-total { max-width: none; font-size: 10px; }
  .hero h1 { font-size: 30px; }
  .gift-collection { flex-wrap: wrap; }
  .gift-number { margin-left: 0; }
  .gift-price { font-size: 15px; }
}

.checkout-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.checkout-steps li::marker { color: #80c7ff; font-weight: 700; }
.checkout-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; }
.checkout-code { min-width: 0; width: 100%; padding: 13px 10px; border: 1px solid #314b68; border-radius: 12px; background: #101d30; color: #ddecff; font: 700 14px ui-monospace,monospace; text-align: center; letter-spacing: .3px; }
.checkout-code:focus { outline: none; border-color: #80c7ff; }
.checkout-copy { padding: 12px; border: 1px solid #314b68; background: #18324a; color: #c3e5ff; border-radius: 12px; font-size: 12px; }
.checkout-code-row > .checkout-code, .checkout-code-row > .checkout-copy { height: 52px; min-height: 52px; box-sizing: border-box; align-self: stretch; margin: 0; }
.checkout-pay.is-disabled { opacity: .55; cursor: default; }
.checkout-time { font-variant-numeric: tabular-nums; }
@media(max-width:480px) { .checkout-code-row { grid-template-columns: minmax(0,1fr); } .checkout-code { font-size: 15px; } }

@media(max-width:700px) {
  .header { height: auto; min-height: 74px; flex-wrap: wrap; gap: 0 14px; padding-top: 16px; padding-bottom: 10px; }
  .header nav { display: flex; order: 3; width: 100%; gap: 22px; margin-top: 5px; font-size: 12px; }
  .header nav a,.header nav button { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 0; }
  .header-actions { margin-left: auto; }
  .search input { font-size: 16px; }
}

.price-filter .price-max-suffix { flex: none; font-size: 13px; font-weight: 550; color: #e7f2ff; }
.price-filter .input-text:has(input:placeholder-shown) + .price-max-suffix { color: #8495af; }
@media(max-width:700px) { .price-filter .price-max-suffix { font-size: 16px; } }

/* Stable touch lists and one compact, dismissible gift sheet. */
.close-button { line-height: 1; font-size: 24px; }
.close-button svg { flex: none; margin: auto; }
.filter-viewport { flex: 0 1 min(50dvh,448px); min-height: 0; -webkit-overflow-scrolling: touch; }
.filter-dialog h2,.filter-dialog .filter-search,.filter-dialog .filter-tools,.filter-actions { flex-shrink: 0; }
.filter-list { overflow-anchor: none; }
.filter-option { touch-action: pan-y; }
@media(max-width:700px) {
  html:has(dialog[open]) { overflow: hidden; }
  .header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 60px; padding-top: 7px; padding-bottom: 7px; }
  .header .brand { font-size: 16px; letter-spacing: -.3px; white-space: nowrap; }
  .header .brand-mark { width: 29px; height: 31px; margin-right: 7px; }
  .header nav { order: initial; width: auto; min-width: 0; justify-content: flex-end; gap: clamp(6px,2vw,13px); margin: 0; font-size: 11px; white-space: nowrap; }
  .header nav a,.header nav button { min-height: 44px; padding: 8px 0; }
  .header-actions { margin: 0; }
  .header .profile-link { display: none; }
  .header .browse-trigger { width: 30px; height: 34px; }
  .close-button,.close-button:hover,.close-button:focus,.close-button:focus-visible { width: 42px; height: 42px; top: 10px; right: 10px; border: 0; background: transparent; box-shadow: none; outline: none; }
  .close-button:focus-visible { color: #f3f7fe; background: #b9dfff12; }
  .gift-dialog { width: min(390px,calc(100% - 24px)); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 30px 15px 15px; overflow: hidden; border-radius: 29px; background: #0b1422; box-shadow: 0 12px 44px #00000055; touch-action: pan-x; transition: translate .18s ease; }
  .gift-dialog::backdrop { background: transparent; }
  .gift-dialog.is-dragging { transition: none; }
  .gift-dialog>.close-button { inset: 2px auto auto 50%; transform: translateX(-50%); width: 70px; height: 28px; padding: 0; border: 0; border-radius: 0; background: none; }
  .gift-dialog>.close-button svg { display: none; }
  .gift-dialog>.close-button::after { content: ''; display: block; width: 38px; height: 4px; border-radius: 4px; background: #86b9e4; }
  .gift-dialog>.close-button:active::after { background: #c3e5ff; }
  .detail-layout { display: flex; flex-direction: column; gap: 12px; }
  .detail-visual { align-self: center; width: min(100%,clamp(90px,calc(100dvh - 395px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),270px)); flex: none; aspect-ratio: 1; border-radius: 23px; background: #10223a; }
  .detail-info { contain: none; overflow: visible; padding: 0; }
  .detail-collection { margin: 0 0 4px; padding: 0; gap: 8px; font-size: 12px; line-height: 17px; }
  .detail-info h2 { display: block; margin: 0 0 12px; font-size: 24px; line-height: 1.18; letter-spacing: -.6px; }
  .detail-title-link { display: block; overflow-wrap: anywhere; }
  .title-external { margin-left: 6px; }
  .attribute-list { display: flex; flex-direction: column; gap: 5px; margin: 0 0 10px; }
  .attribute-row { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border-radius: 13px; }
  .attribute-label { margin: 0; font-size: 11px; }
  .attribute-value { justify-content: flex-end; flex-wrap: nowrap; gap: 7px; font-size: 12px; }
  .attribute-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attribute-row .rarity-badge { font-size: 11px; padding: 3px 6px; border-radius: 7px; }
  .detail-price-row { margin: 0; padding-top: 9px; min-height: 43px; }
  .detail-price { font-size: 29px; line-height: 1.2; }
  .detail-info .detail-actions { margin-top: 9px; gap: 8px; }
  .detail-info .detail-actions .button,.detail-actions .card-cart { min-height: 46px; height: 46px; }
  .detail-info .detail-actions .button { border-radius: 14px; font-size: 15px; }
  .detail-actions .card-cart { flex-basis: 46px; width: 46px; }
  .filter-dialog { height: min(690px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-height: calc(100dvh - 24px); padding: 23px 14px 14px; border-radius: 25px; }
  .filter-dialog h2 { margin-bottom: 14px; }
  .filter-search { font-size: 16px; min-height: 46px; }
  .filter-viewport { flex: 1 1 0; height: auto; min-height: 0; scrollbar-width: none; }
  .filter-viewport::-webkit-scrollbar { display: none; }
  .filter-actions { padding-top: 10px; padding-bottom: 0; }
  .filter-option:hover { border-color: transparent; }
  .gift-card { content-visibility: visible; contain: layout style; }
  .gift-card:has(:focus-visible) .gift-visual>img { transform: none; }
  .help-dialog { padding: 32px 22px 22px; }
  .help-dialog h2 { padding-right: 22px; font-size: 25px; }
  .cart-heading .close-button { top: 13px; }
}
@media(max-width:360px) {
  .header { gap: 5px; }
  .header .brand { font-size: 13px; }
  .header .brand-mark { width: 25px; margin-right: 5px; }
  .header nav { font-size: 10px; gap: 7px; }
  .gift-dialog { padding-left: 12px; padding-right: 12px; }
}
@media(max-width:700px) and (max-height:470px) {
  .gift-dialog { width: min(650px,calc(100% - 24px)); }
  .detail-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 15px; align-items: center; }
  .detail-visual { width: 100%; max-height: calc(100dvh - 85px); }
  .detail-info h2 { font-size: 20px; margin-bottom: 7px; }
  .attribute-row { min-height: 33px; padding: 4px 8px; }
}

.detail-info .detail-actions { align-items: center; }
.detail-info .detail-actions .detail-buy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; height: 56px; padding: 6px 15px; border-radius: 18px; line-height: 1.25; }
.detail-info .detail-actions .card-cart { flex: 0 0 56px; width: 56px; height: 56px; min-height: 56px; border-radius: 18px; }
.detail-info .detail-actions .card-cart svg { width: 23px; height: 23px; }
.detail-buy-label { font-size: 17px; font-weight: 650; }
.detail-buy .detail-buy-price { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: #e5f2ff; }
@media(max-width:700px) {
  .gift-dialog { inset: auto 0 max(6px,env(safe-area-inset-bottom)) 0; width: min(480px,calc(100% - 14px)); height: min(86dvh,760px); height: min(86svh,760px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0 auto; padding: 32px 18px 20px; border-radius: 34px; }
  .gift-dialog[open],.gift-dialog[open].is-closing { animation: none; }
  .gift-dialog::backdrop { background: #02040b40; }
  .gift-dialog #gift-detail { height: 100%; }
  .gift-dialog .detail-layout { height: 100%; gap: 14px; justify-content: space-between; }
  .gift-dialog .detail-visual { width: min(100%,clamp(100px,calc(86svh - 310px),320px)); border-radius: 27px; }
  .gift-dialog .detail-info { flex: 0 0 auto; }
  .gift-dialog .attribute-list { margin-bottom: 0; }
  .gift-dialog .detail-info .detail-actions { margin-top: auto; padding-top: 14px; }
  .gift-dialog .detail-info .detail-actions .detail-buy { min-height: 56px; height: 56px; border-radius: 18px; }
  .gift-dialog .detail-buy-label { font-size: 17px; }
  .gift-dialog .detail-actions .card-cart { height: 56px; min-height: 56px; width: 56px; flex-basis: 56px; border-radius: 18px; }
}
@media(max-width:700px) and (max-height:470px) {
  .gift-dialog { height: calc(100dvh - 18px); height: calc(100svh - 18px); }
  .gift-dialog .detail-layout { height: 100%; }
  .gift-dialog .detail-visual { width: 100%; }
  .gift-dialog .detail-info .detail-actions .detail-buy { min-height: 48px; height: 48px; padding: 6px 10px; }
  .gift-dialog .detail-info .detail-actions .card-cart { min-height: 48px; height: 48px; width: 48px; flex-basis: 48px; }
  .gift-dialog .detail-buy-label { font-size: 14px; }
  .gift-dialog .detail-buy-price { font-size: 12px; }
}

/* Paint touch-page glows on the document canvas, including browser safe areas.
   A fixed full-screen decoration is clipped by Safari's translucent toolbars. */
@media (max-width:700px), (any-pointer:coarse) {
  html {
    background-color: var(--bg);
    background-image: radial-gradient(ellipse 115vw 75% at -25vw -12%,#185df180 0%,#185df120 44%,transparent 75%),radial-gradient(ellipse 110vw 75% at 128vw 115%,#185df178 0%,#185df120 44%,transparent 75%);
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  body::before { content: none; }
}

/* Collection and number stay one compact identity, rather than opposite edges. */
.gift-collection { flex-wrap: nowrap; }
.collection-name { flex: 0 1 auto; }
.hero-meta-row,.cart-item-identity { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.hero-meta-row .hero-meta-label,.cart-item-collection { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-meta-row .hero-meta-number { flex: none; margin: 0; }
.cart-item-number { flex: none; white-space: nowrap; }
.detail-visual.can-replay { cursor: pointer; }
.detail-visual.can-replay:focus-visible { outline: 2px solid #8acbff; outline-offset: -4px; }

@media(max-width:700px) {
  .gift-dialog,.cart-dialog { touch-action: pan-y pinch-zoom; overscroll-behavior: contain; transition: none; }
  .gift-dialog.is-dragging,.cart-dialog.is-dragging { will-change: transform; }
  .gift-dialog .detail-collection { justify-content: center; padding: 0; text-align: center; }
  .gift-dialog .detail-info h2 { justify-content: center; margin-right: 0; text-align: center; }
  .gift-card,.hero-feature,.detail-visual,.gift-dialog .detail-info,.cart-dialog button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  .gift-card img,.hero-feature img,.detail-visual img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
  .gift-card:has(:focus-visible) { transform: none; border-color: #c0d8ff26; border-top-color: #daeaff30; box-shadow: inset 0 1px #f3f7fe05; }
  .gift-card:has(:focus-visible) .gift-price,.gift-card:active .gift-price { background: #185df1; }
  .card-select:active { background: transparent; }
  .attribute-row:hover:enabled { background: #111e30; border-color: #c9dfff20; }
  .detail-title-link:hover { color: inherit; }
  .gift-card.is-touch-pressed,.gift-card.touch-release { z-index: 1; }
  .gift-dialog button:disabled,.cart-dialog button:disabled { pointer-events: none; }
  .cart-dialog { inset: auto 0 max(6px,env(safe-area-inset-bottom)) 0; width: min(480px,calc(100% - 14px)); height: min(90dvh,840px); height: min(90svh,840px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0 auto; border-radius: 30px; }
  .cart-dialog[open],.cart-dialog[open].is-closing { animation: none; }
  .cart-heading { padding-top: 30px; }
  .cart-heading::before { content: ''; position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 38px; height: 4px; border-radius: 4px; background: #86b9e4; }
  .cart-items { -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; scrollbar-width: none; }
  .cart-items::-webkit-scrollbar { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .gift-dialog[open],.gift-dialog[open].is-closing,.cart-dialog[open],.cart-dialog[open].is-closing { animation-duration: .01ms; }
}

/* Continuous JS springs drive transform. No class toggles can restart entry. */
@media(max-width:700px) {
  .gift-dialog[open],.gift-dialog[open].is-closing,.cart-dialog[open],.cart-dialog[open].is-closing { animation: none !important; }
  .gift-dialog.is-closing,.cart-dialog.is-closing { pointer-events: none; }
  .filter-apply:hover:enabled { background: #185df1; }
  .filter-actions .button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  .cart-dialog { height: min(94dvh,860px); height: min(94svh,860px); }
  .cart-heading { padding: 19px 14px 9px; }
  .cart-heading h2 { font-size: 18px; line-height: 22px; }
  .cart-heading::before { top: 7px; height: 3px; width: 34px; }
  .cart-heading .close-button { top: 3px; right: 3px; width: 44px; height: 44px; background: transparent; }
  .cart-heading .close-button svg { width: 19px; height: 19px; }
  .cart-items { padding: 2px 12px; }
  .cart-item { gap: 5px; padding: 5px 0; min-height: 57px; }
  .cart-item-open { gap: 9px; }
  .cart-thumb { width: 46px; height: 46px; border-radius: 10px; }
  .cart-item-meta { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 5px; flex: 1; align-items: baseline; }
  .cart-item-identity,.cart-item-meta strong { grid-column: 1/-1; }
  .cart-item-identity { gap: 4px; line-height: 12px; }
  .cart-item-collection,.cart-item-number { font-size: 9px; }
  .cart-item-meta strong { font-size: 12px; line-height: 16px; }
  .cart-item-price { grid-column: 1; margin-top: 1px; font-size: 12px; line-height: 16px; white-space: nowrap; }
  .cart-item-stock { grid-column: 2; margin: 0; font-size: 9px; line-height: 13px; white-space: nowrap; }
  .cart-remove { flex-basis: 36px; width: 36px; height: 44px; font-size: 21px; background: transparent; }
  .cart-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(136px,1fr); align-items: center; gap: 6px 12px; padding: 9px 14px 10px; }
  .cart-total-row { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 0; }
  .cart-total-row>span { font-size: 10px; line-height: 14px; }
  .cart-total-row strong { font-size: 20px; line-height: 25px; }
  .cart-status { grid-column: 1/-1; grid-row: 2; min-height: 0; margin: 0; font-size: 10px; line-height: 13px; }
  .cart-status:empty { display: none; }
  .cart-caption { display: none; }
  .cart-tools { grid-column: 1/-1; grid-row: 3; align-items: center; min-height: 26px; gap: 5px 12px; }
  .cart-tools .text-button { padding: 6px 0; font-size: 10px; line-height: 14px; }
}

/* Touch sheets are based on input capability, including landscape phones and iPads. */
@media (max-width:700px), (any-pointer:coarse) {
  html { overscroll-behavior-y: none; }
  html:has(dialog[open]) { overflow: hidden; }
  .gift-dialog,.cart-dialog { touch-action: pan-y pinch-zoom; overscroll-behavior: contain; transition: none; }
  .gift-dialog {
    position: fixed; inset: auto max(7px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
    width: min(560px,calc(100% - 14px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: min(86dvh,760px); height: min(86svh,760px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0 auto; padding: 32px 18px 20px; overflow: hidden;
    border-radius: 34px; background: #0b1422; box-shadow: 0 12px 44px #00000055;
  }
  .gift-dialog[open],.gift-dialog[open].is-closing,.cart-dialog[open],.cart-dialog[open].is-closing { animation: none !important; }
  .gift-dialog.is-closing,.cart-dialog.is-closing { pointer-events: none; }
  .gift-dialog::backdrop { background: #02040b40; }
  .gift-dialog>.close-button { inset: 2px auto auto 50%; transform: translateX(-50%); display: grid; place-items: center; width: 70px; height: 28px; padding: 0; border: 0; border-radius: 0; background: none; }
  .gift-dialog>.close-button svg { display: none; }
  .gift-dialog>.close-button::after { content: ''; display: block; width: 38px; height: 4px; border-radius: 4px; background: #86b9e4; }
  .gift-dialog>.close-button:active::after { background: #c3e5ff; }
  .gift-dialog:focus,.cart-dialog:focus { outline: none; }
  .gift-dialog #gift-detail { height: 100%; min-height: 0; }
  .gift-dialog .detail-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 14px; justify-content: space-between; overflow-y: auto; overscroll-behavior: contain; }
  .gift-dialog .detail-visual { align-self: center; flex: none; min-height: 0; width: min(100%,clamp(100px,calc(86svh - 310px),320px)); aspect-ratio: 1; border-radius: 27px; background: #10223a; }
  .gift-dialog .detail-info { contain: none; flex: 0 0 auto; min-width: 0; min-height: 0; padding: 0; overflow: visible; }
  .gift-dialog .detail-collection { justify-content: center; margin: 0 0 4px; padding: 0; gap: 8px; font-size: 12px; line-height: 17px; text-align: center; }
  .gift-dialog .detail-info h2 { display: block; margin: 0 0 12px; font-size: 24px; line-height: 1.18; letter-spacing: -.6px; text-align: center; }
  .gift-dialog .detail-title-link { display: block; overflow-wrap: anywhere; }
  .gift-dialog .attribute-list { display: flex; flex-direction: column; gap: 5px; margin: 0; }
  .gift-dialog .attribute-row { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border-radius: 13px; }
  .gift-dialog .attribute-label { margin: 0; font-size: 11px; }
  .gift-dialog .attribute-value { justify-content: flex-end; flex-wrap: nowrap; gap: 7px; font-size: 12px; }
  .gift-dialog .attribute-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gift-dialog .attribute-row .rarity-badge { font-size: 11px; padding: 3px 6px; border-radius: 7px; }
  .gift-dialog .detail-info .detail-actions { flex: none; margin-top: auto; padding-top: 14px; gap: 8px; }
  .gift-dialog .detail-info .detail-actions .detail-buy { min-height: 56px; height: 56px; border-radius: 18px; }
  .gift-dialog .detail-buy-label { font-size: 17px; }
  .gift-dialog .detail-buy-price { font-size: 14px; }
  .gift-dialog .detail-actions .card-cart { height: 56px; min-height: 56px; width: 56px; flex-basis: 56px; border-radius: 18px; }
  .gift-card,.hero-feature,.detail-visual,.gift-dialog .detail-info { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .cart-dialog {
    inset: auto max(7px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
    width: min(560px,calc(100% - 14px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: min(94dvh,860px); height: min(94svh,860px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0 auto; border-radius: 30px;
  }
  .cart-heading::before { content: ''; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 34px; height: 3px; border-radius: 4px; background: #86b9e4; }
  .cart-items { -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; }
}

/* Keep the mobile title and market total on the same text baseline. */
@media (max-width:700px) {
  .section-heading { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
  .section-heading h2 { flex: 0 1 auto; min-width: 0; font-size: clamp(16px,4.5vw,22px); line-height: 1.2; letter-spacing: -.65px; white-space: nowrap; }
  .section-heading .market-total { flex: 0 0 auto; align-self: baseline; font-size: clamp(9px,2.5vw,11px); line-height: 1.2; white-space: nowrap; }
}
dialog[open] { will-change: auto; }
dialog[open]::backdrop { will-change: auto; }
@media (max-width:700px) and (orientation:landscape), (any-pointer:coarse) and (orientation:landscape) {
  .gift-dialog { width: min(900px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); height: min(600px,calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); height: min(600px,calc(100svh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); padding-top: 30px; padding-bottom: 12px; }
  .gift-dialog .detail-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: minmax(0,1fr); gap: 15px; align-items: center; overflow: hidden; }
  .gift-dialog .detail-visual { width: min(100%,calc(100svh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); max-width: 100%; max-height: 100%; justify-self: center; }
  .gift-dialog .detail-info { display: flex; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; }
  .gift-dialog .detail-collection,.gift-dialog .detail-info h2 { flex: none; }
  .gift-dialog .detail-info h2 { font-size: 20px; margin-bottom: 7px; }
  .gift-dialog .attribute-list { flex: 1 1 auto; min-height: 33px; overflow-y: auto; overscroll-behavior: contain; }
  .gift-dialog .attribute-row { flex: none; min-height: 33px; padding: 4px 8px; }
  .gift-dialog .detail-info .detail-actions { margin-top: 0; padding-top: 8px; }
  .gift-dialog .detail-info .detail-actions .detail-buy,.gift-dialog .detail-info .detail-actions .card-cart { min-height: 48px; height: 48px; }
  .gift-dialog .detail-info .detail-actions .card-cart { width: 48px; flex-basis: 48px; }
  .gift-dialog .detail-buy-label { font-size: 14px; }
  .gift-dialog .detail-buy-price { font-size: 12px; }
}

/* The dimmer belongs to the scrolling document, not the browser's visual viewport.
   It is deliberately not transformed/promoted: long catalogues must not allocate
   one full-document GPU texture. Native dialog still owns focus and inertness. */
@media (max-width:700px), (any-pointer:coarse) {
  body { position: relative; }
  body::after {
    content: ''; position: absolute; inset: 0; z-index: 1000;
    background: transparent; pointer-events: none;
    transition: background-color .24s cubic-bezier(.2,0,.2,1);
  }
  body:has(dialog[open]:not(.is-closing))::after { background: #02040bc9; }
  body:has(.gift-dialog[open]:not(.is-closing))::after { background: #02040b40; }
  dialog::backdrop,dialog[open]::backdrop,dialog[open].is-closing::backdrop {
    background: transparent; animation: none; will-change: auto;
  }
}

/* Grid rows have deterministic height; native scroll anchoring is replaced by an item anchor. */
.grid.is-windowed { overflow-anchor: none; }
.grid.is-windowed>.gift-card { content-visibility: visible; contain: layout style; }

/* Appending rows must not make the browser follow the footer as an anchor. */
html { overflow-anchor: none; }

/* Compact input text while preserving the native 16px editing size on iOS. */
.input-text { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.search > .input-text { height: 100%; }
.search:focus-within,.price-filter label:focus-within { border-color: #72baff; box-shadow: none; outline: none; }
.search input:focus,.price-filter input:focus { outline: none; box-shadow: none; }
.filter-search:focus,.filter-search:focus-visible { border-color: #72baff; outline: none; box-shadow: none; }
@media(max-width:700px), (any-pointer:coarse) {
  .search .input-text > input,.price-filter .input-text > input {
    font-size: 16px; flex: 0 0 calc(100% / .875); width: calc(100% / .875);
    transform: scale(.875); transform-origin: left center;
  }
  .price-filter label,.price-filter .price-max-suffix { font-size: 14px; }
}

/* Match action spacing to the attribute rows. */
.gift-dialog .detail-info .detail-actions { gap: 6px; }
@media(max-width:700px), (any-pointer:coarse) {
  .gift-dialog .detail-info .detail-actions { gap: 5px; }
}

/* Share the existing purchase press feedback with touch tablets too. */
@media(max-width:700px), (any-pointer:coarse) {
  .motion-press { isolation: isolate; transition: none !important; animation: none !important; }
  .motion-press:not(.gift-card):not(.hero-feature) { position: relative; }
  .motion-press::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: #f3f7fe; opacity: var(--press-glow,0); pointer-events: none; will-change: opacity; }
  .hero-link,.card-cart { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* Stable touch sheets: omit the outer shadow in every interaction state. */
@media(max-width:700px), (any-pointer:coarse) {
  .gift-dialog,.cart-dialog { box-shadow: none; }
}

/* Independent purchases: one right-hand action per gift, a quiet compact total. */
.cart-dialog { width: min(460px,100%); }
.cart-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 13px 0; }
.cart-item-open { width: 100%; gap: 12px; cursor: pointer; }
.cart-item .cart-thumb { width: 64px; height: 64px; border-radius: 14px; }
.cart-item .cart-item-meta { display: flex; flex-direction: column; flex: 1; align-items: stretch; gap: 2px; min-width: 0; }
.cart-item .cart-item-identity { line-height: 15px; gap: 4px; }
.cart-item .cart-item-collection,.cart-item .cart-item-number { font-size: 10px; }
.cart-item .cart-item-meta strong { font-size: 14px; line-height: 19px; font-weight: 600; }
.cart-item .cart-item-price { margin-top: 1px; font-size: 14px; line-height: 18px; }
.cart-item .cart-item-stock { white-space: normal; margin-top: 2px; font-size: 10px; line-height: 14px; }
.cart-item-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.cart-item-buy { display: inline-flex; align-items: center; justify-content: center; width: 82px; min-height: 44px; margin: 0; padding: 9px 8px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 18px; text-align: center; white-space: nowrap; }
.cart-item .cart-remove { width: 30px; height: 44px; flex-basis: 30px; padding: 0; background: transparent; font-size: 23px; }
.cart-item-buy:focus-visible,.cart-remove:focus-visible,.cart-item-open:focus-visible { outline: 2px solid #83c5ff; outline-offset: 2px; }
.cart-summary { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 15px 20px max(14px,env(safe-area-inset-bottom)); }
.cart-summary .cart-total-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-summary .cart-total-row>span { font-size: 13px; line-height: 20px; }
.cart-summary .cart-total-row strong { font-size: 23px; line-height: 29px; }
.cart-summary .cart-status { min-height: 0; margin: 0; font-size: 11px; line-height: 16px; }
.cart-summary .cart-tools { min-height: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.cart-summary .cart-tools .text-button { padding: 6px 0; font-size: 11px; line-height: 16px; }
@media(max-width:700px), (any-pointer:coarse) {
  .cart-dialog { width: min(480px,calc(100% - 14px)); }
  .cart-items { padding: 3px 14px; }
  .cart-item { gap: 8px; min-height: 82px; padding: 11px 0; }
  .cart-item-open { gap: 9px; }
  .cart-item .cart-thumb { width: 56px; height: 56px; border-radius: 12px; }
  .cart-item-actions { gap: 4px; }
  .cart-item-buy { width: 78px; min-height: 44px; border-radius: 13px; font-size: 13px; }
  .cart-item .cart-remove { width: 28px; flex-basis: 28px; }
  .cart-summary { gap: 5px; padding: 11px 16px max(11px,env(safe-area-inset-bottom)); }
  .cart-summary .cart-total-row strong { font-size: 22px; line-height: 28px; }
  .cart-item-buy,.cart-item-open { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
@media(max-width:359px) {
  .cart-items { padding-inline: 11px; }
  .cart-item { gap: 5px; }
  .cart-item-open { gap: 7px; }
  .cart-item .cart-thumb { width: 46px; height: 46px; }
  .cart-item-buy { width: 70px; font-size: 12px; }
  .cart-item .cart-item-collection,.cart-item .cart-item-number { font-size: 9px; }
}

/* Upper-page typography. Product cards retain their existing Inter styling. */
.header,.hero-copy,.section-heading,.toolbar,.price-filter,.collection-shortcuts,.filter-dialog,.footer .brand {
  font-family: Onest,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-kerning: normal;
}
.hero .eyebrow { font-family: Onest,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.header .brand,.footer .brand { font-weight: 500; letter-spacing: 0; }
.hero h1 { font-weight: 400; letter-spacing: -.01em; }
.section-heading h2 { font-weight: 450; letter-spacing: -.02em; }


/* Three base colours; secondary tones use opacity, never a glossy fill. */
:root {
  --color-void: #02040b;
  --color-night: #031130;
  --color-blue: #185df1;
  --color-light: #f3f7fe;
  --bg: var(--color-void);
  --panel: var(--color-night);
  --text: var(--color-light);
  --muted: #f3f7fead;
  --line: #f3f7fe26;
  --accent: var(--color-blue);
  --control-line: #f3f7fe4d;
  --control-hover: #185df121;
  --control-selected: var(--control-hover);
  --sheet-background: radial-gradient(ellipse 78% 64% at 0 100%,#185df12e,transparent 76%),radial-gradient(ellipse 78% 64% at 100% 100%,#185df129,transparent 76%),linear-gradient(145deg,#031130f2 0%,#02040bfa 62%);
}

.search,.select-trigger,.select-wrap select,.price-filter label,.filter-search,
.hero-link,.button-light,.page-button,.button-muted,.collection-button,
.header .brand-mark,.header .browse-trigger,.profile-link,
.cart-trigger.browse-trigger,.card-cart,.card-cart:hover {
  background: transparent;
  border-color: var(--control-line);
  color: #f3f7fedb;
  box-shadow: none;
}
.search,.select-trigger,.select-wrap select,.price-filter label,.filter-search,
.hero-link,.button,.page-button,.cart-item-buy,
.detail-info .detail-actions .detail-buy,
.gift-dialog .detail-info .detail-actions .detail-buy { border-radius: 999px; }
.header .browse-trigger,.profile-link { border-radius: 999px; }
.header .browse-trigger { width: 34px; height: 34px; flex: 0 0 34px; }
.close-button { border-radius: 999px; }
.hero-link { min-height: 42px; border-width: 1px; border-style: solid; text-align: center; }
.footer>a[href="#catalogue"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 17px; border: 1px solid var(--control-line);
  border-radius: 999px; background: transparent; color: #f3f7fedb;
  box-shadow: none;
}
.hero-link:hover,.button-light:hover,.footer>a[href="#catalogue"]:hover,
.select-trigger[aria-expanded=true] {
  background: var(--control-hover);
  border-color: var(--control-active-line);
  color: var(--color-light);
}
.search:focus-within,.price-filter label:focus-within,
.filter-search:focus,.filter-search:focus-visible,.select-trigger:focus-visible {
  border-color: var(--color-blue); outline: none; box-shadow: none;
}
.search input,.price-filter input,.price-filter .price-max-suffix { color: var(--color-light); }
input::placeholder { color: #f3f7fe8a; }
.select-chevron { border-color: #f3f7fe99; }
.search svg,.brand-mark svg { stroke: #f3f7fec9; }
.select-wrap select option { background: var(--color-night); }

.header { border-bottom-color: var(--line); }
.header nav,.brand-accent,.hero h1>span { color: #f3f7fee0; }
.hero-note,.hero-meta-label,.hero-meta-number,.market-total,.count,
.collection-caption,.gift-collection,.gift-number,.cart-item-identity,
.cart-item-stock,.attribute-label,.detail-collection,.detail-number,
.detail-caption,.filter-option-note,.cart-empty span { color: var(--muted); }
.hero .eyebrow,.help-dialog .eyebrow,.detail-info .eyebrow,
.hero-meta strong,.cart-item-price,.cart-total-row strong,.detail-price,
.attribute-value,.filter-option,.filter-checkbox,.close-button { color: var(--color-light); }
.price-filter-label { color: #f3f7fec9; }

.gift-dialog,.filter-dialog,.cart-dialog,.help-dialog,.select-menu,.browse-panel {
  background: var(--sheet-background);
  border-color: var(--control-line);
}
.select-menu,.browse-panel { border-radius: 22px; }
.filter-option,.gift-dialog .attribute-row,.gift-dialog .attribute-row:hover:enabled {
  background: transparent; border-color: var(--line); box-shadow: none;
}
.filter-option { border-radius: 22px; }
.filter-option[aria-checked=true],.collection-button[aria-pressed=true],
.select-option.is-active,.browse-panel>button[aria-pressed=true] {
  background: #185df126; border-color: #185df1bf; color: var(--color-light);
}
.filter-checkbox { border-color: #f3f7fe66; }
.filter-option[aria-checked=true] .filter-checkbox,
.card-cart.in-cart,.card-cart.in-cart:hover,.cart-count,
.gift-price,.filter-apply,.rarity-badge {
  background: var(--color-blue); color: var(--color-light);
}
.card-cart.in-cart,.card-cart.in-cart:hover,.rarity-badge {
  border-color: #f3f7fe40;
}
.filter-apply:hover:enabled,.gift-card:has(:focus-visible) .gift-price,
.gift-card:active .gift-price { background: var(--color-blue); }
.gift-card { background: #031130e6; border-color: var(--line); box-shadow: none; }
.gift-card:has(:focus-visible) { border-color: #185df1bf; box-shadow: none; }
.hero-feature { background: #031130eb; border-color: var(--line); }
.cart-summary { background: #03113080; }
.gift-skeleton { background: #031130b3; border-color: var(--line); }
.skeleton-image { background: #f3f7fe08; }
.skeleton-line { background: #f3f7fe14; }
.trait-thumbnail { background: #f3f7fe08; }
.cart-remove { color: #f3f7fead; }

@media(hover:hover) and (pointer:fine) {
  .select-trigger:hover,.header .browse-trigger:hover,.profile-link:hover,
  .card-cart:hover,.page-button:hover:enabled,.collection-button:hover,
  .browse-panel>button:hover,.gift-dialog .attribute-row:hover:enabled {
    background: var(--control-hover); border-color: var(--control-active-line); color: var(--color-light);
  }
  .card-cart.in-cart:hover { background: var(--color-blue); }
  .gift-card:hover { border-color: #185df1bf; box-shadow: none; }
  .gift-card:hover .gift-price { background: var(--color-blue); }
  .hero-feature:hover,.hero-feature:focus-visible { background: #031130f5; border-color: #f3f7fe66; }
}

/* Shared feedback: subtle hover, persistent selection remains visible on hover. */
.select-option.is-active { background: var(--control-hover); }
@media(hover:hover) and (pointer:fine) {
  .filter-option:hover { background: var(--control-hover); border-color: var(--control-active-line); }
}
.filter-option[aria-checked=true],.filter-option[aria-checked=true]:hover,
.collection-button[aria-pressed=true],.collection-button[aria-pressed=true]:hover,
.select-option[aria-selected=true],.select-option[aria-selected=true]:hover,
.select-option[aria-selected=true].is-active,
.browse-panel>button[aria-pressed=true],.browse-panel>button[aria-pressed=true]:hover,
.select-trigger[aria-expanded=true],.select-trigger[aria-expanded=true]:hover,
.header .browse-trigger[aria-expanded=true],.header .browse-trigger[aria-expanded=true]:hover,
.card-cart.in-cart,.card-cart.in-cart:hover {
  background: var(--control-selected);
  border-color: var(--control-active-line);
  color: var(--color-light);
}

/* Selected prototype: Deep blue, saved glow 35%, card blue 8%. */
:root {
  --page-blue: #185df159;
  --surface-background: radial-gradient(ellipse 160% 90% at -15% 110%,#185df114,transparent 74%),linear-gradient(145deg,#0d2351ed,#041024ed 64%,#02040bf2);
  --sheet-background: var(--surface-background);
  --control-selected: var(--control-hover);
  --menu-radius: 22px;
}
/* Keep the proven document canvas on touch and viewport layer on desktop. */
body::before {
  background: radial-gradient(ellipse 85vw 67vh at -12vw 128px,var(--page-blue),transparent 75%),radial-gradient(ellipse 75vw 65vh at 105vw calc(128px + 90vh),var(--page-blue),transparent 77%),linear-gradient(135deg,transparent 38%,#185df118 64%,transparent 87%);
}
@media(max-width:700px),(any-pointer:coarse) {
  html {
    background-image: radial-gradient(ellipse 85vw 67% at -12vw 0%,var(--page-blue),transparent 75%),radial-gradient(ellipse 75vw 65% at 105vw 90%,var(--page-blue),transparent 77%),linear-gradient(135deg,transparent 38%,#185df118 64%,transparent 87%);
  }
}
.gift-card,.gift-skeleton,.hero-feature,
.hero-feature:hover,.hero-feature:focus-visible {
  background: var(--surface-background);
  border-color: #185df17a;
  border-top-color: #8eafff66;
}
.gift-dialog,.filter-dialog,.cart-dialog,.help-dialog,.select-menu,.browse-panel {
  border-color: #185df17a;
  border-top-color: #8eafff66;
}
.gift-card:has(:focus-visible),.hero-feature:focus-visible { border-color: #185df1bf; }
@media(hover:hover) and (pointer:fine) {
  .gift-card:hover,.hero-feature:hover { border-color: #185df1bf; }
}
/* Concentric curves: inner radius = outer radius - border - padding. */
.select-menu { --menu-padding: 6px; border-radius: var(--menu-radius); }
.browse-panel { --menu-padding: 7px; border-radius: var(--menu-radius); }
.select-option,.browse-panel>button {
  border-radius: calc(var(--menu-radius) - var(--menu-padding) - 1px);
}

/* White-grey card edges, matching the unfilled form controls. */
.gift-card,.gift-skeleton,.hero-feature,.hero-feature:hover,.hero-feature:focus-visible {
  border-color: var(--control-line);
}
.gift-card:has(:focus-visible) { border-color: #f3f7fe80; }
@media(hover:hover) and (pointer:fine) {
  .gift-card:hover,.hero-feature:hover { border-color: #f3f7fe80; }
}
/* A broad blue ribbon fading into black, following the palette reference. */
body::before {
  background: radial-gradient(ellipse 95vw 55vh at 12vw calc(128px + 84vh),#185df1b3 0%,#185df14d 40%,transparent 76%),radial-gradient(ellipse 55vw 90vh at 102vw calc(128px + 58vh),#185df173 0%,#185df126 45%,transparent 78%),linear-gradient(145deg,#03113038 0%,#02040b00 55%,#03113038 100%);
}
@media(max-width:700px),(any-pointer:coarse) {
  html {
    background-image: radial-gradient(ellipse 125vw 55% at 0% 80%,#185df1b3 0%,#185df14d 40%,transparent 76%),radial-gradient(ellipse 90vw 80% at 112% 53%,#185df173 0%,#185df126 45%,transparent 78%),linear-gradient(145deg,#03113038 0%,#02040b00 55%,#03113038 100%);
  }
}

/* Pale white-blue edge; hover and focused gift share a brighter blue rim. */
.gift-card,.gift-skeleton,.hero-feature { border-color: #bfdcff66; }
.gift-card:has(:focus-visible),.hero-feature:focus-visible { border-color: #90caffcc; }
@media(hover:hover) and (pointer:fine) {
  .gift-card:hover,.hero-feature:hover { border-color: #90caffcc; }
}
/* Reference: blue at upper left / lower right, with a near-black centre. */
body::before {
  background: radial-gradient(ellipse 74vw 75vh at -7vw calc(128px - 8vh),#185df1b3 0%,#185df142 40%,transparent 76%),radial-gradient(ellipse 67vw 80vh at 110vw calc(128px + 110vh),#185df1c2 0%,#185df142 40%,transparent 76%);
}
@media(max-width:700px),(any-pointer:coarse) {
  html {
    background-image: radial-gradient(ellipse 110vw 63% at -20% -8%,#185df1b3 0%,#185df142 40%,transparent 76%),radial-gradient(ellipse 105vw 67% at 120% 112%,#185df1c2 0%,#185df142 40%,transparent 76%);
  }
}

/* Uniform reference-blue outline: one colour on all four sides. */
.gift-card,.gift-skeleton,.hero-feature,.hero-feature:hover,
.gift-dialog,.filter-dialog,.cart-dialog,.help-dialog,.select-menu,.browse-panel {
  border-color: #365385;
}
.gift-card:has(:focus-visible),.hero-feature:focus-visible { border-color: var(--control-active-line); }
@media(hover:hover) and (pointer:fine) {
  .gift-card:hover,.hero-feature:hover { border-color: var(--control-active-line); }
}

/* Quieter blue outlines, shared by controls and card surfaces. */
:root {
  --control-line: #5276a15c;
  --control-active-line: #185df18c;
  --line: #5d7eaa33;
  --card-surface-glow: radial-gradient(ellipse 160% 90% at -15% 110%,#185df114,transparent 74%);
  --card-surface-fill: linear-gradient(145deg,#0d2351ed,#041024ed 64%,#02040bf2);
}
.filter-checkbox { border-color: #5276a17a; }
.rarity-badge { border-color: #5276a15c; }
.close-button { border-color: var(--control-line); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline-color: #6d98c9; }
.select-chevron { border-color: #7b9bc099; }
.gift-card,.gift-skeleton,.hero-feature,.hero-feature:hover,
.gift-dialog,.filter-dialog,.cart-dialog,.help-dialog,.select-menu,.browse-panel {
  --edge-corner: #263d5e;
  --edge-side: #365385;
  border-color: transparent;
  background: var(--card-surface-glow) padding-box,var(--card-surface-fill) padding-box,
    conic-gradient(from 45deg,var(--edge-corner),var(--edge-side) 45deg,var(--edge-corner) 90deg,var(--edge-side) 135deg,var(--edge-corner) 180deg,var(--edge-side) 225deg,var(--edge-corner) 270deg,var(--edge-side) 315deg,var(--edge-corner)) border-box;
}
.gift-card:has(:focus-visible),.hero-feature:focus-visible {
  --edge-corner: #173158; --edge-side: var(--control-active-line);
  border-color: transparent;
}
@media(hover:hover) and (pointer:fine) {
  .gift-card:hover,.hero-feature:hover {
    --edge-corner: #173158; --edge-side: var(--control-active-line);
    border-color: transparent;
  }
}
@media(prefers-reduced-motion:reduce) {
  body::after { transition: none; }
}

/* Facets above; search, price range and sorting share a compact desktop row. */
.toolbar.facet-toolbar {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px; margin-bottom: 8px;
}
.catalogue-query-row {
  display: grid; grid-template-columns: minmax(0,1fr) 280px 206px;
  align-items: start; gap: 8px; min-width: 0; margin: 0 0 14px;
  font-family: Onest,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-kerning: normal;
}
.catalogue-query-row>.search { grid-column: 1; height: 48px; min-width: 0; }
.catalogue-query-row>.price-filter {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  grid-column: 2; align-items: start; gap: 4px 8px; margin: 0; min-width: 0;
}
.catalogue-query-row .price-filter label {
  width: 100%; min-width: 0; height: 48px; min-height: 48px;
  padding: 9px 11px; gap: 7px;
}
.catalogue-query-row .price-filter .price-max-suffix { font-size: 12px; }
.catalogue-query-row #price-reset {
  grid-column: 1/-1; justify-self: end; padding: 0 3px;
  font-size: 11px; line-height: 16px;
}
.catalogue-query-row>.sort-wrap { grid-column: 3; min-width: 0; }
.catalogue-query-row .sort-wrap .select-trigger,.catalogue-query-row .sort-wrap select {
  width: 100%; height: 48px; min-height: 48px;
}
@media(min-width:701px) and (max-width:959px) {
  .catalogue-query-row>.search { grid-column: 1/-1; }
}
@media(max-width:700px) {
  .toolbar.facet-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .catalogue-query-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-bottom: 12px; }
  .catalogue-query-row>.search,.catalogue-query-row>.price-filter,.catalogue-query-row>.sort-wrap { grid-column: 1/-1; }
  .catalogue-query-row .price-filter .price-max-suffix { font-size: 14px; }
}

/* A single quiet glass panel, with darker wells for input inside it. */
.catalogue-controls {
  --control-well: linear-gradient(180deg,#02040b8c,#0311305c);
  position: relative; z-index: 2; min-width: 0; padding: 12px;
  margin-bottom: 14px; border: 1px solid #5276a145; border-radius: 26px;
  background: radial-gradient(ellipse 75% 140% at 0 0,#185df114,transparent 72%),linear-gradient(145deg,#0c1936a6,#03113066 55%,#02040b99);
  box-shadow: inset 0 1px #b3d4ff0d,inset 0 -1px #185df10a,0 0 22px #185df10a;
}
.catalogue-controls .catalogue-query-row { margin-bottom: 0; }
.catalogue-controls .search,.catalogue-controls .select-trigger,
.catalogue-controls .select-wrap select,.catalogue-controls .price-filter label {
  background: var(--control-well); border-color: var(--control-line);
  box-shadow: inset 0 1px 3px #00000030,inset 0 -1px #9bc7ff08;
}
.catalogue-controls .select-trigger[aria-expanded=true] {
  background: linear-gradient(var(--control-selected),var(--control-selected)),var(--control-well);
  border-color: var(--control-active-line);
}
@media(hover:hover) and (pointer:fine) {
  .catalogue-controls .select-trigger:hover:enabled,.catalogue-controls .search:hover,.catalogue-controls .price-filter label:hover {
    background: linear-gradient(var(--control-hover),var(--control-hover)),var(--control-well);
    border-color: var(--control-active-line);
  }
  .catalogue-controls .select-trigger[aria-expanded=true]:hover {
    background: linear-gradient(var(--control-selected),var(--control-selected)),var(--control-well);
  }
}
.catalogue-controls .search:focus-within,.catalogue-controls .price-filter label:focus-within {
  border-color: var(--color-blue);
}
@media(max-width:700px) {
  .catalogue-controls { padding: 9px; border-radius: 23px; margin-bottom: 12px; }
}

/* Approved design: material.css */
/* 2026-11-03: shared frosted glass. Card geometry, image artwork, purchase
   buttons and the existing sheet gesture/animation system are preserved. */
:root {
  --color-night: #031130;
  --color-blue: #185df1;
  --color-light: #f3f7fe;
  --glass-edge: rgb(72 125 195 / .36);
  --glass-edge-top: rgb(85 142 218 / .38);
  --glass-shadow: inset 0 1px 0 rgb(71 129 211 / .09),inset 0 -1px 0 rgb(24 93 241 / .07),0 12px 32px rgb(0 0 0 / .15);
  --glass-fill:
    url('/surface-grain-70dd2855ce5a.svg'),
    radial-gradient(ellipse 90% 110% at 100% 0%,rgb(24 93 241 / .12),transparent 72%),
    linear-gradient(180deg,rgb(24 93 241 / .035),transparent 35%,rgb(24 93 241 / .035)),
    linear-gradient(rgb(3 17 48 / .43),rgb(3 17 48 / .43));
}
html {
  background-color: #02040b;
  background-image: none;
}
body.material-preview {
  position: relative;
  isolation: isolate;
  background: transparent;
}
body.material-preview::before { content: none; }
.scene-light {
  position: absolute;
  inset: 0;
  height: auto;
  max-height: 2100px;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
  background:
    radial-gradient(ellipse 36% 34% at 47% 30%,rgb(2 4 11 / .94),transparent 76%),
    radial-gradient(ellipse 38% 18% at 102% 6%,rgb(35 110 245 / .18),transparent 74%),
    radial-gradient(ellipse 70% 31% at 100% 12%,rgb(24 93 241 / .88),rgb(24 93 241 / .24) 45%,transparent 75%),
    radial-gradient(ellipse 52% 30% at -8% 51%,rgb(24 93 241 / .77),rgb(24 93 241 / .18) 48%,transparent 77%),
    radial-gradient(ellipse 43% 23% at 102% 85%,rgb(24 93 241 / .34),transparent 76%);
}
/* One continuous frosted plane. Highlights share the light from the scene. */
.catalogue-controls {
  --control-line: rgb(145 184 241 / .26);
  --control-active-line: rgb(76 143 255 / .82);
  --control-hover: rgb(24 93 241 / .10);
  --control-selected: rgb(24 93 241 / .10);
  padding: 14px;
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-bottom-color: rgb(112 168 248 / .22);
  border-radius: 31px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
.catalogue-controls .toolbar.facet-toolbar { gap: 9px; margin-bottom: 9px; }
.catalogue-controls .catalogue-query-row {
  gap: 9px;
  padding: 0;
  margin: 0;
  border: 0;
  grid-template-columns: minmax(0,1fr) 296px 206px;
}
.catalogue-controls .search,
.catalogue-controls .select-trigger,
.catalogue-controls .select-wrap select,
.catalogue-controls .price-filter label {
  border: 1px solid rgb(51 100 170 / .48);
  border-top-color: rgb(66 119 192 / .47);
  border-bottom-color: rgb(42 83 145 / .32);
  border-radius: 999px;
  background:
    linear-gradient(180deg,#030917,#020610);
  color: #f3f7fe;
  box-shadow:
    inset 0 2px 6px rgb(0 0 0 / .20),
    0 1px 0 rgb(24 93 241 / .045);
  transition: border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.catalogue-controls .search,
.catalogue-controls .select-trigger,
.catalogue-controls .select-wrap select,
.catalogue-controls .price-filter label { min-height: 46px; height: 46px; }
.catalogue-controls .search input,
.catalogue-controls .price-filter input { color: #f3f7fe; font-weight: 400; }
.catalogue-controls input::placeholder { color: rgb(243 247 254 / .56); }
.catalogue-controls .price-filter label>span:first-child {
  color: rgb(243 247 254 / .69);
  font-size: 13px;
  font-weight: 400;
}
.catalogue-controls .price-filter .price-unit,
.catalogue-controls .price-filter .price-max-suffix {
  flex: none;
  color: rgb(243 247 254 / .52);
  font-size: 12px;
  font-weight: 400;
}
.catalogue-controls .price-filter input { font-size: 13px; }
.catalogue-controls .search:focus-within,
.catalogue-controls .price-filter label:focus-within,
.catalogue-controls .select-trigger:focus-visible,
.catalogue-controls .select-trigger[aria-expanded=true],
.catalogue-controls .select-trigger[aria-expanded=true]:hover {
  border-color: #2467e1;
  background:
    radial-gradient(ellipse 65% 180% at 50% 110%,rgb(24 93 241 / .10),transparent 82%),
    linear-gradient(#030a19,#020711);
  box-shadow: inset 0 1px 0 rgb(24 93 241 / .08);
  outline: none;
}
.catalogue-controls .search input:focus,
.catalogue-controls .price-filter input:focus { outline: none; box-shadow: none; }
.catalogue-controls .select-chevron { border-color: rgb(185 211 249 / .64); }
.catalogue-controls .search svg { stroke: rgb(221 235 255 / .85); }
.catalogue-controls .select-trigger:disabled { opacity: .45; }
@media(hover:hover) and (pointer:fine) {
  .catalogue-controls .select-trigger:hover:enabled,
  .catalogue-controls .search:hover,
  .catalogue-controls .price-filter label:hover {
    border-color: rgb(88 154 255 / .74);
    background:
      radial-gradient(ellipse 80% 160% at 50% 130%,rgb(24 93 241 / .09),transparent 80%),
      linear-gradient(#040c1c,#030815);
    box-shadow: inset 0 1px 0 rgb(24 93 241 / .07);
  }
}
/* Translucent cards receive the scene light without per-card backdrop blur. */
.gift-card,.hero-feature,.hero-feature:hover {
  background:
    linear-gradient(180deg,transparent 48%,rgb(24 93 241 / .045)),
    var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.gift-card:has(:focus-visible),.hero-feature:focus-visible {
  border-color: #6caaff;
}
@media(hover:hover) and (pointer:fine) {
  .gift-card:hover,.hero-feature:hover { border-color: #6caaff; }
}
/* A calm frosted header, continuing the same material as the main panel. */
.header {
  background: var(--glass-fill);
  border-bottom-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 rgb(24 93 241 / .04);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto minmax(40px,1fr);
  gap: 22px;
  font-family: Onest,Inter,sans-serif;
}
.header .brand { font-weight: 400; }
.header nav {
  justify-content: center;
  gap: 27px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.header nav .profile-link {
  padding: 8px 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
}
.header .header-actions { justify-self: end; }
.hero-copy h1 {
  font-family: Onest,Inter,sans-serif;
  font-weight: 320;
  letter-spacing: -.035em;
  color: #dbe7f9;
}
.hero h1>span { color: #b9cfee; }
.hero-note { font-weight: 350; }
.section-heading h2 { font-weight: 400; }
@media(max-width:700px) {
  .header {
    height: auto;
    min-height: 96px;
    padding-top: 12px;
    padding-bottom: 10px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
  }
  .header .brand { grid-column: 1; grid-row: 1; }
  .header .header-actions { grid-column: 2; grid-row: 1; }
  .header nav {
    display: flex;
    grid-column: 1/-1;
    grid-row: 2;
    gap: 21px;
    font-size: 11px;
  }
  .header nav .profile-link { display: inline; }
}
/* All windows share a translucent surface. The moving gift/cart sheets avoid
   backdrop blur so dragging does not create a live full-window blur pass. */
.gift-dialog,.filter-dialog,.cart-dialog,.help-dialog,.select-menu,.browse-panel {
  background:
    var(--glass-fill),
    radial-gradient(ellipse 120% 80% at 100% 0%,rgb(24 93 241 / .14),transparent 75%),
    rgb(2 4 11 / .43);
  border-color: var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  box-shadow: var(--glass-shadow);
}
.filter-dialog,.help-dialog,.select-menu,.browse-panel {
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
.filter-dialog .filter-search,
.filter-dialog .filter-option,
.gift-dialog .attribute-row,.gift-dialog .attribute-row:hover:enabled {
  background: linear-gradient(180deg,rgb(24 93 241 / .025),transparent 55%),rgb(0 4 13 / .27);
  border-color: rgb(153 193 248 / .24);
  box-shadow: inset 0 1px 0 rgb(24 93 241 / .045);
}
.filter-dialog .filter-search:focus,
.filter-dialog .filter-search:focus-visible {
  border-color: #2467e1;
  outline: none;
  background: #020713;
}
.filter-dialog .filter-option[aria-checked=true] {
  background: rgb(24 93 241 / .20);
  border-color: rgb(102 167 255 / .72);
}
/* Icon seats receive the same small glass reflection, retaining their shape. */
.header .brand-mark,.header .browse-trigger,
.cart-trigger.browse-trigger,.card-cart:not(.in-cart),
.filter-dialog>.close-button,.help-dialog>.close-button,
.cart-dialog .close-button {
  background: linear-gradient(180deg,rgb(24 93 241 / .04),transparent 55%),rgb(3 17 48 / .45);
  border-color: rgb(72 125 195 / .40);
  box-shadow: inset 0 1px 0 rgb(24 93 241 / .08);
  color: #d5e6ff;
}
@media(min-width:701px) and (hover:hover) and (pointer:fine) {
  .gift-dialog>.close-button {
    background: linear-gradient(180deg,rgb(24 93 241 / .04),transparent 55%),rgb(3 17 48 / .45);
    border-color: rgb(72 125 195 / .40);
    box-shadow: inset 0 1px 0 rgb(24 93 241 / .08);
  }
}
@media(hover:hover) and (pointer:fine) {
  .card-cart:not(.in-cart):hover,.header .browse-trigger:hover,
  .cart-trigger.browse-trigger:hover {
    background: linear-gradient(180deg,rgb(24 93 241 / .05),transparent 55%),rgb(24 93 241 / .17);
    border-color: #6caaff;
  }
  .filter-dialog .filter-option:hover {
    border-color: rgb(122 182 255 / .55);
    background: rgb(24 93 241 / .12);
  }
}
/* The floating cart remains at the lower edge. No sizes or radii are changed. */
@media(min-width:701px) and (max-width:959px) {
  .catalogue-controls .catalogue-query-row { grid-template-columns: minmax(0,1fr) 296px 206px; }
  .catalogue-controls .catalogue-query-row>.search { grid-column: 1/-1; }
}
@media(max-width:700px) {
  html { background-image: none; }
  .scene-light {
    max-height: 2500px;
    background:
      radial-gradient(ellipse 62% 26% at 40% 23%,rgb(2 4 11 / .80),transparent 77%),
      radial-gradient(ellipse 100% 22% at 124% 7%,rgb(24 93 241 / .82),rgb(24 93 241 / .20) 48%,transparent 77%),
      radial-gradient(ellipse 90% 27% at -25% 48%,rgb(24 93 241 / .72),rgb(24 93 241 / .15) 48%,transparent 77%),
      radial-gradient(ellipse 88% 22% at 126% 88%,rgb(24 93 241 / .30),transparent 78%);
  }
  .catalogue-controls { padding: 10px; border-radius: 28px; }
  .catalogue-controls .toolbar.facet-toolbar { gap: 7px; margin-bottom: 7px; }
  .catalogue-controls .catalogue-query-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .catalogue-controls .search,
  .catalogue-controls .select-trigger,
  .catalogue-controls .price-filter label,
  .catalogue-controls .sort-wrap .select-trigger { min-height: 46px; height: 46px; }
  .catalogue-controls .price-filter { gap: 7px; }
  .catalogue-controls .search input,
  .catalogue-controls .price-filter input { font-size: 16px; }
  .catalogue-controls .price-filter label { padding: 9px 12px; gap: 7px; }
}
@media(prefers-reduced-motion:reduce) {
  .catalogue-controls .search,.catalogue-controls .select-trigger,
  .catalogue-controls .price-filter label { transition: none; }
}

/* Approved design: background-reference.css */
/* Two background-only previews; all approved interface materials stay intact. */
.scene-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  max-height: 1180px;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: max(100%, 1440px) auto;
  -webkit-mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%);
}

html:not([data-background="wave"]) .scene-light {
  background-image: url('/scene-flow-e4084b26f1f4.webp');
}



@media (max-width: 700px) {
  .scene-light {
    max-height: 1450px;
    background-size: auto 1100px;
  }
  html:not([data-background="wave"]) .scene-light {
    background-position: 70% top;
  }
  
}

/* Approved design: controls-layout.css */
/* Controls only. Approved gift-card materials and geometry are untouched. */
.header #browse-trigger { border-radius: 10px; }
.catalogue-controls {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.catalogue-controls .toolbar.facet-toolbar { margin: 0; }
.catalogue-controls .catalogue-query-row {
  grid-template-columns: minmax(180px,1fr) 226px 148px;
  align-items: start;
  gap: 8px;
}
.catalogue-controls .catalogue-query-row>.search {
  display: flex;
  align-items: center;
  height: 44px;
  min-height: 44px;
  padding: 0 15px;
  gap: 10px;
}
.catalogue-controls .search>svg { width: 16px; height: 16px; flex: none; }
.catalogue-controls .search>.input-text { display: flex; align-items: center; height: 100%; }
.catalogue-controls .search .input-text>input {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
}
.catalogue-controls .catalogue-query-row>.price-filter {
  position: relative;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 0;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(51 100 170 / .48);
  border-top-color: rgb(66 119 192 / .47);
  border-bottom-color: rgb(42 83 145 / .32);
  border-radius: 999px;
  background: linear-gradient(180deg,#030917,#020610);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .20);
}
.catalogue-controls .catalogue-query-row>.price-filter label,
.catalogue-controls .catalogue-query-row>.price-filter label:hover,
.catalogue-controls .catalogue-query-row>.price-filter label:focus-within {
  position: relative;
  min-height: 42px;
  height: 42px;
  padding: 8px 10px;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.catalogue-controls .price-filter label+label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background: rgb(63 111 178 / .34);
}
.catalogue-controls .catalogue-query-row>.price-filter:focus-within {
  border-color: #2467e1;
  background: linear-gradient(#030a19,#020711);
}
.catalogue-controls .catalogue-query-row .sort-wrap .select-trigger,
.catalogue-controls .catalogue-query-row .sort-wrap select {
  height: 44px;
  min-height: 44px;
  padding-left: 13px;
  padding-right: 27px;
  font-size: 12px;
}
.catalogue-controls .price-filter #price-reset {
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #07152a;
  color: #9ebfe9;
}
.catalogue-controls #price-reset svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.catalogue-controls .price-filter:has(#price-reset:not([hidden])) label:nth-of-type(2) {
  padding-right: 31px;
}
@media(min-width:701px) and (max-width:959px) {
  .catalogue-controls .catalogue-query-row { grid-template-columns: minmax(180px,1fr) 226px 148px; }
  .catalogue-controls .catalogue-query-row>.search { grid-column: 1; }
}
@media(max-width:700px) {
  .catalogue-controls { gap: 7px; }
  .catalogue-controls .catalogue-query-row {
    grid-template-columns: minmax(0,1fr) 108px;
    gap: 7px;
  }
  .catalogue-controls .catalogue-query-row>.search { grid-column: 1/-1; }
  .catalogue-controls .catalogue-query-row>.price-filter { grid-column: 1; }
  .catalogue-controls .catalogue-query-row>.sort-wrap { grid-column: 2; }
  .catalogue-controls .price-filter .price-unit { display: none; }
  .catalogue-controls .catalogue-query-row>.price-filter { grid-template-columns: .74fr 1.26fr; }
  .catalogue-controls .catalogue-query-row>.price-filter label { padding-inline: 9px; gap: 4px; }
  .catalogue-controls .price-filter input,.catalogue-controls .search input { font-size: 16px; }
  .catalogue-controls .catalogue-query-row .sort-wrap .select-trigger { font-size: 11px; padding-left: 11px; padding-right: 25px; }
  .catalogue-controls .toolbar.facet-toolbar { margin: 0; }
}
@media(max-width:370px) {
  .catalogue-controls .catalogue-query-row { grid-template-columns: minmax(0,1fr) 97px; }
  .catalogue-controls .catalogue-query-row>.price-filter label { padding-inline: 7px; }
}

/* Approved design: chrome.css */
/* Full-width header canvas; the existing wrap retains catalogue alignment. */
:root {
  --muted: #83afe7;
  --text-secondary: #9dc6f8;
  --text-quiet: #739ed3;
}
.header-shell {
  position: relative;
  z-index: 30;
  width: 100%;
  min-width: 0;
  background: var(--glass-fill);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgb(24 93 241 / .04);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}
/* Telegram's scroll view draws document content beyond its native frame.
   Keep the departing header in normal document paint, without its own
   positioned/backdrop stacking context. Only the settings popup is layered.
   Do not pin, translate, clip or repaint the header from scroll handlers. */
@supports (-webkit-touch-callout:none) {
  @media (any-pointer:coarse) {
    html.telegram-sticky-background body.material-preview > .header-shell {
      position: static;
      z-index: auto;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /* A closed settings wrapper must leave the header in normal document paint.
       Do not retain the hidden transformed popup in its render-layer subtree.
       Opening restores the original positioned wrapper and popup anchor. */
    html.telegram-sticky-background .header .browse-settings:not(.is-open) {
      position: static;
    }
    html.telegram-sticky-background .header .browse-settings:not(.is-open) > .browse-panel {
      display: none;
    }
    html.telegram-sticky-background .header #browse-trigger {
      -webkit-appearance: none;
      appearance: none;
    }
    html.telegram-sticky-background .header .browse-settings.is-open > .browse-panel {
      animation: settings-panel-enter .16s ease both;
    }
    @keyframes settings-panel-enter {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

.header-shell>.header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header .brand::after {
  content: '';
  display: block;
  width: 1px;
  height: 19px;
  margin-left: 24px;
  background: rgb(59 100 157 / .45);
  flex: none;
}
@media(min-width:701px) {
  .header-shell>.header { display: flex; gap: 24px; }
  .header nav { justify-content: flex-start; gap: 25px; }
  .header .header-actions { margin-left: auto; }
}
@media(max-width:700px) {
  .header .brand::after { display: none; }
}
/* Secondary text is blue-tinted. Primary headings, prices and entered values
   retain their existing light colour; no product surface or geometry changes. */
.hero-note,.hero-meta-label,.hero-meta-number,.market-total,.count,
.collection-caption,.gift-collection,.gift-number,.gift-tag,
.cart-item-identity,.cart-item-collection,.cart-item-number,.cart-item-stock,
.cart-empty span,.cart-status,.cart-caption,.cart-tools,
.cart-total-row>span,.attribute-label,.detail-collection,.detail-number,
.detail-caption,.detail-price-label,.filter-count,.filter-availability,
.filter-empty,.filter-option-note,.browse-panel>p,.browse-panel span,
.feed-controls>span,.pagination span,.catalogue-error p,
.price-filter-label,.price-budget,.footer>a:last-child {
  color: var(--muted);
}
.header nav,.header nav .profile-link,.brand-accent {
  color: var(--text-secondary);
}
.catalogue-controls input::placeholder,.filter-search::placeholder,
input::placeholder { color: var(--text-quiet); opacity: 1; }
.catalogue-controls .price-filter label>span:first-child {
  color: var(--text-secondary);
}
.catalogue-controls .price-filter .price-unit,
.catalogue-controls .price-filter .price-max-suffix,
.catalogue-controls .price-filter .input-text:has(input:placeholder-shown)+.price-max-suffix {
  color: var(--muted);
}
.select-trigger .select-value,
.collection-button[aria-pressed=false],.select-option:not([aria-selected=true]):not(.is-active) {
  color: var(--text-secondary);
}
.select-trigger[aria-expanded=true] .select-value { color: #e1eeff; }
.collection-shortcuts .collection-button,
.collection-shortcuts .collection-button[aria-pressed=false] { color: #f3f7fe; }
.header-shell .browse-panel {
  background: linear-gradient(180deg,#030917,#020610);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Approved design: hero-contrast.css */
/* Readable hero copy and CTA above either luminous background.
   Keep geometry and the existing touch/press animation unchanged. */
body.material-preview .hero .hero-note {
  color: #b8d6ff;
  text-shadow: 0 1px 3px rgb(0 0 0 / .85), 0 0 12px rgb(0 0 0 / .50);
}

body.material-preview .hero .hero-link {
  color: #f3f7fe;
  background: linear-gradient(180deg, #0b2451, #06162f);
  border-color: rgb(121 183 255 / .68);
  box-shadow: inset 0 1px 0 rgb(151 200 255 / .14), 0 3px 12px rgb(0 0 0 / .25);
}

@media (hover: hover) and (pointer: fine) {
  body.material-preview .hero .hero-link:hover {
    background: linear-gradient(180deg, #10346c, #0a2147);
    border-color: #78b8ff;
  }
}

body.material-preview .hero .hero-link:focus-visible {
  outline: 2px solid #78b8ff;
  outline-offset: 3px;
}

/* The rotating feature shares the filter panel's material, without changing
   its layout or adding live backdrop blur to the crossfade/press animation. */
body.material-preview .hero .hero-feature {
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-bottom-color: rgb(112 168 248 / .22);
  box-shadow: var(--glass-shadow);
}

body.material-preview .hero .hero-feature:focus-visible {
  border-color: #6caaff;
}

/* A dark glass capsule for the light-flow version, using blue reflections. */
html:not([data-background="wave"]) body.material-preview .hero .hero-link {
  background:
    radial-gradient(ellipse 90% 160% at 100% 0%, rgb(58 123 215 / .11), transparent 66%),
    linear-gradient(180deg, rgb(107 161 235 / .065), transparent 43%, rgb(1 5 14 / .28)),
    rgb(3 12 28 / .80);
  border-color: rgb(100 153 223 / .34);
  border-top-color: rgb(152 195 247 / .46);
  border-bottom-color: rgb(51 96 160 / .35);
  box-shadow: inset 0 1px 0 rgb(135 186 250 / .07), 0 4px 12px rgb(0 0 0 / .18);
}

@media (hover: hover) and (pointer: fine) {
  body.material-preview .hero .hero-feature:hover {
    border-color: #6caaff;
  }
  html:not([data-background="wave"]) body.material-preview .hero .hero-link:hover {
    background:
      radial-gradient(ellipse 90% 160% at 100% 0%, rgb(58 123 215 / .15), transparent 66%),
      linear-gradient(180deg, rgb(107 161 235 / .08), transparent 43%, rgb(1 5 14 / .24)),
      rgb(4 16 36 / .86);
    border-color: rgb(126 180 249 / .68);
  }
}

/* Approved design: palette-tuning.css */
/* Colours only: cobalt tints follow the #185df1 background, with no geometry
   or animation changes. Keep primary white text and the gift artwork intact. */
body.material-preview {
  --muted: #8faaf0;
  --text-secondary: #abbeef;
  --text-quiet: #8199d2;
  --glass-edge: rgb(65 103 190 / .36);
  --glass-edge-top: rgb(74 119 214 / .38);
  --glass-shadow: inset 0 1px 0 rgb(49 101 216 / .09), inset 0 -1px 0 rgb(24 93 241 / .07), 0 12px 32px rgb(0 0 0 / .15);
}

body.material-preview .hero h1>span {
  color: #becdf3;
}
body.material-preview .hero .hero-note {
  color: #bacbf3;
}
body.material-preview .header .brand::after {
  background: rgb(56 87 156 / .45);
}

/* The small rotating feature needs a denser backing over the luminous stream. */
body.material-preview .hero .hero-feature {
  background:
    url('/surface-grain-70dd2855ce5a.svg'),
    radial-gradient(ellipse 110% 140% at 100% 0%, rgb(24 93 241 / .08), transparent 72%),
    linear-gradient(180deg, rgb(24 93 241 / .025), transparent 50%),
    rgb(3 10 29 / .93);
  border-color: var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-bottom-color: rgb(52 92 180 / .28);
}

/* Blue contours replace pale grey-blue rims; white remains only in the text. */
body.material-preview .hero .hero-link,
html:not([data-background="wave"]) body.material-preview .hero .hero-link {
  background:
    linear-gradient(180deg, rgb(24 93 241 / .045), transparent 48%),
    rgb(3 12 33 / .94);
  border-color: rgb(47 105 241 / .42);
  border-top-color: rgb(47 105 241 / .50);
  border-bottom-color: rgb(24 67 167 / .36);
  box-shadow: inset 0 1px 0 rgb(24 93 241 / .06), 0 4px 12px rgb(0 0 0 / .18);
}
body.material-preview .hero .hero-link:focus-visible {
  outline-color: #5b89f4;
}

body.material-preview .catalogue-controls {
  border-bottom-color: rgb(76 113 200 / .22);
}
body.material-preview .catalogue-controls .search,
body.material-preview .catalogue-controls .select-trigger,
body.material-preview .catalogue-controls .select-wrap select,
body.material-preview .catalogue-controls .catalogue-query-row>.price-filter {
  border-color: rgb(46 82 161 / .48);
  border-top-color: rgb(57 100 193 / .47);
  border-bottom-color: rgb(36 67 138 / .32);
}
body.material-preview .catalogue-controls .price-filter label+label::before {
  background: rgb(55 91 176 / .34);
}

@media (hover: hover) and (pointer: fine) {
  body.material-preview .hero .hero-feature:hover {
    border-color: #5b89f4;
  }
  body.material-preview .hero .hero-link:hover,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link:hover {
    background:
      linear-gradient(180deg, rgb(24 93 241 / .065), transparent 48%),
      rgb(3 12 33 / .96);
    border-color: rgb(67 122 251 / .65);
  }
  body.material-preview .catalogue-controls .search:hover,
  body.material-preview .catalogue-controls .select-trigger:hover:enabled {
    border-color: rgb(81 132 247 / .74);
  }
}
body.material-preview .hero .hero-feature:focus-visible {
  border-color: #5b89f4;
}
body.material-preview .catalogue-controls .search:focus-within,
body.material-preview .catalogue-controls .select-trigger:focus-visible,
body.material-preview .catalogue-controls .select-trigger[aria-expanded=true],
body.material-preview .catalogue-controls .select-trigger[aria-expanded=true]:hover,
body.material-preview .catalogue-controls .catalogue-query-row>.price-filter:focus-within {
  border-color: #376ce8;
}

/* Approved design: open-surfaces.css */
/* Dense overlay surfaces only. No live blur, page dimmer or gesture changes. */
html:not([data-panel="blue"]) {
  --panel-surface:
    url('/surface-grain-70dd2855ce5a.svg'),
    radial-gradient(ellipse 82% 72% at 54% 58%, rgb(1 3 8 / .80), rgb(1 3 8 / .30) 50%, transparent 82%),
    radial-gradient(ellipse 52% 68% at 108% -12%, rgb(32 156 252 / .08), transparent 74%),
    radial-gradient(ellipse 88% 72% at 106% -8%, rgb(24 93 241 / .32), transparent 76%),
    radial-gradient(ellipse 95% 68% at 30% 112%, rgb(24 93 241 / .20), transparent 77%),
    #02050d;
  --panel-inset: #030814;
  --panel-edge: rgb(47 105 241 / .42);
  --panel-edge-top: rgb(47 105 241 / .50);
  --panel-highlight: rgb(24 93 241 / .08);
}

html[data-panel="blue"] {
  --panel-surface: #0b2041;
  --panel-inset: #091a35;
  --panel-edge: rgb(57 103 193 / .52);
  --panel-edge-top: rgb(57 103 193 / .52);
  --panel-highlight: transparent;
}

body.material-preview :is(.gift-dialog, .filter-dialog, .cart-dialog, .help-dialog, .select-menu, .browse-panel) {
  background: var(--panel-surface);
  border-color: var(--panel-edge);
  border-top-color: var(--panel-edge-top);
  box-shadow: inset 0 1px 0 var(--panel-highlight), inset 0 -1px 0 rgb(24 93 241 / .035);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* This fixed footer should match its cart, including when the list scrolls. */
body.material-preview .cart-dialog .cart-summary {
  background: var(--panel-inset);
  border-top-color: var(--panel-edge);
}

body.material-preview .filter-dialog .filter-search {
  background: var(--panel-inset);
  border-color: var(--panel-edge);
}
body.material-preview .filter-dialog .filter-search:focus,
body.material-preview .filter-dialog .filter-search:focus-visible {
  border-color: #376ce8;
}

body.material-preview .filter-dialog .filter-tools .text-button {
  color: var(--text-secondary);
}
body.material-preview .filter-dialog .filter-tools .text-button:focus-visible {
  color: #d8e2fc;
}
@media (hover: hover) and (pointer: fine) {
  body.material-preview .filter-dialog .filter-tools .text-button:hover {
    color: #d8e2fc;
  }
}

/* Use the same blue contour as the main-page controls inside open windows. */
body.material-preview :is(.gift-dialog, .filter-dialog, .cart-dialog, .help-dialog) .close-button,
body.material-preview .gift-dialog .detail-actions .card-cart,
body.material-preview .gift-dialog .attribute-row,
body.material-preview .gift-dialog .attribute-row:hover:enabled,
body.material-preview .filter-dialog .filter-option:not([aria-checked=true]) {
  border-color: var(--panel-edge);
}
body.material-preview .cart-dialog .cart-heading,
body.material-preview .cart-dialog .cart-item {
  border-bottom-color: var(--panel-edge);
}
body.material-preview .filter-dialog .filter-option[aria-checked=true],
body.material-preview .filter-dialog .filter-option[aria-checked=true]:hover {
  border-color: rgb(67 122 251 / .70);
}
@media (hover: hover) and (pointer: fine) {
  body.material-preview .filter-dialog .filter-option:hover,
  body.material-preview .gift-dialog .attribute-row:hover:enabled,
  body.material-preview .gift-dialog .detail-actions .card-cart:hover,
  body.material-preview :is(.gift-dialog, .filter-dialog, .cart-dialog, .help-dialog) .close-button:hover {
    border-color: rgb(67 122 251 / .65);
  }
}

/* Approved design: hero-cta.css */
/* One filled blue CTA. Keep its pill geometry and the shared spring engine. */
body.material-preview .hero .hero-link,
html:not([data-background="wave"]) body.material-preview .hero .hero-link {
  color: #f3f7fe;
  background: linear-gradient(180deg, rgb(51 140 255 / .13), transparent 65%), #185df1;
  border-color: #2469ee;
  border-top-color: rgb(72 139 255 / .60);
  border-bottom-color: #1754d5;
  box-shadow: 0 3px 14px rgb(24 93 241 / .16);
  scale: 1;
  transition: scale .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.material-preview .hero .hero-link:hover,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link:hover {
    background: linear-gradient(180deg, rgb(51 140 255 / .13), transparent 65%), #185df1;
    scale: 1.035;
    border-color: rgb(121 179 255 / .74);
    border-top-color: rgb(137 191 255 / .80);
    box-shadow: inset 0 1px 0 rgb(119 181 255 / .13), 0 4px 18px rgb(24 93 241 / .24);
  }
}

body.material-preview .hero .hero-link:focus-visible {
  outline-color: #83b3ff;
}

@media (max-width: 700px), (any-pointer: coarse) {
  body.material-preview .hero .hero-link,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link {
    box-shadow: 0 3px 14px rgb(24 93 241 / .18), 0 0 18px rgb(36 133 255 / calc(var(--press-glow, 0) * 2));
  }
  body.material-preview .hero .hero-link,
  body.material-preview .hero .hero-link:hover,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link:hover {
    scale: 1;
  }
  body.material-preview .hero .hero-link.motion-press::after {
    background: #4a8dff;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.material-preview .hero .hero-link,
  body.material-preview .hero .hero-link:hover,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link,
  html:not([data-background="wave"]) body.material-preview .hero .hero-link:hover {
    scale: 1;
    transition: none;
  }
}

/* Approved design: background-balance.css */
/* Background comparisons, exclusively inside the decorative scene.
   Existing artwork, scene bounds/crop, UI and dialog dimmer remain intact. */
html[data-balance="catalogue"] .scene-light::after,
html[data-balance="sides"] .scene-light::after,
html[data-balance="glass"] .scene-light::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1: About 20% quieter at the hero, rising to 45–50% behind the catalogue. */
html[data-balance="catalogue"] .scene-light::after {
  background: linear-gradient(180deg, rgb(0 0 0 / .20) 0, rgb(0 0 0 / .20) 160px, rgb(0 0 0 / .40) 430px, rgb(0 0 0 / .48) 700px, rgb(0 0 0 / .50) 100%);
}

/* 2: On desktop only, fade the outer gutters to the existing catalogue edge.
   The entire central content area receives no additional darkness. */
@media (min-width: 701px) {
  html[data-balance="sides"] .scene-light::after {
    background: linear-gradient(90deg, rgb(0 0 0 / .65) 0, transparent max(24px, calc(50% - 588px)), transparent calc(100% - max(24px, calc(50% - 588px))), rgb(0 0 0 / .65) 100%);
  }
}

/* 3/4: One static seamless grain tile, blended into the existing blue light.
   Soft-light retains the source hue and leaves black negative space black. */
html[data-balance="grain"] .scene-light::before,
html[data-balance="grain-sides"] .scene-light::before,
html[data-balance="glass"] .scene-light::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('/background-grain-61223cb8d62f.svg');
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: .55;
  mix-blend-mode: soft-light;
}

/* 4: The grain has disappeared by the first/last column of gift cards. */
html[data-balance="grain-sides"] .scene-light::before,
html[data-balance="glass"] .scene-light::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent max(24px, calc(50% - 588px)), transparent calc(100% - max(24px, calc(50% - 588px))), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, transparent max(24px, calc(50% - 588px)), transparent calc(100% - max(24px, calc(50% - 588px))), #000 100%);
}

@media (max-width: 700px) {
  html[data-balance="glass"] .scene-light::before,
  html[data-balance="glass"] .scene-light::after {
    -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 14px, transparent calc(100% - 14px), #000 100%);
    mask-image: linear-gradient(90deg, #000 0, transparent 14px, transparent calc(100% - 14px), #000 100%);
  }
}

/* Combined treatment: darkened grain at the edges with an extremely faint
   prism reflection. Both paint layers vanish before the content columns. */
html[data-balance="glass"] .scene-light::after {
  background:
    radial-gradient(ellipse 24% 18% at 101% 10%, rgb(255 181 120 / .035), rgb(180 126 255 / .022) 36%, transparent 78%),
    radial-gradient(ellipse 18% 22% at -2% 31%, rgb(199 151 245 / .025), rgb(144 220 229 / .018) 45%, transparent 78%),
    rgb(0 0 0 / .62);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent max(24px, calc(50% - 588px)), transparent calc(100% - max(24px, calc(50% - 588px))), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, transparent max(24px, calc(50% - 588px)), transparent calc(100% - max(24px, calc(50% - 588px))), #000 100%);
}

@media (max-width:700px) {
  html[data-balance="glass"] .scene-light::before,
  html[data-balance="glass"] .scene-light::after {
    -webkit-mask-image: linear-gradient(90deg,#000 0,transparent 14px,transparent calc(100% - 14px),#000 100%);
    mask-image: linear-gradient(90deg,#000 0,transparent 14px,transparent calc(100% - 14px),#000 100%);
  }
}

/* Keep the approved scene anchored to the viewport, including a long feed.
   The image ends in black; use the same canvas so its edge has no seam.
   Pixel fade stops retain the approved contrast when viewport height changes. */
html { background-color: #000; }
body.material-preview .scene-light {
  --scene-fade-height: 1180px;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  max-height: none;
  background-color: #000;
  -webkit-mask-image: linear-gradient(#000 0px, #000 calc(var(--scene-fade-height) * .62), transparent var(--scene-fade-height));
  mask-image: linear-gradient(#000 0px, #000 calc(var(--scene-fade-height) * .62), transparent var(--scene-fade-height));
}
@media (max-width:700px) {
  body.material-preview .scene-light { --scene-fade-height: 1450px; }
  /* Brand and settings stay in row one; both navigation labels share row two. */
  .header-shell>.header {
    height: auto;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 6px;
    row-gap: 2px;
  }
  .header-shell>.header nav {
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin: 0;
  }
  .header-shell>.header nav .text-button,
  .header-shell>.header nav .profile-link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0;
    line-height: 18px;
  }
}

/* Restore the touch document canvas used before the design transfer.
   WebKit samples this canvas beneath its browser controls; the desktop scene
   remains a fixed viewport layer. Root painting avoids a finite black DOM edge. */
@media (max-width:700px), (any-pointer:coarse) {
  html[data-background="flow"] {
    --touch-scene-height: 1180px;
    --touch-scene-size: max(100%, 1440px) auto;
    --touch-scene-position: center top;
    --touch-scene-edge: max(24px, calc(50% - 588px));
    background-color: #000;
    background-image:
      linear-gradient(180deg, transparent 0px, transparent calc(var(--touch-scene-height) * .62), #000 var(--touch-scene-height)),
      linear-gradient(90deg, rgb(0 0 0 / .62) 0, transparent var(--touch-scene-edge), transparent calc(100% - var(--touch-scene-edge)), rgb(0 0 0 / .62) 100%),
      url('/scene-flow-e4084b26f1f4.webp');
    background-size: 100% var(--touch-scene-height), 100% var(--touch-scene-height), var(--touch-scene-size);
    background-position: left top, left top, var(--touch-scene-position);
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  /* Retain only the transparent edge grain/prism in the decorative layer.
     The opaque scene itself now belongs to the document canvas. */
  html[data-background="flow"] body.material-preview .scene-light {
    background: none;
  }
  html[data-background="flow"] .scene-light::after {
    background: 
      radial-gradient(ellipse 24% 18% at 101% 10%, rgb(255 181 120 / .035), rgb(180 126 255 / .022) 36%, transparent 78%),
      radial-gradient(ellipse 18% 22% at -2% 31%, rgb(199 151 245 / .025), rgb(144 220 229 / .018) 45%, transparent 78%);
  }
}
@media (max-width:700px) {
  html[data-background="flow"] {
    --touch-scene-height: 1450px;
    --touch-scene-size: auto 1100px;
    --touch-scene-position: 70% top;
    --touch-scene-edge: 14px;
  }
  /* One shared header row at phone widths; preserve the complete link labels. */
  .header-shell>.header {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    height: 60px;
    min-height: 60px;
    column-gap: clamp(5px,1.6vw,11px);
    row-gap: 0;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .header-shell>.header .brand {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(12px,3.6vw,16px);
    white-space: nowrap;
  }
  .header-shell>.header nav {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(7px,1.8vw,13px);
    font-size: clamp(9px,2.55vw,11px);
    line-height: 18px;
    margin: 0;
    white-space: nowrap;
  }
  .header-shell>.header nav .text-button,
  .header-shell>.header nav .profile-link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font: inherit;
    white-space: nowrap;
  }
  .header-shell>.header .header-actions {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }
}
@media (max-width:360px) {
  .header-shell>.header .browse-trigger {
    width: 30px;
    flex-basis: 30px;
  }
}

/* Touch: one stationary image, with the document canvas as browser-chrome
   underlay. No noise on a transparent blend group and no opaque fixed fill
   for WebKit to extend as a solid toolbar tint. Desktop remains unchanged. */
@media (max-width:700px), (any-pointer:coarse) {
  html[data-background="flow"] {
    background-image:
      linear-gradient(180deg, transparent 0px, transparent calc(var(--touch-scene-height) * .62), #000 var(--touch-scene-height)),
      url('/scene-flow-e4084b26f1f4.webp');
    background-size: 100% var(--touch-scene-height), var(--touch-scene-size);
    background-position: left top, var(--touch-scene-position);
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  html[data-background="flow"] body.material-preview .scene-light {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100lvh;
    max-height: none;
    background-color: transparent;
    background-image:
      linear-gradient(180deg, transparent 0px, transparent calc(var(--touch-scene-height) * .62), #000 var(--touch-scene-height)),
      url('/scene-flow-e4084b26f1f4.webp');
    background-size: 100% var(--touch-scene-height), var(--touch-scene-size);
    background-position: left top, var(--touch-scene-position);
    background-repeat: no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html[data-background="flow"] body.material-preview .scene-light::before,
  html[data-background="flow"] body.material-preview .scene-light::after {
    content: none;
    display: none;
  }
}

/* Touch paints a single document canvas, including beneath browser chrome.
   Its Y position is kept at the visual viewport's document offset by the
   coalesced scroll handler; no fixed image can trigger solid tint extensions. */
@media (max-width:700px), (any-pointer:coarse) {
  html[data-background="flow"] body.material-preview .scene-light {
    display: none;
  }
}

/* No main-thread scroll following. The browser owns one fixed image layer.
   Move its paint bounds past the browser-control edges; no duplicated canvas
   image, blend grain, masks or opaque fixed fill. */
@media (max-width:700px), (any-pointer:coarse) {
  html[data-background="flow"] {
    background-color: #000;
    background-image: none;
  }
  html[data-background="flow"] body.material-preview .scene-light {
    --scene-top-guard: env(safe-area-inset-top, 0px);
    --scene-bottom-guard: env(safe-area-inset-bottom, 0px);
    display: block;
    position: fixed;
    inset: calc(-1 * var(--scene-top-guard)) 0 auto;
    height: calc(100vh + var(--scene-top-guard) + var(--scene-bottom-guard));
    height: calc(100lvh + var(--scene-top-guard) + var(--scene-bottom-guard));
    max-height: none;
    background-color: transparent;
    background-image:
      linear-gradient(180deg, transparent 0px, transparent calc(var(--touch-scene-height) * .62), #000 var(--touch-scene-height)),
      url('/scene-flow-e4084b26f1f4.webp');
    background-size: 100% var(--touch-scene-height), var(--touch-scene-size);
    background-position: left top, var(--touch-scene-position);
    background-repeat: no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html[data-background="flow"] body.material-preview .scene-light::before,
  html[data-background="flow"] body.material-preview .scene-light::after {
    content: none;
    display: none;
  }
}
@supports (height:100svh) {
  @media (max-width:700px), (any-pointer:coarse) {
    /* Use browser-reported safe areas and large/small viewport delta, rather
       than a guessed number of pixels for Telegram's browser controls. */
    html[data-background="flow"] body.material-preview .scene-light {
      --scene-top-guard: max(env(safe-area-inset-top, 0px), calc(100lvh - 100svh));
      --scene-bottom-guard: max(env(safe-area-inset-bottom, 0px), calc(100lvh - 100svh));
    }
  }
}

/* Soften the scene's native-browser clipping edge without moving the image.
   svh stays constant while browser controls animate; no dvh/resize transition.
   This darkens only the decoration, never the catalogue or its touch targets. */
@supports (-webkit-touch-callout:none) and (height:100svh) {
  @media (any-pointer:coarse) {
    html:not(.telegram-inapp)[data-background="flow"] body.material-preview > .scene-light {
      --browser-edge-softness: clamp(48px,9svh,72px);
      background-image:
        linear-gradient(180deg,
          transparent calc(var(--scene-top-guard) + 100svh - var(--browser-edge-softness)),
          #000 calc(var(--scene-top-guard) + 100svh)),
        linear-gradient(180deg, transparent 0px, transparent calc(var(--touch-scene-height) * .62), #000 var(--touch-scene-height)),
        url('/scene-flow-e4084b26f1f4.webp');
      background-size: 100% 100%, 100% var(--touch-scene-height), var(--touch-scene-size);
      background-position: left top, left top, var(--touch-scene-position);
    }
    html.telegram-sticky-background[data-background="flow"] body.material-preview > .scene-host > .scene-light {
      --browser-edge-softness: clamp(48px,9svh,72px);
      background-image:
        linear-gradient(180deg,
          #000 var(--scene-browser-guard,0px),
          transparent calc(var(--scene-browser-guard,0px) + var(--browser-edge-softness))),
        linear-gradient(180deg, transparent 0px, transparent calc(var(--touch-scene-height) * .62), #000 var(--touch-scene-height)),
        url('/scene-flow-e4084b26f1f4.webp');
      background-size: 100% 100%, 100% var(--touch-scene-height), var(--touch-scene-size);
      background-position: left top, left top, var(--touch-scene-position);
    }
  }
}

/* Match the existing lower header edge, only on a Telegram touch phone view. */
@media (max-width:700px) and (any-pointer:coarse) {
  html.telegram-inapp body.material-preview .header-shell {
    border-top: 1px solid var(--glass-edge);
  }
}

/* These classes exist only after an explicit ?viewport-check=1 or =lift URL. */
.viewport-measure {
  position: fixed; width: 0; inset: 0 auto auto 0; display: block; margin: 0;
  padding: 0; border: 0; visibility: hidden; pointer-events: none;
}
.viewport-measure-large { height: 100vh; height: 100lvh; }
.viewport-measure-small { height: 100vh; height: 100svh; }
.viewport-measure-safe-top { height: env(safe-area-inset-top,0px); }
.viewport-measure-safe-bottom { height: env(safe-area-inset-bottom,0px); }
.viewport-measure-guard-top { height: var(--scene-top-guard,0px); }
.viewport-measure-guard-bottom { height: var(--scene-bottom-guard,0px); }
.viewport-check {
  position: fixed; bottom: max(8px,env(safe-area-inset-bottom,0px)); left: 8px;
  z-index: 40; width: min(360px,calc(100% - 88px)); border-radius: 14px;
  background: #030b1c; color: #e7f0ff; border: 1px solid #355d98;
  font: 12px/1.4 sans-serif; box-shadow: 0 4px 16px #0008;
}
.viewport-check summary { cursor: pointer; padding: 10px 12px; }
.viewport-check-content { padding: 0 10px 10px; }
.viewport-check-content p { margin: 0 0 8px; }
.viewport-check-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.viewport-check button {
  font: inherit; color: inherit; background: #07152e; border: 1px solid #355d98;
  padding: 8px; border-radius: 9px; min-height: 36px; cursor: pointer;
}
.viewport-check button[aria-pressed="true"] { background: #185df1; }
.viewport-check-output {
  display: block; margin-top: 8px; width: 100%; height: min(220px,30vh);
  font: 11px/1.3 monospace; color: #c1d6ff; background: #02060e;
  resize: none; border: 0; border-radius: 5px; padding: 6px; box-sizing: border-box;
}
@media (max-width:700px), (any-pointer:coarse) {
  html.viewport-trial-lift[data-background="flow"] body.material-preview .scene-light {
    inset: calc(-1 * (var(--scene-top-guard) + var(--viewport-test-gap,0px))) 0 auto;
    height: calc(100vh + var(--scene-top-guard) + var(--scene-bottom-guard) + 2 * var(--viewport-test-gap,0px));
    height: calc(100lvh + var(--scene-top-guard) + var(--scene-bottom-guard) + 2 * var(--viewport-test-gap,0px));
  }
}

/* A non-painting host spans the document without taking space in its flow.
   The image belongs to the sticky box itself, not an absolute child/pseudo. */
.scene-host { display: contents; }
.scene-sticky-measure {
  position: fixed; top: 0; left: 0; width: 0; display: block;
  margin: 0; padding: 0; border: 0; visibility: hidden; pointer-events: none;
}
.scene-sticky-small { height: 100vh; height: 100svh; }
.scene-sticky-large { height: 100vh; height: 100lvh; }
@supports (-webkit-touch-callout:none) {
  @media (any-pointer:coarse) {
    html.telegram-sticky-background[data-background="flow"] body.material-preview > .scene-host {
      display: block; position: absolute;
      inset: calc(-1 * var(--scene-browser-guard,0px)) 0 0;
      z-index: -1; pointer-events: none;
      /* No transform, overflow clipping, backdrop, mask or promoted giant layer. */
    }
    html.telegram-sticky-background[data-background="flow"] body.material-preview > .scene-host > .scene-light {
      position: sticky;
      inset: calc(-1 * var(--scene-browser-guard,0px)) auto auto;
      width: 100%; margin: 0; z-index: auto; overflow: visible;
      height: min(calc(100vh + 2 * var(--scene-browser-guard,0px)),100%);
      height: min(calc(100lvh + 2 * var(--scene-browser-guard,0px)),100%);
      max-height: none;
    }
  }
}
/* Keep the optional measurement panel above Telegram's lower native controls. */
.viewport-check { bottom: auto; top: 38%; max-height: 55vh; overflow: auto; }

/* Native-scroll sheet accepted on iPhone in normal-power mode.
   Original card classes retain their dimensions, controls and material. */
@media (max-width:700px), (any-pointer:coarse) {
  body.material-preview dialog.native-sheet-host[open] {
    display: block; position: fixed; inset: 0; margin: 0; padding: 0;
    width: 100%; max-width: none; height: 100%; max-height: none;
    border: 0; border-radius: 0; background: transparent !important;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scroll-snap-type: y mandatory; scroll-behavior: auto; scroll-padding: 0;
    -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom;
    transform: none !important; translate: none !important; animation: none !important;
    transition: none; scrollbar-width: none;
  }
  .native-sheet-host::-webkit-scrollbar { display: none; }
  .native-sheet-track { width: 100%; overflow-anchor: none; }
  .native-sheet-lead { height: var(--sheet-travel,800px); scroll-snap-align: start; }
  .native-sheet-stage {
    box-sizing: border-box; height: var(--sheet-viewport,100svh); width: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding-bottom: max(6px,env(safe-area-inset-bottom)); scroll-snap-align: start;
  }
  .native-sheet-tail { height: 100px; }
  .native-sheet-stage > .native-sheet-surface {
    box-sizing: border-box; position: relative; inset: auto; margin: 0 auto; flex: none;
    touch-action: pan-y pinch-zoom; transition: none; animation: none;
    border: 1px solid var(--panel-edge); border-top-color: var(--panel-edge-top);
    background: var(--panel-surface); color: var(--text);
    box-shadow: inset 0 1px 0 var(--panel-highlight); overflow: hidden;
  }
  .native-sheet-stage > .cart-dialog { display: flex; flex-direction: column; }
  /* A fitted inner scroller can be at both boundaries. Let the native pan
     reach the sheet; the outer viewport still contains page overscroll. */
  .native-sheet-host :is(.detail-layout,.detail-info,.attribute-list,.cart-items) {
    overscroll-behavior-y: auto;
  }
}

/* Telegram's toolbar must not cull an entire horizontal overflow scroll layer.
   The small rail stays in document paint; only horizontal gestures translate it. */
@supports (-webkit-touch-callout:none) {
  @media (any-pointer:coarse) {
    .collections.telegram-touch-rail {
      display: block; overflow: clip; touch-action: pan-y pinch-zoom;
      overscroll-behavior-x: auto; scrollbar-width: none;
    }
    .telegram-touch-rail > .collection-touch-items {
      display: flex; width: max-content; max-width: none; gap: inherit;
    }
    .telegram-touch-rail .collection-button { -webkit-appearance: none; appearance: none; }
  }
}

/* A modal must not turn body into a new sticky scrollport. The existing
   html overflow lock and the native dialog's focus/inertness remain active. */
@supports (-webkit-touch-callout:none) {
  @media (any-pointer:coarse) {
    html.telegram-sticky-background[data-background="flow"] body.material-preview:has(dialog[open]) {
      overflow-x: clip;
      overflow-y: visible;
    }
  }
}