/* ============================================================
   LockedIn — dark, minimal, premium design system
   ============================================================ */

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

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Variable.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Deep gunmetal, not flat OLED black. An earlier pass at this (#0c0b09,
       r-b delta of 3) measured as functionally indistinguishable from pure
       black on a real screen — the "material, not a test pattern" intent
       never survived to the rendered pixel. Each step up also now carries
       the same warm cast consistently (the old --bg-elevated was a
       perfectly neutral #151515, zero hue — breaking the material story at
       the very next surface) so bg/elevated/input read as one warm-steel
       family, not "black, less-black, less-less-black". */
    --bg: #171310;
    --bg-elevated: #201a15;
    --bg-input: #2a2219;
    --text: #f2f0ea;
    --text-muted: #9c9a92;
    /* Monochrome steel, not gold — hardened steel is what the product
       actually is, and a jewellery-gold accent never said that honestly. */
    --accent: #f2f0ea;
    --accent-hover: #d9d7d0;
    --accent-dim: #3d382f;
    --accent-text: #14110a;
    --steel-dim: #4a473e;
    --steel-mid: #8c887c;
    --steel-bright: #cfccbf;
    --clay: #6b5544;
    /* Lighter than --clay specifically for text on --bg — #6b5544 measures
       ~2.8:1 against #0a0a0a, well under the 4.5:1 WCAG AA minimum. */
    --clay-text: #a8896a;
    --border: #3a2f22;
    --border-strong: #52422e;
    --danger: #e5686c;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
    --container: 1120px;
}

@media (prefers-reduced-motion: no-preference) {
    :root { --motion-ok: 1; }
}

/* ---------- Reset & base ---------- */

* { box-sizing: border-box; }

/* Author styles always beat the browser's own UA stylesheet regardless of
   specificity — so any element that both sets its own `display` (buttons,
   flex/grid children, etc.) AND gets toggled via the plain `hidden`
   attribute needs this restated explicitly, or `hidden` silently does
   nothing. Applies everywhere once, instead of a one-off fix per element
   each time this combination comes up. */
[hidden] { display: none !important; }

html { background: var(--bg); color-scheme: dark; }

body {
    position: relative;
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ambient depth — a fixed, near-imperceptible glow behind every section so
   the page reads as a material under light, not a flat colour fill. Doesn't
   touch section backgrounds (those still alternate bg/bg-elevated), just
   sits underneath everything. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 40% at 15% 0%, rgba(120, 118, 108, 0.05), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 30%, rgba(90, 88, 80, 0.045), transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(70, 68, 62, 0.05), transparent 60%);
    pointer-events: none;
}

/* Fine, fixed film-grain over everything — an SVG noise filter, not an
   image file. At 3% opacity through mix-blend-mode it doesn't read as a
   "texture" you'd point to, it just stops flat colour fields (the dark
   surfaces, the light closing panel) from looking like a vector fill —
   the same reason real photography and brushed metal read as material
   and a flat swatch doesn't. Sits above content (header is above this at
   z-index 50) but is inert — pointer-events: none throughout. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100;
    background: var(--accent);
    color: var(--accent-text);
    padding: 0.75em 1.25em;
    border-radius: 0;
    font-weight: 600;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 1rem;
}

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    line-height: 1.05;
}
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }

p { color: var(--text-muted); margin: 0 0 1em; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

/* ---------- Buttons (shared base for theme + WooCommerce) ---------- */

button,
.button,
input[type="submit"],
a.button,
.wc-block-components-button {
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1.75em;
    border-radius: 0;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text) !important;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
a.button:hover,
.wc-block-components-button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
}

button:disabled,
.wc-block-components-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Secondary / outline button variant.
   a.button--outline (not just .button--outline): a.button in the shared
   base rule is (0,1,1) and beats a bare .button--outline at (0,1,0) on
   background — same trap fixed elsewhere in this file. Match the
   specificity so source order settles it instead. */
a.button--outline,
.button--outline {
    background: transparent;
    color: var(--text) !important;
    border-color: var(--border-strong);
}
a.button--outline:hover,
.button--outline:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

/* WooCommerce's own stylesheet has a higher-specificity
   `.woocommerce ... button.button` rule on WC-templated pages (e.g.
   single-product) that otherwise overrides the shared .button styling
   above — scoped to #lockedin-customizer only, so it can't clobber
   inline-coloured elements (swatches, step pills) elsewhere on the page. */
#lockedin-customizer .button {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
}
#lockedin-customizer .button:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}
#lockedin-customizer .button--outline {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
}
#lockedin-customizer .button--outline:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--accent) !important;
}

/* ---------- Forms & inputs (shared base) ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-select-input select {
    font-family: var(--font);
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 0;
    padding: 0.75em 1em;
    font-size: 0.95rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
}

/* ---------- Site header ---------- */

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Sits below the WP admin bar when viewing as a logged-in admin */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}

.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { height: 22px; width: auto; opacity: 1; transition: opacity 0.2s ease; }
.site-header__logo:hover img { opacity: 0.8; }

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-header__nav a {
    position: relative;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}
.site-header__nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}
.site-header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-header__nav a:hover { color: var(--text); }

