/*
 * Vape Origin storefront tokens
 * Adjust this block first when changing the full-site visual direction.
 */
:root {
    color-scheme: light dark;

    --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
    --font-display: "Avenir Next", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --color-canvas: #f4f7f6;
    --color-surface: #fbfcfc;
    --color-surface-raised: #eef3f1;
    --color-surface-muted: #e6ecea;
    --color-surface-strong: #dbe5e2;
    --color-ink: #15201e;
    --color-ink-soft: #4a5a56;
    --color-ink-muted: #6d7b77;
    --color-line: #ccd7d3;
    --color-line-strong: #aabbb5;
    --color-accent: #277a6c;
    --color-accent-hover: #1f665b;
    --color-accent-soft: #d6e9e4;
    --color-on-accent: #f6fbf9;
    --color-danger: #a7453d;
    --color-on-danger: #fff8f7;
    --color-focus: #157c6c;
    --color-header-glass: rgb(244 247 246 / 0.94);
    --color-hero-surface: #111817;
    --color-hero-ink: #f1f7f5;
    --color-hero-ink-soft: #b8c7c3;
    --color-hero-glass: rgb(22 33 31 / 0.76);
    --color-hero-line: rgb(226 242 237 / 0.22);
    --color-hero-scrim: linear-gradient(90deg, rgb(10 16 15 / 0.96) 0%, rgb(10 16 15 / 0.75) 38%, rgb(10 16 15 / 0.12) 68%, transparent 100%);
    --color-hero-scrim-mobile: linear-gradient(180deg, rgb(10 16 15 / 0.96) 0%, rgb(10 16 15 / 0.72) 48%, rgb(10 16 15 / 0.16) 73%, rgb(10 16 15 / 0.5) 100%);
    --color-brand-card-surface: #17211f;
    --color-brand-card-surface-hover: #20302c;
    --color-brand-card-line: #33433f;
    --color-brand-card-ink: #eef6f3;
    --color-brand-card-ink-soft: #aebfba;

    --card-tone-slate: #b8c2c4;
    --card-tone-smoke: #cbd0d0;
    --card-tone-mint: #b9d4cb;
    --card-tone-blue: #b8cad8;
    --card-tone-blue-soft: #cedce3;
    --card-tone-coral: #dec4bd;
    --card-tone-rose: #dcc2c8;
    --card-tone-violet: #c9c3d7;
    --card-tone-violet-soft: #dcd6e5;
    --card-tone-sand: #d8ccb8;
    --card-tone-olive: #c7cdb4;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --section-space: clamp(4.5rem, 8vw, 8rem);
    --gutter: clamp(1rem, 3vw, 2.5rem);
    --container: 88rem;
    --reading-width: 44rem;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: clamp(1.5rem, 2vw, 2rem);
    --text-3xl: clamp(2rem, 3vw, 3rem);
    --text-hero: clamp(2.8rem, 5vw, 4.8rem);

    --leading-tight: 1.05;
    --leading-heading: 1.18;
    --leading-body: 1.75;
    --tracking-tight: -0.035em;
    --tracking-wide: 0.12em;

    --radius-control: 0.5rem;
    --radius-card: 0.875rem;
    --radius-panel: 1.25rem;
    --radius-pill: 999px;

    --shadow-card: 0 16px 42px rgb(36 66 59 / 0.08);
    --shadow-header: 0 1px 0 rgb(42 69 63 / 0.08);

    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 520ms;
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

    --header-height: 4.75rem;
    --nav-height: 3rem;
    --control-height: 2.875rem;
    --z-header: 30;
    --z-dock: 35;
    --z-toast: 70;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-canvas: #111715;
        --color-surface: #171e1c;
        --color-surface-raised: #1d2724;
        --color-surface-muted: #25302d;
        --color-surface-strong: #303d39;
        --color-ink: #edf4f1;
        --color-ink-soft: #bdcbc6;
        --color-ink-muted: #91a09b;
        --color-line: #34423e;
        --color-line-strong: #4a5c56;
        --color-accent: #68ad9f;
        --color-accent-hover: #82c2b5;
        --color-accent-soft: #203f38;
        --color-on-accent: #0f1c19;
        --color-danger: #d0776f;
        --color-on-danger: #23100f;
        --color-focus: #7bc8b8;
        --color-header-glass: rgb(17 23 21 / 0.94);
        --color-brand-card-surface: #0e1513;
        --color-brand-card-surface-hover: #18231f;
        --color-brand-card-line: #3a4b46;
        --color-brand-card-ink: #edf5f2;
        --color-brand-card-ink-soft: #a7b8b2;

        --card-tone-slate: #465356;
        --card-tone-smoke: #4b5252;
        --card-tone-mint: #3b5c52;
        --card-tone-blue: #3c5262;
        --card-tone-blue-soft: #465a63;
        --card-tone-coral: #604a45;
        --card-tone-rose: #5e464d;
        --card-tone-violet: #50495f;
        --card-tone-violet-soft: #595364;
        --card-tone-sand: #5e5545;
        --card-tone-olive: #505943;

        --shadow-card: 0 18px 50px rgb(2 8 6 / 0.28);
        --shadow-header: 0 1px 0 rgb(220 240 233 / 0.07);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--nav-height) + var(--space-4));
}

