:root {
    --bg: #08080a;
    --bg-soft: #0d0d10;
    --surface: #121216;
    --surface-raised: #18181d;
    --surface-red: #13170c;
    --text: #f6f2f2;
    --muted: #a7a0a1;
    --faint: #716a6c;
    --line: rgba(255,255,255,.09);
    --line-strong: rgba(255,255,255,.15);
    --red: #ceeb46;
    --red-bright: #e3ff70;
    --red-deep: #546b18;
    --white: #fff;
    --shadow: 0 30px 90px rgba(0,0,0,.44);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body.cart-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.ambient { position: fixed; z-index: -1; width: 580px; height: 580px; border-radius: 50%; pointer-events: none; filter: blur(120px); opacity: .12; }
.ambient-one { top: -280px; right: -130px; background: var(--red); }
.ambient-two { top: 720px; left: -360px; background: #4f6415; }

.site-header {
    width: min(1280px, calc(100% - 40px));
    margin: 18px auto 0;
    padding: 11px 12px 11px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: sticky;
    top: 14px;
    z-index: 30;
    background: rgba(12,12,15,.82);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(0,0,0,.24);
    backdrop-filter: blur(20px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 "Manrope", sans-serif; letter-spacing: -.8px; }
.brand > span:last-child > span { color: var(--red-bright); }
.brand-mark { width: 28px; height: 28px; display: inline-block; border: 7px solid var(--red); border-radius: 50%; box-shadow: inset 0 0 0 2px #08080a, 0 0 22px rgba(206,235,70,.22); }
nav { display: flex; gap: 30px; color: var(--muted); font-size: 13px; font-weight: 700; }
nav a { transition: color .18s ease; }
nav a:hover { color: var(--white); }
.cart-pill { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.1); background: #f5f1f1; color: #111114; padding: 10px 14px; border-radius: 11px; cursor: pointer; font-weight: 800; }
.cart-pill span { display: inline-grid; place-items: center; margin-left: 8px; min-width: 23px; height: 23px; border-radius: 50%; color: #111509; background: var(--red); }

.section-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.hero { min-height: 680px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 68px; padding-block: 85px 92px; }
.eyebrow, .step-kicker { color: var(--red-bright); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.75px; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 5px rgba(224,255,106,.1), 0 0 18px rgba(224,255,106,.65); }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
h1 { margin: 22px 0; max-width: 760px; font-size: clamp(52px, 6.35vw, 88px); line-height: .98; letter-spacing: -5px; }
h1 em { font-style: normal; color: transparent; background: linear-gradient(115deg, #efffa4, #92ad27); background-clip: text; -webkit-background-clip: text; }
.hero-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.primary-link, .primary-button { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 18px; border: 0; border-radius: 11px; color: #111509; background: linear-gradient(135deg, var(--red-bright), #9fbc2b); box-shadow: 0 14px 32px rgba(206,235,70,.2), inset 0 1px 0 rgba(255,255,255,.24); font-weight: 800; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.primary-link:hover, .primary-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.text-link { padding: 0; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.text-link:hover { color: white; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust-row span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--faint); font-size: 12px; background: rgba(255,255,255,.025); }
.trust-row b { color: #ded8d9; }

.ring-visual { min-height: 510px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hubring-svg { width: min(570px, 90vw); height: auto; overflow: visible; filter: drop-shadow(0 28px 34px rgba(0,0,0,.34)); }
.hubring-highlight { animation: hubringSheen 5.8s ease-in-out infinite; }
.hubring-markings { pointer-events: none; }
.visual-note { position: absolute; min-width: 154px; padding: 13px 15px; background: rgba(17,17,21,.91); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.visual-note b, .visual-note span { display: block; }
.visual-note b { font-size: 13px; }
.visual-note span { margin-top: 3px; color: var(--faint); font-size: 11px; }
.note-one { top: 23%; right: 0; }
.note-two { bottom: 17%; left: 0; }

.selector-wrap { width: min(1320px, calc(100% - 28px)); margin: 0 auto; padding: 60px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, #121216, #0c0c0f 65%); box-shadow: var(--shadow); }
.selector-intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 34px; }
.selector-intro h2, .section-heading h2, .help h2 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 54px); letter-spacing: -2.7px; }
.selector-intro p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.65; }
.selector-card { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
.measurement-area, .order-summary { border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.025); }
.measurement-area { min-width: 0; padding: 14px; }
.measurement-mode { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #0b0b0e; }
.measurement-mode button { min-height: 39px; padding: 0 17px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; }
.measurement-mode button.is-active { color: white; background: #25252b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.measurement-panel[hidden] { display: none; }
.measurement-grid { display: grid; grid-template-columns: 1fr 38px 1fr; gap: 10px; }
.choice-column { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.018); }
.choice-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.step-number { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(224,255,106,.3); border-radius: 10px; color: var(--red-bright); font-size: 11px; font-weight: 800; }
.choice-heading h3 { margin: 0; font-size: 16px; }
.choice-heading p { margin: 3px 0 0; color: var(--faint); font-size: 11px; }
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.size-option input { position: absolute; opacity: 0; pointer-events: none; }
.size-option span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); color: #cbc5c6; cursor: pointer; transition: .16s ease; font-size: 12px; font-weight: 700; }
.size-option span:hover { border-color: rgba(224,255,106,.55); color: white; }
.size-option input:checked + span { border-color: var(--red-bright); background: rgba(206,235,70,.17); color: white; box-shadow: inset 0 0 0 1px rgba(224,255,106,.2), 0 6px 20px rgba(206,235,70,.1); }
.size-option.is-disabled { display: none; }
.choice-divider { display: grid; place-items: center; color: var(--red-bright); }
.choice-divider span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #101013; }
.choice-hint { color: var(--faint); font-size: 11px; line-height: 1.45; }

.custom-panel { min-height: 330px; padding: 38px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 100% 0, rgba(206,235,70,.12), transparent 42%), rgba(255,255,255,.015); }
.custom-intro { max-width: 600px; }
.custom-badge { display: inline-block; padding: 7px 9px; border: 1px solid rgba(224,255,106,.3); border-radius: 8px; color: var(--red-bright); background: rgba(206,235,70,.08); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px; }
.custom-intro h3 { margin: 18px 0 8px; font-size: 28px; letter-spacing: -1px; }
.custom-intro p { margin: 0; color: var(--muted); line-height: 1.6; }
.custom-fields { display: grid; grid-template-columns: 1fr 38px 1fr; gap: 14px; align-items: end; margin-top: 32px; }
.custom-fields label > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.custom-fields label small { color: var(--faint); font-size: 10px; font-weight: 600; }
.dimension-input { min-height: 64px; display: flex; align-items: center; padding: 0 17px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0a0a0d; transition: border-color .18s ease, box-shadow .18s ease; }
.dimension-input:focus-within { border-color: var(--red-bright); box-shadow: 0 0 0 4px rgba(206,235,70,.1); }
.dimension-input input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: white; font: 800 24px/1 "Manrope",sans-serif; }
.dimension-input input::placeholder { color: #403b3d; }
.dimension-input b { color: var(--faint); font-size: 12px; }
.custom-arrow { height: 64px; display: grid; place-items: center; color: var(--red-bright); }
.custom-validation { min-height: 18px; margin: 12px 0 0; color: #ff7b84; font-size: 12px; }

.order-summary { display: flex; flex-direction: column; padding: 25px; color: var(--text); background: linear-gradient(160deg, #171b0f, #131317 55%); }
.summary-label { display: block; margin-bottom: 9px; color: var(--faint); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; }
.order-summary > div:first-child strong { display: block; font: 800 21px/1.25 "Manrope",sans-serif; }
.order-summary small { display: block; margin-top: 6px; color: var(--faint); }
.price-block { margin: 23px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.price-block strong, .price-block span { display: block; }
.price-block strong { font: 800 31px/1 "Manrope",sans-serif; }
.price-block span { margin-top: 6px; color: var(--muted); font-size: 11px; }
.quantity-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.quantity-control { display: grid; grid-template-columns: 42px 1fr 42px; margin: 8px 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.quantity-control button { border: 0; background: #222228; cursor: pointer; font-size: 18px; }
.quantity-control button:hover { background: #2a2a31; }
.quantity-control input { width: 100%; border: 0; outline: 0; text-align: center; background: #111115; color: white; appearance: textfield; }
.primary-button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.form-status { min-height: 34px; margin: 12px 0 0; color: #d6cfd0; font-size: 11px; line-height: 1.5; }
.form-status.is-error { color: #ff7b84; }

.how { padding-block: 120px; }
.section-heading { max-width: 760px; }
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 46px; }
.how-grid article { min-height: 245px; padding: 30px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.how-grid article::after { content: ""; position: absolute; width: 130px; height: 130px; right: -70px; bottom: -75px; border: 20px solid rgba(206,235,70,.07); border-radius: 50%; }
.how-grid article > span { color: var(--red-bright); font: 800 12px/1 "Manrope",sans-serif; letter-spacing: 1px; }
.how-grid h3 { margin: 55px 0 11px; font-size: 22px; }
.how-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.help { margin-bottom: 110px; padding: 50px 52px; display: flex; align-items: center; justify-content: space-between; gap: 35px; border: 1px solid rgba(224,255,106,.2); border-radius: 25px; background: radial-gradient(circle at 90% 0, rgba(206,235,70,.2), transparent 42%), #11160b; }
.help p { max-width: 650px; color: var(--muted); line-height: 1.65; }
.secondary-button { min-width: 210px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(255,255,255,.055); white-space: nowrap; font-weight: 800; }
.secondary-button:hover { border-color: rgba(224,255,106,.5); }

.scrim { position: fixed; z-index: 55; inset: 0; visibility: hidden; opacity: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(5px); transition: .25s ease; }
.scrim.is-open { visibility: visible; opacity: 1; }
.cart-panel { position: fixed; z-index: 60; top: 0; right: 0; width: min(480px, 100%); height: 100dvh; padding: 28px; display: flex; flex-direction: column; background: #101014; border-left: 1px solid var(--line); box-shadow: -25px 0 80px rgba(0,0,0,.55); transform: translateX(105%); transition: transform .28s ease; }
.cart-panel.is-open { transform: translateX(0); }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cart-head span { color: var(--red-bright); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; }
.cart-head h2 { margin: 4px 0 0; font-size: 30px; }
.cart-head button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; background: #1d1d22; font-size: 23px; }
.cart-items { flex: 1; overflow-y: auto; padding-block: 16px; }
.empty-cart { margin-top: 55px; color: var(--faint); text-align: center; line-height: 1.7; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.cart-item strong, .cart-item span { display: block; }
.cart-item-title { font: 700 14px/1.35 "Manrope",sans-serif; }
.cart-item-meta { margin-top: 5px; color: var(--faint); font-size: 11px; }
.cart-item-price { margin-top: 8px; color: #ddd6d7; font-size: 12px; }
.cart-item-actions { display: flex; flex-direction: column; align-items: end; justify-content: space-between; }
.remove-item { padding: 4px 0; border: 0; color: #ff727c; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.mini-quantity { display: grid; grid-template-columns: 29px 32px 29px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.mini-quantity button { border: 0; background: #202026; cursor: pointer; }
.mini-quantity span { display: grid; place-items: center; margin: 0; background: #131317; color: white; font-size: 11px; }
.cart-totals { padding-top: 18px; border-top: 1px solid var(--line); }
.cart-totals > div { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 13px; }
.cart-totals .cart-total { margin: 18px 0; color: white; font-size: 20px; }
.clear-cart { margin: 0 auto 15px; display: block; border: 0; border-bottom: 1px solid var(--line-strong); color: var(--faint); background: transparent; cursor: pointer; font-size: 11px; }
.checkout-button { width: 100%; }
.checkout-button[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.cart-totals > small { display: block; margin-top: 11px; color: var(--faint); text-align: center; line-height: 1.4; }

footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto 35px; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
.footer-brand { color: var(--text); font-size: 16px; }
.footer-brand .brand-mark { width: 23px; height: 23px; border-width: 6px; }

/* ------------------------- 2026 motion system ------------------------- */
.ring-visual {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    perspective: 1100px;
    transform-style: preserve-3d;
}
.ring {
    transform: perspective(1100px)
        rotateX(var(--tilt-y))
        rotateY(var(--tilt-x));
    transform-style: preserve-3d;
    will-change: transform, translate;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    animation: ringFloat 6.4s ease-in-out infinite;
}

.selector-wrap {
    --glow-x: 50%;
    --glow-y: 50%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.selector-wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px;
    pointer-events: none;
    background: radial-gradient(460px circle at var(--glow-x) var(--glow-y), rgba(206,235,70,.13), transparent 62%);
    opacity: .85;
    transition: opacity .35s ease;
}
.selector-wrap::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.018) 45%, transparent 70%);
    transform: translateX(-100%);
    animation: panelSweep 9s ease-in-out infinite 2s;
}

.primary-link, .primary-button, .secondary-button, .cart-pill {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.primary-link::before, .primary-button::before, .secondary-button::before, .cart-pill::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140%;
    left: -35%;
    width: 25%;
    height: 380%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: rotate(22deg) translateX(-220%);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.primary-link:hover::before, .primary-button:hover::before, .secondary-button:hover::before, .cart-pill:hover::before { transform: rotate(22deg) translateX(650%); }

.how-grid article {
    --card-rx: 0deg;
    --card-ry: 0deg;
    transform: perspective(900px) rotateX(var(--card-rx)) rotateY(var(--card-ry));
    transform-style: preserve-3d;
    transition: transform .18s ease, border-color .25s ease, box-shadow .25s ease;
    will-change: transform;
}
.how-grid article:hover { border-color: rgba(224,255,106,.22); box-shadow: 0 22px 55px rgba(0,0,0,.28); }
.how-grid article > * { transform: translateZ(18px); }

.motion-capable .site-header,
.motion-capable .hero-copy > *,
.motion-capable .ring-visual { opacity: 0; }
.motion-ready .site-header { animation: introHeader .72s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .hero-copy > * { animation: introCopy .85s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .hero-copy > :nth-child(1) { animation-delay: .08s; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay: .15s; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay: .23s; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay: .31s; }
.motion-ready .hero-copy > :nth-child(5) { animation-delay: .39s; }
.motion-ready .ring-visual { animation: introVisual 1.1s cubic-bezier(.16,1,.3,1) .18s both; }

.reveal { opacity: 0; translate: 0 34px; transition: opacity .85s ease, translate .85s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; translate: 0 0; }
.how-grid .reveal:nth-child(2) { transition-delay: .11s; }
.how-grid .reveal:nth-child(3) { transition-delay: .22s; }

.cart-panel { transition: transform .48s cubic-bezier(.16,1,.3,1); }
.cart-item { animation: cartItemIn .48s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--item-index, 0) * 55ms); }
.size-option input:checked + span { animation: optionSelect .32s cubic-bezier(.2,1.5,.4,1); }

@keyframes introHeader {
    from { opacity: 0; translate: 0 -18px; scale: .985; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes introCopy {
    from { opacity: 0; translate: 0 28px; filter: blur(7px); }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes introVisual {
    from { opacity: 0; translate: 45px 25px; scale: .9; filter: blur(12px); }
    to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
@keyframes ringFloat {
    0%, 100% { translate: 0 -2px; }
    50% { translate: 0 4px; }
}
@keyframes hubringSheen {
    0%, 100% { opacity: .16; translate: -8px 2px; }
    50% { opacity: .38; translate: 9px -2px; }
}
@keyframes panelSweep {
    0%, 18% { transform: translateX(-100%); }
    45%, 100% { transform: translateX(120%); }
}
@keyframes cartItemIn {
    from { opacity: 0; translate: 24px 0; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes optionSelect {
    0% { scale: .92; }
    60% { scale: 1.04; }
    100% { scale: 1; }
}

@media (max-width: 1080px) {
    .selector-wrap { padding: 40px 24px; }
    .selector-card { grid-template-columns: 1fr; }
    .order-summary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
    .order-summary .price-block { margin-top: 0; border-top: 0; }
    .quantity-label, .quantity-control, .order-summary .primary-button, .order-summary .form-status { grid-column: 2; }
}

@media (max-width: 780px) {
    .site-header { width: calc(100% - 20px); top: 8px; }
    nav { display: none; }
    .hero { min-height: 0; grid-template-columns: 1fr; gap: 30px; padding-block: 68px 58px; }
    h1 { letter-spacing: -3.5px; }
    .ring-visual { min-height: 370px; }
    .hubring-svg { width: min(560px, 96vw); }
    .note-one { right: 1%; top: 11%; }
    .note-two { left: 1%; bottom: 9%; }
    .selector-wrap { padding: 30px 14px; border-radius: 22px; }
    .selector-intro { display: block; padding-inline: 7px; }
    .selector-intro p { margin-top: 12px; }
    .measurement-grid { grid-template-columns: 1fr; }
    .choice-divider { display: none; }
    .order-summary { display: flex; }
    .quantity-label, .quantity-control, .order-summary .primary-button, .order-summary .form-status { grid-column: auto; }
    .order-summary .price-block { margin: 23px 0; border-top: 1px solid var(--line); }
    .custom-panel { padding: 25px 18px; }
    .custom-fields { grid-template-columns: 1fr; }
    .custom-arrow { height: 20px; transform: rotate(90deg); }
    .how { padding-block: 82px; }
    .how-grid { grid-template-columns: 1fr; }
    .how-grid article { min-height: 190px; }
    .how-grid h3 { margin-top: 32px; }
    .help { padding: 35px 26px; display: block; }
    .secondary-button { margin-top: 20px; }
    footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
    .section-shell { width: calc(100% - 28px); }
    .brand { font-size: 17px; }
    .brand-mark { width: 25px; height: 25px; border-width: 6px; }
    .cart-pill { padding: 9px 10px; font-size: 12px; }
    .hero-lead { font-size: 16px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
    .trust-row { gap: 8px; }
    .size-grid { grid-template-columns: repeat(3, 1fr); }
    .measurement-mode { width: 100%; }
    .measurement-mode button { padding-inline: 8px; }
    .choice-column { padding: 17px 13px; }
    .visual-note { min-width: 130px; padding: 10px; }
    .cart-panel { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .motion-capable .site-header,
    .motion-capable .hero-copy > *,
    .motion-capable .ring-visual,
    .reveal { opacity: 1 !important; translate: none !important; filter: none !important; }
}

/* Professional automotive storefront refinement */
:root {
    --bg: #080b0e;
    --bg-soft: #0c1014;
    --surface: #11161b;
    --surface-raised: #171d23;
    --text: #f3f6f8;
    --muted: #a4afb9;
    --faint: #717d87;
    --line: rgba(196,211,222,.12);
    --line-strong: rgba(196,211,222,.22);
    --red: #b8d936;
    --red-bright: #d5f15b;
    --red-deep: #53661a;
}

body { background: linear-gradient(180deg,#080b0e 0,#0b0f13 48%,#080b0e 100%); }
.ambient { opacity: .07; }
.service-bar { min-height: 34px; display:flex; align-items:center; justify-content:center; gap:38px; padding:7px 20px; border-bottom:1px solid var(--line); background:#0f1419; color:#aeb8c1; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.service-bar span + span::before { content:""; display:inline-block; width:3px; height:3px; margin:0 20px 3px 0; border-radius:50%; background:var(--red); }
.site-header { top: 10px; border-radius: 10px; background: rgba(11,15,19,.94); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.brand-mark { box-shadow: inset 0 0 0 2px #080b0e; }
.cart-pill { border-radius: 7px; background:#f2f5f6; }
.hero h1 { max-width:760px; font-size:clamp(58px,7.3vw,106px); line-height:.91; }
.hero h1 em { color:var(--red-bright); }
.primary-link,.primary-button { border-radius:7px; box-shadow:none; }
.trust-row { border-radius:8px; background:rgba(255,255,255,.025); }
.visual-note { border-radius:8px; background:rgba(14,19,24,.94); }
.selector-wrap { border-radius:14px; background:#10151a; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.measurement-area,.order-summary,.choice-column,.custom-panel { border-radius:9px; }
.measurement-mode,.size-option span,.dimension-input,.quantity-control { border-radius:7px; }
.order-summary { background:#151b17; }
.how-grid article { border-radius:10px; background:#11161b; }
.how-grid article::after { opacity:.6; }
.help { border-radius:12px; background:linear-gradient(110deg,#151b12,#10151a); }
.secondary-button { border-radius:7px; }
.cart-panel { background:#0e1318; }
.navring-product-photo { width:min(680px,100%); height:auto; display:block; border-radius:12px; object-fit:cover; filter:drop-shadow(0 26px 36px rgba(0,0,0,.28)); }
.ring-visual .hubring-svg { display:none; }
.ring-visual { padding:18px; }

.fit-section { margin-bottom:110px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:48px; border:1px solid var(--line); border-radius:12px; background:#11161b; }
.fit-copy h2 { margin:9px 0 18px; font-size:clamp(34px,4vw,52px); letter-spacing:-2.3px; }
.fit-copy p { max-width:620px; margin:0; color:var(--muted); font-size:17px; line-height:1.7; }
.fit-example { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
.fit-example > div { padding:28px; border:1px solid var(--line-strong); border-radius:9px; background:#0b0f13; }
.fit-example span,.fit-example strong,.fit-example small { display:block; }
.fit-example span { color:var(--faint); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.fit-example strong { margin:8px 0 5px; font:800 clamp(34px,4vw,54px)/1 "Manrope",sans-serif; color:var(--red-bright); }
.fit-example small { color:var(--muted); }
.fit-example > b { color:var(--red-bright); font-size:24px; }

.faq { padding-bottom:110px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:38px; }
.faq details { border:1px solid var(--line); border-radius:9px; background:#11161b; }
.faq summary { position:relative; padding:21px 50px 21px 22px; cursor:pointer; list-style:none; font-weight:800; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; top:50%; right:20px; translate:0 -50%; color:var(--red-bright); font-size:22px; }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:0; padding:0 22px 22px; color:var(--muted); line-height:1.65; }

@media (max-width:780px) {
    .service-bar { gap:12px; overflow:hidden; white-space:nowrap; justify-content:flex-start; }
    .service-bar span + span::before { margin-right:10px; }
    .fit-section { grid-template-columns:1fr; gap:32px; padding:30px 22px; margin-bottom:80px; }
    .faq-grid { grid-template-columns:1fr; }
}

@media (max-width:460px) {
    .service-bar span:nth-child(3) { display:none; }
    .fit-example { gap:8px; }
    .fit-example > div { padding:18px 12px; }
}

/* Clean, accessible storefront — large controls and clear reading order */
:root {
    --bg:#f4f6f7; --bg-soft:#eef1f2; --surface:#fff; --surface-raised:#fff;
    --surface-red:#f7f9ee; --text:#172027; --muted:#52616b; --faint:#6f7b83;
    --line:#d8dfe3; --line-strong:#b8c3ca; --red:#badb29; --red-bright:#a9cb16;
    --red-deep:#526500; --white:#fff; --shadow:0 14px 40px rgba(25,39,48,.09);
}
html { color-scheme:light; scroll-padding-top:110px; }
body { color:var(--text); background:#f4f6f7; font-size:17px; line-height:1.55; }
.ambient,.service-bar { display:none; }
.site-header { position:sticky; top:0; z-index:50; width:100%; min-height:80px; margin:0; padding:0 max(24px,calc((100% - 1180px)/2)); border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; box-shadow:0 3px 14px rgba(25,39,48,.06); backdrop-filter:none; }
.brand { color:#172027; font-size:22px; }
.brand-mark { width:30px; height:30px; border:8px solid var(--red); box-shadow:none; }
.site-header nav { gap:12px; }
.site-header nav a { padding:13px 16px; border-radius:8px; color:#35444d; font-size:16px; font-weight:700; }
.site-header nav a:hover { color:#172027; background:#eef2f3; }
.cart-pill { min-height:50px; padding:0 18px; border:1px solid #172027; border-radius:8px; color:#fff; background:#172027; font-size:16px; }
.cart-pill span { color:#172027; background:var(--red); }
.section-shell,.selector-wrap { width:min(1180px,calc(100% - 40px)); }
.hero { min-height:auto; grid-template-columns:1fr 1fr; gap:64px; padding-block:74px; }
.eyebrow,.step-kicker { color:#526500; font-size:13px; letter-spacing:.08em; }
.eyebrow span { background:var(--red-deep); box-shadow:none; }
.hero h1,.selector-intro h2,.section-heading h2,.fit-copy h2,.help h2 { color:#172027; }
.hero h1 { max-width:650px; margin:18px 0 24px; font-size:clamp(48px,6vw,78px); line-height:1; letter-spacing:-3px; }
.hero h1 em { color:#526500; font-style:normal; }
.hero-lead { max-width:650px; color:#52616b; font-size:21px; line-height:1.55; }
.primary-link,.primary-button { min-height:56px; padding:0 22px; border:0; border-radius:8px; color:#172027; background:var(--red); box-shadow:none; font-size:17px; font-weight:800; }
.primary-link:hover,.primary-button:hover:not(:disabled) { background:#c9e64a; transform:none; }
.text-link { min-height:52px; color:#26343c; font-size:16px; text-decoration:underline; text-underline-offset:4px; }
.trust-row { padding:0; gap:20px; border:0; background:transparent; color:#52616b; }
.trust-row span { padding-right:20px; border-right:1px solid var(--line); }
.ring-visual { min-height:390px; padding:0; border:1px solid var(--line); border-radius:16px; background:#f1efec; overflow:hidden; box-shadow:var(--shadow); perspective:none; }
.navring-product-photo { width:100%; height:100%; min-height:390px; border-radius:16px; object-fit:cover; filter:none; }
.visual-note { min-width:145px; padding:13px 15px; border:0; border-radius:8px; color:#fff; background:rgba(15,21,25,.9); box-shadow:0 5px 18px rgba(0,0,0,.24); }
.visual-note b { font-size:17px; }.visual-note span { color:#d3d9dc; font-size:12px; }
.selector-wrap { margin:28px auto 70px; padding:44px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); overflow:visible; }
.selector-wrap::before,.selector-wrap::after { display:none; }
.selector-intro { align-items:end; margin-bottom:30px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.selector-intro h2 { margin:5px 0 0; font-size:clamp(38px,5vw,56px); letter-spacing:-2px; }
.selector-intro p { max-width:470px; margin:0; color:#52616b; font-size:18px; }
.selector-card { grid-template-columns:minmax(0,1fr) 330px; gap:28px; border:0; background:transparent; overflow:visible; }
.measurement-area { padding:0; border:0; background:transparent; }
.measurement-mode { width:100%; margin-bottom:22px; padding:5px; border:1px solid var(--line); border-radius:10px; background:#eef2f3; }
.measurement-mode button { min-height:52px; flex:1; border-radius:7px; color:#35444d; font-size:16px; }
.measurement-mode button.is-active { color:#172027; background:#fff; box-shadow:0 2px 8px rgba(25,39,48,.12); }
.measurement-grid { grid-template-columns:1fr; gap:18px; }
.choice-column { padding:25px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.choice-divider { display:none; }
.choice-heading { margin-bottom:22px; }
.choice-heading h3 { margin:0 0 3px; color:#172027; font-size:23px; }
.choice-heading p,.choice-hint { color:#63717a; font-size:15px; }
.step-number { width:46px; height:46px; border:0; border-radius:50%; color:#172027; background:var(--red); font-size:19px; }
.size-grid { grid-template-columns:repeat(4,minmax(75px,1fr)); gap:10px; }
.size-option span { min-height:56px; border:2px solid #cbd3d8; border-radius:8px; color:#172027; background:#fff; font-size:16px; }
.size-option span:hover { border-color:#687780; background:#f5f7f8; }
.size-option input:checked + span { border-color:#526500; color:#172027; background:#eaf4bd; box-shadow:0 0 0 3px rgba(82,101,0,.12); }
.size-option input:disabled + span { color:#a6afb5; background:#f3f5f6; }
.order-summary { position:sticky; top:105px; align-self:start; padding:28px; border:1px solid #ccd4d8; border-radius:12px; color:#172027; background:#f7f9f9; }
.summary-label { color:#526500; font-size:12px; }
.order-summary > div:first-child strong { color:#172027; font-size:24px; }
.order-summary small,.price-block span,.quantity-label { color:#5f6d75; font-size:14px; }
.price-block { border-color:var(--line); }.price-block strong { color:#172027; font-size:38px; }
.quantity-control { min-height:54px; border:1px solid var(--line-strong); }
.quantity-control button { color:#172027; background:#e8edef; font-size:24px; }
.quantity-control input { color:#172027; background:#fff; font-size:18px; }
.custom-panel { border:1px solid var(--line); background:#fff; }
.custom-badge { color:#526500; border-color:#bfd46a; background:#f1f7d7; }
.custom-intro h3,.custom-fields label>span { color:#172027; }
.custom-intro p { color:#52616b; }.dimension-input { background:#fff; border:2px solid #cbd3d8; }
.dimension-input input { color:#172027; }.dimension-input input::placeholder { color:#9ba6ad; }
.dimension-input:focus-within { border-color:#526500; box-shadow:0 0 0 3px rgba(82,101,0,.12); }
.how { padding-block:75px; }.how-grid { gap:18px; margin-top:32px; }
.how-grid article { min-height:210px; padding:28px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 6px 20px rgba(25,39,48,.05); transform:none; }
.how-grid article::after { display:none; }.how-grid article>span { color:#526500; font-size:15px; }
.how-grid h3 { margin:35px 0 10px; color:#172027; }.how-grid p { color:#52616b; font-size:17px; }
.fit-section,.faq details { border-color:var(--line); background:#fff; }.fit-section { margin-bottom:75px; border-radius:14px; box-shadow:0 6px 24px rgba(25,39,48,.05); }
.fit-copy p,.faq details p { color:#52616b; }.fit-example>div { border-color:var(--line); background:#f5f7f8; }
.fit-example strong,.fit-example>b,.faq summary::after { color:#526500; }.faq summary { color:#172027; font-size:18px; }
.help { margin-bottom:75px; border-color:#d4dda9; border-radius:14px; background:#f0f5d9; }
.help p { color:#52616b; }.secondary-button { border-color:#172027; color:#fff; background:#172027; }
.cart-panel { color:#172027; background:#fff; border-color:var(--line); }.cart-head h2,.cart-totals .cart-total,.mini-quantity span { color:#172027; }
.cart-head button,.mini-quantity button { color:#172027; background:#e8edef; }.mini-quantity span { background:#fff; }
.cart-item-price,.form-status { color:#52616b; }.scrim { background:rgba(23,32,39,.5); }
footer { color:#66747c; border-color:var(--line); }.footer-brand { color:#172027; }

@media (max-width:900px) {
    .hero { grid-template-columns:1fr; }.selector-card { grid-template-columns:1fr; }
    .order-summary { position:static; }.site-header nav { display:none; }
}
@media (max-width:600px) {
    body { font-size:16px; }.site-header { min-height:68px; padding:0 14px; }
    .brand { font-size:18px; }.section-shell,.selector-wrap { width:calc(100% - 24px); }
    .hero { padding-block:45px; }.hero h1 { font-size:44px; letter-spacing:-2px; }.hero-lead { font-size:18px; }
    .ring-visual,.navring-product-photo { min-height:280px; }.visual-note { display:none; }
    .selector-wrap { padding:24px 16px; }.selector-intro { display:block; }.selector-intro p { margin-top:12px; }
    .choice-column { padding:20px 14px; }.size-grid { grid-template-columns:repeat(3,1fr); }
    .size-option span { min-height:58px; }.order-summary { padding:22px 18px; }
}