/* ==========================================================================
   Mythforge Soaps — dark fantasy theme

   The palette, typography, and ornament here are derived from the product
   label art in /images: warm near-black backgrounds, gold filigree frames,
   faceted gems, Trajan-style capitals, and parchment scroll callouts.

   Contents
     1.  Fonts
     2.  Tokens
     3.  Reset + base type
     4.  Ornament utilities
     5.  Primitives (buttons, inputs, forms)
     6.  Layout chrome (header, footer, container)
     7.  Storefront (hero, grid, cards, detail)
     8.  Cart
     9.  Checkout / login / error
     10. Admin (legibility only — the workshop, not the shopfront)
     11. Accessibility (focus, reduced motion, forced colors)
   ========================================================================== */


/* ---- 1. Fonts ---------------------------------------------------------- */
/* Self-hosted latin subsets — no third-party runtime dependency. See
   fonts/README.txt for provenance and licensing (both OFL 1.1). */

@font-face {
    font-family: "Cinzel";
    src: url("/fonts/cinzel-latin-var.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond";
    src: url("/fonts/eb-garamond-latin-var.woff2") format("woff2-variations");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond";
    src: url("/fonts/eb-garamond-latin-var-italic.woff2") format("woff2-variations");
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
}


/* ---- 2. Tokens --------------------------------------------------------- */

:root {
    /* Renders native scrollbars, number spinners, and select chrome dark.
       Without this they punch light rectangles into the page. */
    color-scheme: dark;

    /* Surfaces — warm near-black, not pure black. The label art backgrounds
       are soot, charred oak, and wet forest floor; a red/yellow bias keeps
       the gold sitting in the same light rather than pasted on top. */
    --bg:        #0b0908;
    --bg-deep:   #060504;
    --surface:   #151110;
    --surface-2: #1f1a16;
    --surface-3: #241d17;

    /* Gold — a four-stop ramp. A single gold cannot fake beveled metal;
       you need a specular highlight, a body, a shade, and a hairline. */
    --gold:        #d9ae58;
    --gold-bright: #f2dca0;
    --gold-mid:    #c9962f;
    --gold-deep:   #8a6a22;
    --gold-ink:    #120e0a;

    /* Gems — dividers, badges, per-soap card accents */
    --gem-emerald:  #4fb477;
    --gem-ruby:     #e2717a;
    --gem-amethyst: #b79ce8;
    --gem-sapphire: #7fb3e8;

    /* Text — parchment on dark */
    --ink:        #ede3d2;
    --ink-strong: #f5ede0;
    --muted:      #b3a492;
    --muted-2:    #8c7f6d;  /* 4.80:1 — captions and disabled only */

    /* Parchment — the only light surface, echoing the scroll callouts */
    --parchment:     #e8d9b5;
    --parchment-ink: #3a2a17;

    --line:        #33291f;
    --line-strong: #4a3b2c;
    --line-gold:   rgba(217, 174, 88, 0.28);

    --danger:     #e2717a;
    --danger-bg:  rgba(226, 113, 122, 0.12);
    --success:    #4fb477;
    --success-bg: rgba(79, 180, 119, 0.13);

    /* Type. EB Garamond runs ~8% small against a system sans at the same
       px, hence the 1.0625rem base. */
    --font-display: "Cinzel", "Trajan Pro", Optima, Georgia, serif;
    --font-body:    "EB Garamond", Georgia, Cambria, "Times New Roman", serif;
    --font-ui:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.89rem);
    --step-0:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
    --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.4rem);
    --step-2:  clamp(1.55rem, 1.36rem + 0.9vw, 1.95rem);
    --step-3:  clamp(1.95rem, 1.55rem + 1.9vw, 2.75rem);

    --tracking-caps: 0.16em;
    --tracking-wide: 0.06em;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* Tight radii on purpose — the filigree in the art is squared plaques
       with ornamental corners. Heavy rounding reads SaaS dashboard. */
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, 0.85);
    --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
    --glow-gold: 0 0 0 1px rgba(217, 174, 88, 0.22), 0 0 24px -6px rgba(217, 174, 88, 0.35);
    --glow-gold-strong: 0 0 0 1px rgba(217, 174, 88, 0.45), 0 0 34px -6px rgba(217, 174, 88, 0.55);

    --gilt: linear-gradient(180deg,
        #f6e3ae 0%, #e3c070 22%, #d9ae58 42%,
        #a8802f 56%, #ebd79b 74%, #c9962f 100%);
    --brass-rule: linear-gradient(90deg,
        transparent, #8a6a22 18%, #d9ae58 50%, #8a6a22 82%, transparent);

    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --dur: 180ms;
    --container: 1120px;
    --container-narrow: 620px;
}


/* ---- 3. Reset + base type ---------------------------------------------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    /* Forge-ember warmth bleeding in from top and bottom so the page never
       reads as a flat black rectangle. */
    background-image:
        radial-gradient(90ch 50vh at 50% -10vh, rgba(217, 174, 88, 0.07), transparent 70%),
        radial-gradient(70ch 40vh at 50% 110vh, rgba(138, 106, 34, 0.06), transparent 70%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: var(--gold); }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--ink-strong);
    text-wrap: balance;
}

