/* ===========================================================================
   Craft Journal — Rooted Shelving storefront
   ---------------------------------------------------------------------------
   Layered on top of site.css / extra.css / redesign.css. Tokens come from the
   Stitch design system export (rootedshelving-stitch/storefront/craft_journal).

   Intent: a bespoke woodworker's catalogue. Generous negative space, hairline
   rules instead of shadows, editorial serif headings, and product specs treated
   as technical notes rather than hidden metadata.

   Palette values are NOT hardcoded here — they come from the theme variables
   the admin writes (Site Content → Theme), so the store stays re-themeable.
   =========================================================================== */

:root {
    /* Type scale (Craft Journal) */
    --fs-display: clamp(2.5rem, 1.6rem + 3.4vw, 3.5rem);
    --lh-display: 1.14;
    --fs-headline-lg: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-headline-md: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem);
    --fs-headline-sm: 1.375rem;
    --fs-body-lg: 1.125rem;
    --fs-body: 0.9375rem;
    --fs-body-sm: 0.8125rem;
    --fs-spec: 0.75rem;
    --fs-label: 0.6875rem;

    /* Rhythm */
    --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
    --gutter: clamp(1rem, 0.5rem + 2vw, 3rem);

    --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Paper depth: tonal shifts, never synthetic elevation */
    --paper-rule: 1px solid var(--c-border);
}

/* ─── Page canvas ─────────────────────────────────────────────────────── */

body {
    font-size: var(--fs-body);
    letter-spacing: 0;
}

/* ─── Editorial headings ──────────────────────────────────────────────── */

.hero__title,
.section-title,
.product-detail__title,
.page-title,
h1, h2, h3 {
    font-family: var(--ff-serif);
    font-weight: 400;
    letter-spacing: -0.015em;
}

.hero__title {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: 400;
}

.section-title {
    font-size: var(--fs-headline-lg);
    line-height: 1.2;
}

/* Eyebrows and micro-labels are mono, spaced like a spec sheet stamp. */
.section-eyebrow,
.hero__eyebrow,
.label-caps {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

/* ─── Section rhythm: left-aligned editorial headers ──────────────────── */

.categories,
.bestsellers,
.collections,
.custom-section,
.testimonials,
.mid-banners {
    padding-block: var(--section-y);
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    text-align: left;
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
}

/* The heading sits against the content edge, not floating mid-page. */
.section-header .section-title,
.section-header .section-eyebrow {
    text-align: left;
    width: auto;
}

.section-header .section-eyebrow {
    margin: 0;
}

/* ─── Buttons: pill, quiet, deliberate ────────────────────────────────── */

.btn {
    border-radius: 999px;
    letter-spacing: 0.06em;
    font-size: var(--fs-body-sm);
    padding: 15px 34px;
    transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}

.btn--primary {
    background: var(--c-accent);
    color: #fff;
}

.btn--primary:hover {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
}

.btn--ghost,
.btn--outline {
    border: 1px solid currentColor;
    background: transparent;
}

/* ─── Trust bar: hairline-ruled spec strip ────────────────────────────── */

.trust-bar {
    background: transparent;
    border-block: var(--paper-rule);
    padding-block: 1.25rem;
}

.trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem clamp(0.75rem, 2vw, 2rem);
    border-left: var(--paper-rule);
}

.trust-item:first-child {
    border-left: 0;
}

.trust-item svg {
    width: 22px;
    height: 22px;
    color: var(--c-accent);
    flex: none;
}

.trust-item strong {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    letter-spacing: 0;
}

.trust-item span {
    font-size: var(--fs-spec);
    color: var(--c-text-light);
}

/* ─── Product cards: catalogue plates ─────────────────────────────────── */

.product-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.product-card__img,
.product-card__image {
    border-radius: 2px;
    overflow: hidden;
    background: var(--c-beige);
}