@media (max-width: 640px) {
    .site-header__inner {
        flex-wrap: wrap;
        row-gap: 0.75rem;
        padding: 1rem 1.5rem;
    }
    .site-header__nav {
        flex-basis: 100%;
        justify-content: center;
        gap: 1.1rem;
        flex-wrap: wrap;
    }
}

.site-header__icons {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.site-header__icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease;
}
.site-header__icon-link:hover {
    color: var(--text);
    background: var(--bg-input);
}
.site-header__icon-link svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.site-header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 0.3em;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
    border: 2px solid var(--bg);
}

.site-header__cta {
    padding: 0.55em 1.25em;
    font-size: 0.85rem;
    border-radius: 999px;
}

@media (max-width: 720px) {
    .site-header__cta { order: -1; flex-basis: 100%; text-align: center; margin-bottom: 0.25rem; }
}

/* ---------- Site footer ---------- */

.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 4rem;
}

.site-footer__brand {
    max-width: var(--container);
    margin: 0 auto;
    padding: 3rem 1.5rem 0;
}
.site-footer__brand img { height: 20px; width: auto; opacity: 0.85; }

.site-footer__sitemap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 200px));
    gap: 2rem;
}

@media (max-width: 480px) {
    .site-footer__sitemap { grid-template-columns: repeat(2, 1fr); }
}

.site-footer__col h2 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-footer__col a {
    color: var(--text);
    font-size: 0.9rem;
}
.site-footer__col a:hover { color: var(--accent); }

.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============================================================
   Homepage
   ============================================================ */

.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* Depth, not a flat fill — a very slow, very dark radial glow, the same
       trick used on the closing band and materials seal elsewhere. */
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120, 118, 108, 0.10), transparent 65%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(80, 78, 70, 0.08), transparent 60%),
        var(--bg);
}

/* Full viewport width, not the usual max-width container — the image
   column needs to reach the true right edge of the page. Only the text
   column re-applies the container's left inset (below) so it still lines
   up with the header logo and every other section above/below it. */
.hero__layout {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(380px, 46%) 1fr;
    align-items: stretch;
    gap: 2rem;
}

.hero__text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: max(1.5rem, calc((100vw - var(--container)) / 2));
    padding-right: 1.5rem;
}

/* The product image is bottom-anchored and sized as large as the column
   allows — object-fit:contain guarantees the whole product stays visible
   regardless of the source photo's exact proportions, and the fade below
   dissolves it into the page background instead of ending on a hard edge. */
.hero__visual {
    position: relative;
    height: 100%;
}
.hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover, not contain — deliberately: filling the column matters more
       here than keeping every edge of the source photo in frame, so the
       handle end can run off the bottom rather than shrink to fit. */
    object-fit: cover;
    /* left, not center — center-cropping was eating into the claw/key
       mechanism on the left of the source photo; anchoring left means any
       necessary crop comes off the plain foam grip on the right instead. */
    object-position: left bottom;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
}
.hero__visual::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 90%);
    pointer-events: none;
}

@media (max-width: 900px) {
    /* Explicit grid-row placement, not `order` — `order` changes CSS Grid's
       auto-placement too, which put the image into the `auto` row (0 height,
       since its only child is position:absolute and has no intrinsic size
       to size an auto track by) and pushed the text into the `1fr` row. */
    .hero__layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; text-align: center; padding-top: 6rem; }
    .hero__actions { justify-content: center; }
    .hero__text { grid-row: 2; padding-top: 1rem; }
    .hero__visual { grid-row: 1; min-height: 0; }
}

.hero__scroll {
    position: absolute;
    left: 50%; bottom: 2.5rem;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}
@media (prefers-reduced-motion: no-preference) {
    .hero__scroll svg { animation: hero-scroll-bob 1.8s ease-in-out infinite; }
    @keyframes hero-scroll-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(4px); }
    }
}

@media (max-width: 860px) {
    .hero { min-height: 82vh; text-align: center; }
    .hero__actions { justify-content: center; }
}

.hero__headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.75rem, 6vw, 4.75rem);
    letter-spacing: -0.02em;
    line-height: 1.03;
    margin: 0.5rem 0 1.25rem;
}

