/* ============================================================================
   Webshop — base stylesheet (the neutral default look + every component rule).

   Everything is driven by CSS custom properties on :root. ALWAYS reference the
   tokens (var(--name)); NEVER hardcode a hex value in a template or elsewhere.
   If a shade is missing, add a new --token here rather than inlining a color.

   ── SCOPE ─────────────────────────────────────────────────────────────────
   This file is the shared foundation for EVERY shop: the token defaults plus
   all the semantic component classes. A shop with no theme gets exactly this
   neutral look. A themed shop layers a small token-override file on top
   (web-assets/themes/<slug>.css, loaded after this one), which re-points the
   tokens the component rules below read — so no component rule ever changes per
   shop. Keep this file token-driven so that stays true.

   ── PALETTE PROVENANCE ────────────────────────────────────────────────────
   The neutral default's color VALUES are a placeholder borrowed from the Sif
   project's green-forest palette. Replace the VALUES if the default look is
   ever rebranded, but KEEP THE TOKEN NAMES so every template and each shop
   theme keep working unchanged. (havebien has its own full design in
   themes/havebien.css; this default is what future themeless shops fall back
   to.)
   ============================================================================ */

/* Fonts. Loaded from Google Fonts for now — matches the existing CDN-dependency
   posture. Self-hosting (bundling the woff2 into web-assets/) is a follow-up so
   production has no third-party font dependency. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Geist:wght@100..900&display=swap');

:root {
  /* ── Fonts ── */
  --font: 'Geist', -apple-system, 'Segoe UI', sans-serif; /* body/UI, variable 100–900 */
  --font-display: 'DM Serif Display', serif;              /* headings / marketing accents only */
  --font-size: 14px;

  /* ── Radii ── */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  /* ── Divergence tokens ──
     Design traits that differ between the neutral default and a themed shop
     (e.g. havebien is square-cornered with serif body copy). Kept as tokens so
     the storefront component rules below stay theme-agnostic: the default
     values here reproduce today's neutral look, and a theme file (see
     themes/havebien.css) flips them without touching any component rule. */
  --font-body: var(--font);          /* storefront body copy (themes may make this serif) */
  --font-eyebrow: var(--font);       /* small uppercase labels / micro-copy */
  --font-script: var(--font-display);/* decorative wordmark (themes may make this a script face) */
  --radius-card: var(--radius);      /* product cards, panels, inputs on the storefront */
  --section-pad: 2.5rem;             /* vertical rhythm of storefront sections */
  /* Warm surface tints — default to the neutral surface/bg so nothing changes
     until a theme overrides them (havebien uses layered creams). */
  --surface-alt: var(--bg);          /* alternating section background */
  --surface-warm: var(--surface);    /* inset panels (value rows, contact cards) */
  /* Footer — defaults reproduce today's neutral footer (muted text on page bg);
     a theme can give it its own bar color (havebien uses dark forest). */
  --footer-bg: transparent;
  --footer-text: var(--text-muted);
  --footer-fg: var(--text);
  --footer-border: transparent;

  /* ── Motion ── */
  --transition: 140ms ease;

  /* ── Color tokens (light mode). Placeholder green-forest palette — see header. ── */
  --bg: #f1f4ef;               /* page background */
  --surface: #ffffff;          /* cards, panels, dialogs */
  --sidebar-bg: #0e1f17;       /* sidebar & navbar */
  --sidebar-text: #aabfb1;
  --border: #dde4dc;           /* default borders */
  --border-strong: #c2cdc1;
  --border-focus: #1b5e3f;
  --text: #0d1a13;             /* primary text */
  --text-muted: #5a6e63;       /* secondary text */
  --accent: #1b5e3f;           /* primary brand green (buttons, links) */
  --accent-hover: #134a30;
  --accent-fg: #ffffff;        /* text on accent */
  --danger: #c0392b;           /* destructive */
  --danger-hover: #a63125;     /* (not in the guide's table; added per its rules) */
  --success: #2d8a5f;
  --warning: #d68910;
  --hover-row: rgba(27, 94, 63, .05);
  --shadow: 0 1px 3px rgba(13, 26, 19, .08), 0 1px 2px rgba(13, 26, 19, .04);

  /* ── Storefront top bar (site header) ──
     Intentionally FIXED across light/dark — the top bar is always the dark
     green it shows in the dark theme. These tokens are deliberately NOT
     overridden in the dark-theme blocks below, so the bar stays constant.
     Because the bar is always dark, its text must always be light — hence its
     own text tokens rather than the theme-varying --text. To recolor the bar,
     change --topbar-bg here (e.g. #0e1f17 for a more saturated forest green). */
  --topbar-bg: #131c17;        /* the dark-theme surface green */
  --topbar-text: #a0baad;      /* muted nav links (guide's --sidebar-text) */
  --topbar-fg: #ffffff;        /* brand + active/hover link */
  --topbar-border: #1d2a23;    /* subtle divider under the bar */
  --topbar-border-width: 1px;  /* header rule weight (themes may thicken it) */
  /* Brand wordmark font size. A script theme can size it up; the header's small
     padding-block keeps the bar height roughly constant as it grows. */
  --brand-size: 1.6rem;

  /* ── Trust bar (always the dark bar, gold accent) ── */
  --trust-bg: #131c17;         /* same dark green as the default top bar */
  --trust-text: #a0baad;       /* muted light labels */
  --trust-accent: #d68910;     /* amber dots + bottom rule */
}