h1 { font-size: var(--step-3); margin: 0 0 var(--space-4); }
h2 { font-size: var(--step-2); margin: 0 0 var(--space-3); }

/* The "HANDCRAFTED · SHEA BUTTER SOAP · VETERAN OWNED" line from the art. */
.eyebrow {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--gold);
}

.muted { color: var(--muted); }
.empty { color: var(--muted); }


/* ---- 4. Ornament utilities --------------------------------------------- */

/* Beveled gold text. The fallback is solid --gold (9.06:1) — only go
   transparent where background-clip actually works, or the text vanishes. */
.gilt {
    color: var(--gold);
    background-image: var(--gilt);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 12px rgba(217, 174, 88, 0.22));
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .gilt {
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* A faceted gem, drawn rather than typed. The ✦ / ◆ glyphs in the label art
   are not in the latin font subset, so a content: string would fall back to
   whatever symbol font the OS happens to have. */
.gem {
    --gem: var(--gold);
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    flex: none;
    rotate: 45deg;
    border-radius: 1px;
    background: linear-gradient(135deg,
        var(--gold-bright) 0%,
        var(--gem) 45%,
        color-mix(in srgb, var(--gem) 45%, #000) 100%);
    box-shadow: 0 0 8px -1px color-mix(in srgb, var(--gem) 65%, transparent);
}

.gem.emerald  { --gem: var(--gem-emerald); }
.gem.ruby     { --gem: var(--gem-ruby); }
.gem.amethyst { --gem: var(--gem-amethyst); }
.gem.sapphire { --gem: var(--gem-sapphire); }

.ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
}

.ornament::before,
.ornament::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brass-rule);
}

/* Four corner brackets from eight gradients on one pseudo-element. */
.gilt-frame {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
}

.gilt-frame::before {
    --corner: 18px;
    --thick: 1px;
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    opacity: 0.75;
    background:
        linear-gradient(var(--gold-deep) 0 0) 0    0    / var(--corner) var(--thick) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 0    0    / var(--thick) var(--corner) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 100% 0    / var(--corner) var(--thick) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 100% 0    / var(--thick) var(--corner) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 0    100% / var(--corner) var(--thick) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 0    100% / var(--thick) var(--corner) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 100% 100% / var(--corner) var(--thick) no-repeat,
        linear-gradient(var(--gold-deep) 0 0) 100% 100% / var(--thick) var(--corner) no-repeat;
}

/* Parchment scroll callout — the flavour-copy plaque from the label art. */
.scroll {
    position: relative;
    max-width: 58ch;
    margin: 0 auto;
    padding: var(--space-6) var(--space-7);
    text-align: center;
    color: var(--parchment-ink);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
        linear-gradient(180deg, #f0e3c4, var(--parchment) 45%, #d8c49b 100%);
    border: 1px solid #a98b57;
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 40px rgba(122, 92, 44, 0.28), var(--shadow-2);
}

/* Rolled ends, drawn as two brass bars. */
.scroll::before,
.scroll::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 12px;
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, #c9962f, #6e5318 40%, #c9962f);
    box-shadow: var(--shadow-1);
}

.scroll::before { left: -6px; }
.scroll::after  { right: -6px; }

.scroll p { margin: 0 0 var(--space-3); }
.scroll p:last-child { margin-bottom: 0; }

.scroll .tagline {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: #6e2020;
}

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


/* ---- 5. Primitives ----------------------------------------------------- */
/* Shared by storefront, cart, checkout, and admin. */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold-ink);
    /* The vertical gradient plus a white inner top edge is the whole
       stamped-brass trick. */
    background: linear-gradient(180deg, #f0d08c, var(--gold) 45%, var(--gold-mid));
    border: 1px solid var(--gold-deep);
    border-radius: var(--r-md);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--shadow-1);
    transition: filter var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.button:hover {
    filter: brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--glow-gold-strong);
}

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

.button[disabled] {
    filter: grayscale(0.7) brightness(0.7);
    cursor: not-allowed;
    box-shadow: none;
}

