/* Brand colours: Main Dark #2E3C3B, Main Accent #DAAE5D — everything
   else in this palette is derived from those two to stay complementary.
   Copper is a sparing secondary accent for the homepage spotlight/dividers. */
:root {
    --color-bg: #1D2524;
    --color-surface: #2E3C3B;
    --color-border: #435654;
    --color-text: #F0EAE0;
    --color-muted: #9FAFAC;
    --color-accent: #DAAE5D;
    --color-accent-hover: #E8C37D;
    --color-copper: #A8623A;
    --radius: 6px;
    --font: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Cinzel', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: relative;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.site-header__logo {
    display: flex;
    align-items: center;
    line-height: 0;
}

.site-header__logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.site-header__nav {
    display: flex;
    gap: 20px;
}

.site-header__nav a {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.site-header__nav a:hover { color: var(--color-text); }

.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 36px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.site-header__toggle span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
}
.site-header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
    .site-header__toggle { display: flex; }

    .site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 8px 20px 16px;
        z-index: 100;
    }
    .site-header__nav.is-open { display: flex; }
    .site-header__nav a,
    .site-header__logout {
        padding: 10px 4px;
        border-bottom: 1px solid var(--color-border);
    }
    .site-header__nav a:last-child { border-bottom: none; }
    .site-header__logout-form { display: block; }
    .site-header__logout { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-family: inherit; font-size: 0.95rem; cursor: pointer; padding: 10px 4px; }
}

.hero {
    padding: 64px 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.hero h1 {
    font-size: 2.25rem;
    margin: 0 0 12px;
}

.hero p {
    color: var(--color-muted);
    margin: 0 0 24px;
}

.button {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-weight: 600;
}

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

section.container { padding: 48px 20px; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

/*
    Homepage "Featured" grid only: columns have a capped width and the
    grid centers as a group (auto-fit + justify-content, rather than
    auto-fill + stretching to 1fr) so however many products end up
    marked featured, they read as a deliberately curated, balanced
    row rather than pinning left with an empty gap when the count
    doesn't exactly fill a row — which is what "auto-fill + 1fr" does,
    and is what caused this in the first place with 3 cards.
*/
.product-grid--featured {
    grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
    justify-content: center;
}

.product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.product-card__link { color: inherit; display: block; }
.product-card__link:hover { color: inherit; }

.product-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--color-bg);
}

.product-card__image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image-placeholder-mark {
    width: 40%;
    max-width: 80px;
    height: auto;
    opacity: 0.35;
}

.product-card__body { padding: 18px; }
.product-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.product-card__brand { color: var(--color-muted); font-size: 0.85rem; margin: 0 0 8px; }
.product-card__price { font-weight: 700; margin: 0 0 4px; }
.product-card__stock { color: var(--color-muted); font-size: 0.85rem; margin: 0 0 8px; }
.product-card__cert { color: var(--color-accent); font-size: 0.8rem; margin: 0 0 8px; }
.product-card__cta { color: var(--color-accent); font-size: 0.9rem; font-weight: 600; }
.out-of-stock { color: #E3ADAD; }

/*
    Phone-width screens specifically (not the wider end of the mobile
    range) — auto-fill's 220px minimum only naturally collapses to a
    single column once the available width drops below roughly 460px,
    which on a real phone (with the sidebar already stacked above by
    the shop-layout breakpoint) is exactly what was happening: one
    huge card per row. Forcing 2 columns here, with tighter card
    padding/type to suit the narrower width, keeps browsing usable
    without needing much scrolling. Tablet-range widths above this
    breakpoint keep auto-fill's own 2-3 column behavior untouched.
*/
@media (max-width: 600px) {
    .product-grid,
    .product-grid--featured {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .product-card__body { padding: 10px 12px 12px; }
    .product-card h3 { font-size: 0.88rem; line-height: 1.3; margin-bottom: 4px; }
    .product-card__brand { font-size: 0.72rem; margin-bottom: 4px; }
    .product-card__price { font-size: 0.92rem; }
    .product-card__stock, .product-card__cert { font-size: 0.7rem; margin-bottom: 4px; }
    .product-card__cta { font-size: 0.78rem; }
}

/* --- Shop layout (listing + category pages) --- */
.shop-page { padding-top: 40px; }
.shop-page h1 { margin-bottom: 4px; }
.shop-page__description { color: var(--color-muted); margin-bottom: 24px; }

.breadcrumb {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-text); }

.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    margin-top: 24px;
}

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

.shop-filters {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shop-filters-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
}
.shop-filters-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
.shop-filters-toggle__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-left: auto;
}