/* Dark mode: applied automatically via prefers-color-scheme, AND via an explicit
   [data-theme="dark"] override so a future theme toggle can force it. Only the
   token VALUES change here — every rule below is theme-agnostic. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1410;
    --surface: #131c17;
    --sidebar-bg: #060d0a;
    --sidebar-text: #a0baad;
    --border: #1d2a23;
    --border-strong: #2d3d33;
    --border-focus: #4a9b75;
    --text: #e6ede8;
    --text-muted: #6a8073;
    --accent: #4a9b75;
    --accent-hover: #5cb088;
    --accent-fg: #ffffff;
    --danger: #e07b6f;
    --danger-hover: #eb9084;
    --success: #4abf8a;
    --warning: #e6b34c;
    --hover-row: rgba(74, 155, 117, .06);
    --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --bg: #0c1410;
  --surface: #131c17;
  --sidebar-bg: #060d0a;
  --sidebar-text: #a0baad;
  --border: #1d2a23;
  --border-strong: #2d3d33;
  --border-focus: #4a9b75;
  --text: #e6ede8;
  --text-muted: #6a8073;
  --accent: #4a9b75;
  --accent-hover: #5cb088;
  --accent-fg: #ffffff;
  --danger: #e07b6f;
  --danger-hover: #eb9084;
  --success: #4abf8a;
  --warning: #e6b34c;
  --hover-row: rgba(74, 155, 117, .06);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
}

/* ── Base / reset ──────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 .5em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

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

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* ── Layout helpers ────────────────────────────────────────────────────── */

.container {
  max-width: 64rem;      /* ~ max-w-5xl */
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container-wide { max-width: 72rem; }   /* ~ max-w-6xl (admin) */

.muted { color: var(--text-muted); }
.text-sm { font-size: .8125rem; }
.text-xs { font-size: .6875rem; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .875rem;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* Hover keeps the button's own text color. Needed because a .btn is often an
   <a> (e.g. "New product"), and the global `a:hover` rule would otherwise
   recolor its text to --accent-hover — which on .btn-primary matches the hover
   background, making the label vanish. Each variant restates its color below. */
.btn:hover { background: var(--hover-row); color: var(--text); }
.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Primary — brand accent. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }

/* Destructive. */
.btn-danger {
  background: var(--danger);
  color: var(--accent-fg);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--accent-fg); }