.hero__sub {
    font-size: 1.1rem;
    max-width: 30rem;
    margin: 0 0 2rem;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- Stat strip ---------- */
/* A dense proof-strip directly under the hero — no section title, no icon
   grid, just the numbers doing the talking. Deliberately not another
   min-height:100vh slide: it's three facts, not a destination. */

.stat-strip {
    max-width: var(--container);
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: flex;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.stat-strip__item {
    flex: 1;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.stat-strip__item + .stat-strip__item { border-left: 1px solid var(--border); }
.stat-strip__number {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--steel-bright);
}
.stat-strip__label { font-size: 0.85rem; color: var(--text-muted); max-width: 28ch; }

@media (max-width: 760px) {
    .stat-strip { flex-direction: column; gap: 1.75rem; }
    .stat-strip__item { padding: 0; }
    .stat-strip__item + .stat-strip__item { border-left: none; }
}

/* ---------- How it works ---------- */

.how {
    background: var(--bg-elevated);
    padding: 4.5rem 1.5rem;
    text-align: center;
}

.how__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: left;
}

.how__num {
    display: block;
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.how__step h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.how__step p { font-size: 0.9rem; margin: 0; }

@media (max-width: 720px) {
    .how__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Live engrave demo (inside personalisation section) ---------- */

.engrave-demo {
    max-width: 480px;
    margin: 0 auto 3.5rem;
    padding: 2.75rem 2rem 2.25rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    position: relative;
    box-shadow: 0 32px 56px -28px rgba(0, 0, 0, 0.65);
}

/* Inset bezel — reads as an engraved plate, not a floating form. */
.engrave-demo::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid var(--border);
    border-radius: 0;
    pointer-events: none;
}

.engrave-demo__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.engrave-demo__input {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    display: block;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5em 0 !important;
}
.engrave-demo__input:focus { border-bottom-color: var(--accent) !important; }
.engrave-demo__input::placeholder { color: var(--border-strong); }

.engrave-demo__preview {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3rem);
    letter-spacing: 0.04em;
    margin: 1.25rem 0 0;
    line-height: 1;
    background: linear-gradient(180deg, #8a7248 0%, #d9b876 42%, #f5e6c0 50%, #c8a45c 58%, #6b5535 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
    word-break: break-all;
}

/* ---------- Finish rail ---------- */

.finishes {
    background: var(--bg-elevated);
    padding: 4.5rem 1.5rem;
    text-align: center;
}

.finishes__layout {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    gap: 2.5rem;
    align-items: center;
    text-align: left;
}

/* Grid/flex items default to min-width:auto, which refuses to shrink below
   the finish rail's natural content width (6 chips wide) — without this,
   the rail pushes the whole page wider instead of scrolling internally. */
.finishes__layout > * { min-width: 0; }

.bat-preview--rail {
    max-width: 130px;
    margin: 0 auto;
}

.finishes__rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.5rem 0 2rem;
    justify-content: flex-start;
}

@media (max-width: 720px) {
    .finishes__layout { grid-template-columns: 1fr; text-align: center; }
    .finishes__rail { justify-content: safe center; }
}

.finish-chip {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}
.finish-chip:hover { transform: scale(1.06); }
.finish-chip.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(200, 164, 92, 0.18);
}

.finishes__detail {
    max-width: 32rem;
}
@media (max-width: 720px) {
    .finishes__detail { margin: 0 auto; }
}

.finishes__detail h3 { margin-bottom: 0.5rem; }
.finishes__detail p { margin-bottom: 1.5rem; }

.finishes__cta {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---------- Comparison ---------- */

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--container);
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}

.compare__col {
    padding: 3.5rem 2.75rem;
}

.compare__col--them {
    background: var(--bg);
    border-right: 1px solid var(--border);
}

.compare__col--us {
    background: var(--bg-elevated);
    position: relative;
}

/* Thin accent seam on the winning column — the only colour cue this section needs. */
.compare__col--us::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.compare__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.compare__col li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    line-height: 1.55;
}

.compare__col li::before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    line-height: 1;
}

.compare__col--them li::before {
    content: '\2715';
    background: rgba(168, 137, 106, 0.14);
    color: var(--clay-text);
}

.compare__col--us li::before {
    content: '\2713';
    background: rgba(200, 164, 92, 0.18);
    color: var(--accent);
}

.compare__col--them li {
    color: var(--clay-text);
}

.compare__col--us li {
    color: var(--text);
    font-weight: 500;
}

/* ---------- Personalisation ---------- */

.personalise {
    background: var(--bg-elevated);
    padding: 4.5rem 1.5rem;
    text-align: center;
}

.personalise__intro {
    max-width: 34rem;
    margin: 0 auto 3rem;
    color: var(--text-muted);
}

.personalise__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    text-align: left;
}

.personalise__card {
    background: var(--bg-elevated);
    padding: 2.5rem 2rem;
    color: var(--text) !important;
    transition: background 0.25s ease, transform 0.25s ease;
}
.personalise__card:hover {
    background: var(--bg);
    transform: translateY(-4px);
}

.personalise__card svg {
    width: 32px;
    height: 32px;
    color: var(--accent);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, color 0.25s ease;
}
.personalise__card:hover svg {
    transform: scale(1.1) rotate(-4deg);
    color: var(--accent-hover);
}

.personalise__card h3 { margin-bottom: 0.5rem; }
.personalise__card p { color: var(--text-muted); margin: 0; font-size: 0.95rem; }

/* ---------- Closing CTA ---------- */

.closing {
    /* Stays inside the same dark-steel family as the rest of the page
       instead of flipping to a bright card — a full light inversion right
       at the page's last, most-confident moment read as a different site
       pasted in, not a considered "signature" close. Same material, one
       step up in elevation: a soft off-centre sheen (light catching a
       machined surface) over --bg-elevated, no bright wipe, no repeating
       stripe texture (that aliased into visible banding at normal zoom). */
    background:
        radial-gradient(ellipse 70% 90% at 24% 10%, rgba(207, 204, 191, 0.14), transparent 65%),
        var(--bg-elevated);
    border-top: 1px solid var(--border);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text);
    text-align: center;
    padding: 6rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.closing h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 2rem;
    position: relative;
}