@media (max-width: 720px) {
    .shop-filters-toggle { display: flex; }
    .shop-filters { display: none; }
    .shop-filters.is-open { display: flex; }
}

.shop-filters__row { display: flex; flex-direction: column; gap: 6px; }
.shop-filters__row label { font-size: 0.8rem; color: var(--color-muted); }
.shop-filters__row input,
.shop-filters__row select {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.9rem;
}

.shop-filters .button {
    text-align: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}

.shop-filters__clear {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-muted);
}

.pagination__prev, .pagination__next { font-weight: 600; }

/* --- Product detail page --- */
.product-page { padding-top: 40px; padding-bottom: 60px; }

.product-page__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 8px;
}

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

.product-page__image img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.product-page__image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
}

.product-page__image-placeholder-mark {
    width: 30%;
    max-width: 140px;
    height: auto;
    opacity: 0.35;
}

.product-page__details h1 { margin: 0 0 4px; }
.product-page__brand { color: var(--color-muted); margin: 0 0 16px; }
.product-page__price { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.product-page__stock { margin: 0 0 16px; }

.product-page__cert-notice {
    background: #3D2F1A;
    color: #E8C88F;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.product-page__description { margin-bottom: 20px; color: var(--color-text); }

.product-page__tags { display: flex; gap: 8px; margin-bottom: 16px; }
.tag {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.product-page__sku { color: var(--color-muted); font-size: 0.85rem; margin-bottom: 20px; }

.button--disabled {
    background: var(--color-border);
    color: var(--color-muted);
    cursor: not-allowed;
}

.product-page__related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.product-page__related h2 { margin-bottom: 16px; }

.error-page { padding: 80px 20px; text-align: center; }
.error-page h1 { margin-bottom: 12px; }

/* --- Flash messages --- */
.flash {
    padding: 12px 20px;
    margin: 0;
    text-align: center;
}

.flash-success { background: #24402E; color: #A8D9BE; }
.flash-error { background: #402424; color: #E3ADAD; }

/* --- Footer --- */
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    margin-top: 48px;
    padding: 32px 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: fit-content(420px) fit-content(480px);
    justify-content: center;
    gap: 72px;
    align-items: start;
}

.site-footer__left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.site-footer__logo {
    height: 64px;
    width: auto;
    display: block;
    align-self: flex-start;
    margin-bottom: 4px;
}

.site-footer__block p { margin: 4px 0 0; }

.site-footer__hours {
    border-collapse: collapse;
    margin-top: 4px;
}
.site-footer__hours td { padding: 2px 20px 2px 0; text-align: left; }
.site-footer__hours td:first-child { color: var(--color-muted); }
.site-footer__hours td:last-child { color: var(--color-text); font-family: var(--font-mono); font-size: 0.85rem; }

.site-footer__rfd {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    margin: 0;
}

.site-footer__right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer__legal a { margin-right: 16px; }
.site-footer__note { max-width: 480px; }

@media (max-width: 720px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .site-footer__logo { height: 52px; }
}

/* --- Basket count badge --- */
.site-header__basket-count {
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- Cart / checkout / confirmation shared table --- */
.cart-page, .checkout-page, .confirmation-page { padding-top: 40px; padding-bottom: 60px; }

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.cart-table th, .cart-table td {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--color-border);
}

.cart-table th { color: var(--color-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

.cart-table--compact th, .cart-table--compact td { padding: 8px 0; }
.cart-table--compact tfoot td { border-top: 1px solid var(--color-border); border-bottom: none; padding-top: 12px; }

.cart-table__qty {
    width: 64px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: 6px 8px;
}

.cart-table__cert { color: var(--color-accent); font-size: 0.78rem; margin-top: 2px; }

.cart-table__remove {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    border-radius: var(--radius);
    padding: 6px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}

.cart-table__remove:hover { color: #E3ADAD; border-color: #E3ADAD; }

.button--secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    margin-top: 16px;
}

.cart-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.cart-summary__total { font-size: 1.15rem; margin-right: auto; }
.cart-summary__continue { color: var(--color-muted); }

.cart-page__note {
    margin-top: 24px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* --- Checkout --- */
.checkout-page__intro { color: var(--color-muted); max-width: 640px; margin-bottom: 24px; }

.checkout-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
}

@media (max-width: 780px) {
    .checkout-layout { grid-template-columns: 1fr; }
}

.checkout-layout__summary h2 { font-size: 1.1rem; margin-bottom: 4px; }

.checkout-page__cert-notice {
    background: #3D2F1A;
    color: #E8C88F;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.checkout-form { display: flex; flex-direction: column; gap: 16px; }

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 0.85rem; color: var(--color-muted); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95rem;
}

.form-row textarea { resize: vertical; }

.form-row--checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.form-row--checkbox label { display: flex; align-items: flex-start; gap: 8px; color: var(--color-text); font-size: 0.88rem; }
.form-row--checkbox input[type="checkbox"] { margin-top: 3px; }
.form-hint { margin: -4px 0 16px; font-size: 0.82rem; color: var(--color-muted); }

.category-checkbox-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.category-checkbox-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    color: var(--color-text);
    font-size: 0.88rem;
    cursor: pointer;
}

.checkout-form .button { align-self: flex-start; border: none; cursor: pointer; font-family: inherit; font-size: 1rem; margin-top: 8px; }

/* --- Confirmation --- */
.confirmation-page__reference { font-size: 1.1rem; margin-bottom: 20px; }
.confirmation-page__hold { color: var(--color-muted); margin: 20px 0; }

/* --- Header login/logout --- */
.site-header__logout-form { display: inline; }
.site-header__logout {
    background: none;
    border: none;
    color: var(--color-muted);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
}
.site-header__logout:hover { color: var(--color-text); }

/* --- Account pages --- */
.account-page { padding-top: 40px; padding-bottom: 60px; max-width: 640px; margin: 0 auto; }
.account-page__intro { color: var(--color-muted); margin-bottom: 24px; }
.account-page__switch { margin-top: 16px; color: var(--color-muted); font-size: 0.9rem; }

.account-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.account-form h2 { margin: 0 0 4px; font-size: 1.05rem; }
.account-form .button { align-self: flex-start; border: none; cursor: pointer; font-family: inherit; font-size: 1rem; }

.form-row__static {
    margin: 0;
    padding: 10px 0;
    color: var(--color-text);
}

.cart-page__login-hint, .checkout-page__login-hint {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* --- Account dashboard --- */
.account-page:has(.account-dashboard) { max-width: 900px; }

.account-dashboard {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    margin-top: 24px;
}

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

.account-dashboard__profile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    align-self: start;
}

.account-dashboard__profile h2 { margin: 0 0 4px; font-size: 1.1rem; }
.account-dashboard__profile p { color: var(--color-muted); margin: 0 0 16px; }
.account-dashboard__profile .button { display: inline-block; text-decoration: none; }

.account-dashboard__reservations h2 { font-size: 1.1rem; margin-bottom: 4px; }

/* --- Account profile edit (two forms side by side) --- */
.account-page:has(.account-profile-layout) { max-width: 900px; }

.account-profile-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

/* --- Status badges --- */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-badge--pending { background: #3D2F1A; color: #E8C88F; }
.status-badge--ready { background: #24402E; color: #A8D9BE; }
.status-badge--collected { background: #1F3140; color: #A8C9E3; }
.status-badge--cancelled, .status-badge--expired, .status-badge--failed { background: #402424; color: #E3ADAD; }
.status-badge--draft { background: #33393a; color: #b7c0c1; }
.status-badge--queued, .status-badge--sending { background: #3D2F1A; color: #E8C88F; }
.status-badge--sent { background: #24402E; color: #A8D9BE; }

/* =========================================================================
   HOMEPAGE — hero carousel, angled dividers, spotlight, brand marquee
   ========================================================================= */

/* --- Shared typographic utilities --- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 14px;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 32px;
}

.text-link {
    color: var(--color-accent);
    font-size: 0.92rem;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.text-link:hover { border-color: var(--color-accent); }

/* --- Scroll reveal --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Hero carousel --- */
.hero {
    position: relative;
    height: min(88vh, 780px);
    min-height: 520px;
    overflow: hidden;
    background: var(--color-bg);
}

.hero__track { position: relative; width: 100%; height: 100%; }

.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    transition: clip-path 1100ms cubic-bezier(0.83, 0, 0.17, 1);
    z-index: 1;
}

.hero__slide.is-active {
    clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
    z-index: 2;
}

.hero__slide-bg {
    position: absolute;
    inset: -5%;
    background-color: var(--color-bg);
    /*
        The per-slide photo (set inline as --hero-bg-image, see
        views/shop/home.php) is blended with a solid tint in the same
        background-image stack, rather than using the `opacity` CSS
        property — opacity would also fade the diagonal wedge below,
        since it's a ::before pseudo-element (a child) of this layer.
        This keeps the photo subtle/atmospheric while the wedge on top
        stays fully crisp. Slides with no photo just show the tint alone.
    */
    background-image: linear-gradient(rgba(29, 37, 36, 0.78), rgba(29, 37, 36, 0.78)), var(--hero-bg-image, none);
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 7000ms linear;
}
.hero__slide.is-active .hero__slide-bg { transform: scale(1.08); }

/*
    The wedge is a "window" cut into the tinted background, showing the
    exact same photo at full strength with no colour/tint at all — not a
    second copy of the image, but the SAME background-image layer, sized
    and positioned identically to .hero__slide-bg (inset: 0, same
    background-size/position) and then clipped down to just the wedge
    shape. Because both layers render the photo at identical scale/
    position before clipping, the wedge lines up as a seamless
    continuation of the same picture rather than a visibly separate crop.
*/
.hero__slide-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg-image, none);
    background-size: cover;
    background-position: center;
    background-color: var(--color-surface);
    clip-path: polygon(73.7% 0%, 114% 0%, 114% 100%, 58% 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding: 40px 44px 40px 0;
}

/*
    Text always sits over the same uniformly dark-tinted photo on the
    left side of the slide — never over the wedge — regardless of which
    variant class the slide has, so it always needs the same scrim and
    the same light text colour. (An earlier version varied both per
    variant, tuned for contrast against the wedge's old colour fill;
    since text was never actually displayed on top of the wedge, that
    tuning didn't match what was really behind the text and produced
    exactly the unreadable result reported on the copper slide.)
*/
.hero__content::before {
    content: '';
    position: absolute;
    top: -40px; bottom: -40px; left: -220px; right: -40px;
    background: linear-gradient(90deg, var(--color-bg) 30%, transparent 100%);
    z-index: -1;
    opacity: 0.55;
}

@keyframes hero-ring-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

.hero__eyebrow { color: var(--color-accent); }

.hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(2.2rem, 5.4vw, 4rem);
    line-height: 1.08;
    margin: 0 0 20px;
}

.hero__lede {
    font-size: 1.05rem;
    color: var(--color-muted);
    max-width: 480px;
    margin: 0 0 28px;
}

.hero__cta { border: none; cursor: pointer; font-family: inherit; font-size: 1rem; }

.hero__controls {
    position: absolute;
    left: 0; right: 0; bottom: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.hero__arrow {
    background: rgba(240, 234, 224, 0.1);
    border: 1px solid rgba(240, 234, 224, 0.3);
    color: var(--color-text);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease;
}
.hero__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

.hero__dots { display: flex; gap: 10px; }

.hero__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(240, 234, 224, 0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease, transform 200ms ease;
}
.hero__dot.is-active { background: var(--color-accent); transform: scale(1.25); }

@media (max-width: 720px) {
    .hero { height: 640px; }
    .hero__lede { display: none; }
}

/* --- Angled milled-edge dividers (the page's signature device) ---
   Two stacked, identically-clipped diagonal shapes: a full accent-colour
   fill underneath, then the surrounding section colour on top with a
   slightly tighter clip — the sliver of difference between the two reads
   as a crisp gold hairline exactly on the diagonal cut, with no skew/
   transform math to get wrong. */
.angle-divider {
    position: relative;
    height: 72px;
    background: var(--color-bg);
    overflow: hidden;
}

.angle-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% 38%, 0 100%);
}

.angle-divider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-surface);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 97%);
}

.angle-divider--reverse::before { clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%); }
.angle-divider--reverse::after {
    background: var(--color-surface);
    clip-path: polygon(0 65%, 100% 3%, 100% 100%, 0 100%);
}

@media (max-width: 720px) {
    .angle-divider { height: 44px; }
}

/* --- Featured section --- */
.home-section { padding: 72px 20px; max-width: 1400px; }
.home-section__more { margin-top: 28px; }

/* --- Spotlight --- */
.spotlight {
    position: relative;
    background: var(--color-surface);
    overflow: hidden;
    padding: 88px 20px;
}

.spotlight__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(70vw, 700px);
    height: min(70vw, 700px);
    transform: translate(-50%, -50%);
    color: var(--color-accent);
    opacity: 0.1;
    pointer-events: none;
    animation: hero-ring-spin 140s linear infinite;
}
.spotlight__ring-svg { width: 100%; height: 100%; }

.spotlight__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

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

.spotlight__media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 90% 100%, 0 100%);
}

.spotlight__media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.spotlight__media-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spotlight__media-placeholder img { width: 30%; height: auto; opacity: 0.3; }

.spotlight__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    margin: 0 0 16px;
}