body {
    min-width: 20rem;
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-heading);
}

h1 {
    font-size: var(--text-3xl);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.shell {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
}

.section {
    padding-block: var(--section-space);
}

.page-shell {
    padding-block: var(--space-8) var(--section-space);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: calc(var(--z-dialog) + 1);
    transform: translateY(-160%);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-accent);
    color: var(--color-on-accent);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
}

.button {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.button:active {
    transform: translateY(1px);
}

.button--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.button--primary:hover {
    background: var(--color-accent-hover);
}

.button--secondary {
    border-color: var(--color-line-strong);
    background: var(--color-surface);
    color: var(--color-ink);
}

.button--secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

.button--compact {
    min-height: 2.35rem;
    padding: 0.55rem 0.7rem;
    font-size: var(--text-sm);
}

.button--wide {
    width: 100%;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.text-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--color-accent-hover);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    text-underline-offset: 0.3em;
}

.text-link:hover {
    text-decoration-thickness: 2px;
}

.prototype-bar {
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
}

.prototype-bar__inner {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
}

.prototype-bar a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid var(--color-line);
    background: var(--color-header-glass);
    box-shadow: var(--shadow-header);
    backdrop-filter: blur(18px);
}

.site-header__main {
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(var(--space-4), 3vw, var(--space-10));
}

.site-brand {
    width: auto;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    color: var(--color-ink);
    white-space: normal;
}

.site-brand__name {
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.cart-link,
.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-weight: 700;
    white-space: nowrap;
}

.cart-count {
    min-width: 1.45rem;
    height: 1.45rem;
    display: inline-grid;
    place-items: center;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-size: var(--text-xs);
}

.menu-toggle,
.mobile-menu,
.mobile-dock {
    display: none;
}

.site-nav {
    border-top: 1px solid var(--color-line);
}

.site-nav__inner {
    min-height: var(--nav-height);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(var(--space-4), 2.4vw, var(--space-8));
    row-gap: var(--space-2);
    padding-block: var(--space-2);
    overflow: visible;
}

.site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.site-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    transform: scaleX(0);
    background: var(--color-accent);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.site-nav a:hover,
.site-nav a.is-active {
    color: var(--color-ink);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
    transform: scaleX(1);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

.section-heading > div {
    max-width: 44rem;
}

.section-heading h2 {
    margin-bottom: var(--space-3);
}

.section-heading p {
    margin-bottom: 0;
    color: var(--color-ink-soft);
}

.breadcrumbs {
    margin-bottom: var(--space-8);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: var(--space-2);
    color: var(--color-line-strong);
}

.breadcrumbs a:hover {
    color: var(--color-accent-hover);
}

.home-hero {
    padding-block: clamp(var(--space-6), 4vw, var(--space-12));
}

.home-hero__stage {
    position: relative;
    isolation: isolate;
    min-height: min(42rem, calc(100dvh - 10rem));
    display: grid;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background: var(--color-hero-surface);
    box-shadow: var(--shadow-card);
}

.home-hero__stage::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--color-hero-scrim);
    pointer-events: none;
}

.home-hero__copy {
    min-width: 0;
    max-width: 42rem;
    padding: clamp(var(--space-8), 6vw, var(--space-24));
    color: var(--color-hero-ink);
}

.home-hero h1 {
    max-width: 11ch;
    margin-bottom: var(--space-6);
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
}

.home-hero__copy > p {
    max-width: 25rem;
    margin-bottom: var(--space-8);
    color: var(--color-hero-ink-soft);
    font-size: var(--text-lg);
}

.home-hero__feature {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-6);
    width: min(21rem, calc(100% - (var(--space-6) * 2)));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-hero-line);
    border-radius: var(--radius-card);
    background: var(--color-hero-glass);
    color: var(--color-hero-ink);
    backdrop-filter: blur(18px) saturate(130%);
    transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.home-hero__feature:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-hero-line));
}

.home-hero__feature span {
    color: var(--color-hero-ink-soft);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.home-hero__feature strong {
    font-size: var(--text-lg);
    line-height: 1.35;
}

.home-hero__feature small {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    color: var(--color-hero-ink);
    font-weight: 700;
}

@media (min-width: 48.0625rem) and (max-height: 50rem) {
    .home-hero {
        padding-block: var(--space-4);
    }

    .home-hero__stage {
        min-height: calc(100dvh - 12.25rem);
    }

    .home-hero__copy {
        padding: var(--space-8) var(--space-12);
    }

    .home-hero h1 {
        font-size: clamp(2.5rem, 4vw, 3.65rem);
    }
}

.trust-ribbon {
    border-block: 1px solid var(--color-line);
    background: var(--color-surface);
}

.trust-ribbon__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-ribbon__grid > div {
    min-height: 6.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-8));
}