.button-lg { padding: var(--space-4) var(--space-7); font-size: var(--step-0); }

.button.secondary {
    color: var(--gold);
    background: transparent;
    border-color: var(--line-gold);
    box-shadow: none;
}

.button.secondary:hover {
    background: rgba(217, 174, 88, 0.1);
    box-shadow: var(--glow-gold);
    filter: none;
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong);
    cursor: pointer;
}

.link-button:hover { color: var(--danger); text-decoration-color: currentColor; }

.inline-form { display: inline; }

input[type="text"], input[type="url"], input[type="number"],
input[type="email"], input[type="password"], input[type="search"],
textarea, select {
    font: inherit;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: var(--space-3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:hover, textarea:hover, select:hover { border-color: var(--line-gold); }

input:focus, textarea:focus, select:focus {
    border-color: var(--gold);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(217, 174, 88, 0.2);
}

::placeholder { color: var(--muted-2); opacity: 1; }

input[type="checkbox"] {
    accent-color: var(--gold);
    width: 1.05rem;
    height: 1.05rem;
}

.field-error { color: var(--danger); font-size: var(--step--1); margin: 0; }


/* ---- 6. Layout chrome -------------------------------------------------- */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

.container.narrow { max-width: var(--container-narrow); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(180deg, var(--surface-3), rgba(11, 9, 8, 0.92));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line-gold), var(--shadow-2);
}

/* The wordmark is a type lockup, not an image — the crest in the label art
   is baked into each PNG with its own background, so there is no logo file
   to use. This scales, indexes, and drops out for a real mark later. */
.brand { display: grid; gap: 2px; line-height: 1; text-decoration: none; }

.brand-mark {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted);
}

.brand-sub .gem { --gem: var(--gold-deep); width: 5px; height: 5px; }

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid var(--line-gold);
    border-radius: var(--r-pill);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cart-link:hover { background: rgba(217, 174, 88, 0.1); box-shadow: var(--glow-gold); }

.cart-count {
    min-width: 1.4em;
    padding: 0 0.35em;
    text-align: center;
    background: var(--gold);
    color: var(--gold-ink);
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 0.8em;
}

.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-7) var(--space-5) var(--space-6);
    text-align: center;
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
}

.trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0;
}

.trust-line .gem { --gem: var(--gold-deep); }

.footer-tagline {
    margin: var(--space-4) 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.footer-legal { color: var(--muted-2); font-size: var(--step--1); margin: 0; }


/* ---- 7. Storefront ----------------------------------------------------- */

/* The banner carries its own beveled title, subtitle, and trust line, so no
   HTML text is laid over it. It is cropped to the masthead band: the lower
   two thirds list eight scents, five of which are not products yet. */
.hero {
    position: relative;
    margin-bottom: var(--space-6);
    border: 1px solid var(--line-gold);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-3), var(--glow-gold);
}

.hero-banner {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    object-position: 50% 0%;
}

/* Vignette so the rectangle dissolves into the page instead of sitting on it,
   and so the tagline has a dark floor to sit against. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 90% at 50% 45%, transparent 52%, rgba(6, 5, 4, 0.6) 100%),
        linear-gradient(180deg, transparent 55%, rgba(6, 5, 4, 0.9) 100%);
}

.hero-tagline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-4);
    z-index: 1;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.section-title {
    font-size: var(--step-2);
    text-align: center;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin: 0 0 var(--space-6);
}

.product-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Wider than a typical card grid: these are landscape graphics whose
       baked-in titles turn to mush much below 320px. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--space-5);
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--line-gold);
    box-shadow: var(--shadow-3), var(--glow-gold);
}

.product-link { display: block; text-decoration: none; color: inherit; }

/* Whole-card click target without nesting the price inside the anchor. */
.product-link::after { content: ""; position: absolute; inset: 0; }

/* The mat behind every product image. Fixed ratio so cards stay the same
   height whether or not a product has an image. */
.thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bg-deep);
    background-image: radial-gradient(70% 70% at 50% 50%, rgba(217, 174, 88, 0.05), transparent 70%);
}

/* `contain`, not `cover`: each graphic is a complete framed composition and
   a crop slices the ornamental border and corner gems. The ~3% letterbox on
   the 5:4 sources is invisible against the mat. */
.product-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 320ms var(--ease);
}

.product-card:hover .product-thumb { transform: scale(1.03); }

.thumb-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    color: var(--gold);
    background-image: var(--gilt);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.4;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .thumb-fallback { color: transparent; -webkit-text-fill-color: transparent; }
}