.spotlight__desc { color: var(--color-muted); margin: 0 0 20px; max-width: 460px; }
.spotlight__price { font-family: var(--font-mono); font-size: 1.5rem; color: var(--color-accent); margin: 0 0 6px; }
.spotlight__stock { color: var(--color-muted); font-size: 0.88rem; margin: 0 0 28px; }
.spotlight .button { border: none; cursor: pointer; font-family: inherit; font-size: 1rem; }

/* --- Brand marquee --- */
.brand-strip { padding: 64px 0 76px; overflow: hidden; }
.brand-strip .eyebrow { text-align: center; }

.brand-strip__viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brand-strip__track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: brand-scroll 32s linear infinite;
}
.brand-strip__viewport:hover .brand-strip__track { animation-play-state: paused; }

@keyframes brand-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.brand-plate {
    flex: 0 0 auto;
    width: 180px;
    height: 90px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    transition: border-color 250ms ease, box-shadow 250ms ease;
}
.brand-plate:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }

.brand-plate img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.75);
    transition: filter 250ms ease;
}
.brand-plate:hover img { filter: grayscale(0) opacity(1); }

.brand-plate__name {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: #3A4442;
}

@media (prefers-reduced-motion: reduce) {
    .spotlight__ring, .brand-strip__track { animation: none; }
    .hero__slide-bg { transition: none; }
}