/* A large, faint key silhouette — every lock ships with two precision
   keys, so this is a literal nod to the actual product rather than an
   abstract decoration, kept quiet enough to read as texture, not a logo. */
.closing__key {
    position: absolute;
    top: 50%;
    right: -70px;
    width: 480px;
    max-width: 60%;
    height: auto;
    transform: translateY(-50%) rotate(-16deg);
    color: var(--steel-bright);
    opacity: 0.1;
    pointer-events: none;
}

.closing__lede { position: relative; }

.closing__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    position: relative;
}

.closing__note {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* ---------- Homepage responsive ---------- */

@media (max-width: 720px) {
    .compare { grid-template-columns: 1fr; }
    .compare__col--them { border-right: none; border-bottom: 1px solid var(--border); }
    .personalise__grid { grid-template-columns: 1fr; }
}

/* ---------- Motion & focus (quality floor) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .engrave-demo__preview { animation: engrave-in 0.6s ease-out; }
    @keyframes engrave-in {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    [data-reveal="stagger"] > * {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-reveal="stagger"].is-visible > * {
        opacity: 1;
        transform: translateY(0);
    }
    [data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0s; }
    [data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
    [data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
    [data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.finish-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The closing CTA band's background IS --accent — a brass outline on a
   brass background is invisible to keyboard users, so it needs a dark
   outline there instead. */
.closing a:focus-visible,
.closing button:focus-visible {
    outline-color: var(--accent-text);
}

/* ---------- Full-page stepper customizer ---------- */

.customizer-page {
    position: relative;
    min-height: calc(100dvh - 74px);
    padding: 2.5rem 1.5rem 3rem;
    overflow: hidden;
}

.customizer-page__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 45% at 50% 22%, rgba(200, 164, 92, 0.09), transparent 70%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255, 255, 255, 0.035), transparent 70%);
}

.customizer-page__title {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

/* Image column left, options column right — the ordinary shape of a
   product page. Single column, image on top, below ~880px. */
.customizer-page__layout {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: start;
}
.customizer-page__main { text-align: left; min-width: 0; }

@media (max-width: 880px) {
    .customizer-page__layout { grid-template-columns: 1fr; max-width: 560px; }
    .customizer-page__main { text-align: center; }
}

/* ---- Product preview ---- */
/* Sticky on desktop — stays in view while the Colour accordion (up to 57
   swatches) scrolls, the way a real product page keeps its gallery pinned. */

.customizer-page__preview {
    width: 100%;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 6.5rem;
}
@media (max-width: 880px) {
    .customizer-page__preview { position: static; margin-bottom: 2rem; }
}

.bat-preview {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 120 / 420;
}
.bat-preview--full { max-width: 160px; }

/* Real product renders are landscape (~16:9), not the tall narrow silhouette
   mask's own proportions — the box itself switches shape in photo mode
   rather than squeezing a wide photo into a portrait frame. */
.bat-preview.is-photo { max-width: 320px; aspect-ratio: 16 / 10; }
.bat-preview--full.is-photo { max-width: 100%; }

/* The frame is locked to the real photo's own pixel dimensions (1000×565)
   — every child inside it (the photo, the engraving text, the embroidery
   sleeve text) can then be positioned with plain percentages that line up
   with the actual barrel/grip in the photo, instead of guessing against
   whatever letterboxing object-fit:contain happens to produce. */
.bat-preview__frame {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%;
    aspect-ratio: 1000 / 565;
}
.bat-preview.is-photo .bat-preview__frame { display: block; }

.bat-preview__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
}

.bat-preview.is-photo .bat-preview__base,
.bat-preview.is-photo .bat-preview__barrel,
.bat-preview.is-photo .bat-preview__handle {
    display: none;
}

.bat-preview__base,
.bat-preview__barrel,
.bat-preview__handle {
    position: absolute;
    inset: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background 0.25s ease;
}

.bat-preview__base {
    background: var(--border-strong);
    transform: scale(1.04);
}

/* Engraving — sits directly on the barrel (bottom/straight view), carved
   look faked with a light-above/dark-below shadow pair rather than a flat
   colour fill. */
.bat-preview__engrave {
    display: none;
    position: absolute;
    left: 53%; top: 65%;
    width: 43%; height: 13%;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: rgba(225, 224, 220, 0.92);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 -1.5px 1px rgba(0, 0, 0, 0.65);
    font-size: clamp(0.5rem, 2.1vw, 1.05rem);
    pointer-events: none;
}
.bat-preview__engrave.is-visible { display: flex; }

/* ---- Accordion panel (Finish / Colour / Personalise) ---- */

.customizer-page__panel {
    width: 100%;
}

.acc-list {
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }

.acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-input);
    border: none;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    text-align: left;
    color: var(--text) !important;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 600;
}
.acc-head__title { flex: 0 0 auto; }
.acc-head__summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}
.acc-head__chev { flex: 0 0 auto; color: var(--text-muted); font-size: 0.7rem; transition: transform 0.2s ease; }
.acc-item.is-open .acc-head__chev { transform: rotate(180deg); }

.acc-panel {
    display: none;
    padding: 1.25rem 1.1rem 1.5rem;
    background: var(--bg-elevated);
}
.acc-item.is-open .acc-panel { display: block; }