.trust-ribbon__grid > div + div {
    border-left: 1px solid var(--color-line);
}

.trust-ribbon strong,
.trust-ribbon span {
    display: block;
}

.trust-ribbon span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.category-bento {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr 0.75fr;
    gap: var(--space-5);
}

.category-tile {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.category-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.category-tile--1 {
    grid-row: span 2;
}

.category-tile--4 {
    grid-column: 2 / 4;
}

.category-tile__content {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
}

.category-tile__content strong {
    font-size: var(--text-lg);
}

.category-tile__content > span {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.product-shelf-section,
.arrivals-section,
.article-preview-section {
    background: var(--color-surface);
}

.product-shelf {
    display: grid;
    grid-auto-columns: minmax(17rem, 1fr);
    grid-auto-flow: column;
    gap: var(--space-5);
    padding-bottom: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--color-line-strong) transparent;
}

.product-shelf .product-card {
    scroll-snap-align: start;
}

.product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.product-card:hover {
    border-color: var(--color-line-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.product-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
}

.product-card__meta {
    min-height: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
}

.product-card__meta a:hover {
    color: var(--color-accent-hover);
}

.status-label {
    color: var(--color-accent-hover);
    font-weight: 700;
    text-align: right;
}

.product-card h3 {
    margin-bottom: var(--space-1);
}

.product-card h3 a:hover {
    color: var(--color-accent-hover);
}

.product-card__series {
    margin-bottom: var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.product-card__tags,
.product-purchase__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-card__tags {
    margin-bottom: var(--space-6);
}

.product-card__tags span,
.product-purchase__tags span {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    color: var(--color-ink-soft);
    font-size: var(--text-xs);
    line-height: 1.2;
}

.product-card__footer {
    margin-top: auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-3);
}

.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: 0;
}

.price strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
}

.price del {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.promotion-section {
    background: var(--color-surface-raised);
}

.promotion-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
}

.promotion-feature {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(18rem, 1.1fr);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    overflow: hidden;
}

.promotion-feature__copy {
    align-self: center;
    padding: clamp(var(--space-8), 5vw, var(--space-16));
}

.promotion-kicker {
    margin-bottom: var(--space-3);
    color: var(--color-accent-hover);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.promotion-feature__copy > p:not(.promotion-kicker, .price) {
    color: var(--color-ink-soft);
}

.promotion-feature__copy .price {
    margin-block: var(--space-6);
}

.promotion-list h2 {
    margin-bottom: var(--space-8);
}

.promotion-list > a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.promotion-list > a:hover strong {
    color: var(--color-accent-hover);
}

.promotion-list__index {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.promotion-list strong,
.promotion-list small {
    display: block;
}

.promotion-list small {
    margin-top: var(--space-1);
    color: var(--color-ink-muted);
}

.brand-lineup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--color-brand-card-line);
}

.brand-lineup > a {
    min-width: 0;
    min-height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-brand-card-surface);
    color: var(--color-brand-card-ink);
}

.brand-lineup > a:hover {
    background: var(--color-brand-card-surface-hover);
}

.brand-lineup-label,
.brand-lineup-summary {
    color: var(--color-brand-card-ink-soft);
    font-size: var(--text-xs);
}

.brand-lineup-label {
    letter-spacing: var(--tracking-wide);
}

.brand-lineup-copy {
    min-width: 0;
}

.brand-lineup strong,
.brand-lineup small {
    display: block;
}

.brand-lineup strong {
    color: var(--color-brand-card-ink);
    font-size: var(--text-lg);
}

.brand-lineup small {
    color: var(--color-brand-card-ink-soft);
}

.brand-lineup-summary {
    line-height: 1.55;
}

.finder-section {
    background: var(--color-ink);
    color: var(--color-canvas);
}

.finder-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(var(--space-12), 8vw, var(--space-24));
}

.finder-intro {
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + var(--nav-height) + var(--space-8));
}

.finder-intro p {
    max-width: 30rem;
    color: color-mix(in srgb, var(--color-canvas) 70%, transparent);
}

.finder-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.finder-options a {
    min-height: 15rem;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-6);
    padding: var(--space-6);
    border: 1px solid color-mix(in srgb, var(--color-canvas) 20%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--color-canvas) 4%, transparent);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.finder-options a:nth-child(1),
.finder-options a:nth-child(4) {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.finder-options a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-accent) 72%, transparent);
    background: color-mix(in srgb, var(--color-canvas) 10%, transparent);
}