/* =========================================================================
   STATIC PAGES — About, Storage, Terms, Privacy, Cookies, Contact
   ========================================================================= */
.static-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 20px 80px;
}

.static-page h1 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    margin: 0 0 8px;
}

.static-page__intro { color: var(--color-muted); margin: 0 0 40px; font-size: 1.02rem; }

.static-page h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.15rem;
    margin: 40px 0 14px;
    color: var(--color-accent);
}

.static-page h2:first-of-type { margin-top: 0; }

.static-page p { margin: 0 0 16px; }
.static-page ul, .static-page ol { margin: 0 0 16px; padding-left: 22px; }
.static-page li { margin-bottom: 8px; }

.static-page__updated {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    margin-bottom: 40px;
}

.static-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/*
    .static-page is capped at 760px, which is right for a single column
    of prose but leaves two columns cramped. This lets a page that uses
    the grid opt into a wider measure without affecting the text-only
    pages (about, terms, privacy) that rely on the narrower default.
*/
.static-page--wide { max-width: 1100px; }

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

.static-page__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
}

.static-page__panel h3 {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 12px;
}

.static-page__panel p { margin: 0 0 8px; color: var(--color-muted); font-size: 0.92rem; }

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form textarea { resize: vertical; }
.contact-form .button { align-self: flex-start; border: none; cursor: pointer; font-family: inherit; font-size: 1rem; }