.acc-chip-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.acc-chip-row::-webkit-scrollbar { display: none; }
.acc-chip {
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--text-muted) !important;
    border-radius: 999px;
    padding: 0.5em 1em;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
}
.acc-chip:hover { color: var(--text) !important; }
.acc-chip.is-active { background: var(--text); color: var(--bg) !important; border-color: var(--text); }

.acc-current-label {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.acc-preview-hint {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.acc-locked-colour {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--bg-elevated);
}
.acc-locked-colour__swatch {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
}
.acc-locked-colour__text { display: flex; flex-direction: column; gap: 0.15rem; }
.acc-locked-colour__label { font-weight: 600; font-size: 0.95rem; }
.acc-locked-colour__meta { font-size: 0.78rem; color: var(--text-muted); }

.acc-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}
.acc-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--text);
    cursor: pointer;
}

.acc-option-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.acc-option {
    text-align: left;
    padding: 0.85em 1em;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.acc-option:hover { color: var(--text); border-color: var(--text-muted); }
.acc-option.is-selected {
    background: var(--text);
    color: var(--bg) !important;
    border-color: var(--text);
}

.acc-select {
    width: 100%;
    appearance: none;
    background-color: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 0.7em 2.2em 0.7em 0.9em;
    font-family: var(--font);
    font-size: 0.9rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239c9a92' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
}
.acc-input {
    width: 100%;
    margin-top: 0.75rem;
}

.acc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.acc-footer__price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
}
.acc-footer__price small {
    display: block;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

.acc-bundle-banner {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-left: 2px solid var(--steel-bright);
    border-radius: 0;
}
.acc-bundle-banner__title { font-weight: 700; font-size: 0.9rem; }
.acc-bundle-banner__note { font-size: 0.8rem; color: var(--text-muted); }
.acc-footer__cta {
    flex: 0 0 auto;
    min-width: 9.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.acc-footer__cta:disabled { opacity: 0.75; cursor: default; }
.acc-footer__cta.is-added {
    background: var(--steel-bright) !important;
    border-color: var(--steel-bright) !important;
    color: var(--accent-text) !important;
}
.acc-footer__cta.is-error {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--text) !important;
}

#lockedin-customizer .swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

/* Finish colour counts range from 1 (Carbon Fibre) to 57 (KPMF Premium Matt
   Cast) — an unbounded wrapped row would turn the wide families into a
   towering wall. Cap the height and let it scroll instead. */
#lockedin-customizer .swatch-row--scroll {
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
    justify-content: flex-start;
}

#lockedin-customizer .swatch {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#lockedin-customizer .swatch:hover { transform: scale(1.08); }
#lockedin-customizer .swatch.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.2);
}

#lockedin-customizer select {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239c9a92' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    padding-right: 2.5em;
}

.customizer-panel__text-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 1.25rem 0 0.5rem;
}

#lockedin-customizer input[type="text"] {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.customizer-page__form {
    display: none;
}

.customizer-page__trust {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}
@media (max-width: 880px) {
    .customizer-page__trust { justify-content: center; }
}
.customizer-page__trust li::before {
    content: '✓ ';
    color: var(--accent);
}

/* ---------- Quick-buy page ---------- */

.lockedin-shop {
    max-width: var(--container);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 6rem;
}

.lockedin-shop h1 { margin-bottom: 0.5rem; }
.lockedin-shop > p { font-size: 1.05rem; margin-bottom: 3rem; }

/* ---------- Colours shop page ---------- */

.colours-shop {
    max-width: var(--container);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 6rem;
}
.colours-shop__intro { max-width: 62ch; margin-bottom: 3rem; }
.colours-shop__intro h1 { margin-bottom: 0.75rem; }
.colours-shop__intro p { font-size: 1.05rem; }
.colours-shop__intro a { color: var(--text); text-decoration: underline; }

.colours-shop__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) { .colours-shop__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .colours-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.colour-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    color: var(--text) !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.colour-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.colour-card__photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--bg-input);
}
.colour-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.colour-card__badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--accent);
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3em 0.6em;
    border-radius: 999px;
}