/* Outline / secondary — visible border, surface fill. */
.btn-outline {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover { background: var(--hover-row); color: var(--text); }

/* Bare text button (e.g. sign-out link). */
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
}
.btn-link:hover { color: var(--text); background: none; }

/* ── Cards / panels ────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-body { padding: 1.25rem; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

label { display: inline-block; font-weight: 500; margin-bottom: .25rem; }

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
select, textarea {
  width: 100%;
  padding: .5rem .625rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 20%, transparent);
}
textarea { min-height: 6rem; resize: vertical; }

.field { margin-bottom: 1rem; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.table tbody tr:hover { background: var(--hover-row); }

/* ── Badges / status ───────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--hover-row);
  color: var(--text-muted);
}
.badge-success { color: var(--success); }
.badge-danger  { color: var(--danger); }
.badge-warning { color: var(--warning); }

/* ── Info icon + tooltip ───────────────────────────────────────────────────
   A small info affordance next to a label. `.info-icon` renders the shared SVG
   at web-assets/icons/info.svg via a CSS mask (no icon font / CDN, no inline
   SVG markup in templates), tinted with the current text color so it follows
   the theme and the hover state. It carries a `data-tooltip="..."` attribute;
   on hover or keyboard focus the CSS renders that text as a dark bubble above
   the icon. Usage — nothing but the span, no children:
     <label>Legal name
       <span class="info-icon" tabindex="0" data-tooltip="The full, officially…"></span>
     </label>
   To add another icon, drop its SVG in web-assets/icons/ and make a sibling
   class that overrides the mask url. (Any element with [data-tooltip] gets the
   bubble; .info-icon just styles the trigger.) */
/* The masked SVG lives on ::before, NOT on the .info-icon element itself. A CSS
   mask clips the element AND its pseudo-elements, so masking .info-icon directly
   would also mask away the ::after tooltip bubble (it renders, then gets clipped
   to the icon shape — hover shows the `?` cursor but no text). Keeping the span
   itself unmasked lets its ::after tooltip paint normally. */
.info-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;   /* optical baseline alignment next to label text */
  cursor: help;
}
.info-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--text-muted);
  transition: background-color var(--transition);
  -webkit-mask: url(/assets/icons/info.svg) center / contain no-repeat;
  mask: url(/assets/icons/info.svg) center / contain no-repeat;
}
.info-icon:hover::before,
.info-icon:focus-visible::before { background-color: var(--accent); }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 20rem;
  padding: .5rem .625rem;
  border-radius: var(--radius);
  background: #131c17;            /* fixed dark bubble, like the top bar */
  color: #ffffff;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow);
  /* Hidden until hover/focus; not just visibility so it can't be interacted with. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; }

/* ── Alerts / flash messages ───────────────────────────────────────────── */

.alert {
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 1rem;
}
.alert-danger  { border-left-color: var(--danger);  }
.alert-success { border-left-color: var(--success); }
.alert-warning { border-left-color: var(--warning); }

/* ── Toasts (one-shot notifications carried across a redirect) ───────────── */

.toast-stack {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 24rem;
}
.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--toast-accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--toast-accent) 12%, var(--surface));
  box-shadow: var(--shadow);
  animation: toast-in .2s ease-out, toast-flash .7s ease-in-out 3;
}
.toast-success { --toast-accent: var(--success); }
.toast-error   { --toast-accent: var(--danger); }
.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--toast-accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.toast-message { flex: 1; }
.toast-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-flash {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--toast-accent) 45%, transparent), var(--shadow); }
}

/* ── Storefront chrome ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--topbar-bg);
  /* Border weight is a token: the neutral default is a thin 1px hairline; a
     theme can make it the design's heavier rule (havebien = 4px forest, top and
     bottom). */
  border-top: var(--topbar-border-width) solid var(--topbar-border);
  border-bottom: var(--topbar-border-width) solid var(--topbar-border);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sits in the centered .container-wide block (the element carries that class),
     so the logo/nav align with the page content — nav to the right of the
     centered block, as before. Only the vertical padding is trimmed here so a
     larger wordmark doesn't grow the bar's height. */
  padding-block: .25rem;
}
.brand {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--topbar-fg);
}
.brand:hover { color: var(--topbar-fg); }
.site-nav { display: flex; align-items: center; gap: 1rem; font-size: .875rem; }
.site-nav a { color: var(--topbar-text); }
.site-nav a:hover { color: var(--topbar-fg); }
.site-nav a.is-active { color: var(--topbar-fg); font-weight: 600; }