.product-card__title,
.product-card__name {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-sm);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.product-card__price,
.price {
    font-family: var(--ff-mono);
    font-size: var(--fs-body-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.product-card__badge,
.badge {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 10px;
}

/* ─── Category grid: editorial, deliberately uneven ───────────────────── */

.section-header__link {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-accent);
    border-bottom: 1px solid transparent;
    align-self: flex-start;
}

.section-header__link:hover {
    border-bottom-color: currentColor;
}

.cat-grid {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.cat-tile {
    position: relative;
    display: block;
    grid-column: span 2;
    overflow: hidden;
    border-radius: 2px;
    background: var(--c-beige);
}

/* First tile carries the section; the next two are half-height companions. */
.cat-tile:nth-child(1) {
    grid-column: span 3;
    grid-row: span 2;
}

.cat-tile:nth-child(2),
.cat-tile:nth-child(3) {
    grid-column: span 3;
}

.cat-tile__img {
    display: block;
    height: 100%;
}

.cat-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-tile:nth-child(1) .cat-tile__img img {
    aspect-ratio: 3 / 4;
}

.cat-tile:hover .cat-tile__img img {
    transform: scale(1.03);
}

/* Label sits on the image, lifted by a gradient rather than a solid slab. */
.cat-tile__body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: clamp(1rem, 2vw, 1.75rem);
    color: #fff;
    background: linear-gradient(to top, rgb(31 27 23 / 0.72), rgb(31 27 23 / 0));
}

.cat-tile__name {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-sm);
    line-height: 1.25;
}

.cat-tile__count {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

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

    .cat-tile,
    .cat-tile:nth-child(1),
    .cat-tile:nth-child(2),
    .cat-tile:nth-child(3) {
        grid-column: span 1;
        grid-row: auto;
    }

    .cat-tile:nth-child(1) {
        grid-column: span 2;
    }

    .cat-tile:nth-child(1) .cat-tile__img img {
        aspect-ratio: 16 / 10;
    }
}

/* ─── Collections: horizontal strips that open on hover ───────────────── */

.collections__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1px;
    background: var(--c-border);
    width: min(100%, 1480px);
    margin-inline: auto;
    border-block: var(--paper-rule);
}

.collection-card {
    background: var(--c-bg);
    display: block;
    transition: background-color 0.3s ease;
}

.collection-card:hover {
    background: var(--c-beige);
}

.collection-card__img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.collection-card__info {
    padding: 1rem 1.25rem 1.5rem;
}

.collection-card__info h4 {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-sm);
    font-weight: 400;
}

/* ─── Mid banners: two editorial plates side by side, not a slideshow ─── */

.mid-banners__slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    height: auto;
}

/* The slider JS toggles .active; showing every plate at once retires it. */
.mid-banners__slide {
    position: relative;
    opacity: 1;
    display: flex;
    align-items: flex-end;
    min-height: clamp(260px, 26vw, 380px);
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    overflow: hidden;
}

.mid-banners__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(31 27 23 / 0.7), rgb(31 27 23 / 0.05) 60%);
}

.mid-banners__content {
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
    color: #fff;
    max-width: 34ch;
}

.mid-banners__content h3 {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-md);
    font-weight: 400;
    margin-bottom: 0.375rem;
}

.mid-banners__content p {
    font-size: var(--fs-body-sm);
    opacity: 0.9;
}

.mid-banners__dots {
    display: none;
}

/* ─── Custom pieces: workshop split with a technical caption ──────────── */

.custom-section {
    background: var(--c-beige);
    border-block: var(--paper-rule);
}

.custom-section__inner {
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
}

.custom-section__desc {
    font-size: var(--fs-body-lg);
    line-height: 1.7;
    color: var(--c-text-light);
    max-width: 46ch;
}

.custom-section__features {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-block: 1.5rem;
}

.custom-section__features li {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-text);
    padding-left: 1.5rem;
    position: relative;
}

.custom-section__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 12px;
    height: 1px;
    background: var(--c-accent);
}

.custom-section__image img {
    border-radius: 2px;
}

/* ─── Testimonials: one quote, given room ─────────────────────────────── */

/* site.css sets an ink slab here; Craft Journal keeps the quotes on paper, so
   the inherited white type has to be brought back to ink. */
.testimonials {
    background: transparent;
    color: var(--c-text);
}

.testimonials .section-title,
.testimonials .testimonial-card p,
.testimonials .testimonial-card__author strong {
    color: var(--c-text);
}