.colour-card__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    padding: 0.9rem 1rem 1rem;
}
.colour-card__swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
}
.colour-card__name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.9rem; }
.colour-card__price {
    flex: 0 0 auto;
    width: 100%;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.bundle-wizard {
    max-width: 620px;
    margin: 0 auto 5rem;
    padding: 3.5rem 3.5rem 3rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-top: 2px solid var(--steel-bright);
    border-radius: 0;
    text-align: center;
}
.bundle-wizard__step + .bundle-wizard__step {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.bundle-wizard__step h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 1.75rem;
}

.bundle-wizard__qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
}
.bundle-wizard__qty-btn {
    /* Resets the shared button rule's 0.85em/1.75em padding, which was
       stretching this into an oval instead of the intended circle. */
    padding: 0;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.bundle-wizard__qty-btn:hover {
    border-color: var(--steel-bright);
    background: var(--bg);
    transform: translateY(-1px);
}
.bundle-wizard__qty-value {
    min-width: 3.5rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bundle-wizard__discount {
    margin: 1.5rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
}

.bundle-wizard__mode {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: left;
}
.bundle-wizard__mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.bundle-wizard__mode-option:hover { border-color: var(--text-muted); }
.bundle-wizard__mode-option:has(input:checked) {
    border-color: var(--steel-bright);
    background: var(--bg-input);
}
.bundle-wizard__mode-option input {
    margin-top: 0.3rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--text);
    flex: 0 0 auto;
}
.bundle-wizard__mode-option span { display: flex; flex-direction: column; gap: 0.25rem; }
.bundle-wizard__mode-option strong { font-size: 0.92rem; }
.bundle-wizard__mode-option small { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

#bundle-continue { margin-top: 2.5rem; width: 100%; padding-top: 1em; padding-bottom: 1em; }

@media (max-width: 640px) {
    .bundle-wizard { padding: 2.5rem 1.5rem; }
}

/* ============================================================
   WooCommerce — classic notices (still used outside the blocks,
   e.g. add-to-cart / validation messages)
   ============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    border-top: 3px solid var(--accent) !important;
    border-radius: 0;
    padding: 1em 1.5em !important;
    max-width: var(--container);
    margin: 1.5rem auto !important;
    list-style: none;
}
.woocommerce-error { border-top-color: var(--danger) !important; }

/* ============================================================
   WooCommerce Blocks — Cart & Checkout (block-based, not the
   classic shortcode templates)
   ============================================================ */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 6rem;
    color: var(--text);
}

.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout * {
    color: inherit;
}

.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-totals-block {
    background: transparent;
}

/* Panels/cards inside cart+checkout (order summary, payment box, etc.) */
.wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar > *,
.wc-block-components-shipping-rates-control,
.wc-block-components-radio-control,
.wc-block-components-address-form {
    border-color: var(--border) !important;
}

.wc-block-cart-item,
.wc-block-components-order-summary-item {
    border-bottom: 1px solid var(--border) !important;
}

.wc-block-components-product-name {
    color: var(--text) !important;
}

.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
    color: var(--accent) !important;
    font-weight: 600;
}

.wc-block-components-quantity-selector {
    border-color: var(--border-strong) !important;
    background: var(--bg-input) !important;
}
.wc-block-components-quantity-selector__input {
    background: transparent !important;
    color: var(--text) !important;
}

.wc-block-components-radio-control__option {
    border-color: var(--border) !important;
    background: var(--bg-elevated) !important;
}
.wc-block-components-radio-control__option--checked {
    border-color: var(--accent) !important;
}

/* Labels/legends WooCommerce renders with default (often dark) text */
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
legend,
label {
    color: var(--text-muted) !important;
}

hr, .wc-block-components-totals-item hr {
    border-color: var(--border) !important;
}

/* No real product photography yet — WooCommerce's placeholder thumbnail is a
   bright white square that reads as broken against the dark theme, so it's
   dimmed to sit quietly until real images replace it. */
.wp-block-woocommerce-cart img[src*="placeholder"],
.wp-block-woocommerce-checkout img[src*="placeholder"] {
    filter: brightness(0.35) grayscale(0.4);
    border-radius: 0;
}

/* ============================================================
   Colour match photo uploads (cart page)
   ============================================================ */

.colour-match-uploads {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}
.colour-match-uploads h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.colour-match-uploads > p { color: var(--text-muted); margin-bottom: 2rem; max-width: 60ch; }

.colour-match-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-elevated);
}
.colour-match-upload + .colour-match-upload { margin-top: 1rem; }

.colour-match-upload__label { font-weight: 600; flex: 1 1 auto; min-width: 0; }

.colour-match-upload__preview {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 0;
    border: 1px solid var(--border-strong);
    background: var(--bg-input);
    overflow: hidden;
    display: none;
}
.colour-match-upload__preview.has-image { display: block; }
.colour-match-upload__preview img { width: 100%; height: 100%; object-fit: cover; }

.colour-match-upload__actions {
    display: flex;
    gap: 0.6rem;
    flex: 0 0 auto;
}
.colour-match-upload__btn {
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.6em 1.1em;
}
.colour-match-upload__btn.is-busy { opacity: 0.6; pointer-events: none; }
.colour-match-upload__remove { font-size: 0.85rem; padding: 0.6em 1.1em; color: var(--danger) !important; border-color: var(--danger) !important; }

.colour-match-upload__status {
    flex: 0 0 100%;
    order: 10;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.colour-match-upload__status:empty { display: none; }
.colour-match-upload__status.is-error { color: var(--danger); }

@media (max-width: 560px) {
    .colour-match-upload { flex-wrap: wrap; }
    .colour-match-upload__actions { flex: 1 1 100%; }
}

/* ============================================================
   Prose / policy pages (FAQ, Shipping, Terms, Privacy, Contact)
   ============================================================ */

.prose-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
}

.prose h1 { margin-bottom: 2rem; }

.prose h2 {
    font-size: 1.35rem;
    margin: 2.5rem 0 1rem;
}

.prose p, .prose li { max-width: 65ch; }

.prose ul, .prose ol {
    color: var(--text-muted);
    padding-left: 1.25rem;
    margin: 0 0 1em;
}
.prose li { margin-bottom: 0.5em; }