/* --- Honeypot (spam decoy field, invisible to real visitors) --- */
.honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Contact page info grid (address/hours/email/phone with icons) --- */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

.contact-info-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.contact-info-item__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--color-accent);
    margin-top: 2px;
}

.contact-info-item p { margin: 4px 0 0; }
.contact-info-item .eyebrow { margin-bottom: 0; }

.contact-info-item__hours { border-collapse: collapse; margin-top: 4px; }
.contact-info-item__hours td { padding: 1px 18px 1px 0; text-align: left; }
.contact-info-item__hours td:first-child { color: var(--color-muted); }
.contact-info-item__hours td:last-child { font-family: var(--font-mono); font-size: 0.85rem; }

@media (max-width: 620px) {
    .contact-info-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================================
   PRODUCT IMAGE ZOOM — hover-to-magnify + click-to-open lightbox
   ========================================================================= */
.zoom-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    cursor: zoom-in;
}
.zoom-image img { width: 100%; display: block; }

.zoom-image__lens {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 200%;
    opacity: 0;
    pointer-events: none;
}
.zoom-image--animated .zoom-image__lens { transition: opacity 150ms ease; }

@media (hover: hover) {
    .zoom-image:hover .zoom-image__lens { opacity: 1; }
    .zoom-image:hover img { opacity: 0; }
}

.zoom-image__hint {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(29, 37, 36, 0.72);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.zoom-image__hint svg { width: 18px; height: 18px; }

@media (hover: hover) {
    .zoom-image:hover .zoom-image__hint { opacity: 0; }
}

/* --- Lightbox --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 14, 13, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.lightbox.is-open { display: flex; }

.lightbox__stage { max-width: 100%; max-height: 100%; }
.lightbox__stage img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 64px);
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
}

.lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(240, 234, 224, 0.3);
    background: rgba(240, 234, 224, 0.08);
    color: var(--color-text);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}
.lightbox__close:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

@media (max-width: 720px) {
    /* Hover-zoom has no equivalent on touch — the hint icon and
       click-to-lightbox are the whole interaction there. */
    .zoom-image { cursor: default; }
    .lightbox { padding: 16px; }
}