.product-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--line);
}

.product-name {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-strong);
    margin: 0;
}

.price {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--gold);
    margin: 0;
    white-space: nowrap;
}

/* An overlay chip on the card, so a sold-out product doesn't sit shorter
   than its neighbours and break the grid's rhythm. */
.sold-out {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--danger);
    background: rgba(11, 9, 8, 0.85);
    border: 1px solid rgba(226, 113, 122, 0.4);
    border-radius: var(--r-sm);
    backdrop-filter: blur(4px);
}

.sold-out.inline {
    position: static;
    display: inline-block;
    backdrop-filter: none;
}

.back-link {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.back-link:hover { color: var(--gold); }

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-7);
    margin-top: var(--space-5);
    align-items: start;
}

.product-detail-grid .thumb {
    border: 1px solid var(--line-gold);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3), var(--glow-gold);
}

.product-info h1 { font-size: var(--step-3); }

.product-info .price {
    display: block;
    font-size: var(--step-2);
    margin: var(--space-3) 0 var(--space-5);
}

.product-detail-grid .description {
    color: var(--ink);
    max-width: 62ch;
}

.detail-trust {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-5) 0 0;
}

.detail-trust .gem { --gem: var(--gold-deep); }

.add-to-cart-form { margin: var(--space-5) 0 0; }

@media (max-width: 760px) {
    .product-detail-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 700px) {
    .hero-banner { aspect-ratio: 2 / 1; object-position: 50% 2%; }
    .hero-tagline { font-size: var(--step-0); }
}


/* ---- 8. Cart ----------------------------------------------------------- */

.cart-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }

.cart-table th,
.cart-table td {
    text-align: left;
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.cart-table th {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-color: var(--line-gold);
}

.cart-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.cart-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: var(--ink);
}

.cart-item-name { font-family: var(--font-display); font-weight: 600; }
.cart-item:hover .cart-item-name { color: var(--gold); }

.cart-thumb {
    flex: none;
    width: 84px;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }

.cart-thumb .thumb-fallback { font-size: 1.5rem; }

.cart-qty-form { display: flex; align-items: center; gap: var(--space-3); }
.cart-qty-form input { width: 5rem; }

.cart-summary {
    margin-left: auto;
    max-width: 22rem;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.cart-summary p {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    margin: var(--space-2) 0;
    color: var(--muted);
}

.cart-summary .cart-total {
    color: var(--ink-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    border-top: 1px solid var(--line-gold);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
}

.cart-summary .cart-total span:last-child { color: var(--gold); }

.checkout-form { margin-top: var(--space-5); display: flex; justify-content: flex-end; }

/* Payment is off in v1: the button is disabled and a short note explains why.
   Stacks so the note sits under the button rather than beside it. */
.checkout-disabled { flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.checkout-note { margin: 0; color: var(--muted); font-size: var(--step--1); text-align: right; }

/* Stacked cards on small screens. The table had no mobile fallback at all —
   it simply overflowed. Labels come from each cell's data-label attribute,
   so this stays a plain server-rendered table with no JavaScript. */
@media (max-width: 680px) {
    .cart-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td { display: block; width: 100%; }

    .cart-table tr {
        margin-bottom: var(--space-4);
        padding: var(--space-3) var(--space-4);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
    }

    .cart-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-2) 0;
        border-bottom: 1px dashed var(--line);
    }

    .cart-table td:last-child { border-bottom: 0; }

    .cart-table td::before {
        content: attr(data-label);
        font-family: var(--font-display);
        font-size: var(--step--1);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--muted);
    }

    .cart-table td[data-label=""]::before { content: none; }
    .cart-table td[data-label="Soap"] { display: block; }
    .cart-table td[data-label="Soap"]::before { content: none; }

    .cart-summary { max-width: none; }
    .checkout-form .button { width: 100%; }
}


/* ---- 9. Checkout / login / error --------------------------------------- */

.success-page,
.error-page,
.login-page { text-align: center; padding-top: var(--space-8); }

.success-page .button,
.error-page .button { margin-top: var(--space-6); }

.error-page .status { font-size: var(--step-2); }
.error-page .lede { color: var(--muted); max-width: 46ch; margin: 0 auto; }

.login-card {
    max-width: 24rem;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    text-align: left;
}

.login-card .brand { justify-items: center; text-align: center; margin-bottom: var(--space-6); }
.login-card label { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.login-card .button { width: 100%; margin-top: var(--space-2); }

.notice {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--r-md);
    font-size: var(--step--1);
}