.testimonials .section-eyebrow,
.testimonials .testimonial-card__author span {
    color: var(--c-text-light);
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1px;
    background: var(--c-border);
    width: min(100%, 1480px);
    margin-inline: auto;
    border: var(--paper-rule);
}

.testimonial-card {
    background: var(--c-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.testimonial-card p {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-sm);
    line-height: 1.5;
    font-style: italic;
    color: var(--c-text);
}

.testimonial-card__stars {
    color: var(--c-brass);
    letter-spacing: 0.2em;
    font-size: 0.875rem;
}

.testimonial-card__author strong {
    font-size: var(--fs-body-sm);
    font-weight: 600;
}

.testimonial-card__author span {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    color: var(--c-text-light);
    letter-spacing: 0.04em;
}

/* ─── Top bar & header: quiet, archival ───────────────────────────────── */

.top-bar {
    background: var(--c-dark);
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.header,
.site-header {
    border-bottom: var(--paper-rule);
    box-shadow: none;
}

.nav__link,
.header nav a {
    font-size: var(--fs-body-sm);
    letter-spacing: 0.08em;
}

/* ─── Footer: ink ground, letterpress spacing ─────────────────────────── */

.footer {
    background: var(--c-dark);
    border-top: 0;
}

.footer h4,
.footer__col h4 {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    font-weight: 500;
}

/* ═══ Shop / category page ═════════════════════════════════════════════ */

.page-hero {
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: transparent;
    border-bottom: var(--paper-rule);
}

.page-hero__inner {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    text-align: left;
}

.page-hero .section-title {
    font-size: var(--fs-headline-lg);
}

.page-hero__intro {
    max-width: 58ch;
    color: var(--c-text-light);
    font-size: var(--fs-body-lg);
    line-height: 1.7;
}

/* Breadcrumbs read like a filing reference. */
.crumbs {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-light);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

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

.crumbs__current {
    color: var(--c-text);
}

/* Category chips: quick jumps between sibling categories. */
.cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 7px 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: var(--fs-body-sm);
    color: var(--c-text);
    background: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cat-chip:hover {
    border-color: var(--c-accent);
}

.cat-chip.is-active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.cat-chip__count {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    opacity: 0.6;
}

/* ─── Filter rail: a spec sheet, not a control panel ──────────────────── */

.shop__layout {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.shop-filters__group {
    border-bottom: var(--paper-rule);
    padding-block: 1.25rem;
}

.shop-filters__group h4 {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
    margin-bottom: 0.75rem;
}

.shop-filters label {
    font-size: var(--fs-body-sm);
}

.shop-filters__count {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    color: var(--c-text-light);
}

.shop-filters__clear {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-accent);
    border-bottom: 1px solid currentColor;
}

/* ─── Toolbar & grid ──────────────────────────────────────────────────── */

.shop__toolbar {
    border-bottom: var(--paper-rule);
    padding-bottom: 0.875rem;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.shop__count,
.shop__sort label {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.shop__sort select {
    font-family: inherit;
    font-size: var(--fs-body-sm);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 7px 14px;
    background: transparent;
    color: var(--c-text);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
}

.shop__pagination {
    border-top: var(--paper-rule);
    margin-top: clamp(2rem, 4vw, 3.5rem);
    padding-top: 1.5rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-body-sm);
}

.shop__empty {
    padding-block: clamp(3rem, 6vw, 6rem);
    text-align: center;
}

/* ═══ Product detail ═══════════════════════════════════════════════════ */

.product-detail {
    padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section-y);
}

.product-detail__main,
.product-detail__grid {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    gap: clamp(2rem, 4vw, 4.5rem);
}

.breadcrumb {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

/* Gallery: plates on paper, no frames. */
.product-detail__media img,
.pd-thumb img {
    border-radius: 2px;
}

.pd-thumb {
    border: 1px solid transparent;
    border-radius: 2px;
    overflow: hidden;
    background: var(--c-beige);
}

.pd-thumb.is-active {
    border-color: var(--c-accent);
}

/* The gallery no longer repeats the product name over the photograph — the
   buying column already carries it, and the plate reads better uncovered. */
.pd-main-caption {
    display: none;
}

.pd-main-badge {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Buying column */
.product-detail__name,
.product-detail__title {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-lg);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.product-detail__price {
    font-family: var(--ff-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
}

.product-detail__price .original {
    color: var(--c-text-light);
    font-size: var(--fs-body-sm);
}

.pd-price__label,
.pd-price__save {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-detail__rating .stars {
    color: var(--c-brass);
    letter-spacing: 0.12em;
}

/* Variation pickers read as chips, finishes as swatches. */
.product-detail__variations label,
.product-detail__variations .variation-option {
    border-radius: 999px;
    font-size: var(--fs-body-sm);
}

.product-detail__meta,
.product-detail__trust {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
    color: var(--c-text-light);
}

.product-detail__trust {
    border-top: var(--paper-rule);
    padding-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.in-stock {
    color: var(--c-accent);
}

.out-stock {
    color: #a8412f;
}

.qty-control {
    border: 1px solid var(--c-border);
    border-radius: 999px;
}

.tag-chip {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 5px 12px;
}

/* ─── Tabs: description, reviews, questions ───────────────────────────── */

.pd-tabs {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-top: var(--section-y);
}

.pd-tabnav {
    border-bottom: var(--paper-rule);
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.pd-tab {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: 1rem;
    color: var(--c-text-light);
    border-bottom: 2px solid transparent;
    background: none;
}

.pd-tab.is-active {
    color: var(--c-text);
    border-bottom-color: var(--c-accent);
}

.pd-desc__text {
    max-width: 68ch;
    font-size: var(--fs-body-lg);
    line-height: 1.75;
}

.pd-desc__quote {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-md);
    font-style: italic;
    line-height: 1.45;
    border-left: 2px solid var(--c-accent);
    padding-left: 1.25rem;
}

/* Figures are treated as workshop notes, not marketing filler. */
.pd-desc__figures {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
    display: grid;
    gap: 0.5rem;
    border-top: var(--paper-rule);
    padding-top: 1rem;
}

/* ─── Reviews & questions ─────────────────────────────────────────────── */

.reviews__summary {
    border: var(--paper-rule);
    border-radius: 2px;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--c-surface);
}

.reviews__avg {
    font-family: var(--ff-serif);
    font-size: 3rem;
    line-height: 1;
}

.reviews__count,
.review__date {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.review {
    border-bottom: var(--paper-rule);
    padding-block: 1.5rem;
}

.review__author {
    font-weight: 600;
    font-size: var(--fs-body-sm);
}

.review__photo img {
    border-radius: 2px;
}

.pq {
    border-bottom: var(--paper-rule);
    padding-block: 1.25rem;
}

.pq-badge {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* ═══ Cart, drawer and checkout ════════════════════════════════════════ */

/* Drawer: a slip of paper sliding in from the edge. */
.cart-drawer {
    background: var(--c-bg);
    border-left: var(--paper-rule);
}

.cart-drawer__header,
.cart-drawer__footer {
    border-color: var(--c-border);
}

.cart-drawer__header h3 {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-sm);
    font-weight: 400;
}

.cart-drawer__shipping,
.cart-drawer__subtotal {
    font-family: var(--ff-mono);
    font-size: var(--fs-body-sm);
    font-variant-numeric: tabular-nums;
}

.cart-drawer__shipping {
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

/* ─── Cart page: a ruled ledger of what you're ordering ───────────────── */

.cart-page__grid {
    width: min(100%, 1480px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.cart-page__items-head {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
    border-bottom: var(--paper-rule);
    padding-bottom: 0.75rem;
}

.cart-row {
    border-bottom: var(--paper-rule);
    padding-block: 1.25rem;
}

.cart-row__img img {
    border-radius: 2px;
}

.cart-row__name {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-sm);
    font-weight: 400;
    line-height: 1.3;
}

.cart-row__sku,
.cart-row__unit {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
    color: var(--c-text-light);
}

.cart-row__total {
    font-family: var(--ff-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-body);
}

.cart-row__remove {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.cart-row__remove:hover {
    color: #a8412f;
}

/* Summary card: the figures column of the ledger. */
.cart-summary {
    background: var(--c-surface);
    border: var(--paper-rule);
    border-radius: 2px;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.cart-summary__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--ff-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-body-sm);
    padding-block: 0.4rem;
}

.cart-summary__line--discount {
    color: var(--c-accent);
}

.cart-summary__line--total {
    border-top: var(--paper-rule);
    margin-top: 0.75rem;
    padding-top: 0.875rem;
    font-size: var(--fs-headline-sm);
    font-family: var(--ff-serif);
    font-variant-numeric: normal;
}

.cart-summary__coupon input {
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: var(--ff-mono);
    font-size: var(--fs-body-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
}

.cart-summary__continue {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cart-assurance {
    border-top: var(--paper-rule);
    margin-top: 1.25rem;
    padding-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.cart-assurance__item {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
    color: var(--c-text-light);
}

/* ─── Checkout: quiet, uncluttered, nothing competing with the form ───── */

.checkout__grid {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.checkout__form .form-group label,
.checkout__summary h3 {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.checkout__form input,
.checkout__form select,
.checkout__form textarea,
.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: var(--fs-body);
    background: var(--c-surface);
    color: var(--c-text);
}

.checkout__form input:focus,
.checkout__form select:focus,
.checkout__form textarea:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: 0;
    border-color: var(--c-accent);
}

.field-error {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    color: #a8412f;
    letter-spacing: 0.03em;
}

.checkout__summary {
    background: var(--c-beige);
    border: var(--paper-rule);
    border-radius: 2px;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    align-self: start;
    position: sticky;
    top: calc(var(--header-h, 72px) + 1rem);
}

.checkout__item {
    border-bottom: var(--paper-rule);
    padding-block: 0.75rem;
}

.checkout__item-name {
    font-family: var(--ff-serif);
    font-size: var(--fs-body);
    line-height: 1.35;
}

.checkout__origin,
.form-hint {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
    color: var(--c-text-light);
    line-height: 1.5;
}

.checkout__origin {
    border-bottom: var(--paper-rule);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.checkout__item-qty,
.checkout__item-total,
.checkout__currency-note {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--c-text-light);
}

.payment-box {
    border: var(--paper-rule);
    border-radius: 2px;
    padding: 1rem;
    background: var(--c-surface);
}

.payment-option {
    font-size: var(--fs-body-sm);
}

/* ═══ Account, auth, contact, messages ═════════════════════════════════ */

.account__grid,
.contact-page__grid,
.guest-thread__inner {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    gap: clamp(1.5rem, 3vw, 3rem);
}

.account__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 1px;
    background: var(--c-border);
    border: var(--paper-rule);
    border-radius: 2px;
    overflow: hidden;
}

.account__stat {
    background: var(--c-surface);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.account__stat-num {
    font-family: var(--ff-serif);
    font-size: 2rem;
    line-height: 1.1;
}

.account__stat-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.account-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body-sm);
}

.account-table th {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
    text-align: left;
    padding-block: 0.75rem;
    border-bottom: var(--paper-rule);
}

.account-table td {
    padding-block: 0.875rem;
    border-bottom: var(--paper-rule);
    font-variant-numeric: tabular-nums;
}

.account__empty {
    padding-block: clamp(2rem, 5vw, 4rem);
    text-align: center;
    color: var(--c-text-light);
}

/* ─── Auth: a single sheet, centred ───────────────────────────────────── */

.auth-page {
    padding-block: var(--section-y);
    background: var(--c-bg);
}

.auth-card {
    background: var(--c-surface);
    border: var(--paper-rule);
    border-radius: 2px;
    box-shadow: none;
    padding: clamp(1.75rem, 4vw, 3rem);
    max-width: 440px;
    margin-inline: auto;
}

.auth-card__title {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-md);
    font-weight: 400;
}

.auth-card__sub,
.auth-card__switch {
    font-size: var(--fs-body-sm);
    color: var(--c-text-light);
}

.auth-form__group label,
.contact-page__form label {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.auth-form__group input {
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: 12px 14px;
    background: var(--c-bg);
    width: 100%;
}

.auth-form__forgot,
.contact-page__login-hint {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
}

/* ─── Contact & custom orders ─────────────────────────────────────────── */

.contact-page__info,
.contact-page__details {
    font-size: var(--fs-body);
    line-height: 1.75;
}

.contact-page__details {
    border-top: var(--paper-rule);
    padding-top: 1.25rem;
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
}

.message-compose__context {
    border: var(--paper-rule);
    border-radius: 2px;
    padding: 0.875rem 1rem;
    background: var(--c-beige);
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
}

/* ─── Message threads ─────────────────────────────────────────────────── */

.message-thread {
    border-top: var(--paper-rule);
}

.message-bubble__meta {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

.message-bubble__body {
    font-size: var(--fs-body);
    line-height: 1.7;
}

.guest-thread__bookmark,
.message-thread__closed {
    border: var(--paper-rule);
    border-radius: 2px;
    padding: 0.875rem 1rem;
    background: var(--c-beige);
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
}

.guest-thread__product-label,
.message-reply__label {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-light);
}

/* ─── 404 ─────────────────────────────────────────────────────────────── */

.error-page {
    padding-block: clamp(4rem, 10vw, 8rem);
    text-align: center;
}

.error-page__code {
    font-family: var(--ff-mono);
    font-size: clamp(3rem, 8vw, 5rem);
    letter-spacing: 0.08em;
    color: var(--c-border);
}

.error-page__title {
    font-family: var(--ff-serif);
    font-size: var(--fs-headline-lg);
    font-weight: 400;
}

.error-page__text {
    color: var(--c-text-light);
    max-width: 44ch;
    margin-inline: auto;
}

/* ─── Flash messages ──────────────────────────────────────────────────── */

.flash {
    border: var(--paper-rule);
    border-radius: 2px;
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
}

.flash--success {
    border-color: var(--c-accent);
    background: var(--c-beige);
    color: var(--c-text);
}

/* ─── Spec tables: dimensions as technical notes ──────────────────────── */

.spec-list,
.product-specs {
    font-family: var(--ff-mono);
    font-size: var(--fs-spec);
    letter-spacing: 0.04em;
}

.spec-list dt,
.product-specs dt {
    color: var(--c-text-light);
    text-transform: uppercase;
}

/* ─── Empty sections should collapse, not leave a hole ────────────────── */

.bestsellers__track:empty,
.cat-carousel:empty {
    display: none;
}

.bestsellers:has(.bestsellers__track:empty) {
    display: none;
}

/* ─── Motion: restrained ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══ Mobile ═══════════════════════════════════════════════════════════
   Phone-first corrections. The desktop header assumed 40px side padding and
   a logo that never shrinks, which pushed the cart icon off a 375px screen.
   Touch targets are brought to 44px without changing how anything looks.
   ==================================================================== */

@media (max-width: 768px) {
    .header__inner {
        padding-inline: 16px;
        gap: 8px;
    }

    /* The wordmark yields space instead of shoving the icons off-screen. */
    .header__logo {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The wordmark keeps its own size, so shrink it rather than the link —
       otherwise the brand name gets clipped to "Rooted Shelvin". */
    .header__logo .brand-word,
    .header__logo .logo-text {
        font-size: 1.2rem;
        letter-spacing: -0.01em;
    }

    .header__actions {
        flex: none;
        gap: 2px;
        margin-left: auto;
    }

    /* 44px is the smallest square a thumb reliably hits. */
    .header__hamburger,
    .icon-btn,
    .search-overlay__close,
    .cart-drawer__close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .top-bar__inner {
        padding-inline: 16px;
        gap: 8px;
    }

    /* Currency links keep their compact look but gain a full-size hit area. */
    .switcher__btn {
        position: relative;
        padding-block: 11px;
    }

    .switcher__btn::before {
        content: '';
        position: absolute;
        inset: -6px -4px;
    }

    .switcher__sep,
    .cart-badge {
        font-size: 0.6875rem;
    }

    /* Slider dots: same dot, bigger reach. */
    .hero__dot,
    .mid-banners__dots button {
        position: relative;
    }

    .hero__dot::before,
    .mid-banners__dots button::before {
        content: '';
        position: absolute;
        inset: -18px;
    }

    /* Buttons are thumb-height and never squeezed onto one cramped line. */
    .btn {
        min-height: 44px;
        padding: 13px 24px;
    }

    .hero__ctas {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Editorial grid collapses to a single readable column. */
    .section-header {
        padding-inline: 16px;
    }

    .cat-grid {
        padding-inline: 16px;
    }

    .trust-item {
        border-left: 0;
        border-top: var(--paper-rule);
    }

    .trust-item:first-child {
        border-top: 0;
    }
}

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

    .cat-tile,
    .cat-tile:nth-child(1),
    .cat-tile:nth-child(2),
    .cat-tile:nth-child(3) {
        grid-column: span 1;
        grid-row: auto;
    }

    .cat-tile__img img,
    .cat-tile:nth-child(1) .cat-tile__img img {
        aspect-ratio: 16 / 10;
    }
}

/* ─── Mobile navigation ───────────────────────────────────────────────
   redesign.css hid the category bar below 900px, which left phone visitors
   with no way to reach a category from anywhere except the home page grid.
   It comes back as a scrollable strip — categories stay one tap away.
   ------------------------------------------------------------------- */

@media (max-width: 900px) {
    .cat-bar {
        display: block;
        border-bottom: var(--paper-rule);
    }

    .cat-bar__inner {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 16px;
        max-width: none;
    }

    .cat-bar__inner::-webkit-scrollbar {
        display: none;
    }

    .cat-bar__link {
        white-space: nowrap;
        padding: 12px 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-size: 0.75rem;
    }

    .cat-bar__link::after {
        left: 14px;
        right: 14px;
    }

    /* The drawer opened with the links floating in the middle of the screen. */
    .header__nav {
        justify-content: flex-start;
        padding: 72px 24px 32px;
        gap: 2px;
    }

    .nav-list {
        width: 100%;
    }

    .nav-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        border-bottom: var(--paper-rule);
        font-size: 0.875rem;
    }

    .header__nav-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ─── Mobile product grids ────────────────────────────────────────────
   Two columns is how people scan a catalogue on a phone; one column turns
   browsing 39 shelves into a very long scroll. Card type steps down to suit.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {
    .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 0.75rem;
    }

    .shop-grid .product-card__name,
    .shop-grid .product-card__title {
        font-size: 0.9375rem;
        line-height: 1.35;
    }

    .shop-grid .product-card__price {
        font-size: 0.75rem;
    }

    .shop-grid .product-card__rating {
        font-size: 0.6875rem;
    }

    /* Quick-add is a hover affordance on desktop; on touch it just covers the
       photograph, so the card links straight through to the product. */
    .shop-grid .product-card__quick {
        display: none;
    }

    .shop__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .shop__sort select {
        min-height: 44px;
    }

    .shop-filters__toggle {
        min-height: 48px;
        width: 100%;
    }

    .product-card__heart {
        min-width: 40px;
        min-height: 40px;
    }
}

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

/* ─── Mobile product detail ───────────────────────────────────────────
   The buying decision happens in the top screenful, so the primary action
   spans the full width and the long catalogue titles stop eating the page.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* A 145px 'Add to cart' in the middle of a 375px screen is a miss waiting
       to happen — the main action goes edge to edge. */
    .product-detail__info .btn--primary,
    .product-detail__info button[type='submit'] {
        width: 100%;
    }

    .product-detail__info form .qty-control {
        width: 100%;
        justify-content: space-between;
    }

    .product-detail__name,
    .product-detail__title {
        font-size: var(--fs-headline-md);
        line-height: 1.22;
    }

    /* Catalogue names run long; the crumb trail should not become a paragraph. */
    .breadcrumb {
        display: flex;
        gap: 0.375rem;
        white-space: nowrap;
        overflow: hidden;
    }

    .breadcrumb > :last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* Thumbnail rail scrolls by touch, without a scrollbar cutting across it. */
    .product-detail__thumbs,
    .pd-thumbrail {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .product-detail__thumbs::-webkit-scrollbar,
    .pd-thumbrail::-webkit-scrollbar {
        display: none;
    }

    .pd-tabnav {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pd-tabnav::-webkit-scrollbar {
        display: none;
    }

    .pd-desc__text {
        font-size: 1rem;
    }

    /* Reviews and Q&A forms sit in one column on a phone. */
    .review-form,
    .pq-form,
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Mobile cart rows ────────────────────────────────────────────────
   The desktop row keeps a fixed 128px column for the product name, which on a
   phone wrapped catalogue titles into a thirteen-line sliver. On mobile the
   name takes the full width and the controls sit on a second line.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {
    .cart-row {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 0.625rem;
        column-gap: 0.75rem;
    }

    .cart-row__img {
        grid-area: 1 / 1 / 3 / 2;
        align-self: start;
    }

    .cart-row__info {
        grid-area: 1 / 2 / 2 / 4;
        min-width: 0;
    }

    .cart-row__name {
        font-size: 0.9375rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cart-row__qty {
        grid-area: 2 / 2 / 3 / 3;
        justify-self: start;
    }

    .cart-row__total {
        grid-area: 2 / 3 / 3 / 4;
        justify-self: end;
    }

    .cart-row form:last-child {
        grid-area: 3 / 2 / 4 / 4;
        justify-self: start;
    }

    .cart-row__remove {
        min-width: 44px;
        min-height: 44px;
    }

    /* The drawer shares the same long-title problem. */
    .cart-drawer__body .cart-line__name,
    .cart-drawer__body a[href*='/product/'] {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cart-page__grid,
    .checkout__grid {
        grid-template-columns: 1fr;
    }

    .checkout__summary {
        position: static;
    }
}

/* ─── Mobile footer & misc ────────────────────────────────────────────
   Footer link lists are thumb-spaced, and the newsletter field stops sharing
   a cramped line with its button.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {
    .footer__col a,
    .footer__links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .footer__newsletter-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: left;
    }

    .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .newsletter-form input {
        width: 100%;
        min-height: 48px;
        border-radius: 999px;
        padding-inline: 18px;
    }

    .newsletter-form .btn {
        width: 100%;
    }

    /* Account and auth screens: single column, full-width actions. */
    .account__grid,
    .contact-page__grid,
    .guest-thread__inner {
        grid-template-columns: 1fr;
    }

    .auth-card {
        margin-inline: 16px;
    }

    .auth-form__submit,
    .auth-card .btn {
        width: 100%;
    }

    /* Wide data tables scroll instead of squeezing. */
    .account-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .account-table::-webkit-scrollbar {
        display: none;
    }
}

/* ─── Mobile search overlay ───────────────────────────────────────────
   The close button was pushed past the screen edge by the input, which also
   widened the document even while the overlay was hidden.
   ------------------------------------------------------------------- */

@media (max-width: 768px) {
    .search-overlay {
        overflow: hidden;
    }

    .search-overlay__inner {
        padding-inline: 16px;
        gap: 8px;
        max-width: 100%;
    }

    .search-overlay__input {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 1rem;
    }

    .search-overlay__close {
        flex: none;
    }
}

@media (max-width: 768px) {
    /* Placing the order is the one action on this screen — give it the width. */
    form.checkout__grid button[type='submit'],
    .checkout__summary .btn--primary,
    .cart-summary .btn--primary {
        width: 100%;
    }

    /* Radio dots are 13px; the whole row becomes the target instead. */
    .payment-option {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        min-height: 44px;
        cursor: pointer;
    }
}

@media (max-width: 768px) {
    .product-detail__contact-link,
    .vchat-close,
    .chat-close {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

    .vchat-close,
    .chat-close {
        min-width: 44px;
        justify-content: center;
    }
}

/* ─── Header lockup ───────────────────────────────────────────────────
   The round mark sits beside live type rather than a flattened image, so the
   wordmark stays crisp at every size and in both header states.
   ------------------------------------------------------------------- */

.header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.header__logo .logo-img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    flex: none;
}

.header.scrolled .header__logo .logo-img {
    height: 34px;
    width: 34px;
}

@media (max-width: 768px) {
    .header__logo .logo-img {
        height: 32px;
        width: 32px;
    }
}