.finder-option__label {
    color: color-mix(in srgb, var(--color-canvas) 68%, transparent);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
}

.finder-option__copy {
    align-self: center;
}

.finder-option__copy strong {
    display: block;
    max-width: 17rem;
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.finder-option__copy small {
    display: block;
    color: color-mix(in srgb, var(--color-canvas) 70%, transparent);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.finder-option__action {
    width: fit-content;
    padding-bottom: var(--space-1);
    border-bottom: 1px solid currentColor;
    color: var(--color-canvas);
    font-size: var(--text-sm);
    font-weight: 700;
}

.arrival-list {
    border-top: 1px solid var(--color-line);
}

.arrival-row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.arrival-row__copy > p {
    margin-bottom: var(--space-1);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.arrival-row__copy h3 {
    margin-bottom: var(--space-2);
}

.arrival-row__copy > span {
    color: var(--color-ink-soft);
}

.arrival-row__price {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.series-section {
    background: var(--color-surface-raised);
}

.series-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--space-5);
}

.series-panel {
    position: relative;
    min-height: 12rem;
    display: flex;
    align-items: flex-end;
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    overflow: hidden;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)), var(--color-surface));
    transition:
        border-color var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.series-panel--1 {
    grid-row: span 2;
    min-height: calc(24rem + var(--space-5));
}

.series-panel > span {
    position: static;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: var(--space-2);
}

.series-panel strong,
.series-panel small {
    display: block;
    overflow-wrap: anywhere;
}

.series-panel small {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.series-panel strong {
    font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
    line-height: 1.18;
}

.series-panel:hover {
    transform: translateY(-3px);
    border-color: var(--color-line-strong);
}

.series-panel:nth-child(2) {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--card-tone-mint) 34%, var(--color-surface)), var(--color-surface));
}

.series-panel:nth-child(3) {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--card-tone-blue) 34%, var(--color-surface)), var(--color-surface));
}

.article-preview-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--space-6);
}

.article-preview-grid .article-card--featured {
    grid-row: span 2;
}

.article-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
}

.article-card--featured {
    grid-template-columns: 1fr;
    align-items: start;
}

.article-card__body h3 {
    margin-bottom: var(--space-2);
}

.article-card__body > p:not(.article-meta) {
    display: -webkit-box;
    margin-bottom: var(--space-4);
    overflow: hidden;
    color: var(--color-ink-soft);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.article-meta span + span::before {
    content: "/";
    margin-right: var(--space-3);
    color: var(--color-line-strong);
}

.site-footer {
    border-top: 1px solid var(--color-line);
    background: var(--color-surface-raised);
}

.site-footer__lead {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(24rem, 0.8fr);
    gap: var(--space-16);
    padding-block: var(--space-16);
}

.site-brand--footer {
    margin-bottom: var(--space-5);
    max-width: 18rem;
}

.site-footer__lead > div:first-child p {
    max-width: 32rem;
    margin-bottom: 0;
    color: var(--color-ink-soft);
}

.site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--space-6), 4vw, var(--space-10));
}

.site-footer__links > div {
    min-width: 0;
}

.site-footer__links h2 {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.site-footer__links a {
    display: block;
    width: fit-content;
    margin-block: var(--space-1);
    padding-block: var(--space-1);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.45;
    transition:
        color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    color: var(--color-accent-hover);
    transform: translateX(2px);
}

.site-footer__bottom {
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    border-top: 1px solid var(--color-line);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.site-footer__bottom p {
    margin-bottom: 0;
}

.toast {
    position: fixed;
    z-index: var(--z-toast);
    right: var(--gutter);
    bottom: var(--space-8);
    max-width: min(24rem, calc(100% - (var(--gutter) * 2)));
    transform: translateY(1rem);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-ink);
    color: var(--color-canvas);
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.page-hero {
    max-width: var(--reading-width);
    margin-bottom: var(--space-16);
}

.page-hero--compact h1 {
    margin-bottom: var(--space-4);
}

.page-hero--compact p {
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
}

.catalog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-line);
}

.catalog-hero > div {
    max-width: var(--reading-width);
}

.catalog-hero h1 {
    margin-bottom: var(--space-4);
}

.catalog-hero p {
    margin-bottom: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
}

.catalog-hero > span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.facet-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
}

.facet-shortcuts a {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--text-sm);
}

.facet-shortcuts a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

.category-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.category-shortcuts a {
    position: relative;
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background: var(--tile-tone);
    overflow: hidden;
}

.category-shortcuts a::after {
    content: "";
    position: absolute;
    width: 7rem;
    aspect-ratio: 1;
    right: -2rem;
    top: -2rem;
    border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
    border-radius: 50%;
}

.category-shortcuts span,
.category-shortcuts strong {
    position: relative;
    z-index: 1;
}