.prose a:not(.button) { text-decoration: underline; text-underline-offset: 2px; }

.prose__updated {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.prose__notice {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent);
    padding: 1rem 1.25rem;
    border-radius: 0;
    font-size: 0.9rem;
    margin: 0 0 2.5rem;
}
.prose__notice p { margin: 0; max-width: none; }

/* FAQ accordion */

.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item summary {
    padding: 1.25rem 0;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    color: var(--accent);
    font-size: 1.25rem;
    flex: 0 0 auto;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
    color: var(--text-muted);
    padding-bottom: 1.25rem;
    margin: 0;
}

/* Contact page */

.contact-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2rem;
    margin-top: 2rem;
}
.contact-card h2 { margin-top: 0; font-size: 1.1rem; }
.contact-card a.button { margin-top: 1rem; }

/* ============================================================
   Homepage v2 — ported from the section-variations build
   ============================================================ */

.hero__price {
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ---------- Features: spec cards ---------- */
.feat-showcase {
    max-width: var(--container);
    margin: 0 auto;
    padding: 5rem 1.5rem;
}
.feat-showcase__title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    letter-spacing: -0.01em;
    margin: 0 0 3rem;
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.feat-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.feat-card__photo {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    margin: 0 auto 2rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
.feat-card h3 { font-size: 1.3rem; margin-bottom: 0.85rem; }
.feat-card p { font-size: 1rem; max-width: 32ch; margin: 0 auto; }

@media (max-width: 720px) {
    .feat-grid { grid-template-columns: 1fr; }
}

/* ---------- Customisation ---------- */
.customise {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Fades in/out at the seams rather than cutting hard against the
       sections above/below — same elevated tone, just blended at the edges
       so the transition reads as intentional, not a stacked box. */
    background: linear-gradient(
        to bottom,
        transparent 0,
        var(--bg-elevated) 110px,
        var(--bg-elevated) calc(100% - 110px),
        transparent 100%
    );
    padding: 6rem 1.5rem;
}
/* Single-row scroll rail, not a wrapping pill wall — eight families of
   uneven label length used to wrap into a ragged two-row block. Scrollbar
   chrome hidden — the row already scroll-snaps and drags, a visible track
   with arrows just added visual noise on top of it. */
.customise__pills {
    margin: 0 0 1.5rem;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.6rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.customise__pills::-webkit-scrollbar { display: none; }
/* button { color: var(--accent-text) !important } in the shared base rule
   otherwise wins over these — same specificity trap fixed elsewhere in this
   file, still catches every *new* custom button built on a bare <button>. */
.customise-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    border: 1px solid var(--border-strong);
    background: var(--bg-input);
    color: var(--text-muted) !important;
    border-radius: 999px;
    padding: 0.5em 1em;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customise-pill:hover { color: var(--text) !important; border-color: var(--border-strong); }
.customise-pill.is-active { background: var(--text); color: var(--bg) !important; border-color: var(--text); }
.customise-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.2); }

/* No boxed card — the photo and detail column sit directly on the page,
   same "just images and text" treatment as the Why LockedIn section. */
.customise__panel {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.customise__preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
/* Neutral panel background always stays put — a colour like White Gloss
   used to flood the whole panel white via an inline hex fill, which read as
   a rendering bug next to the dark theme. The one colour without a photo
   yet (Carbon Fibre) gets a modest centred swatch instead. */
.customise__preview-fallback {
    display: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
}
.customise__preview-fallback.is-visible { display: block; }
.customise__preview img {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.5rem;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5));
}
.customise__preview img.is-visible { display: block; }
.customise__detail {
    /* Grid items default to min-width:auto, sized to fit their content's
       full (unwrapped) width — the pill row inside here doesn't wrap by
       design, so without this the grid track expands to fit every pill on
       one line and squeezes the image column next to it down to nothing. */
    min-width: 0;
}
.customise__detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.customise__detail-head h3 { font-size: 1.4rem; margin: 0; }
.customise__detail-head span {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.customise__detail p { margin-top: 0.6rem; }
/* Same reasoning as the customizer's swatch-row--scroll — colour counts run
   from 1 to 57 per family, so this needs a cap + scroll, not open wrapping. */
.customise__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1.75rem 0;
    max-height: 10.5rem;
    overflow-y: auto;
    /* The selected-swatch ring (box-shadow) extends 5px past the swatch
       itself — padding here must be at least that or overflow-y:auto
       clips the ring on swatches in the first row/column. */
    padding: 0.4rem;
}
.customise-swatch {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.customise-swatch:hover { transform: scale(1.08); }
.customise-swatch.is-active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--steel-bright); }

/* Colour Match's two "colours" are actual choices, not colour circles —
   swap the swatch grid for stacked text options when showing them. */
