/* ============================================================
   Claws-N-Scales — "dragon's hoard boutique" theme.
   Light, whimsical storybook palette built on the shop's own
   green + orange, on sage-paper panels floating over a drifting
   charcoal-to-green page gradient — accents chosen for contrast (not just
   decoration) on a light background.
   Two recurring hand-drawn motifs tie back to the brand name:
     CLAWS  -> orange scratch-mark accents (buttons, headings)
     SCALES -> emerald scalloped texture (hero, card corners)
   Both are inline SVG data-URIs, so there's zero external font/
   image dependency — everything stays CSP-safe and self-contained.
   ============================================================ */
:root {
  --bg: #f1f4ef;
  --bg-elevated: #fbfcfa;
  --placeholder: #e3ebe2;
  --text: #1f2622;
  --text-muted: #536057;
  --cns-accent: #15803d;        /* shop green */
  --cns-accent-hover: #0e5c2b;
  --cns-accent-2: #c2410c;      /* "claw" orange — shop's other signature color, deep enough to read as text */
  --cns-accent-emerald: #0a8064; /* "scale" emerald — texture accent, kept distinct from --cns-accent's forest green */
  --border: #d2ddd1;
  --swatch-ring: rgba(31, 38, 34, 0.22);
  --danger: #c53030;
  --success: #147a40;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow: 0 10px 28px rgba(18, 28, 22, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --claw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M8 34 Q22 4 38 34' stroke='%23c2410c' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42 34 Q56 4 72 34' stroke='%23c2410c' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M76 34 Q90 4 106 34' stroke='%23c2410c' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --claw-mark-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M8 34 Q22 4 38 34' stroke='%23fff8ec' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42 34 Q56 4 72 34' stroke='%23fff8ec' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M76 34 Q90 4 106 34' stroke='%23fff8ec' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --scale-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24'%3E%3Cpath d='M0 24 Q11 0 22 24 Q33 0 44 24' fill='none' stroke='%230a8064' stroke-opacity='0.22' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Display font: Chewy (Apache 2.0, self-hosted — see /fonts/Chewy-LICENSE.txt).
   Used for headings and the wordmark only; body copy, prices and forms stay
   in the system sans for readability. Chewy has a single weight, so headings
   are set to 400 to avoid the browser faking a smeared bold. */
@font-face {
  font-family: 'Chewy';
  src: url('/fonts/chewy-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root { --font-display: 'Chewy', 'Segoe UI', system-ui, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }

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

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cns-accent);
  outline-offset: 2px;
}

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

/* Header: dark charcoal frosted glass that melts into the top (charcoal)
   end of the page gradient, with light mint text and a soft sage glow
   line along its bottom edge — the same glow tops the store panel below,
   so the two read as one set. */
.site-header {
  --hdr-text: #e6efe6;
  --hdr-link: #b7d9bd;
  --hdr-link-hover: #ffffff;
  --hdr-line: rgba(183, 217, 189, 0.22);
  background: linear-gradient(180deg, rgba(20, 24, 22, 0.86), rgba(28, 34, 31, 0.74));
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 10px 30px rgba(8, 10, 9, 0.35);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(183, 217, 189, 0.55) 30%, rgba(214, 238, 218, 0.8) 50%, rgba(183, 217, 189, 0.55) 70%, transparent);
}

/* Admin-uploaded decorative emblem, shown inline beside the shop name in
   the nav brand. Sized in em relative to .brand's own font-size so it
   never grows taller than the wordmark's text — a badge next to the name,
   not a banner competing with it. */
.brand-badge {
  height: 1em;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(18, 28, 22, 0.3));
  animation: brandBadgeIn 0.6s var(--ease);
}
@keyframes brandBadgeIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-badge { animation: none; }
}