.category-shortcuts span {
    color: var(--color-ink-soft);
    font-size: var(--text-xs);
}

.catalog-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--space-8), 4vw, var(--space-16));
}

.catalog-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--nav-height) + var(--space-6));
}

.catalog-sidebar > h2 {
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
}

.catalog-filter-drawer {
    display: none;
}

.catalog-filters {
    display: grid;
    gap: var(--space-6);
}

.catalog-filters fieldset {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0 0 var(--space-6);
    border: 0;
    border-bottom: 1px solid var(--color-line);
}

.catalog-filters legend {
    margin-bottom: var(--space-3);
    color: var(--color-ink);
    font-weight: 700;
}

.catalog-toolbar select,
.brand-catalog-heading select,
.quantity-control select {
    min-height: var(--control-height);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
}

.choice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    cursor: pointer;
}

.choice input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
}

.catalog-filters__actions {
    display: grid;
    gap: var(--space-3);
}

.catalog-filters__actions .text-link {
    justify-self: center;
}

.catalog-toolbar,
.brand-catalog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.catalog-toolbar p,
.brand-catalog-heading p {
    margin-bottom: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.catalog-toolbar form,
.brand-catalog-heading form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.catalog-toolbar label,
.brand-catalog-heading label {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.catalog-toolbar select,
.brand-catalog-heading select {
    padding-inline: var(--space-3) var(--space-8);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.product-grid--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding: clamp(var(--space-8), 7vw, var(--space-16));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.empty-state h2,
.empty-state p {
    margin-bottom: 0;
}

.empty-state p {
    max-width: 36rem;
    color: var(--color-ink-soft);
}

.alphabet-nav {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    margin-bottom: var(--space-12);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.alphabet-nav a,
.alphabet-nav span {
    min-height: 2.8rem;
    display: grid;
    place-items: center;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.alphabet-nav a:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.alphabet-nav span {
    color: var(--color-line-strong);
}

.brand-directory {
    display: grid;
    gap: var(--space-12);
}

.brand-group {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--space-6);
}

.brand-group > h2 {
    position: sticky;
    top: calc(var(--header-height) + var(--nav-height) + var(--space-6));
    align-self: start;
    color: var(--color-accent);
    font-size: var(--text-3xl);
}

.brand-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.brand-directory-item {
    display: block;
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.brand-directory-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.brand-directory-copy,
.brand-directory-copy strong,
.brand-directory-copy small,
.brand-directory-copy > span {
    display: block;
}

.brand-directory-copy strong {
    margin-bottom: var(--space-1);
    font-size: var(--text-xl);
}

.brand-directory-copy small {
    margin-bottom: var(--space-3);
    color: var(--color-ink-muted);
}

.brand-directory-copy > span {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.brand-hero {
    margin-bottom: var(--space-16);
    padding: clamp(var(--space-8), 5vw, var(--space-12));
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
}

.brand-hero p {
    margin-bottom: var(--space-1);
    color: var(--color-accent-hover);
    font-weight: 700;
}

.brand-hero h1 {
    margin-bottom: var(--space-4);
}

.brand-hero > span {
    display: block;
    max-width: 38rem;
    color: var(--color-ink-soft);
}

.brand-catalog-heading > div h2 {
    margin-bottom: var(--space-1);
}

.product-detail {
    margin-bottom: var(--section-space);
}

.product-purchase__brand {
    margin-bottom: var(--space-2);
    color: var(--color-accent-hover);
    font-size: var(--text-sm);
    font-weight: 700;
}

.product-purchase h1 {
    margin-bottom: var(--space-2);
}

.product-purchase__series {
    margin-bottom: var(--space-5);
    color: var(--color-ink-muted);
}

.product-purchase__tags {
    margin-bottom: var(--space-6);
}

.product-purchase__summary {
    color: var(--color-ink-soft);
}

.price--large {
    margin-block: var(--space-8);
}

.price--large strong {
    font-size: var(--text-3xl);
}

.price--large del {
    font-size: var(--text-base);
}

.sku-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-8);
    padding: var(--space-6) 0 0;
    border: 0;
    border-top: 1px solid var(--color-line);
}

.sku-picker legend {
    width: 100%;
    margin-bottom: var(--space-3);
    font-weight: 700;
}

.sku-picker label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sku-picker label span {
    display: inline-flex;
    min-height: 2.6rem;
    align-items: center;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink-soft);
    cursor: pointer;
}

.sku-picker input:checked + span {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-weight: 700;
}

.sku-picker input:focus-visible + span {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.purchase-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-3);
}

.quantity-control {
    display: grid;
    gap: var(--space-1);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.quantity-control select {
    min-height: 2.7rem;
    padding-inline: var(--space-3);
}

.product-information {
    display: grid;
    grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-10), 8vw, var(--space-24));
    padding-block: var(--section-space);
    border-block: 1px solid var(--color-line);
}

.product-description {
    max-height: none;
    padding-right: 0;
    overflow: visible;
    color: var(--color-ink-soft);
    line-height: 1.75;
    white-space: normal;
    overflow-wrap: anywhere;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.spec-grid > div {
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
}

.spec-grid span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.spec-grid strong {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.related-products {
    padding-bottom: 0;
}

.article-filter-row span {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
    align-items: start;
    gap: clamp(var(--space-8), 5vw, var(--space-16));
}

.cart-items > h2,
.cart-summary > h2 {
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
}

.cart-line {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.cart-line__copy h3 {
    margin-bottom: var(--space-1);
}

.cart-line__copy > p {
    margin-bottom: var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.cart-line__controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.cart-line__controls label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.cart-line__controls select {
    min-height: 2.3rem;
    padding-inline: var(--space-2);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
}

.cart-line__remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-danger);
    font-weight: 700;
}

.cart-line__price {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.cart-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--nav-height) + var(--space-6));
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.cart-summary dl {
    margin: 0 0 var(--space-6);
}

.cart-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-3);
}