.notice.error { color: var(--danger); background: var(--danger-bg); border: 1px solid rgba(226, 113, 122, 0.35); }
.notice.info  { color: var(--success); background: var(--success-bg); border: 1px solid rgba(79, 180, 119, 0.35); }


/* ---- 10. Admin --------------------------------------------------------- */
/* The admin shares this stylesheet, so it inherits the palette whether or not
   it is themed. It is deliberately NOT ornamented: storefront is ceremony,
   admin is workshop. They share a palette and a header shape, nothing else.
   Dense data also gets --font-ui — Garamond's low x-height and old-style
   figures are lovely for product copy and bad for scanning a stock column. */

.admin-header { display: flex; align-items: center; justify-content: space-between; }

.admin-nav { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-ui); }
.admin-nav a { color: var(--muted); text-decoration: none; font-size: var(--step--1); }
.admin-nav a:hover { color: var(--gold); }
.admin-nav a.active { color: var(--gold); }

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.admin-table, .admin-form { font-family: var(--font-ui); }

.admin-table { width: 100%; border-collapse: collapse; }

.admin-table th,
.admin-table td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}

.admin-table th {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-color: var(--line-gold);
}

.admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.admin-table .muted { color: var(--muted-2); }
.admin-table .actions { display: flex; gap: var(--space-3); align-items: center; }
.admin-table a { color: var(--gold); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem var(--space-3);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
}

.badge.published { color: var(--success); background: var(--success-bg); border-color: rgba(79, 180, 119, 0.35); }
.badge.draft     { color: var(--gold); background: rgba(217, 174, 88, 0.1); border-color: var(--line-gold); }

/* Order badges. Payment state (pending/paid/cancelled) and the two flags the owner acts on:
   `fulfilled` is deliberately quiet — it is the normal end state, not an alert. */
.badge.paid      { color: var(--success); background: var(--success-bg); border-color: rgba(79, 180, 119, 0.35); }
.badge.pending   { color: var(--gold); background: rgba(217, 174, 88, 0.1); border-color: var(--line-gold); }
.badge.cancelled { color: var(--muted-2); background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.badge.fulfilled { color: var(--muted); background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); }
.badge.oversold  { color: var(--danger); background: var(--danger-bg); border-color: rgba(226, 113, 122, 0.35); }

/* Small enough to keep rows dense; the storefront is where the art gets room. */
.admin-thumb {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}
.admin-thumb.placeholder { background: var(--surface-2); }

.admin-table td.low-stock { color: var(--gold); }
.admin-table td.sold-out-cell { color: var(--danger); }

/* Server-rendered from the saved value, so it works with JavaScript off. */
.admin-image-preview {
    max-width: 160px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}

.admin-form { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-form label { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 600; }
.admin-form label.checkbox { flex-direction: row; align-items: center; gap: var(--space-2); font-weight: 400; }
.admin-form .hint { color: var(--muted-2); font-weight: 400; font-size: var(--step--1); }
.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

/* Orders. Line items get the width; address/customer/Stripe refs sit in a side rail. */
.order-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.order-panel {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.order-panel h2 {
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--muted);
    margin: 0 0 var(--space-3);
}

.order-panel p { margin: 0 0 var(--space-3); }
.order-panel p:last-child { margin-bottom: 0; }

/* Stripe ids are long and unbreakable; let them wrap rather than widen the rail. */
.order-ref { font-size: 0.72rem; word-break: break-all; }

.order-actions { display: flex; align-items: center; gap: var(--space-3); }

.order-totals { font-family: var(--font-ui); margin-left: auto; max-width: 22rem; margin-top: var(--space-4); }
.order-totals p { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-2); }
.order-totals .order-total { color: var(--gold); font-weight: 600; border-top: 1px solid var(--line); padding-top: var(--space-2); }

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    font-family: var(--font-ui);
}

@media (max-width: 720px) {
    .order-detail { grid-template-columns: 1fr; }
    .order-totals { max-width: none; }
}


/* ---- 11. Accessibility ------------------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* The whole-card ::after overlay swallows the link's own focus ring, so
   hoist it onto the card. */
.product-card:has(.product-link:focus-visible) {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}

.skip-link:focus {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    clip-path: none;
    background: var(--surface-2);
    border: 1px solid var(--gold);
    border-radius: var(--r-md);
    color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .product-card:hover { transform: none; }
    .product-card:hover .product-thumb { transform: none; }
}

/* Gradient-clipped text is invisible in forced-colors mode. */
@media (forced-colors: active) {
    .gilt,
    .thumb-fallback {
        background: none;
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
        filter: none;
    }

    .gem { background: CanvasText; box-shadow: none; }
}