/* Language switcher: each locale is a button in its own inline form (a POST to
   /lang, so the choice is set in a cookie, not the URL). Styled to read like
   the nav links — a bare <button> would otherwise take the browser's default
   dark button color and vanish on the dark header. */
.site-nav form { display: inline; margin: 0; }
.lang-switch {
  background: none;
  border: none;
  padding: 0 .25rem;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  color: var(--topbar-text);
}
.lang-switch:hover { color: var(--topbar-fg); }
.lang-switch.is-active { color: var(--topbar-fg); font-weight: 600; }

.site-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem clamp(1.5rem, 5vw, 5rem);
  font-size: .875rem;
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 3px solid var(--footer-border);
}
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: var(--footer-fg); }
.footer-logo { font-family: var(--font-script); font-size: 1.9rem; line-height: 1; color: var(--footer-fg); }
.footer-nav ul {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.footer-nav a {
  font-family: var(--font-eyebrow); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.footer-copy { font-family: var(--font-eyebrow); font-size: .68rem; letter-spacing: .05em; }

.site-main { padding-block: 2.5rem; }

/* The storefront header lays out a logo on the left and the nav on the right.
   A shop with a wordmark/logo image sets it in the brand slot; the nav is a
   horizontal row of links plus the cart. Reuses the --topbar-* tokens so it
   sits on the same bar as before. */
.site-branding { display: flex; align-items: center; }
.site-branding a { display: flex; align-items: center; color: var(--topbar-fg); }
/* The wordmark uses the theme's script/display font, sized by --brand-size.
   line-height:1 keeps its box tight to the glyphs (no clipping); the header's
   small padding-block absorbs the rest so a larger script doesn't balloon the
   bar. Vertically centered with the nav via the flex row's align-items. */
.brand-wordmark {
  font-family: var(--font-script);
  font-size: var(--brand-size);
  line-height: 1;
  color: var(--topbar-fg);
  /* Script faces (e.g. Love Light) have glyphs whose leading flourish extends
     left of the text origin — the capital's swash. A little left padding keeps
     that swash off the container edge so it isn't clipped. */
  padding-left: .35em;
}
.brand-wordmark:hover { color: var(--topbar-fg); }
.site-nav ul.nav-menu {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav ul.nav-menu a {
  font-family: var(--font-eyebrow);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--topbar-text);
}
.site-nav ul.nav-menu a:hover { color: var(--topbar-fg); }
/* Primary call-to-action link in the nav (e.g. "Shop nu"): a filled pill.
   Selector matches `.site-nav ul.nav-menu a`'s specificity so its --accent-fg
   text color wins over the forest --topbar-text set on plain nav links. */
.site-nav ul.nav-menu .nav-cta > a {
  background: var(--accent); color: var(--accent-fg);
  padding: .45rem 1.1rem; border-radius: var(--radius-card);
}
.site-nav ul.nav-menu .nav-cta > a:hover { background: var(--accent-hover); color: var(--accent-fg); }
/* Cart button with an item-count bubble. */
.cart-btn { position: relative; display: inline-flex; align-items: center; color: var(--topbar-text); }
.cart-btn:hover { color: var(--topbar-fg); }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-eyebrow); font-size: .62rem; font-weight: 600;
  border-radius: 999px;
}

/* ── Trust bar ──
   A slim strip of reassurance items under the header (free shipping, etc.).
   Content is shop-specific and lives in the template; this is just the look. */