.cart-summary dd {
    margin: 0;
    font-weight: 700;
}

.cart-summary__total {
    margin-top: var(--space-3);
    padding-top: var(--space-5) !important;
    border-top: 1px solid var(--color-line);
    font-size: var(--text-lg);
}

.article-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.article-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
}

.article-list-grid > .article-card {
    grid-template-columns: 1fr;
    align-items: start;
}

.article-list-grid > .article-card--featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-line);
}

.article-detail {
    padding-block: var(--space-8) var(--section-space);
}

.article-detail__header {
    max-width: 54rem;
    margin: var(--space-12) auto;
    text-align: center;
}

.article-detail__header .article-meta {
    justify-content: center;
}

.article-detail__header h1 {
    margin-bottom: var(--space-5);
    font-size: var(--text-hero);
}

.article-detail__header > p:last-child {
    max-width: 42rem;
    margin-inline: auto;
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
}

.article-detail__layout {
    display: grid;
    grid-template-columns: 13rem minmax(0, var(--reading-width));
    justify-content: center;
    gap: clamp(var(--space-8), 6vw, var(--space-20));
    padding-block: var(--section-space);
}

.article-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--nav-height) + var(--space-8));
    align-self: start;
}

.article-toc h2 {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.article-toc ol {
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-5);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.article-prose section + section {
    margin-top: var(--space-16);
}

.article-prose h2 {
    margin-bottom: var(--space-5);
}

.article-prose p {
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
}

.article-callout {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--color-accent-soft);
}

.article-callout p {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
}

.article-list-grid--related > .article-card {
    grid-template-columns: 10rem minmax(0, 1fr);
}

.simple-page {
    min-height: 60dvh;
    padding-block: var(--space-8) var(--section-space);
}

.simple-page > header,
.simple-page__content {
    max-width: var(--reading-width);
    margin-inline: auto;
}

.simple-page > header {
    margin-block: var(--space-12) var(--space-8);
}