.nav-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; }
.brand {
  font-weight: 400; font-size: 1.45rem; letter-spacing: 0.02em; color: var(--text); font-family: var(--font-display);
  display: flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(120deg, var(--hdr-text, var(--text)) 40%, #f0955a 60%, var(--hdr-text, var(--text)) 80%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: background-position 0.6s var(--ease);
}
.brand:hover { background-position: -120% 0; }
/* A small claw-scratch mark beside the wordmark, but only when there's no
   uploaded logo image to sit next to (:has() degrades harmlessly if a
   browser doesn't support it — the icon just won't show). */
.brand:not(:has(.brand-logo)):not(:has(.brand-badge))::before {
  content: '';
  display: inline-block;
  width: 22px; height: 16px;
  background-image: var(--claw-mark);
  background-repeat: no-repeat; background-size: contain;
  filter: drop-shadow(0 0 4px rgba(255, 140, 60, 0.55));
}
.brand-logo { max-height: 40px; width: auto; display: block; }

.nav-search { display: flex; flex: 1 1 240px; max-width: 360px; }
.nav-search input {
  flex: 1; padding: 0.5rem 0.75rem; border-radius: var(--radius) 0 0 var(--radius);
  border: 1px solid var(--hdr-line); border-right: none; background: rgba(255, 255, 255, 0.07); color: var(--hdr-text);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav-search input::placeholder { color: rgba(230, 239, 230, 0.55); }
.nav-search input:focus { background: rgba(255, 255, 255, 0.12); border-color: rgba(183, 217, 189, 0.5); }
.nav-search button {
  padding: 0.5rem 0.9rem; border-radius: 0 var(--radius) var(--radius) 0; border: 1px solid var(--border);
  border-color: var(--hdr-line); background: rgba(183, 217, 189, 0.14); color: var(--hdr-link); cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav-search button { --pulse-rgb: 183, 217, 189; }
.nav-search button:hover { color: #1b201e; background: var(--hdr-link); border-color: var(--hdr-link); animation: btnPulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nav-search button:hover { animation: none; } }

.nav-links { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.nav-links a, .nav-links .link-button { color: var(--hdr-link); position: relative; padding: 0.15rem 0; }
.nav-links a:hover, .nav-links .link-button:hover { color: var(--hdr-link-hover); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--hdr-link), #f0955a);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current='page']::after { transform: scaleX(1); }
.nav-links a[aria-current='page'] { color: var(--hdr-link-hover); }
.site-header a:focus-visible, .site-header button:focus-visible, .site-header input:focus-visible { outline-color: var(--hdr-link); }

.inline-form { display: inline; }
.link-button { background: none; border: none; color: var(--cns-accent); cursor: pointer; font: inherit; padding: 0; }
.link-button:hover { color: var(--cns-accent-hover); }

main.container { padding-top: 2rem; padding-bottom: 3rem; min-height: 60vh; }

.site-footer { border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; padding: 1.5rem 0; }
.footer-links { margin-bottom: 0.5rem; }
.live-users { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.35rem; }
.live-users[hidden] { display: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fb14a; box-shadow: 0 0 0 0 rgba(47, 177, 74, 0.6); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 177, 74, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(47, 177, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 177, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.hero {
  text-align: center; padding: 2.25rem 1.5rem 1.75rem; margin-bottom: 2.5rem; border-radius: var(--radius-lg);
  position: relative; overflow: hidden; isolation: isolate;
}
.hero h1 { font-size: 3.1rem; margin-bottom: 0.5rem; color: #f1f4ef; text-shadow: 0 3px 18px rgba(8, 12, 10, 0.55); position: relative; z-index: 1; }
.hero p { font-size: 1.05rem; color: #cfe3d2; position: relative; z-index: 1; }
.hero .trust-badge { background: rgba(18, 22, 20, 0.45); border-color: rgba(183, 217, 189, 0.4); color: #e6efe6; backdrop-filter: blur(4px); }
.hero p.hero-local { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; margin-top: 0.25rem; }

/* Hero drops the tiled scale-squiggle layer that .animated-gradient normally
   adds (age-gate card keeps it) — just the animated color gradient here. */
/* Mini version of the page gradient: charcoal into sage, drifting slowly. */
.hero.animated-gradient {
  background-color: #232826;
  background-image: linear-gradient(160deg, #1b1f1d 0%, #262d2a 22%, #3d4b43 45%, #5f7d66 70%, #86a98d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(10, 14, 12, 0.25);
  background-size: 160% 160%;
  background-position: 0% 50%;
}

/* The claw-scratch flourish under the main heading — kept on the age-gate
   card, dropped from the hero along with the scale-squiggle texture so the
   hero background is just a soft, slowly shifting color wash. */
.age-gate-card h1::after {
  content: '';
  display: block;
  width: 100px; height: 26px;
  margin: 0.6rem auto 0;
  background-image: var(--claw-mark);
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.9;
}

.animated-gradient {
  position: relative; overflow: hidden; isolation: isolate;
  background-image: var(--scale-pattern), linear-gradient(-45deg, #dfeadf, #f3f1e6, #cbe3d0, #e7eee5, #dfeadf);
  background-repeat: repeat, no-repeat;
  background-size: 44px 24px, 400% 400%;
  background-position: 0 0, 0% 50%;
  animation: gradientShift 22s ease infinite;
}
.animated-gradient > * { position: relative; z-index: 1; }
.animated-gradient::before, .animated-gradient::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.22; z-index: 0; pointer-events: none;
}
.animated-gradient::before { width: 260px; height: 260px; background: var(--cns-accent); top: -60px; left: 8%; animation: floatOrb1 16s ease-in-out infinite; }
.animated-gradient::after { width: 220px; height: 220px; background: var(--cns-accent-2); bottom: -50px; right: 10%; animation: floatOrb2 19s ease-in-out infinite; }

@keyframes gradientShift {
  0% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
@keyframes floatOrb1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,40px) scale(1.15); } }
@keyframes floatOrb2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25px,-30px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .animated-gradient, .animated-gradient::before, .animated-gradient::after { animation: none; }
}

.flash { border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.flash ul { margin: 0; padding-left: 1.1rem; }
.flash-error { background: linear-gradient(rgba(197, 48, 48, 0.1), rgba(197, 48, 48, 0.1)), var(--bg-elevated); border: 1px solid var(--danger); color: var(--danger); }
.flash-success { background: linear-gradient(rgba(20, 122, 64, 0.1), rgba(20, 122, 64, 0.1)), var(--bg-elevated); border: 1px solid var(--success); color: var(--success); }

.error-page { text-align: center; padding: 3rem 0; }
.error-detail { text-align: left; background: var(--bg-elevated); padding: 1rem; border-radius: var(--radius); overflow-x: auto; }

.btn {
  display: inline-block; position: relative; overflow: hidden;
  background: var(--cns-accent); color: #fffaf0;
  border: none; border-radius: var(--radius); padding: 0.65rem 1.3rem; font-weight: 600; cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), opacity 0.18s var(--ease), background-color 0.2s var(--ease);
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Hover: a soft, slow 'breathing' pulse — the button swells slightly and a
   glow ring ripples outward. --pulse-rgb is the ring colour per variant. */
.btn { --pulse-rgb: 194, 65, 12; }
.btn:hover {
  background: var(--cns-accent-2); color: #fffaf0;
  box-shadow: 0 6px 16px rgba(194, 65, 12, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: btnPulse 1.6s ease-in-out infinite;
}
/* Secondary button: green outline that fills in on hover. */
.btn.btn-ghost { --pulse-rgb: 21, 128, 61; background: transparent; color: var(--cns-accent); box-shadow: inset 0 0 0 1.5px var(--cns-accent); }
.btn.btn-ghost:hover { background: var(--cns-accent); color: #fffaf0; box-shadow: 0 6px 16px rgba(21, 128, 61, 0.28); }
@keyframes btnPulse {
  0%   { transform: scale(1);     outline: 0 solid rgba(var(--pulse-rgb), 0.45); outline-offset: 0; }
  50%  { transform: scale(1.045); }
  100% { transform: scale(1);     outline: 10px solid rgba(var(--pulse-rgb), 0); outline-offset: 0; }
}
.btn:active { transform: scale(0.97); animation: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { animation: none; } }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.55rem 0.7rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--cns-accent); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); outline: none;
}

.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); }
.form-hint { color: var(--text-muted); font-size: 0.9rem; margin-top: -0.5rem; margin-bottom: 1rem; }

.category-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.category-chip {
  background: var(--placeholder); border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 1.15rem;
  color: var(--text); font-weight: 600; font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  display: inline-block;
}
.category-chip:hover { border-color: var(--cns-accent); color: var(--cns-accent); background: var(--bg-elevated); transform: translateY(-1px) rotate(-1deg); }
.category-nav .category-chip.active { background: var(--cns-accent); border-color: var(--cns-accent); color: #fffaf0; box-shadow: 0 4px 12px rgba(21, 128, 61, 0.28); }
.category-nav .category-chip.active:hover { color: #fffaf0; background: var(--cns-accent-hover); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.product-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  display: block; color: var(--text); position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.product-card:hover { border-color: rgba(21, 128, 61, 0.55); transform: translateY(-5px) rotate(-0.35deg); box-shadow: 0 16px 34px rgba(18, 28, 22, 0.2), 0 0 0 4px rgba(183, 217, 189, 0.45); }
/* Sold-out cards step back so available pieces stand out; full colour returns on hover. */
.product-card.is-sold-out .product-card-image img { filter: grayscale(0.55) opacity(0.72); transition: transform 0.4s var(--ease), filter 0.3s var(--ease); }
.product-card.is-sold-out .product-card-body { opacity: 0.78; transition: opacity 0.3s var(--ease); }
.product-card.is-sold-out:hover .product-card-image img { filter: none; }
.product-card.is-sold-out:hover .product-card-body { opacity: 1; }
.product-card-image { aspect-ratio: 1 / 1; background: var(--placeholder); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s var(--ease); }
.product-card:hover .product-card-image img { transform: scale(1.06); }
.product-card-placeholder { color: var(--text-muted); font-size: 0.85rem; }
.product-card-body { padding: 1rem 1rem 1.05rem; }
.product-card-body h3 { margin: 0 0 0.45rem; font-size: 1.3rem; line-height: 1.15; }
.product-card-price { margin: 0 0 0.5rem; font-weight: 700; color: var(--cns-accent-2); }

.price-strike { text-decoration: line-through; color: var(--text-muted); margin-right: 0.5rem; font-weight: 400; }
.price-sale { color: var(--danger); }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-in-stock { background: rgba(20, 122, 64, 0.13); color: var(--success); }
.badge-flawed { background: rgba(194, 65, 12, 0.13); color: #c2410c; }
.badge-made-to-order { background: rgba(21, 128, 61, 0.13); color: var(--cns-accent); }
.badge-sale { background: rgba(197, 48, 48, 0.13); color: var(--danger); }
.badge-status-success { background: rgba(20, 122, 64, 0.13); color: var(--success); }
.badge-status-pending { background: rgba(194, 65, 12, 0.13); color: var(--cns-accent-2); }
.badge-status-danger { background: rgba(197, 48, 48, 0.13); color: var(--danger); }

.breadcrumb { margin-bottom: 1rem; color: var(--text-muted); }

.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 720px) { .product-detail { grid-template-columns: minmax(0, 1fr); } }
.product-main-image { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius-lg); background: var(--placeholder); }

.product-thumbnails { display: flex; gap: 0.6rem; margin-top: 0.75rem; overflow-x: auto; padding-bottom: 0.25rem; }
.product-thumbnail {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 0; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--placeholder);
  transition: border-color 0.18s var(--ease);
}
.product-thumbnail img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-thumbnail:hover { border-color: var(--cns-accent); }
.product-thumbnail.selected { border-color: var(--cns-accent-2); }
.product-price { font-size: 1.4rem; font-weight: 700; margin: 0.75rem 0; color: var(--cns-accent-2); }
.configurator-section { margin: 1.25rem 0; }
.configurator-section h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }

.size-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size-option {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  padding: 0.5rem 0.9rem; cursor: pointer; font: inherit; text-align: center;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.size-option:hover { border-color: var(--cns-accent); transform: translateY(-1px); }
.size-option small { display: block; color: var(--text-muted); }
.size-option.selected { border-color: var(--cns-accent-2); box-shadow: 0 0 0 1px var(--cns-accent-2); animation: sparklePop 0.35s var(--ease); }

.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
@media (max-width: 480px) { .color-grid { grid-template-columns: repeat(3, 1fr); } }
.color-swatch-option {
  background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem; font-size: 0.7rem; padding: 0.25rem; border-radius: var(--radius);
}
.color-swatch-option .swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--swatch-ring); display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.color-swatch-option:hover .swatch { transform: scale(1.1) rotate(-6deg); }
.color-swatch-option.selected { color: var(--text); }
.color-swatch-option.selected .swatch { border-color: var(--cns-accent-2); box-shadow: 0 0 0 2px var(--cns-accent-2); animation: sparklePop 0.35s var(--ease); }
.color-swatch-option .swatch-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-swatch-option:disabled { opacity: 0.35; cursor: not-allowed; }
.color-swatch-option:disabled .swatch { transform: none; }

@keyframes sparklePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.metallic-toggle, .inline-toggle { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.metallic-toggle input, .inline-toggle input { width: auto; }
.live-price { font-size: 1.3rem; font-weight: 700; margin: 1rem 0; color: var(--cns-accent-2); }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 780px) { .checkout-layout { grid-template-columns: 1fr; } }
.order-summary-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.trust-badge {
  display: inline-block; background: rgba(10, 128, 100, 0.1); border: 1px solid rgba(10, 128, 100, 0.35);
  color: var(--cns-accent-emerald); border-radius: var(--radius); padding: 0.5rem 0.9rem; font-size: 0.85rem; margin: 0.75rem 0;
}

.faq-list { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; }
.faq-entry h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.faq-entry p { margin: 0; color: var(--text-muted); }
.policy-section { max-width: 720px; margin-bottom: 2rem; }
.policy-text { color: var(--text-muted); white-space: pre-line; }

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 1rem;
  background: linear-gradient(135deg, rgba(227, 235, 226, 0.85), rgba(241, 244, 239, 0.7));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 1.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.filter-field { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-field label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.filter-field select, .filter-field input { padding: 0.45rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); transition: border-color 0.18s var(--ease); }
.filter-field select:hover, .filter-field input:hover, .filter-field select:focus, .filter-field input:focus { border-color: var(--cns-accent); }
.filter-apply { padding: 0.5rem 1rem; }
.filter-clear { color: var(--text-muted); font-size: 0.85rem; align-self: center; }
.filter-clear:hover { color: var(--cns-accent-2); }

table.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.admin-table th, table.admin-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
table.admin-table th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
table.admin-table tbody tr { transition: background-color 0.15s var(--ease); }
table.admin-table tbody tr:hover { background: var(--placeholder); }

.status-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.status-filter .category-chip { font-size: 0.85rem; text-transform: capitalize; padding: 0.4rem 0.9rem; }
.status-filter .category-chip.active { background: var(--cns-accent); border-color: var(--cns-accent); color: #fffaf0; }
.status-filter .category-chip.active:hover { color: #fffaf0; }

.link-button-danger { color: var(--danger); }
.link-button-danger:hover { color: #8f2323; }

/* --- Reviews --- */
.star-rating { display: inline-flex; gap: 0.1rem; }
.star-rating .star { color: var(--border); font-size: 1.1rem; line-height: 1; }
.star-rating .star.filled { color: var(--cns-accent-2); }

.reviews-section { margin-top: 3rem; padding-top: 2rem; position: relative; }
/* Section divider: the same sage/orange accent line that tops the store panel. */
.reviews-section::before, .home-reviews::before, .section-divider {
  content: ''; display: block; height: 2px; border: 0; border-radius: 2px; margin: 0 auto 2rem; width: 70%;
  background: linear-gradient(90deg, transparent, rgba(110, 160, 122, 0.85) 25%, rgba(240, 149, 90, 0.8) 50%, rgba(110, 160, 122, 0.85) 75%, transparent);
}
.reviews-section::before { position: absolute; top: 0; left: 15%; margin: 0; }
.review-summary { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.review-summary .star-rating .star { font-size: 1.4rem; }
.review-summary-text { color: var(--text-muted); }

.review-form-card { max-width: 520px; margin-bottom: 2rem; }

.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label {
  font-size: 2rem; line-height: 1; color: var(--border); cursor: pointer;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--cns-accent-2); }
.star-input label:hover { transform: scale(1.15); }

.review-list { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; }
.review-entry { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.review-entry-header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.review-entry h4 { margin: 0.3rem 0 0.3rem; font-size: 1rem; }
.review-entry p { margin: 0.2rem 0; }
.review-date { color: var(--text-muted); font-size: 0.8rem; }

/* --- Homepage "Customer Reviews" section --- */
.home-reviews { margin-top: 3rem; }
.home-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.home-review-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; }
.home-review-card .star-rating { margin-bottom: 0.4rem; }
.home-review-card p { color: var(--text-muted); margin: 0.4rem 0; }
.home-review-card .review-product-link { font-size: 0.85rem; font-weight: 600; }

/* In-stock pieces (product page "Ready to Ship Now" + /in-stock page) */
.stock-section { margin: 1.5rem 0; }
.seconds-section { margin-top: 3rem; scroll-margin-top: 5.5rem; }
.seconds-section::before {
  content: ''; display: block; height: 2px; border-radius: 2px; margin: 0 auto 2rem; width: 70%;
  background: linear-gradient(90deg, transparent, rgba(110, 160, 122, 0.85) 25%, rgba(240, 149, 90, 0.8) 50%, rgba(110, 160, 122, 0.85) 75%, transparent);
}
.seconds-section > p { color: var(--text-muted); max-width: 760px; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.stock-piece { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem; }
.stock-piece .product-main-image { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; background: var(--placeholder); }
.stock-piece-placeholder { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--placeholder); border-radius: 6px; }
.stock-piece-title { margin: 0.35rem 0 0; font-size: 1rem; }
.stock-piece-details { margin: 0; }
.stock-piece-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin: 0 0.3rem 0 0.1rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.stock-piece-note { margin: 0; }
.stock-piece-flaw { margin: 0; font-size: 0.9rem; }
.stock-piece-price { margin: 0.25rem 0; font-size: 1.05rem; }
.stock-piece-form { display: flex; gap: 0.5rem; align-items: center; margin-top: auto; }
.custom-order-heading { margin-top: 1.5rem; }
.product-card-body .badge + .badge { margin-left: 0.3rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Notify me when available" on sold-out products */
.notify-card { margin-top: 1rem; }
.notify-card h3 { margin-top: 0; }
.notify-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.notify-form input[type="email"] { flex: 1 1 220px; }

/* Customer order progress tracker */
.order-progress { list-style: none; display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 1rem 0 1.25rem; counter-reset: step; }
.order-progress li { flex: 1 1 110px; position: relative; padding-top: 1.9rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.order-progress li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.5rem; height: 1.5rem; line-height: 1.5rem; border-radius: 50%; background: var(--placeholder); color: var(--text-muted); font-weight: 700; font-size: 0.75rem; z-index: 1; }
.order-progress li::after { content: ''; position: absolute; top: 0.72rem; left: -50%; width: 100%; height: 3px; background: var(--placeholder); }
.order-progress li:first-child::after { display: none; }
.order-progress li.done, .order-progress li.current { color: var(--text); }
.order-progress li.done::before { content: '\2713'; background: var(--success); color: #fff; }
.order-progress li.done::after, .order-progress li.current::after { background: var(--success); }
.order-progress li.current::before { background: var(--cns-accent); color: #fff; box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.18); }
.order-progress li.current span { font-weight: 700; }
.order-tracking { margin-top: 0; }

/* Approximate USD beside CAD prices */
.price-usd { color: var(--text-muted); font-weight: 500; font-size: 0.8em; }

/* Footer newsletter sign-up */
.footer-signup { max-width: 520px; margin-bottom: 1.25rem; }
.footer-signup-row { display: flex; gap: 0.5rem; margin: 0.4rem 0; }
.footer-signup-row input { flex: 1 1 auto; min-width: 0; }
.footer-signup small { display: block; line-height: 1.4; }

/* Message threads (orders & custom requests) */
.message-thread { margin: 2rem 0; max-width: 760px; }
.message-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.message { padding: 0.75rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elevated); max-width: 85%; }
.message-mine { align-self: flex-end; background: rgba(21, 128, 61, 0.07); }
.message-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.message-body { white-space: pre-line; }
.message-image { display: block; max-width: 240px; max-height: 240px; margin-top: 0.5rem; border-radius: 6px; }
.message-form textarea { width: 100%; }
.message-form-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.message-attach { font-size: 0.85rem; color: var(--text-muted); }

/* Custom requests */
.commission-form { max-width: 760px; }
.commission-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.quote-card { border-color: var(--cns-accent); margin-bottom: 1.25rem; }
.reference-images { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reference-images img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

/* ============================================================
   Storefront page background — a slow-drifting, heavily blended
   gradient from soft charcoal black into soft light green.
   Built as an oversized fixed layer (body::before) of a base
   linear gradient plus overlapping radial "bleeds", then blurred
   so no stop ever shows a hard edge. body::after lays a faint
   noise grain on top to stop colour banding in the dark tones.
   Only `transform` animates, so the blurred layer is painted once
   and just composited while it drifts. Applies to admin pages too.
   Content sits on frosted sage panels so text stays readable
   whether it lands over the dark or the light end.
   ============================================================ */
body { background: #232826; }
body::before,
body::after {
  content: ''; position: fixed; pointer-events: none; z-index: -1;
}
body::before {
  inset: -25vmax;
  background:
    radial-gradient(ellipse 55% 45% at 22% 78%, rgba(196, 232, 200, 0.75), transparent 70%),
    radial-gradient(ellipse 50% 40% at 78% 70%, rgba(150, 196, 160, 0.55), transparent 72%),
    radial-gradient(ellipse 60% 45% at 70% 22%, rgba(18, 20, 19, 0.85), transparent 70%),
    radial-gradient(ellipse 45% 35% at 30% 30%, rgba(58, 70, 63, 0.6), transparent 75%),
    radial-gradient(ellipse 40% 30% at 55% 50%, rgba(98, 128, 106, 0.4), transparent 75%),
    linear-gradient(165deg, #1b1e1d 0%, #232826 18%, #313a35 34%, #4b5d51 50%, #759479 66%, #a4c9aa 82%, #c8e5cb 100%);
  filter: blur(48px) saturate(0.92);
  animation: pageGradientDrift 48s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes pageGradientDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(4vmax, -3vmax) rotate(4deg) scale(1.06); }
  66%  { transform: translate(-3vmax, 3vmax) rotate(-3deg) scale(1.03); }
  100% { transform: translate(2vmax, 2vmax) rotate(2deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Frosted content panel + footer strip over the gradient. */
body:not(.admin-body) main.container {
  position: relative;
  box-shadow: 0 18px 50px rgba(10, 14, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  background: rgba(241, 244, 239, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-lg);
  margin-top: 1.75rem; margin-bottom: 2rem;
  padding-left: 1.75rem; padding-right: 1.75rem;
  width: calc(100% - 1.5rem);
}
/* Footer bookends the header: same dark glass, mint text and glow line. */
body:not(.admin-body) .site-footer {
  --hdr-text: #e6efe6; --hdr-link: #b7d9bd; --hdr-line: rgba(183, 217, 189, 0.22);
  position: relative;
  background: linear-gradient(0deg, rgba(20, 24, 22, 0.9), rgba(28, 34, 31, 0.8));
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-top: 0;
  color: rgba(230, 239, 230, 0.72);
  box-shadow: 0 -10px 30px rgba(8, 10, 9, 0.25);
  padding: 2rem 0 1.75rem;
}
body:not(.admin-body) .site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(183, 217, 189, 0.55) 30%, rgba(214, 238, 218, 0.8) 50%, rgba(183, 217, 189, 0.55) 70%, transparent);
}
.site-footer a { color: var(--hdr-link, var(--cns-accent)); }
.site-footer a:hover { color: #ffffff; }
.site-footer label strong { color: var(--hdr-text, var(--text)); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.02em; }
.site-footer .footer-signup-row input {
  padding: 0.55rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--hdr-line, var(--border));
  background: rgba(255, 255, 255, 0.07); color: var(--hdr-text, var(--text));
}
.site-footer .footer-signup-row input::placeholder { color: rgba(230, 239, 230, 0.5); }
.site-footer .footer-signup-row input:focus { outline: none; border-color: rgba(183, 217, 189, 0.6); background: rgba(255, 255, 255, 0.12); }
.site-footer small { color: rgba(230, 239, 230, 0.55); }
.site-footer .live-users strong { color: var(--hdr-text, var(--text)); }
@media (max-width: 600px) {
  body:not(.admin-body) main.container { padding-left: 1rem; padding-right: 1rem; margin-top: 1rem; width: calc(100% - 1rem); }
}

body:not(.admin-body) main.container::before {
  content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(110, 160, 122, 0.85) 25%, rgba(240, 149, 90, 0.8) 50%, rgba(110, 160, 122, 0.85) 75%, transparent);
}

/* 'Made in Canada' label (Len Williams' design, see img/site/made-in-canada.SOURCE.txt)
   shown as a die-cut sticker: white border, rounded corners, slight tilt. */
.canada-sticker {
  position: absolute; top: 1.3rem; right: 1.5rem; z-index: 2;
  width: 190px; height: auto;
  padding: 5px; background: #fbfcfa; border-radius: 9px;
  transform: rotate(6deg);
  box-shadow: 0 8px 16px rgba(8, 12, 10, 0.4), 0 1px 2px rgba(8, 12, 10, 0.35);
  transition: transform 0.35s var(--ease);
}
.canada-sticker:hover { transform: rotate(-2deg) scale(1.05); }
@media (max-width: 700px) {
  .canada-sticker { width: 128px; padding: 4px; border-radius: 7px; top: 0.7rem; right: 0.7rem; }
  .hero { padding-top: 4.25rem; }
  .hero h1 { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) { .canada-sticker { transition: none; } }

/* Friendly empty-state panel (partials/emptyState.ejs). */
.empty-state {
  grid-column: 1 / -1; text-align: center; max-width: 520px; margin: 1.5rem auto 2rem;
  padding: 2rem 1.5rem 2.25rem; border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 50% 0%, rgba(183, 217, 189, 0.35), transparent 70%), var(--bg-elevated);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.empty-state-art {
  width: 84px; height: 84px; margin: 0 auto 0.9rem; border-radius: 50%;
  background: var(--claw-mark) center 58% / 58px no-repeat, radial-gradient(circle, #ffffff 0%, var(--placeholder) 70%);
  box-shadow: 0 0 0 6px rgba(183, 217, 189, 0.35);
  animation: emptyBob 4s ease-in-out infinite;
}
.empty-state-logo {
  display: block; width: 170px; height: 170px; object-fit: contain; margin: -1.25rem auto -0.9rem;
  filter: drop-shadow(0 6px 10px rgba(18, 28, 22, 0.25));
  animation: emptyBob 4s ease-in-out infinite;
}
@keyframes emptyBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .empty-state-art, .empty-state-logo { animation: none; } }
.empty-state h2 { margin: 0 0 0.4rem; font-size: 1.7rem; }
.empty-state p { margin: 0 auto 1.25rem; color: var(--text-muted); max-width: 400px; }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* ---------- Favourites (heart buttons) ---------- */
.product-card-wrap { position: relative; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.product-card-wrap.is-removing { opacity: 0; transform: scale(0.96); }
.product-card-wrap > .product-card { height: 100%; }
.fav-form { margin: 0; }
.product-card-wrap > .fav-form { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; transition: transform 0.25s var(--ease); }
.product-card-wrap:hover > .fav-form { transform: translateY(-5px); }
.fav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(31, 38, 34, 0.12); background: rgba(251, 252, 250, 0.9);
  color: var(--text-muted); box-shadow: 0 2px 8px rgba(18, 28, 22, 0.15);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.fav-btn:hover { color: var(--danger); transform: scale(1.08); }
.fav-btn:focus-visible { outline: 2px solid var(--cns-accent); outline-offset: 2px; }
.fav-btn:disabled { cursor: progress; }
.fav-icon { width: 20px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 2; transition: fill 0.2s var(--ease); }
.fav-btn.is-fav { color: var(--danger); }
.fav-btn.is-fav .fav-icon { fill: currentColor; }
.fav-btn.fav-pop .fav-icon { animation: favPop 0.4s var(--ease); }
@keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-form-labelled .fav-btn { width: auto; padding: 0 0.95rem 0 0.8rem; font-weight: 600; font-size: 0.95rem; }
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product-title-row h1 { margin-bottom: 0.4rem; }
.product-title-row .fav-form { flex-shrink: 0; margin-top: 0.35rem; }

.nav-fav { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-fav-icon { width: 15px; height: 15px; fill: currentColor; }
.nav-count {
  display: inline-block; min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px;
  background: var(--cns-accent-2); color: #fffaf0; font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.nav-count[hidden] { display: none; }

/* ---------- Size guide ---------- */
.size-guide { margin: 1.25rem 0 1.5rem; }
.size-guide h2 { margin: 0 0 0.6rem; font-size: 1.45rem; }
.size-guide-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.size-guide-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.size-guide-table th, .size-guide-table td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.size-guide-table thead th { background: var(--placeholder); color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.size-guide-table tbody tr:last-child th, .size-guide-table tbody tr:last-child td { border-bottom: 0; }
.size-guide-table tbody th { font-weight: 700; }
.size-guide .form-hint { margin-top: 0.5rem; }
.size-guide-link { margin-left: 0.5rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; }
.size-option .size-option-measure { font-size: 0.75rem; }
.stock-piece-measure { margin: -0.25rem 0 0.5rem; }

/* ---------- Recently viewed ---------- */
.recently-viewed { margin: 0 0 2.5rem; }
.recently-viewed h2 { margin: 0 0 0.9rem; }
.recent-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.recent-grid .product-card-body { padding: 0.7rem 0.8rem 0.8rem; }
.recent-grid .product-card-body h3 { font-size: 1.1rem; }
.recent-grid .badge { display: none; }
.product-detail + .reviews-section ~ .recently-viewed, .reviews-section + .recently-viewed { margin-top: 2.5rem; }

/* ---------- About page ---------- */
.about-page { display: grid; gap: 2rem; align-items: start; max-width: 760px; }
.about-page.has-photo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); max-width: none; }
.about-text p { font-size: 1.05rem; line-height: 1.65; }
.about-text h2 { margin: 1.6rem 0 0.4rem; }
.about-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.about-photo { margin: 0; position: sticky; top: 6rem; }
.about-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 16px 34px rgba(18, 28, 22, 0.2); transform: rotate(1.5deg); }
@media (max-width: 760px) {
  .about-page.has-photo { grid-template-columns: 1fr; }
  .about-photo { position: static; order: -1; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .fav-btn.fav-pop .fav-icon { animation: none; }
}

/* In-stock piece video (2026-10-14) */
.stock-piece-video {
  display: block;
  width: 100%;
  max-height: 420px;
  margin-top: 0.5rem;
  border-radius: 8px;
  background: #000;
}

/* Live sale countdown (2026-10-14) */
.sale-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.3rem 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: #1f2622;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}
.sale-countdown-time { letter-spacing: 0.02em; }
.sale-countdown.is-urgent { background: #b0202c; }
.sale-countdown.is-urgent .sale-countdown-icon { animation: saleTick 1s steps(2, start) infinite; }
.sale-countdown.is-ended { background: var(--text-muted); }
@keyframes saleTick { to { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .sale-countdown.is-urgent .sale-countdown-icon { animation: none; }
}
.sale-countdown, .sale-countdown-label { white-space: nowrap; }
.product-card .sale-countdown { font-size: 0.72rem; gap: 0.25rem; padding: 0.15rem 0.5rem; max-width: 100%; }

/* Find Us in Stores page (2026-10-14) */
.stores-intro { max-width: 62ch; color: var(--text-muted); }
.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.store-card { display: flex; flex-direction: column; }
.store-name { margin: 0 0 0.4rem; font-size: 1.4rem; }
.store-address { font-style: normal; line-height: 1.5; color: var(--text); }
.store-notes {
  margin: 0.6rem 0 0;
  padding-left: 0.6rem;
  border-left: 3px solid var(--cns-accent, #3a9d5d);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.store-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: auto 0 0; padding-top: 0.9rem; }
.store-links .btn { font-size: 0.9rem; }
.stores-footnote { margin-top: 1.5rem; }

/* Store map (2026-10-14) */
.stores-map {
  height: clamp(280px, 45vh, 440px);
  margin-top: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  z-index: 0; /* keep Leaflet's panes under the sticky header */
}
.store-pin { background: none; border: none; }
.store-pin-dot {
  position: absolute;
  left: 2px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--cns-accent, #15803d);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.store-pin-dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}
.store-popup { font-size: 0.9rem; line-height: 1.45; }
.store-popup-links { margin-top: 0.35rem; }

/* Product listing video (2026-10-14) */
.product-video {
  display: block;
  width: 100%;
  max-height: 520px;
  margin-top: 0.75rem;
  border-radius: 10px;
  background: #000;
}

/* ---- Age gate: full-screen overlay with the shop logo ----
   Covers the header/footer so the gate reads as a door, not a page. */
.age-gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 1rem; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 35%, rgba(61, 75, 67, 0.82), rgba(18, 22, 20, 0.94) 70%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.age-gate-card {
  width: 100%; max-width: 460px; margin: auto;
  text-align: center; padding: 1.75rem 1.75rem 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: ageGateIn 0.45s var(--ease) both, gradientShift 22s ease infinite;
}
.age-gate-card h1::after { content: none; }
.age-gate-logo {
  display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 0.75rem;
  filter: drop-shadow(0 6px 14px rgba(20, 26, 22, 0.25));
}
.age-gate-card h1 { font-size: 1.85rem; margin: 0 0 0.4rem; }
.age-gate-card p { margin: 0 0 1.1rem; color: var(--text-muted); }
.age-gate-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1rem; }
.age-gate-actions .btn { white-space: nowrap; min-width: 9.5rem; padding: 0.75rem 1.4rem; font-size: 1rem; }
.age-gate-card .age-gate-fine { font-size: 0.8rem; margin: 0; opacity: 0.85; }
@keyframes ageGateIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .age-gate-card { padding: 1.4rem 1.1rem 1.2rem; }
  .age-gate-logo { max-width: 220px; }
  .age-gate-card h1 { font-size: 1.55rem; }
  .age-gate-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .age-gate-card { animation: none; } }

/* Socials page (2026-10-16) */
.socials-intro { max-width: 62ch; color: var(--text-muted); }
.socials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.social-card {
  display: flex; align-items: center; gap: 1rem;
  color: var(--text); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.social-card:hover, .social-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cns-accent);
  box-shadow: var(--shadow), 0 0 0 3px rgba(21, 128, 61, 0.18);
}
.social-icon {
  flex: none; width: 56px; height: 56px; padding: 10px;
  border-radius: 50%; background: var(--cns-accent); fill: #fff;
  transition: background 0.15s ease;
}
.social-card:hover .social-icon, .social-card:focus-visible .social-icon { background: var(--cns-accent-hover); }
.social-text { display: flex; flex-direction: column; min-width: 0; }
.social-label { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.social-handle { color: var(--text-muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .social-card:hover, .social-card:focus-visible { transform: none; } }

/* Footer social icons (2026-10-16) */
.footer-socials { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 1rem; padding: 0; }
.footer-socials a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hdr-line, var(--border)); background: rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.footer-socials svg { width: 24px; height: 24px; fill: var(--hdr-link, var(--cns-accent)); transition: fill 0.15s ease; }
.footer-socials a:hover, .footer-socials a:focus-visible { background: var(--cns-accent); border-color: var(--cns-accent); transform: translateY(-2px); }
.footer-socials a:hover svg, .footer-socials a:focus-visible svg { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .footer-socials a:hover, .footer-socials a:focus-visible { transform: none; } }

/* ============================================================
   Refine pass (2026-10-24): header, phone menu, cards, browser
   surfaces. Same palette, font and glass look; layout fixes.
   ============================================================ */

/* Browser surfaces in the shop palette. */
::selection { background: rgba(194, 65, 12, 0.22); color: inherit; }
html { accent-color: var(--cns-accent); scrollbar-color: #5f7d66 #1b1f1d; }
input, select, textarea, button { font: inherit; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--cns-accent); color: #fffaf0; padding: 0.5rem 0.9rem; border-radius: var(--radius); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; color: #fffaf0; }
main.container:focus { outline: none; }

/* Header: logo | search | tools on top, shop links underneath. */
.site-header .nav-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand search tools" "links links links";
  align-items: center; column-gap: 1.25rem; row-gap: 0.35rem;
  padding-top: 0.6rem; padding-bottom: 0.5rem;
}
.site-header .brand { grid-area: brand; }
.site-header .nav-search { grid-area: search; justify-self: center; width: 100%; max-width: 420px; }
.site-header .nav-tools { grid-area: tools; }
.site-header .nav-links { grid-area: links; }
.brand-logo { max-height: 58px; height: 58px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.brand { line-height: 0; }

.nav-tools { display: flex; align-items: center; gap: 0.25rem; }
.nav-tool, .nav-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0 0.7rem; border-radius: 999px;
  color: var(--hdr-link); background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav-tool:hover, .nav-toggle:hover { color: var(--hdr-link-hover); background: rgba(183, 217, 189, 0.1); }
.nav-tool[aria-current='page'] { color: var(--hdr-link-hover); border-color: var(--hdr-line); }
.nav-tool-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-fav .nav-tool-icon { fill: currentColor; stroke: none; }
.nav-tool .nav-count { margin-left: 0.1rem; }
.nav-toggle-close { display: none; }

.nav-links { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.nav-primary, .nav-account { display: flex; align-items: center; gap: 0.25rem 1.35rem; flex-wrap: wrap; }
.nav-account { font-size: 0.92rem; }
.nav-account a, .nav-account .link-button { color: rgba(183, 217, 189, 0.8); }
.nav-account .nav-account-only { display: none; }
.nav-primary a { padding: 0.35rem 0; }

@media (max-width: 1000px) {
  .nav-tool .nav-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-tool { padding: 0 0.6rem; }
}

/* Phones/tablets: one compact bar; search + links fold into the Menu panel. */
@media (max-width: 820px) {
  .site-header .nav-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand tools" "search search" "links links";
    padding-top: 0.4rem; padding-bottom: 0.4rem; row-gap: 0.5rem;
  }
  .site-header .nav-tools { justify-self: end; }
  .site-header .nav-search { max-width: none; }
  .brand-logo { height: 46px; max-height: 46px; }
  .nav-toggle { padding: 0 0.75rem; border-color: var(--hdr-line); }
  .nav-toggle .nav-tool-label { font-weight: 600; font-size: 0.92rem; }

  .site-header.has-menu-toggle .nav-search,
  .site-header.has-menu-toggle .nav-links { display: none; }
  .site-header.menu-open .nav-search { display: flex; }
  .site-header.menu-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 8rem); overflow-y: auto; padding-bottom: 0.5rem;
  }
  .site-header.menu-open .nav-toggle-open { display: none; }
  .site-header.menu-open .nav-toggle-close { display: inline; }
  .nav-primary, .nav-account { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-account { border-top: 1px solid var(--hdr-line); margin-top: 0.35rem; padding-top: 0.35rem; font-size: 1rem; }
  .nav-account .nav-account-only { display: flex; }
  .nav-primary a, .nav-account a, .nav-account .link-button {
    display: flex; align-items: center; min-height: 46px; padding: 0 0.25rem; font-size: 1.05rem;
  }
  .nav-primary a { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current='page'] { color: #f0955a; }
  .nav-account .inline-form { display: block; }
  .nav-account .link-button { width: 100%; text-align: left; }
}
@media (max-width: 380px) {
  .nav-tool { padding: 0 0.45rem; }
  .nav-toggle .nav-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Product cards: phone photos are portrait, so a 4:5 frame filled edge to
   edge replaces the old square box with grey bars down both sides. */
.product-card-image { aspect-ratio: 4 / 5; }
.product-card-image img { object-fit: cover; object-position: 50% 45%; }

/* Product page: portrait-friendly main photo frame. */
.product-main-image { aspect-ratio: 4 / 5; }

/* Recently viewed now follows the shop grid on the home page. */
.product-grid + .recently-viewed { margin-top: 3rem; }

/* Hero on phones: tighter so the products show sooner. */
@media (max-width: 600px) {
  .hero { padding-left: 1rem; padding-right: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
  .hero p { font-size: 0.98rem; }
  .hero .trust-badge { font-size: 0.82rem; line-height: 1.45; padding: 0.55rem 0.75rem; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
  .product-card-body { padding: 0.7rem 0.75rem 0.8rem; }
  .product-card-body h3 { font-size: 1.1rem; }
  .product-card-price { font-size: 0.92rem; }
  .product-card-wrap > .fav-form { top: 0.4rem; right: 0.4rem; }
  .filter-bar { gap: 0.6rem 0.75rem; padding: 0.75rem; }
  .filter-field { flex: 1 1 40%; }
  .filter-field select, .filter-field input { width: 100%; min-height: 42px; }
  .site-footer .footer-links { line-height: 2.1; }
}
@media (min-width: 821px) { .nav-toggle { display: none; } }
h1, h2 { line-height: 1.15; text-wrap: balance; }

/* Contrast fixes from the Impeccable scan (2026-10-24). Shop green stays
   the fill colour; text-sized green uses a deeper shade (5.3–7:1 on sage). */
:root { --cns-link: #0f6232; --cns-link-hover: #0b4a26; }
a { color: var(--cns-link); }
a:hover { color: var(--cns-link-hover); }
a.btn, a.btn:hover, .category-chip.active, .category-chip.active:hover { color: #fffaf0; }
a.btn.btn-ghost { color: var(--cns-link); }
a.btn.btn-ghost:hover { color: #fffaf0; }
.site-footer a { color: var(--hdr-link); }
.site-footer a:hover { color: #ffffff; }
.nav-links a { color: var(--hdr-link); }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--hdr-link-hover); }
.badge-made-to-order, .badge-in-stock, .badge-status-success { color: var(--cns-link); }
.trust-badge { color: #07614c; }
.hero .trust-badge { color: #e6efe6; }
.nav-search input::placeholder { color: rgba(230, 239, 230, 0.72); }
.site-footer .footer-signup-row input::placeholder { color: rgba(230, 239, 230, 0.7); }

/* Sold-out cards: grey the photo only; text stays fully readable. */
.product-card.is-sold-out .product-card-body { opacity: 1; }

/* Logo wordmark: solid colour (only shows when no logo image is set). */
.brand { background: none; -webkit-text-fill-color: currentColor; color: var(--hdr-text); }

/* Store notes: tinted note instead of a thick left stripe. */
.store-notes { border-left: 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(21, 128, 61, 0.07); }
.badge-sale, .price-sale { color: #a82626; }