/* The trust bar is always the dark bar (its own fixed color), with a gold
   accent — a honey rule beneath it and gold dots — matching the design. It
   deliberately uses --trust-* tokens (dark bg + light text), NOT --topbar-*,
   because havebien's header is cream but its trust bar stays dark forest. */
.trust-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  background: var(--trust-bg);
  border-bottom: 3px solid var(--trust-accent);
}
.trust-item {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-eyebrow); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--trust-text); padding: .8rem 2rem;
  border-right: 1px solid color-mix(in srgb, var(--trust-text) 18%, transparent);
}
.trust-item:last-child { border-right: none; }
.trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--trust-accent); flex-shrink: 0; }

/* ── Storefront sections (front page + values/about) ── */
.section-eyebrow {
  font-family: var(--font-eyebrow); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
.section-intro { color: var(--text-muted); max-width: 40rem; margin-bottom: 2rem; }
/* Full-bleed section that breaks out of .container to span the viewport, with
   its own generous internal padding — used for the front-page hero/sections. */
.section-full {
  padding: var(--section-pad) clamp(1.5rem, 5vw, 5rem);
}
.section-alt { background: var(--surface-alt); }

/* Split hero: copy on the left, a visual/quote panel on the right. */
.hero {
  display: grid; grid-template-columns: 55% 45%; min-height: 70vh;
}
.hero-left {
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
  border-right: 3px solid var(--accent); position: relative;
}
.hero-left::after { content: ''; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--accent); }
.hero-tag {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-eyebrow); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .9rem; margin-bottom: 1.5rem;
}
.hero-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.08; margin-bottom: 1.3rem; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub { color: var(--text-muted); max-width: 26rem; margin-bottom: 2rem; }
.hero-right {
  background: var(--accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; padding: 3rem; position: relative; overflow: hidden;
}
/* Faint concentric-ring decoration in two opposite corners of the accent panel
   (design detail; uses a translucent light tone so it reads on any accent). */
.hero-right::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 350px; height: 350px; border-radius: 50%;
  border: 60px solid color-mix(in srgb, var(--accent-fg) 8%, transparent);
}
.hero-right::after {
  content: ''; position: absolute; bottom: -80px; left: -80px;
  width: 250px; height: 250px; border-radius: 50%;
  border: 40px solid color-mix(in srgb, var(--accent-fg) 6%, transparent);
}
/* The hero quote/logo must sit above the rings. */
.hero-right > * { position: relative; z-index: 2; }
/* Photo-backed hero panel: the image (with a dark scrim baked into the inline
   background-image) covers the panel; the decorative rings are hidden since the
   photo fills the space. */
.hero-right.hero-image { background-size: cover; background-position: center; }
.hero-right.hero-image::before,
.hero-right.hero-image::after { content: none; }
.hero-quote { position: relative; z-index: 2; text-align: center; max-width: 20rem; }
.hero-divider { width: 50px; height: 1px; background: var(--accent-fg); opacity: .5; margin: 0 auto 1.2rem; }
.hero-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--accent-fg); }
.hero-quote cite { display: block; font-family: var(--font-eyebrow); font-size: .68rem; color: var(--accent-fg); opacity: .8; margin-top: .7rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* Values: an intro column beside a list of icon+text rows. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.value-row {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.4rem; background: var(--surface-warm);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  transition: transform var(--transition);
}
.value-row + .value-row { margin-top: 1.3rem; }
.value-row:hover { transform: translateX(5px); }
.value-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--surface-alt); }
.value-row h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.value-row p { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* About: text column beside an accent panel with a pull-quote + founder card. */
.blockquote { padding: 2rem 2rem 2rem 2.5rem; background: color-mix(in srgb, var(--accent-fg) 8%, transparent); border-left: 3px solid var(--accent-fg); }
.blockquote p { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--accent-fg); margin: 0; }
.blockquote cite { display: block; font-family: var(--font-eyebrow); font-size: .68rem; color: var(--accent-fg); opacity: .8; margin-top: .8rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.founder-card { display: flex; gap: 1rem; align-items: center; width: 100%; padding: 1.4rem; background: color-mix(in srgb, var(--accent-fg) 8%, transparent); border-left: 3px solid var(--accent-fg); }
.founder-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: color-mix(in srgb, var(--accent-fg) 12%, transparent); }
.founder-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-fg); }
.founder-title { font-family: var(--font-eyebrow); font-size: .68rem; color: var(--accent-fg); opacity: .8; margin-top: .2rem; letter-spacing: .08em; text-transform: uppercase; }