.simple-page__content {
    padding: var(--space-8);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.simple-page__content p {
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
}

.simple-page__content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 75rem) {
    .home-hero {
        padding-block: var(--space-10);
    }

    .site-header__main {
        grid-template-columns: auto minmax(16rem, 1fr) auto;
    }

    .site-nav__inner {
        justify-content: flex-start;
        overflow: visible;
    }

    .brand-lineup {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-grid--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 62rem) {
    :root {
        --section-space: clamp(4rem, 9vw, 6rem);
    }

    .site-header__main {
        grid-template-columns: auto 1fr auto;
    }

    .site-nav {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mobile-menu:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: var(--space-3) var(--gutter) var(--space-5);
        border-top: 1px solid var(--color-line);
        background: var(--color-surface);
    }

    .mobile-menu a {
        padding: var(--space-3);
        border-bottom: 1px solid var(--color-line);
        font-weight: 650;
    }

    .home-hero__stage {
        min-height: min(36rem, calc(100dvh - 8rem));
    }

    .home-hero h1 {
        font-size: clamp(2.7rem, 7vw, 4.5rem);
    }

    .category-bento,
    .promotion-layout,
    .finder-layout,
    .site-footer__lead {
        grid-template-columns: 1fr;
    }

    .category-tile--1,
    .category-tile--4 {
        grid-row: auto;
        grid-column: auto;
    }

    .category-bento {
        grid-template-columns: 1fr 1fr;
    }

    .finder-intro {
        position: static;
    }

    .catalog-sidebar {
        display: none;
    }

    .catalog-filter-drawer {
        display: block;
        margin-bottom: var(--space-6);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-card);
        background: var(--color-surface);
    }

    .catalog-filter-drawer summary {
        padding: var(--space-4) var(--space-5);
        font-weight: 700;
    }

    .catalog-filter-drawer .catalog-filters {
        padding: var(--space-5);
        border-top: 1px solid var(--color-line);
    }

    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .product-grid,
    .product-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alphabet-nav {
        grid-template-columns: repeat(9, 1fr);
    }

    .product-information,
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

@media (max-width: 48rem) {
    :root {
        --gutter: 1rem;
        --header-height: 4rem;
        --section-space: 4rem;
    }

    body {
        padding-bottom: 3.8rem;
    }

    .prototype-bar__inner {
        justify-content: space-between;
        text-align: left;
    }

    .prototype-bar__inner span {
        max-width: 25ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .site-header__main {
        min-height: var(--header-height);
    }

    .site-header__actions .cart-link {
        display: none;
    }

    .mobile-menu:not([hidden]) {
        grid-template-columns: 1fr;
        max-height: calc(100dvh - 8rem);
        overflow-y: auto;
    }

    .mobile-dock {
        position: fixed;
        z-index: var(--z-dock);
        right: 0;
        bottom: 0;
        left: 0;
        min-height: 3.8rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--color-line);
        background: var(--color-header-glass);
        backdrop-filter: blur(18px);
    }

    .mobile-dock a {
        display: grid;
        place-items: center;
        padding: var(--space-2);
        border: 0;
        background: transparent;
        color: var(--color-ink-soft);
        font-size: var(--text-xs);
        font-weight: 700;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }

    .home-hero {
        padding-top: var(--space-8);
    }

    .home-hero__stage {
        min-height: min(37rem, calc(100dvh - 7rem));
        align-items: start;
    }

    .home-hero__stage::after {
        background: var(--color-hero-scrim-mobile);
    }

    .home-hero__copy {
        max-width: 31rem;
        padding: var(--space-8) var(--space-6);
    }

    .home-hero h1 {
        max-width: none;
        font-size: clamp(2.25rem, 11vw, 3.25rem);
    }

    .home-hero__copy > p {
        font-size: var(--text-base);
    }

    .home-hero__feature {
        right: var(--space-3);
        bottom: var(--space-3);
        width: calc(100% - (var(--space-3) * 2));
    }

    .trust-ribbon__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-ribbon__grid > div + div {
        border-left: 0;
    }

    .trust-ribbon__grid > div:nth-child(even) {
        border-left: 1px solid var(--color-line);
    }

    .trust-ribbon__grid > div:nth-child(n + 3) {
        border-top: 1px solid var(--color-line);
    }

    .category-bento,
    .promotion-feature,
    .finder-options,
    .series-grid,
    .article-preview-grid,
    .brand-directory-grid,
    .article-list-grid,
    .product-information,
    .article-detail__layout {
        grid-template-columns: 1fr;
    }

    .site-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promotion-feature__copy {
        padding: var(--space-8);
    }

    .promotion-list > a {
        grid-template-columns: 1fr auto;
    }

    .promotion-list__index {
        display: none;
    }

    .brand-lineup {
        grid-template-columns: repeat(2, 1fr);
    }

    .arrival-row {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: var(--space-4);
    }

    .arrival-row__copy > span {
        display: none;
    }

    .arrival-row__price {
        grid-column: 2;
        font-size: var(--text-base);
    }

    .series-panel--1 {
        grid-row: auto;
        min-height: 12rem;
    }

    .article-preview-grid .article-card--featured {
        grid-row: auto;
    }

    .article-card,
    .article-card--featured,
    .article-list-grid > .article-card,
    .article-list-grid > .article-card--featured,
    .article-list-grid--related > .article-card {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .site-footer__lead {
        gap: var(--space-10);
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: var(--space-5);
    }

    .catalog-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .category-shortcuts {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-toolbar,
    .brand-catalog-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-toolbar form,
    .brand-catalog-heading form {
        width: 100%;
        justify-content: space-between;
    }

    .product-grid,
    .product-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .product-card__body {
        padding: var(--space-4);
    }

    .product-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .alphabet-nav {
        grid-template-columns: repeat(6, 1fr);
    }

    .brand-group {
        grid-template-columns: 1fr;
    }

    .brand-group > h2 {
        position: static;
    }

    .brand-directory-item {
        padding: var(--space-5);
    }

    .brand-hero {
        padding: var(--space-6);
    }

    .product-information {
        gap: var(--space-10);
    }

    .cart-line {
        grid-template-columns: 5rem minmax(0, 1fr);
        align-items: start;
    }

    .cart-line__price {
        grid-column: 2;
    }

    .article-detail__header {
        margin-block: var(--space-8);
        text-align: left;
    }

    .article-detail__header .article-meta {
        justify-content: flex-start;
    }

    .article-detail__header h1 {
        font-size: var(--text-3xl);
    }

    .article-detail__layout {
        padding-block: var(--space-12);
    }

    .article-toc {
        position: static;
        padding-bottom: var(--space-6);
        border-bottom: 1px solid var(--color-line);
    }

    .toast {
        right: var(--gutter);
        bottom: 4.75rem;
        left: var(--gutter);
        max-width: none;
    }
}

@media (max-width: 30rem) {
    .site-brand__name {
        font-size: clamp(0.95rem, 4vw, 1.1rem);
    }

    .site-footer__links {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .button-row {
        display: grid;
    }

    .product-grid,
    .product-grid--wide {
        grid-template-columns: 1fr;
    }

    .category-shortcuts,
    .trust-ribbon__grid {
        grid-template-columns: 1fr;
    }

    .trust-ribbon__grid > div:nth-child(even) {
        border-left: 0;
    }

    .trust-ribbon__grid > div + div {
        border-top: 1px solid var(--color-line);
    }

    .brand-lineup {
        grid-template-columns: 1fr;
    }

    .spec-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header,
    .mobile-dock,
    .home-hero__feature {
        background: var(--color-surface);
        backdrop-filter: none;
    }

    .home-hero__feature {
        color: var(--color-ink);
    }

    .home-hero__feature span {
        color: var(--color-ink-soft);
    }

    .home-hero__feature small {
        color: var(--color-ink);
    }
}

.home-hero__stage::after {
    z-index: 0;
    background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 34%), linear-gradient(135deg, transparent 42%, rgb(255 255 255 / 0.04));
}

.home-hero__copy,
.home-hero__feature {
    z-index: 1;
}

.category-tile {
    grid-template-rows: auto 1fr;
    padding: var(--space-5);
}

.category-tile__content {
    padding: var(--space-10) 0 0;
}

.main-series-section {
    background: var(--color-canvas);
}

.main-series-groups {
    display: grid;
    gap: var(--space-12);
}

.main-series-group {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
}

.main-series-group-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.main-series-group-header p {
    margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.main-series-group-header h3 {
    margin: 0;
    font-size: var(--text-2xl);
}

.main-series-group-header > span {
    color: var(--color-ink-muted);
    white-space: nowrap;
}

.main-sku-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.main-sku-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.main-sku-card:hover {
    border-color: var(--color-line-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.main-sku-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
}

.main-sku-card-meta {
    min-height: 1.35rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.main-sku-card-status {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.main-sku-card-status.is-available {
    color: var(--color-accent-hover);
}

.main-sku-card-status.is-sold-out {
    color: var(--color-ink-muted);
}

.main-sku-card-name {
    min-height: 3.2em;
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.main-sku-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.main-sku-card-footer .price {
    min-width: 0;
}

.main-sku-card-footer .button {
    flex: 0 0 auto;
}

.main-sku-empty {
    padding: var(--space-6);
    border: 1px dashed var(--color-line-strong);
    color: var(--color-ink-muted);
}

.main-secondary-section {
    background: var(--color-surface-muted);
}

.main-secondary-products {
    margin-top: 0;
}

.product-card h3,
.product-card h3 a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 64rem) {
    .main-sku-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .main-series-group-header {
        align-items: start;
        flex-direction: column;
    }

    .main-sku-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .main-sku-card-body {
        padding: var(--space-3);
    }

    .main-sku-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .main-sku-card-footer .button {
        width: 100%;
    }
}

@media (max-width: 24rem) {
    .main-sku-grid {
        grid-template-columns: 1fr;
    }
}

/* Final text-card pass: every storefront card is one information surface. */
.product-card,
.main-sku-card,
.article-card,
.promotion-feature {
    display: block;
}

.product-card__body,
.main-sku-card-body,
.article-card__body,
.promotion-feature__copy {
    min-width: 0;
}

.product-card__body {
    padding: var(--space-6);
}

.product-card__category,
.main-sku-card-category,
.promotion-feature__meta {
    margin-bottom: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.product-card__category,
.main-sku-card-category {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.article-card__body {
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.article-card:hover .article-card__body {
    border-color: var(--color-line-strong);
}

.promotion-feature {
    border: 1px solid var(--color-line);
    background: var(--color-surface);
}

.promotion-feature__copy {
    padding: clamp(var(--space-8), 5vw, var(--space-16));
}

.arrival-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.arrival-row__copy {
    min-width: 0;
}

.product-purchase__availability {
    margin-bottom: var(--space-5);
    color: var(--color-accent-hover);
    font-size: var(--text-sm);
    font-weight: 700;
}

.cart-line {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cart-line__copy {
    min-width: 0;
}

@media (max-width: 48rem) {
    .product-card__body,
    .article-card__body,
    .promotion-feature__copy,
    .series-panel,
    .main-sku-card-body {
        padding: var(--space-5);
    }

    .arrival-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 30rem) {
    .arrival-row {
        grid-template-columns: 1fr;
    }

    .arrival-row__price {
        grid-column: auto;
    }
}