/* KeyseS / Midnight collection. Three layouts share one product hierarchy. */
:root {
  color-scheme: dark;
  --paper: #080c14;
  --white: #121925;
  --ink: #f3f6fc;
  --blue: #8db8ff;
  --blue-dark: #122c56;
  --muted: #9da9bc;
  --line: #252e3f;
  --silver: #202e46;
  --radius: 12px;
}
body { background: var(--paper); color: var(--ink); }
.container { width: min(1280px, calc(100% - 64px)); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #a7c7ff; outline-offset: 4px; }
.button { border-radius: 9px; font-weight: 500; }
.button.primary { background: #2865df; color: #fff; box-shadow: 0 5px 16px #0753d320; }
.button.primary:hover { background: #3475f5; }
.button.secondary { background: #182335; border-color: #34415a; color: #e4edff; }
.text-link { color: #b7ccf3; border-bottom-color: #5878ae; }
.panel { background: #101824; border-color: #2b3548; border-radius: 14px; }
.page-heading h1 { font-size: clamp(35px, 4vw, 57px); letter-spacing: -1.7px; line-height: 1.13; }
.page-heading > .eyebrow { color: #8ea5cb; }
.page-heading > p { color: #a1acc0; }
.section { padding-block: 56px; }
.compact-top { padding-top: 38px; }
/* Compact identity and a real search form, with no decorative controls. */
#site-header { background: #0c111bf5; border-bottom: 1px solid #242c3b; }
.header-inner { height: 83px; gap: 25px; }
.wordmark { color: #f1f5fd; gap: 10px; font-size: 25px; letter-spacing: -.9px; }
.wordmark-domain { color: #8ea9d2; }
.wordmark .logo-build { flex-shrink: 0; width: 42px; height: 42px; background: #e5edfa; border: 1px solid #eaf2ff; border-radius: 10px; overflow: hidden; }
.wordmark .logo-build > span { inset: 5px; }
.wordmark .logo-build img { filter: none; }
.header-search { display: flex; align-items: center; gap: 10px; height: 41px; min-width: 100px; max-width: 310px; flex: 1; border: 1px solid #333e52; border-radius: 24px; background: #161d29; padding: 0 15px; }
.header-search > svg { color: #94a8ca; width: 17px; }
.header-search input { min-width: 0; width: 100%; color: #f0f5ff; border: 0; background: transparent; font-size: 12px; padding: 7px 0; }
.header-search input::placeholder { color: #8e9db5; }
.desktop-nav { gap: 23px; margin-left: auto; }
.desktop-nav a { color: #c1cada; font-size: 12px; }
.header-inner .desktop-nav a:first-child { color: #c5d9ff; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: #d1e2ff; }
.header-actions { gap: 17px; }
.header-actions select { color: #c7d3e8; background: transparent; }
.account-button { min-height: 39px; padding: 0 13px; color: #caddff; border: 1px solid #36517e; border-radius: 24px; background: #14233c; }
.mobile-nav { display: none; }
.bottom-nav { display: none; }
/* The horizontal brand rail is a quick route to actual products. */
.brand-ribbon { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-block: 19px; overscroll-behavior-x: contain; }
.brand-ribbon::-webkit-scrollbar { display: none; }
.brand-ribbon > a { width: 64px; height: 61px; flex: 0 0 64px; border-radius: 14px; border: 1px solid #28354c; display: grid; place-items: center; background: linear-gradient(145deg, #1b2a43, #111827); transition: border-color .18s, transform .18s; }
.brand-ribbon > a:hover { transform: translateY(-3px); border-color: #7299d4; }
.brand-ribbon .brand-logo { width: 38px; height: 38px; }
.logo-reversed img { filter: grayscale(1) brightness(0) invert(1); }
.brand-logo img { border-radius: 5px; }
/* A composed offer: live product information, original mark, and a CSS glass plane. */
.swipe-section { margin-top: 0; }
.swipe-track { border-radius: 17px; border: 1px solid #40517a; }
.swipe-slide.offer-slide { position: relative; isolation: isolate; overflow: hidden; min-height: 282px; padding: 35px 52px; background: radial-gradient(ellipse at 85% 20%, #668aff35, transparent 50%), linear-gradient(120deg, #142348, #172344 55%, #0d142b); }
.swipe-slide.offer-slide.slide-1 { background: radial-gradient(ellipse at 80% 15%, #ab6eff42, transparent 50%), linear-gradient(120deg, #252348, #1f1737 65%, #17132a); }
.swipe-slide.offer-slide.slide-2 { background: radial-gradient(ellipse at 85% 20%, #2ad9c92b, transparent 50%), linear-gradient(120deg, #14343e, #142839 60%, #101b2c); }
.swipe-copy { position: relative; z-index: 2; flex: 1; }
.swipe-copy .eyebrow { color: #bacdec; font-size: 9px; letter-spacing: 1.6px; margin-bottom: 15px; }
.swipe-copy h2 { color: #f6f8ff; font-size: clamp(28px, 3.4vw, 45px); letter-spacing: -1.4px; max-width: 660px; }
.swipe-copy p { color: #c0cbe2; margin-top: 10px; font-size: 13px; max-width: 420px; }
.offer-price { color: #fff; font-weight: 600; font-size: 36px; letter-spacing: -1px; line-height: 1.15; margin-top: 19px; }
.offer-price small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: #c6d6f3; }
.offer-button { margin-top: 18px; min-height: 38px; padding: 9px 15px; gap: 20px; font-size: 11px; background: #e9f0ff; color: #182c53; }
.offer-button:hover { background: #fff; }
.offer-button > svg { width: 15px; }
.offer-art { position: relative; display: grid; place-items: center; width: 300px; flex: 0 0 300px; height: 230px; perspective: 1000px; }
.offer-device { width: 196px; height: 220px; border: 1px solid #d7e2ff88; border-radius: 24px; padding: 22px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; background: linear-gradient(145deg, #b9cfff20, #1d2c4cdd 35%, #0d152cd9); box-shadow: 12px 18px 35px #0005, inset 2px 2px 0 #e2eaff20; transform: rotateY(-15deg) rotateZ(7deg); }
.offer-device::before { content: ''; position: absolute; inset: 7px; border: 1px solid #c7d8ff17; border-radius: 17px; pointer-events: none; }
.offer-device .brand-logo { width: 110px; height: 110px; filter: drop-shadow(0 10px 18px #6583ff50); }
.device-eyebrow { font-size: 6px; letter-spacing: 1.5px; color: #c3d2ef; }
.device-name { font-size: 12px; color: #e7efff; text-align: center; }
.offer-orbit { position: absolute; width: 278px; height: 160px; bottom: 0; border: 1px solid #b7ceff50; border-radius: 50%; transform: rotateX(60deg) rotateZ(-15deg); box-shadow: 0 0 35px #a0b9ff1a; }
.offer-shield { color: #b6f1e9; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 33px; letter-spacing: 4px; }
.offer-shield > svg { width: 120px; height: 120px; stroke-width: .8; }
.swipe-controls { padding-block: 8px 0; align-items: center; }
.swipe-dots { gap: 5px; }
.swipe-dots button { width: 22px; height: 21px; background: linear-gradient(#45536d,#45536d) center/100% 3px no-repeat; }
.swipe-dots button[aria-pressed=true] { background-image: linear-gradient(#9bbdff,#9bbdff); }
.slide-arrows { display: flex; gap: 7px; }
.slide-arrows button { width: 26px; height: 26px; display: grid; place-items: center; background: #172033; color: #c2d3f2; border: 1px solid #35415b; border-radius: 50%; }
.slide-arrows button:first-child svg { transform: rotate(180deg); }
.slide-arrows svg { width: 13px; }
/* Actual categories and a continuous catalog, without a hero that buries the products. */
.category-strip { grid-auto-columns: max-content; margin-top: 14px; gap: 9px; padding-block: 10px; }
.category-strip a { background: #141d2c; border: 1px solid #2b3850!important; color: #c4cfe2; font-size: 11px; border-radius: 22px; padding: 12px 17px!important; }
.category-strip a:hover { background: #1c2b44; color: #e2edff; }
.category-strip a.category-all { background: #214e9f; border-color: #5985d2!important; color: #f2f6ff; }
.category-strip a svg:first-child { color: #b5ccf7; }
.home-collection { padding-top: 30px!important; }
.section-title { align-items: center; margin-bottom: 22px; }
.section-title h2 { display: flex; align-items: center; gap: 12px; font-size: 28px; letter-spacing: -.8px; }
.section-title h2 > svg { color: #8aaeff; width: 22px; }
.section-title > .text-link { color: #a9bfdc; font-size: 11px; gap: 10px; border: 0; }
.product-grid { gap: 22px; }
.product-card { --brand-color: #86aaff; border: 1px solid #2c3850; border-radius: 14px; background: #121927; box-shadow: none; overflow: hidden; }
.product-card:hover { border-color: #5a77a5; box-shadow: 0 12px 28px #0003; transform: translateY(-2px); }
.product-art { position: relative; isolation: isolate; aspect-ratio: 1.45; padding: 23px; background: radial-gradient(ellipse at 50% 43%, #29416c 0%, #152239 50%, #0a101b 100%)!important; }
@supports (background: color-mix(in srgb, red, blue)) {
  .product-art { background: radial-gradient(ellipse at 50% 36%, color-mix(in srgb, var(--brand-color) 30%, #101626), color-mix(in srgb, var(--brand-color) 9%, #080c15) 65%, #080c14)!important; }
}
.product-art::after { content: ''; z-index: -1; position: absolute; width: 58%; height: 12%; left: 21%; bottom: 13%; background: var(--brand-color); opacity: .24; filter: blur(18px); border-radius: 50%; }
.product-art > .brand-logo { width: 77%; height: 84%; max-width: 195px; position: relative; z-index: 1; }
.product-art:hover > .brand-logo { transform: scale(1.035); }
.card-stock { position: absolute; left: 11px; bottom: 10px; z-index: 2; color: #d3dfed; background: #0b1520d9; border: 1px solid #627d9c33; display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; font-size: 8px; line-height: 1; }
.card-stock i { width: 4px; height: 4px; border-radius: 50%; background: #6bd8ba; }
.product-body { padding: 15px 16px 13px; border-top: 1px solid #2c3850; }
.product-body .product-meta { margin: 0 0 9px; color: #91a2bb; font-size: 9px; gap: 7px; }
.product-body h3 { font-size: 19px; font-weight: 500; margin: 0; line-height: 1.2; color: #f1f5fb; }
.product-body .product-bottom { margin: 17px 0 0; border-top: 0; padding: 0; align-items: center; gap: 8px; flex-wrap: nowrap; }
.product-bottom b { font-size: 20px; color: #f3f7ff; font-weight: 500; }
.product-bottom small { color: #94a5bd; font-size: 9px; }
.product-bottom > a.product-go { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; color: #dce9ff; background: #224d93; border: 1px solid #416eaf; border-radius: 50%; }
.product-go > svg { width: 14px; }
.product-bottom b.ask-price { font-size: 12px; }
.catalog-toolbar { border-color: #2a354a; }
.search-field input { color: #edf3ff; }
.sort-field select { color: #c4d2e8; }
.category-sidebar > a { border-color: #2b3547; color: #b8c8e0; }
.category-sidebar > a[aria-current] { color: #d4e4ff; }
.result-count { color: #98acc9; }
.catalog-grid .product-art { aspect-ratio: 1.35; }
/* Product and account pages use the same surfaces and contrast system. */
.detail-art { background: radial-gradient(ellipse at center, #223457, #101725 75%); border: 1px solid #2d3c57; border-radius: 17px; }
.detail-art > .brand-logo { width: 68%; height: 68%; }
.detail-art > span:last-child { color: #91a7cd; }
.detail-description { color: #aab7ce; }
.term-options label > span { background: #121d30; border-color: #344360; color: #f0f5ff; border-radius: 9px; }
.term-options input:checked + span { border-color: #90b8ff; background: #1d3259; box-shadow: inset 0 0 0 1px #90b8ff; }
.term-options small { color: #a9bad3; }
.detail-purchase { border-color: #2e3c53; }
.detail-facts > div { color: #9fafc8; }
.stock-label { color: #86ddbd; }
.stock-label.inactive { color: #d4b27e; }
.breadcrumbs { color: #9badc8; }
.tool-card { background: #121a28; border-color: #2d3b53; border-radius: 13px; }
.tool-card:hover { border-color: #6c8abc; }
.tool-icon { background: #1d3155; color: #a2c2fb; border-radius: 12px; }
.tool-icon.warm { background: #2c2d39; }
.security-form textarea { background: #0c1421; color: #edf4ff; border-color: #374962; }
.security-form textarea::placeholder { color: #697d9b; }
.otp-display { background: #12233c; border-color: #314a71; }
.otp-display > .eyebrow { color: #9cb8de; }
.otp-code { color: #c2dcff; }
.otp-progress { background: #263f64; }
.otp-progress > div { background: #a6caff; }
.security-explainer > span > svg { color: #a0c2fa; }
.contact-card { background: #132039; border-color: #334b70; border-radius: 13px; }
.faq-list details { border-color: #2a3549; }
.auth-brand { background: #e7effb; }
.google-button { color: #d7e4fa; }
.separator { color: #95a8c6; }
.separator > span { background: #101824; }
#account-form input { color: #edf4ff; background: #0b1423; border-color: #354761; border-radius: 7px; }
.auth-links button { color: #b6cef4; }
.form-status { color: #ffc3b6; }
.profile-list > div, .order-row, .account-nav a, .account-nav button { border-color: #2c3b53; }
.account-nav a[aria-current] { color: #c6dcff; }
.account-nav button { color: #ffbfb5; }
.access-card { background: #121e31; border-color: #344664; border-radius: 10px; }
.access-card > div { background: #0a1424; color: #e2edff; }
#site-footer { background: #0b111d; border-color: #263248; margin-top: 15px; }
.footer-top { padding-block: 40px; }
.footer-bottom { border-color: #263248; color: #95a6c0; }
.footer-top p { color: #97a7bf; }
/* Tablet: three columns and larger targets, without squeezing desktop navigation. */
@media (min-width: 801px) and (max-width: 1100px) {
  .container { width: calc(100% - 48px); }
  .header-inner { gap: 20px; }
  .desktop-nav { display: none; }
  .header-search { max-width: none; }
  .account-button span { display: inline; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .catalog-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-layout .product-body h3 { font-size: 18px; }
  .offer-art { width: 230px; flex-basis: 230px; }
  .swipe-slide.offer-slide { min-height: 260px; padding: 30px 35px; }
  .swipe-copy h2 { font-size: 39px; }
}
/* Phone: two products at a glance and thumb-friendly navigation. */
@media (max-width: 800px) {
  body { padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px)); }
  .container { width: calc(100% - 28px); }
  .header-inner { height: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; }
  .wordmark { font-size: 21px; gap: 7px; letter-spacing: -.9px; }
  .wordmark .logo-build { width: 32px; height: 32px; border-radius: 8px; }
  .wordmark .logo-build > span { inset: 4px; }
  .header-search { width: 100%; min-width: 0; max-width: none; height: 35px; padding-inline: 10px; gap: 6px; }
  .header-search > svg { width: 13px; }
  .header-search input { font-size: 10px; }
  .header-actions { margin: 0; gap: 7px; }
  .header-actions select { width: 34px; font-size: 9px; padding-inline: 0; }
  .account-button { width: 32px; min-height: 32px; justify-content: center; padding: 0; }
  .account-button span { display: none; }
  .account-button > svg { width: 16px; }
  .header-actions .icon-button { display: none; }
  .desktop-nav, .mobile-nav { display: none; }
  .brand-ribbon { gap: 9px; padding-block: 12px; }
  .brand-ribbon > a { width: 48px; height: 47px; flex-basis: 48px; border-radius: 12px; }
  .brand-ribbon .brand-logo { width: 29px; height: 29px; }
  .swipe-track { border-radius: 13px; }
  .swipe-slide.offer-slide { min-height: 194px; padding: 22px 21px; gap: 7px; }
  .swipe-copy { min-width: 0; }
  .swipe-copy .eyebrow { font-size: 7px; letter-spacing: 1px; margin-bottom: 10px; max-width: 210px; }
  .swipe-copy h2 { font-size: clamp(25px, 5vw, 34px); letter-spacing: -.8px; line-height: 1.08; max-width: 360px; }
  .swipe-copy p { font-size: 10px; line-height: 1.35; margin-top: 8px; max-width: 220px; }
  .offer-price { font-size: 27px; margin-top: 12px; letter-spacing: -.5px; }
  .offer-price small { font-size: 8px; }
  .offer-button { min-height: 31px; padding: 7px 10px; font-size: 9px; gap: 12px; margin-top: 13px; border-radius: 6px; }
  .offer-button > svg { width: 12px; }
  .offer-art { width: 128px; flex-basis: 128px; height: 154px; }
  .offer-device { width: 111px; height: 146px; border-radius: 15px; padding: 14px 11px; gap: 13px; transform: rotateY(-12deg) rotateZ(7deg); }
  .offer-device::before { inset: 5px; border-radius: 10px; }
  .offer-device .brand-logo { width: 67px; height: 67px; }
  .device-eyebrow { font-size: 4px; letter-spacing: 1px; }
  .device-name { font-size: 8px; }
  .offer-orbit { width: 147px; height: 110px; bottom: -10px; }
  .offer-shield > svg { width: 77px; height: 77px; }
  .offer-shield { font-size: 24px; }
  .swipe-controls { padding-top: 4px; }
  .slide-arrows { gap: 6px; }
  .slide-arrows button { width: 25px; height: 25px; }
  .category-strip { margin-top: 7px; padding-block: 8px; gap: 7px; }
  .category-strip a { padding: 10px 13px!important; font-size: 9px; gap: 7px; }
  .category-strip a > svg:first-child { width: 14px; }
  .home-collection { padding-top: 22px!important; }
  .section-title { margin-bottom: 18px; gap: 9px; }
  .section-title h2 { font-size: 23px; gap: 9px; letter-spacing: -.7px; }
  .section-title h2 > svg { width: 18px; }
  .section-title > .text-link { font-size: 9px; gap: 5px; white-space: nowrap; min-width: 0; }
  .section-title > .text-link > svg { width: 12px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 11px; }
  .product-card { border-radius: 12px; }
  .product-art, .catalog-grid .product-art { aspect-ratio: 1.35; padding: 15px; }
  .product-art > .brand-logo { width: 85%; height: 88%; max-width: 185px; }
  .card-stock { font-size: 6px; left: 7px; bottom: 7px; padding: 4px 5px; gap: 4px; }
  .card-stock i { width: 3px; height: 3px; }
  .product-body { padding: 11px 10px 11px; }
  .product-body .product-meta { margin: 0 0 7px; font-size: 7px; gap: 5px; }
  .product-body .product-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-body .product-meta > span:last-child { font-size: 7px; }
  .product-body h3 { font-size: 15px; line-height: 1.2; min-height: 18px; letter-spacing: -.3px; }
  .product-body .product-bottom { margin-top: 12px; gap: 5px; }
  .product-bottom b { font-size: 18px; }
  .product-bottom small { font-size: 7px; }
  .product-bottom > a.product-go { width: 27px; height: 27px; flex-basis: 27px; }
  .product-go > svg { width: 13px; }
  .product-bottom b.ask-price { font-size: 10px; }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .category-sidebar > a { background: #162239; border-color: #354966; }
  .category-sidebar > a[aria-current] { background: #244f93; color: #f1f6ff; }
  .catalog-toolbar { gap: 12px; }
  .sort-field select { font-size: 10px; }
  .detail-art { aspect-ratio: 1.3; }
  .detail-art > .brand-logo { width: 68%; height: 68%; }
  .detail-info h1 { font-size: 38px; }
  .bottom-nav { position: fixed; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 50; left: 0; right: 0; bottom: 0; min-height: 65px; padding: 9px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: #101823f5; border-top: 1px solid #34435c; box-shadow: 0 -8px 25px #0002; }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #9eacc4; min-width: 0; }
  .bottom-nav a > svg { width: 20px; height: 20px; }
  .bottom-nav a > span { font-size: 8px; white-space: nowrap; letter-spacing: -.1px; }
  .bottom-nav a[aria-current] { color: #b5d0ff; }
  .bottom-nav a[aria-current] > svg { filter: drop-shadow(0 0 6px #5895ff80); }
  .footer-top { padding-block: 30px; }
}
@media (max-width: 370px) {
  .container { width: calc(100% - 22px); }
  .header-inner { gap: 8px; }
  .wordmark { font-size: 19px; gap: 6px; }
  .wordmark .logo-build { width: 29px; height: 29px; }
  .header-search { padding-inline: 8px; }
  .header-search input { font-size: 9px; }
  .header-actions { gap: 4px; }
  .header-actions select { width: 31px; }
  .swipe-slide.offer-slide { padding: 20px 17px; min-height: 181px; }
  .swipe-copy h2 { font-size: 25px; }
  .offer-art { flex-basis: 105px; width: 105px; }
  .offer-device { width: 96px; height: 133px; }
  .offer-device .brand-logo { width: 60px; height: 60px; }
  .offer-orbit { width: 117px; }
  .device-eyebrow { font-size: 3.7px; }
  .section-title h2 { font-size: 21px; }
  .product-body h3 { font-size: 14px; }
  .product-body .product-meta { font-size: 6px; }
  .product-body .product-meta > span:last-child { font-size: 6px; }
  .product-bottom b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; }
  .logo-build > span { will-change: auto; }
}
.catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.category-sidebar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 7px; scrollbar-width: thin; }
.category-sidebar > .eyebrow { display: none; }
.category-sidebar > a { border: 1px solid #344560; padding: 10px 15px; border-radius: 20px; white-space: nowrap; font-size: 11px; background: #142035; gap: 12px; }
.category-sidebar > a[aria-current] { color: #e4eeff; background: #244f93; border-color: #5f8acf; }
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 801px) and (max-width: 1100px) { .catalog-layout { grid-template-columns: minmax(0, 1fr); } .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-sidebar > a { font-size: 10px; padding: 10px 12px; } }
/* Dimensional covers: an original mark, a photographic stage and brand-colored light. */
.product-card { border-color: #354760; }
.product-art {
  overflow: hidden;
  perspective: 850px;
  background: radial-gradient(ellipse at 50% 38%, #29416c, #0a101a 76%)!important;
}
.product-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/ks-cover-studio.webp') center / cover no-repeat;
  opacity: .85;
  filter: contrast(1.08) brightness(.82);
  transition: transform .5s ease;
}
.product-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 37%, var(--brand-color), transparent 73%);
  filter: none;
  opacity: .25;
  mix-blend-mode: screen;
}
.product-art > .brand-logo {
  width: 80%;
  height: 88%;
  max-width: 205px;
  z-index: 1;
  transform: perspective(850px) rotateX(5deg) rotateY(-8deg) translateY(-3px);
  transition: transform .28s ease;
}
.product-art .brand-logo img {
  filter: drop-shadow(1px 2px 0 #03060bc9) drop-shadow(2px 3px 0 #03060ba6) drop-shadow(0 12px 14px #000b);
}
.product-art .logo-reversed img {
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(1px 2px 0 #03060bc9) drop-shadow(2px 3px 0 #03060ba6) drop-shadow(0 12px 14px #000b);
}
.product-art:hover::before { transform: scale(1.035); }
.product-art:hover > .brand-logo { transform: perspective(850px) rotateX(0) rotateY(-3deg) translateY(-5px) scale(1.025); }
@supports (background: color-mix(in srgb, red, blue)) {
  .product-card { border-color: color-mix(in srgb, var(--brand-color) 37%, #283044); }
  .product-art {
    background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--brand-color) 32%, #0c1524), color-mix(in srgb, var(--brand-color) 10%, #090d15) 76%)!important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-color) 28%, transparent);
  }
  .product-card:hover { border-color: color-mix(in srgb, var(--brand-color) 65%, #6981a9); }
}
@media (max-width: 800px) {
  .product-art > .brand-logo { width: 87%; height: 89%; max-width: 190px; }
  .product-art::before { opacity: .82; }
  .product-art .brand-logo img { filter: drop-shadow(1px 2px 0 #03060bc9) drop-shadow(0 8px 10px #000b); }
  .product-art .logo-reversed img { filter: grayscale(1) brightness(0) invert(1) drop-shadow(1px 2px 0 #03060bc9) drop-shadow(0 8px 10px #000b); }
}
@media (prefers-reduced-motion: reduce) {
  .product-art > .brand-logo, .product-art:hover > .brand-logo { transform: none; }
  .product-art:hover::before { transform: none; }
}


/* KeyseS visual polish — 2026-10-25 */
::selection { background: #4f83e8; color: #fff; }
html { scrollbar-color: #334866 #080c14; }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 540px at 12% -180px, #1c3d7338, transparent 72%),
    radial-gradient(760px 520px at 100% 18%, #38276620, transparent 70%),
    var(--paper);
}
#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #090e18d9;
  border-bottom-color: #2b3850b8;
  box-shadow: 0 10px 35px #00000026;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.header-inner { height: 78px; }
.desktop-nav { gap: 8px; }
.desktop-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: #aab8cf;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.desktop-nav a:hover { color: #f1f6ff; background: #18243a; }
.desktop-nav a[aria-current] {
  color: #f2f7ff;
  background: #1a2b49;
  box-shadow: inset 0 0 0 1px #42639480;
}
.header-search {
  border-color: #34445f;
  background: linear-gradient(180deg, #182130, #121925);
  box-shadow: inset 0 1px 0 #ffffff08;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-search:focus-within {
  border-color: #729be0;
  background: #19243a;
  box-shadow: 0 0 0 4px #4e82df1a, inset 0 1px 0 #ffffff0c;
}
.account-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #385174;
  border-radius: 999px;
  background: linear-gradient(180deg, #1a2942, #142036);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.account-button:hover { transform: translateY(-1px); border-color: #6e96d1; background: #20345a; }
.brand-ribbon {
  position: relative;
  padding-block: 17px;
  scroll-padding-inline: 8px;
}
.brand-ribbon > a {
  background: linear-gradient(145deg, #1d2c46, #101723 75%);
  border-color: #30415c;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 8px 18px #0002;
}
.brand-ribbon > a:hover {
  border-color: #759cda;
  box-shadow: inset 0 1px 0 #ffffff14, 0 12px 25px #0005, 0 0 22px #5186df18;
}
.swipe-track {
  border-color: #4a618d;
  box-shadow: 0 24px 60px #0000003b, inset 0 1px 0 #ffffff0c;
}
.swipe-slide.offer-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 45%, #ffffff0b 55%, transparent 65%),
    linear-gradient(180deg, #ffffff05, transparent 38%);
  mix-blend-mode: screen;
}
.swipe-copy h2 { text-wrap: balance; text-shadow: 0 2px 22px #0004; }
.offer-price { text-shadow: 0 6px 22px #0005; }
.offer-button {
  border: 1px solid #ffffff44;
  box-shadow: 0 10px 26px #0004, inset 0 1px 0 #fff;
}
.offer-device {
  box-shadow: 18px 24px 50px #0007, inset 2px 2px 0 #e2eaff28, 0 0 55px #6e8cff24;
}
.category-strip {
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.category-strip::-webkit-scrollbar { display: none; }
.category-strip a {
  box-shadow: inset 0 1px 0 #ffffff08;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.category-strip a:hover { transform: translateY(-1px); border-color: #5070a2!important; }
.home-collection { position: relative; }
.home-collection::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4c6384aa, transparent);
}
.section-title h2 { text-wrap: balance; }
.product-grid { align-items: stretch; }
.product-card {
  position: relative;
  background: linear-gradient(155deg, #151e2e, #0e1521 72%);
  box-shadow: inset 0 1px 0 #ffffff08, 0 10px 28px #0000001f;
  transition: transform .25s cubic-bezier(.2,.75,.25,1), border-color .25s ease, box-shadow .25s ease;
}
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff0b, transparent 34%);
}
.product-body {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #151d2aee, #101722);
}
.product-body h3 { letter-spacing: -.35px; text-wrap: balance; }
.product-bottom > a.product-go {
  box-shadow: inset 0 1px 0 #ffffff1f, 0 6px 16px #07152d80;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.product-bottom > a.product-go:hover { transform: translateX(2px); background: #2f68bc; border-color: #76a4e7; }
.card-stock { box-shadow: 0 4px 16px #0005; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#site-footer { box-shadow: inset 0 1px 0 #ffffff04; }
.footer-wordmark { color: #f0f5ff; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 #ffffff12, 0 24px 48px #00000052, 0 0 34px color-mix(in srgb, var(--brand-color) 10%, transparent);
  }
  .product-card:hover .product-art::before { transform: scale(1.055); }
}
@media (min-width: 1200px) {
  .container { width: min(1320px, calc(100% - 72px)); }
  .product-grid { gap: 26px 22px; }
  .swipe-slide.offer-slide { min-height: 300px; padding-inline: 58px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  #site-header { position: sticky; }
  .container { width: calc(100% - 40px); }
  .header-inner { height: 74px; }
  .swipe-track { box-shadow: 0 18px 42px #0004; }
}
@media (max-width: 800px) {
  body {
    background:
      radial-gradient(520px 300px at 15% -80px, #244b8133, transparent 70%),
      var(--paper);
  }
  #site-header { background: #0a101be8; }
  .header-inner { height: 68px; }
  .header-search { background: #141d2b; }
  .brand-ribbon { padding-block: 11px; }
  .swipe-track { box-shadow: 0 14px 34px #0005; }
  .swipe-slide.offer-slide::after { background: linear-gradient(115deg, transparent 50%, #ffffff08 58%, transparent 67%); }
  .category-strip { mask-image: none; }
  .product-card { box-shadow: inset 0 1px 0 #ffffff08, 0 8px 20px #0002; }
  .product-body { background: linear-gradient(180deg, #151e2c, #101722); }
  .bottom-nav {
    background: #0c1421e8;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-top-color: #3a4c68;
  }
}
@media (max-width: 480px) {
  .container { width: calc(100% - 22px); }
  .header-inner { gap: 8px; }
  .wordmark-domain { display: none; }
  .swipe-slide.offer-slide { padding-inline: 17px; }
  .offer-art { opacity: .92; }
  .section-title h2 { font-size: 21px; }
  .product-grid { gap: 12px 9px; }
  .product-body { padding: 11px 9px 10px; }
  .product-body h3 { font-size: 14px; }
  .product-bottom b { font-size: 16px; }
}
@supports not (background: color-mix(in srgb, red, blue)) {
  @media (hover: hover) and (pointer: fine) {
    .product-card:hover { box-shadow: inset 0 1px 0 #ffffff12, 0 24px 48px #00000052; }
  }
}

/* Horizontal scrollers stay touch-friendly without visible browser bars. */
.category-strip, .brand-ribbon, .category-sidebar { -ms-overflow-style: none; scrollbar-width: none !important; }
.category-strip::-webkit-scrollbar, .brand-ribbon::-webkit-scrollbar, .category-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }


/* Tablet and touch refinement — 2026-10-25 */
.brand-ribbon,
.category-strip,
.category-sidebar {
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.brand-ribbon > a,
.category-strip > a,
.category-sidebar > a { scroll-snap-align: start; }
.brand-ribbon .logo-reversed img[src$=".jpg"] { filter: none !important; }

@media (min-width: 600px) and (max-width: 800px) {
  .product-grid,
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 11px; }
  .product-art,
  .catalog-grid .product-art { aspect-ratio: 1.28; padding: 12px; }
  .product-art > .brand-logo { width: 88%; height: 90%; }
  .product-body { padding: 11px 10px 12px; }
  .product-body h3 { font-size: 14px; min-height: 34px; }
  .product-body .product-bottom { margin-top: 10px; }
  .product-bottom b { font-size: 16px; }
  .product-bottom b.ask-price { font-size: 9px; }
  .section-title { margin-bottom: 15px; }
}

@media (max-width: 800px) {
  .brand-ribbon,
  .category-strip { margin-inline: -4px; padding-inline: 4px 34px; }
  .brand-ribbon > a { box-shadow: inset 0 1px 0 #ffffff0c, 0 7px 16px #0003; }
  .category-strip a { min-height: 38px; }
  .bottom-nav { min-height: 69px; padding-inline: 10px; }
  .bottom-nav a { border-radius: 12px; padding: 6px 3px; transition: color .2s ease, background .2s ease; }
  .bottom-nav a[aria-current] { color: #e2edff; background: linear-gradient(180deg, #203756cc, #172740aa); }
}

@media (max-width: 599px) {
  .product-body h3 { min-height: 34px; }
}

.product-art .logo-reversed img[src$=".jpg"] { filter: none !important; }


/* Premium catalog refinement — 2026-10-25 */
.swipe-track { border-radius: 20px; }
.swipe-slide.offer-slide { box-shadow: inset 0 1px 0 #ffffff12; }
.swipe-copy h2 { text-shadow: 0 5px 24px #05091466; }
.offer-button { border-radius: 9px; box-shadow: 0 9px 24px #0309184d, inset 0 1px 0 #ffffff90; }

.product-card { border-radius: 16px; }
.product-art > .brand-logo {
  width: 70%;
  height: 74%;
  max-width: 170px;
  padding: 7px;
  border: 1px solid #ffffff0d;
  border-radius: 18px;
  background: #ffffff05;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 16px 30px #0004;
}
.product-art .brand-logo img { border-radius: 12px; }
.product-body { display: flex; flex: 1; flex-direction: column; }
.product-body .product-bottom { margin-top: auto; padding-top: 13px; }
.product-card::after { border-radius: inherit; }

@media (min-width: 600px) and (max-width: 800px) {
  .product-art > .brand-logo { width: 72%; height: 74%; max-width: 148px; padding: 6px; border-radius: 15px; }
  .product-art .brand-logo img { border-radius: 10px; }
}

@media (max-width: 599px) {
  .product-art > .brand-logo { width: 74%; height: 76%; max-width: 154px; padding: 5px; border-radius: 14px; }
  .product-art .brand-logo img { border-radius: 9px; }
  .product-card { border-radius: 14px; }
}


/* Keep product marks large and unframed. */
.product-art > .brand-logo {
  width: 80%;
  height: 88%;
  max-width: 205px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-art .brand-logo img { border-radius: 5px; }
@media (min-width: 600px) and (max-width: 800px) {
  .product-art > .brand-logo { width: 88%; height: 90%; max-width: 190px; padding: 0; border-radius: 0; }
}
@media (max-width: 599px) {
  .product-art > .brand-logo { width: 87%; height: 89%; max-width: 190px; padding: 0; border-radius: 0; }
}


/* Promo banner slide (homepage, first slide) */
.swipe-slide.banner-slide{position:relative;overflow:hidden;isolation:isolate;padding:0;min-height:282px;background:#070b2a}
.banner-slide-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
.banner-slide-link::before{content:"";position:absolute;inset:-48px;z-index:-1;background:url(/assets/promo/chatgpt-plus-codex-22azn.webp) center/cover no-repeat;filter:blur(38px) saturate(1.25) brightness(.72);transform:scale(1.15)}
.banner-slide-link img{position:relative;display:block;width:100%;height:100%;object-fit:contain;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.banner-slide-link:hover img{transform:scale(1.012)}
.banner-slide-link:focus-visible{outline:2px solid #7fe7ff;outline-offset:-4px;border-radius:inherit}
.banner-slide-glow{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);transform:translateX(-120%);animation:ksBannerSheen 7s ease-in-out 1.5s infinite}
@keyframes ksBannerSheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (max-width:900px){.swipe-slide.banner-slide{min-height:0;aspect-ratio:3/1}}
@media (prefers-reduced-motion:reduce){.banner-slide-glow{display:none}.banner-slide-link img{transition:none}}