/* ── Product grid (catalog listings + front-page strip) ── */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.product-card {
  display: block; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.product-card .thumb { aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background: var(--surface-alt); }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .thumb .noimg { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--text-muted); font-size: .8rem; }
.product-card h2 { font-size: 1.1rem; margin: 0; padding: 1rem 1.1rem .3rem; }
.product-card .price { display: block; padding: 0 1.1rem .8rem; color: var(--accent); font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.products-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2rem; }

@media (max-width: 900px) {
  .hero, .split-2, .about-split { grid-template-columns: 1fr; }
  .hero-left { border-right: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ── Admin chrome ──────────────────────────────────────────────────────── */

/* The sidebar is a fixed, full-height rail pinned to the left edge, so it spans
   the whole viewport height (no page background above/below it). The shell
   therefore no longer lays the sidebar out in flow — it just reserves space on
   the left (--admin-sidebar-w) so its centered content clears the rail. */
:root { --admin-sidebar-w: 13rem; }

.admin-shell {
  padding-block: 2rem;
  padding-left: calc(var(--admin-sidebar-w) + 2rem);
}
/* The admin sidebar is a dark-green rail matching the storefront top bar — it
   uses the same fixed --topbar-* tokens (constant across light/dark). Because
   the rail is always dark, everything inside it needs light text: the brand,
   the muted "Admin" subtitle, the nav links, and the sign-out button all get
   topbar text colors here, overriding the theme's default dark text. */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-w);
  overflow-y: auto;               /* scroll the rail itself if its items overflow */
  display: flex;
  flex-direction: column;         /* so the account footer can pin to the bottom */
  background: var(--topbar-bg);
  border-right: 1px solid var(--topbar-border);
  padding: 1.5rem 1rem;
}
.admin-brand { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; color: var(--topbar-fg); }
/* The "Admin" subtitle uses .muted inline in the markup — retint for the dark panel. */
.admin-sidebar .muted { color: var(--topbar-text); }

.admin-nav { margin-top: 1.5rem; font-size: .875rem; }
/* Menu is grouped into scope sections (This shop / Administration), each with a
   small uppercase label and a gap between groups so they read as distinct. */
.admin-nav-section { display: flex; flex-direction: column; gap: .125rem; }
.admin-nav-section + .admin-nav-section { margin-top: 1.5rem; }
.admin-nav-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--topbar-text);
  opacity: .65;
  padding: 0 .5rem;
  margin-bottom: .375rem;
}
.admin-nav a {
  padding: .375rem .5rem;
  border-radius: var(--radius-sm);
  color: var(--topbar-text);
}
.admin-nav a:hover { background: rgba(255, 255, 255, .08); color: var(--topbar-fg); }
.admin-nav a.is-active { background: rgba(255, 255, 255, .08); color: var(--topbar-fg); font-weight: 600; }

/* Account footer (the "me" region): pinned to the bottom of the rail, separated
   by a divider. Holds the signed-in email + sign out. */
.admin-account {
  margin-top: auto;               /* push to the bottom of the flex column */
  padding-top: 1rem;
  border-top: 1px solid var(--topbar-border);
}
/* Sign-out is a .btn-link (defaults to muted dark text) — retint for the panel. */
.admin-sidebar .btn-link { color: var(--topbar-text); }
.admin-sidebar .btn-link:hover { color: var(--topbar-fg); }
.admin-main { min-width: 0; }