.customise__swatches--options { flex-direction: column; max-height: none; overflow: visible; }
.customise-option {
    width: 100%;
    text-align: left;
    padding: 0.85em 1.1em;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.customise-option:hover { color: var(--text); border-color: var(--text-muted); }
.customise-option.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Divider line instead of a second bordered box — one less panel stacked
   directly under the one above it. */
.colour-match {
    max-width: var(--container);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.colour-match__text h4 { font-size: 1rem; margin: 0 0 0.35rem; }
.colour-match__text p { margin: 0; max-width: 48ch; font-size: 0.92rem; }

@media (max-width: 720px) {
    .customise__panel { grid-template-columns: 1fr; }
    .colour-match { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Materials: filmstrip ---------- */
.materials {
    min-height: 100vh;
    padding: 6rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.materials__head {
    max-width: var(--container);
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    text-align: center;
}
.materials__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    letter-spacing: -0.01em;
    max-width: 780px;
    margin: 0 auto;
}

.filmstrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 64vh;
    max-height: 640px;
}
.filmstrip__panel {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border);
}
.filmstrip__panel:last-child { border-right: none; }
.filmstrip__panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5) brightness(0.6);
    transform: scale(1.04);
    transition: filter 0.35s ease, transform 0.35s ease;
}
.filmstrip__panel:hover img,
.filmstrip__panel:focus-within img {
    filter: grayscale(0) brightness(0.85);
    transform: scale(1.1);
}
.filmstrip__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 55%);
}
.filmstrip__index {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--steel-bright);
    margin-bottom: 0.6rem;
}
.filmstrip__overlay h4 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.filmstrip__overlay p { font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 760px) {
    .filmstrip { grid-template-columns: 1fr; height: auto; }
    .filmstrip__panel { height: 240px; border-right: none; border-bottom: 1px solid var(--border); }
    .filmstrip__panel:last-child { border-bottom: none; }
}

/* ---------- Reviews teaser ---------- */
.reviews-teaser {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Same edge-fade treatment as .customise, so the elevated tone blends
       into the sections above/below instead of cutting hard against them. */
    background: linear-gradient(
        to bottom,
        transparent 0,
        var(--bg-elevated) 110px,
        var(--bg-elevated) calc(100% - 110px),
        transparent 100%
    );
    padding: 6rem 1.5rem;
    text-align: center;
}
.reviews-teaser__cta { align-self: center; }
.reviews-teaser__head { max-width: var(--container); margin: 0 auto 3rem; }
/* The rating itself is the headline here — a number this specific reads as
   more credible than a generic "trusted by drivers" tagline would. */
.reviews-teaser__score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.reviews-teaser__score-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}
.reviews-teaser__score-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.reviews-teaser__score-detail span { font-size: 0.85rem; color: var(--text-muted); }
.reviews-teaser__stars,
.review-card__stars { display: flex; gap: 0.2rem; }
.reviews-teaser__stars svg,
.review-card__stars svg { width: 16px; height: 16px; fill: var(--steel-bright); }

.reviews-teaser__grid {
    max-width: var(--container);
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    text-align: left;
}
.review-card {
    margin: 0;
    padding: 1.75rem 1.75rem 1.5rem;
    border: 1px solid var(--border);
    border-top: 2px solid var(--steel-bright);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.025);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.review-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    border-top-color: var(--steel-bright);
}
.review-card__stars { margin-bottom: 1rem; }
.review-card blockquote {
    margin: 0 0 1.5rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text);
    flex-grow: 1;
}
.review-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.review-card__name { font-weight: 600; font-size: 0.9rem; }
.review-card__meta { font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 900px) {
    .reviews-teaser__grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* ---------- Closing CTA lede ---------- */
.closing__lede { color: var(--text-muted); margin: 0 0 2rem; }

/* ---------- FAQ teaser ---------- */
.faq-teaser {
    max-width: var(--container);
    margin: 0 auto;
    padding: 5rem 1.5rem 6rem;
}
.faq-teaser__title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 0 2.5rem;
}
.faq-teaser__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 4rem; }
.faq-teaser__item { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.faq-teaser__item h4 { font-size: 1.2rem; margin-bottom: 0.65rem; }
.faq-teaser__item p { margin: 0; font-size: 1rem; color: var(--text-muted); }
@media (max-width: 640px) { .faq-teaser__grid { grid-template-columns: 1fr; } }

/* ---------- Product page trust content ---------- */
/* Compact variants of the homepage's .materials/.reviews-teaser — same real
   photos and copy, but sized for a focused purchase page rather than a
   100vh scroll-driven landing section. */

.product-trust {
    max-width: var(--container);
    margin: 0 auto;
    padding: 4rem 1.5rem 1rem;
}
.product-trust__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    text-align: center;
    margin-bottom: 2rem;
}
.product-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}
.product-trust__panel {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.product-trust__panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5) brightness(0.6);
    transition: filter 0.35s ease, transform 0.35s ease;
}
.product-trust__panel:hover img { filter: grayscale(0) brightness(0.85); transform: scale(1.06); }
.product-trust__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 60%);
}
.product-trust__overlay h4 { font-size: 0.85rem; margin: 0 0 0.25rem; }
.product-trust__overlay p { font-size: 0.72rem; color: var(--text-muted); margin: 0; }

@media (max-width: 760px) {
    .product-trust__grid { grid-template-columns: 1fr 1fr; }
}

.product-reviews {
    max-width: var(--container);
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}
.product-reviews__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
}
.product-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .product-reviews__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.product-reviews__native { max-width: 720px; margin: 3rem auto 0; }
.product-reviews__native #reviews { padding-top: 2rem; border-top: 1px solid var(--border); }