/* ============================================================
   KopjeK — Webshop design system
   Underground electronic music collective · Groningen
   Dark-mode first · editorial · analog/grain
   Tokens + components ported from the KopjeK Design System
   handoff bundle (colors_and_type.css + ui_kits/website/kit.css)
   and adapted for the Lunar storefront (Blade + Livewire).
   This file is self-contained and loads on top of the Tailwind
   build (public/css/app.css) — it overrides the storefront chrome.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Inter+Tight:ital,wght@0,300..800;1,300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ---------- Core ink & paper ---------- */
  --ink:        #0B0B0C;
  --ink-2:      #121214;
  --ink-3:      #1A1A1D;
  --ink-4:      #242427;
  --fg:         #F2EFE9;
  --fg-2:       #A6A39C;
  --fg-3:       #6C6A65;

  /* ---------- Hairlines & overlays ---------- */
  --line:        rgba(242, 239, 233, 0.12);
  --line-soft:   rgba(242, 239, 233, 0.06);
  --line-strong: rgba(242, 239, 233, 0.24);
  --scrim:       rgba(11, 11, 12, 0.72);

  /* ---------- Signal accents ---------- */
  --acid:     #FFD400;
  --acid-dim: #CCAA00;
  --magenta:  #FF2E92;
  --ember:    #FF5A1F;

  /* ---------- Semantic ---------- */
  --bg:         var(--ink);
  --surface:    var(--ink-2);
  --surface-up: var(--ink-3);
  --text:       var(--fg);
  --text-muted: var(--fg-2);
  --border:     var(--line);
  --accent:     var(--acid);
  --on-accent:  #0B0B0C;

  /* ---------- Type families ---------- */
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --display-stretch: 125%;
  --display-weight:  800;

  /* ---------- Radii ---------- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 8px 30px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(255,212,0,0.5), 0 0 28px rgba(255,212,0,0.18);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms; --dur: 320ms; --dur-slow: 640ms;
}

/* ============================================================
   BASE — turn the Lunar storefront dark
   ============================================================ */
html, body { margin: 0; }
body.kk {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.kk ::selection { background: var(--acid); color: #0B0B0C; }
body.kk a { text-decoration: none; color: inherit; }
body.kk img { display: block; }
body.kk main { min-height: 60vh; }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.kk-display {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-stretch: var(--display-stretch); font-size: clamp(3.5rem, 11vw, 11rem);
  line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fg);
}
.kk-h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem); line-height: 0.95; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--fg); margin: 0;
}
.kk-h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--fg); margin: 0;
}
.kk-lead { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.05rem,1.6vw,1.375rem); line-height: 1.5; color: var(--fg); }
.kk-p { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.kk-mono, .kk-meta {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-2);
}
.kk-kicker {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-3);
}
.kk-signal { color: var(--acid); }

.kk-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px){ .kk-wrap { padding: 0 20px; } }

/* section label */
.kk-sectlabel { display:flex; align-items:center; gap:12px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); margin-bottom:28px; }
.kk-sectlabel::before { content:''; width:28px; height:1px; background:var(--acid); }

/* ============================================================
   FILM GRAIN + REVEAL
   ============================================================ */
.kk-grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity:.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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; animation: kkgrain .6s steps(2) infinite;
}
@keyframes kkgrain { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }
.kk-reveal { opacity: 1; animation: kkreveal .7s var(--ease) var(--kk-rv-delay, 0ms) both; }
@keyframes kkreveal { from { transform: translateY(var(--kk-rv-y, 22px)); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .kk-grain { animation: none } .kk-reveal { animation: none; transform: none; } }

/* ============================================================
   TAGS / DOT / BUTTONS
   ============================================================ */
.kk-tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; white-space:nowrap; color:var(--fg-2); }
.kk-tag.acid    { color:var(--acid);    border-color:rgba(255,212,0,.4); }
.kk-tag.magenta { color:var(--magenta); border-color:rgba(255,46,146,.4); }
.kk-tag.ember   { color:var(--ember);   border-color:rgba(255,90,31,.4); }
.kk-dot { width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor; animation:kkpulse 1.6s var(--ease-inout) infinite; }
@keyframes kkpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.kk-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 24px; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--fg); transition:all var(--dur) var(--ease); text-align:center; }
.kk-btn:active { transform:scale(.98); }
.kk-btn-acid { background:var(--acid); color:#0B0B0C; border-color:var(--acid); font-weight:700; }
.kk-btn-acid:hover { background:#ffe14d; box-shadow:0 0 28px rgba(255,212,0,.25); }
.kk-btn-acid:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.kk-btn-outline:hover { background:var(--ink-4); }
.kk-btn-ghost { border-color:transparent; padding-left:0; color:var(--fg-2); }
.kk-btn-ghost:hover { color:var(--fg); }
.kk-btn-block { width:100%; }

/* Specificity guard: anchors/spans used as buttons must not inherit the
   generic `body.kk a { color: inherit }` rule. These selectors (0,2,0)
   out-specify it (0,1,2) so acid buttons keep dark, readable text. */
body.kk .kk-btn { color:var(--fg); }
body.kk a.kk-btn-acid, body.kk .kk-btn-acid { color:#0B0B0C; }
body.kk a.kk-btn-ghost, body.kk .kk-btn-ghost { color:var(--fg-2); }
body.kk a.kk-btn-ghost:hover, body.kk .kk-btn-ghost:hover { color:var(--fg); }

/* ============================================================
   FLOATING NAV
   ============================================================ */
.kk-nav { position:fixed; top:18px; left:0; right:0; z-index:8000; display:flex; justify-content:center;
  padding:0 16px; }
.kk-nav-inner { display:flex; align-items:center; gap:24px; padding:11px 12px 11px 24px;
  background:rgba(18,18,20,.55); backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-2); max-width:100%; }
.kk-nav-logo { height:15px; width:auto; cursor:pointer; display:block; }
.kk-nav-links { display:flex; gap:22px; align-items:center; }
.kk-nav-links a { font-family:var(--font-mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--fg-2); cursor:pointer; transition:color var(--dur-fast); position:relative; }
.kk-nav-links a:hover, .kk-nav-links a.on { color:var(--fg); }
.kk-nav-links a.on::after { content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--acid); }
.kk-nav-actions { display:flex; align-items:center; gap:6px; }
.kk-nav-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:999px; color:var(--fg-2);
  cursor:pointer; transition:color var(--dur-fast), background var(--dur-fast); position:relative; background:transparent; border:none; }
.kk-nav-icon:hover { color:var(--fg); background:var(--ink-4); }
.kk-nav-count { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--acid); color:#0B0B0C; font-family:var(--font-mono); font-weight:700; font-size:9px;
  display:grid; place-items:center; line-height:1; }
.kk-nav-tix { font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; background:var(--acid); color:#0B0B0C; padding:9px 17px; border-radius:999px; cursor:pointer;
  transition:background var(--dur-fast); border:none; }
.kk-nav-tix:hover { background:#ffe14d; }
.kk-burger { display:none; place-items:center; width:38px; height:38px; color:var(--fg); cursor:pointer; background:none; border:none; }
@media (max-width: 860px){
  .kk-nav-links { display:none; }
  .kk-burger { display:grid; }
}

/* mobile menu sheet */
.kk-mobilemenu { position:fixed; inset:0; z-index:8500; background:rgba(11,11,12,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; flex-direction:column;
  padding:96px 28px 40px; gap:6px; }
.kk-mobilemenu a { font-family:var(--font-display); font-weight:800; font-stretch:112%; text-transform:uppercase;
  font-size:2rem; line-height:1.1; color:var(--fg); letter-spacing:-.01em; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.kk-mobilemenu .close { position:absolute; top:26px; right:26px; color:var(--fg); cursor:pointer; background:none; border:none; }

/* ============================================================
   SHOP HERO
   ============================================================ */
.kk-shop-hero { padding:150px 0 60px; }
.kk-shop-hero h1 { font-family:var(--font-display); font-weight:800; font-stretch:125%; text-transform:uppercase;
  font-size:clamp(3rem,9vw,7rem); line-height:.84; letter-spacing:-.025em; margin:0; color:var(--fg); }
.kk-shop-hero p { color:var(--fg-2); max-width:40ch; margin-top:22px; line-height:1.6; }

/* full-bleed image hero (home / collection banner) */
.kk-hero { position:relative; min-height:78svh; display:flex; align-items:flex-end; overflow:hidden; }
.kk-hero-bg { position:absolute; inset:0; }
.kk-hero-bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.05);
  animation:kkdrift 18s var(--ease-inout) infinite alternate; filter:saturate(1.05) contrast(1.05); }
@keyframes kkdrift { from{transform:scale(1.05) translateY(0)} to{transform:scale(1.12) translateY(-2%)} }
.kk-hero-scrim { position:absolute; inset:0; background:
  linear-gradient(to top, rgba(11,11,12,.96) 0%, rgba(11,11,12,.35) 45%, rgba(11,11,12,.55) 100%); }
.kk-hero-content { position:relative; padding-bottom:64px; width:100%; }
.kk-hero h1 { font-family:var(--font-display); font-weight:800; font-stretch:125%;
  text-transform:uppercase; line-height:.82; letter-spacing:-.025em; margin:0; color:var(--fg);
  font-size:clamp(3.5rem, 14vw, 13rem); }
.kk-hero-sub { font-family:var(--font-body); font-size:clamp(1.1rem,2vw,1.6rem); color:var(--fg);
  margin:18px 0 30px; max-width:34ch; line-height:1.35; }
.kk-hero-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ============================================================
   PRODUCT GRID / LOOKBOOK CARD
   ============================================================ */
.kk-shop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:120px; }
@media (max-width:980px){ .kk-shop-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .kk-shop-grid{ grid-template-columns:1fr } }
.kk-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .kk-grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .kk-grid-3{ grid-template-columns:1fr } }

.kk-filterbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:-24px 0 32px; }
.kk-filterbar input,
.kk-filterbar select { width:100%; min-height:42px; border:1px solid var(--line); border-radius:8px;
  background:var(--ink-2); color:var(--fg); padding:0 12px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.kk-filterbar input::placeholder { color:var(--fg-3); }
.kk-filterbar input:focus,
.kk-filterbar select:focus { outline:none; border-color:rgba(255,212,0,.55); box-shadow:0 0 0 1px rgba(255,212,0,.18); }
@media (max-width:980px){ .kk-filterbar{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .kk-filterbar{ grid-template-columns:1fr; } }

.kk-prod { cursor:pointer; display:block; }
.kk-prod-ph { position:relative; aspect-ratio:3/3.7; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2); margin-bottom:16px; }
.kk-prod-ph img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); filter:contrast(1.03); }
.kk-prod:hover .kk-prod-ph img { transform:scale(1.05); }
.kk-prod-ph .kk-prod-empty { width:100%; height:100%; display:grid; place-items:center; color:var(--fg-3);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.kk-prod-tag { position:absolute; top:14px; left:14px; }
.kk-prod-add { position:absolute; left:14px; right:14px; bottom:14px; opacity:0; transform:translateY(8px);
  transition:all var(--dur) var(--ease); }
.kk-prod:hover .kk-prod-add { opacity:1; transform:none; }
.kk-prod-name { font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--fg); }
.kk-prod-line { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-top:5px; }
.kk-prod-price { font-family:var(--font-mono); font-size:13px; color:var(--fg); margin-top:8px; }

/* ============================================================
   SECTION FRAME / GENERIC PAGE TOP
   ============================================================ */
.kk-sect { padding:96px 0; }
.kk-sect-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.kk-pagetop { padding-top:120px; }
.kk-divider { border:0; border-top:1px solid var(--line); margin:0; }

/* ============================================================
   STATS BAND
   ============================================================ */
.kk-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kk-stat { padding:48px 24px; border-left:1px solid var(--line); }
.kk-stat:first-child { border-left:none; }
.kk-stat .n { font-family:var(--font-display); font-weight:800; font-stretch:112%; font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:.9; letter-spacing:-.02em; color:var(--fg); }
.kk-stat .l { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); margin-top:12px; }
@media (max-width:720px){ .kk-stats{ grid-template-columns:repeat(2,1fr) }
  .kk-stat:nth-child(3){border-left:none} .kk-stat:nth-child(3),.kk-stat:nth-child(4){border-top:1px solid var(--line)} }

/* ============================================================
   FORM ELEMENTS (inputs / selects on dark)
   ============================================================ */
.kk-input, body.kk input[type="text"], body.kk input[type="email"], body.kk input[type="search"],
body.kk input[type="number"], body.kk input[type="tel"], body.kk select, body.kk textarea {
  background:var(--ink-3); border:1px solid var(--line); color:var(--fg); font-family:var(--font-body);
  font-size:15px; padding:14px 16px; border-radius:8px; outline:none; transition:box-shadow var(--dur-fast), border-color var(--dur-fast); width:100%;
}
body.kk input::placeholder, body.kk textarea::placeholder { color:var(--fg-3); }
.kk-input:focus, body.kk input:focus, body.kk select:focus, body.kk textarea:focus { box-shadow:var(--shadow-glow); border-color:transparent; }
.kk-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); display:block; margin-bottom:8px; }

/* option pill buttons (product variants) */
.kk-optbtn { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 18px; border:1px solid var(--line); border-radius:8px; background:var(--ink-2); color:var(--fg-2);
  cursor:pointer; transition:all var(--dur-fast); }
.kk-optbtn:hover { background:var(--ink-4); color:var(--fg); }
.kk-optbtn.on { background:var(--acid); border-color:var(--acid); color:#0B0B0C; font-weight:700; }

/* ============================================================
   SEARCH (nav)
   ============================================================ */
.kk-search { position:relative; }
.kk-search input { background:var(--ink-3); border:1px solid var(--line); color:var(--fg); font-family:var(--font-body);
  font-size:13px; padding:9px 14px 9px 34px; border-radius:999px; outline:none; width:100%; }
.kk-search input:focus { box-shadow:var(--shadow-glow); border-color:transparent; }
.kk-search button { position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--fg-3); background:none; border:none; cursor:pointer; display:grid; }

/* ============================================================
   CART PANEL
   ============================================================ */
.kk-panel { background:var(--ink-2); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2); }
.kk-cart-panel { position:absolute; top:auto; z-index:8600; width:min(92vw, 400px); right:0; margin-top:14px; padding:24px; }
.kk-cart-line { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.kk-cart-line img { width:64px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--line); flex:none; }
.kk-cart-title { font-size:.9rem; font-weight:600; color:var(--fg); max-width:20ch; line-height:1.3; }
.kk-cart-sub { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); margin-top:4px; }
.kk-qty { width:60px; background:var(--ink-3); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:6px 8px; font-size:12px; font-family:var(--font-mono); }
.kk-iconbtn { color:var(--fg-3); background:none; border:none; cursor:pointer; padding:6px; border-radius:6px; transition:color var(--dur-fast), background var(--dur-fast); }
.kk-iconbtn:hover { color:var(--ember); background:var(--ink-4); }
.kk-cart-totals { display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:8px; border-top:1px solid var(--line); }
.kk-cart-totals dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2); }
.kk-cart-totals dd { font-family:var(--font-display); font-weight:800; font-size:1.6rem; letter-spacing:-.02em; color:var(--fg); margin:0; }
.kk-cart-page-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; padding-bottom:120px; }
.kk-cart-page-line { display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.kk-cart-page-line img { width:88px; height:112px; object-fit:cover; border-radius:8px; background:var(--ink-3); border:1px solid var(--line); }
.kk-cart-page-actions { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.kk-cart-page-actions form { display:flex; align-items:center; gap:10px; }
.kk-cart-summary { border:1px solid var(--line); border-radius:8px; background:var(--ink-2); padding:20px; align-self:start; display:flex; flex-direction:column; gap:14px; }
@media (max-width:860px){
  .kk-cart-page-grid{ grid-template-columns:1fr; }
  .kk-cart-page-line{ grid-template-columns:72px minmax(0,1fr); }
  .kk-cart-page-line img{ width:72px; height:92px; }
  .kk-cart-page-actions{ grid-column:1/-1; align-items:stretch; }
  .kk-cart-page-actions form{ justify-content:space-between; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.kk-footer { border-top:1px solid var(--line); padding:64px 0 40px; margin-top:64px; }
.kk-footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:56px; }
.kk-footer-logo { height:26px; width:auto; }
.kk-footer-cols { display:flex; gap:64px; flex-wrap:wrap; }
.kk-footer-col h4 { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin:0 0 16px; }
.kk-footer-col a { display:block; font-size:.92rem; color:var(--fg-2); margin-bottom:10px; line-height:1.35; transition:color var(--dur-fast); }
.kk-footer-col a:hover { color:var(--fg); }
.kk-footer-blurb { color:var(--fg-2); max-width:30ch; line-height:1.6; font-size:.92rem; margin:18px 0 0; }
.kk-footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3);
  border-top:1px solid var(--line-soft); padding-top:28px; }
.kk-footer-social { display:flex; gap:16px; color:var(--fg-2); }
.kk-footer-social a:hover { color:var(--acid); }

/* ---- privacy consent ---- */
.kk-consent {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9100;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:20px;
  align-items:center;
  width:min(640px, calc(100vw - 40px));
  padding:18px;
  background:rgba(18,18,20,.88);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow-2);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
.kk-consent-kicker {
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--acid);
}
.kk-consent-copy {
  margin:0;
  color:var(--fg-2);
  font-size:.92rem;
  line-height:1.45;
}
.kk-consent-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:720px){
  .kk-consent { grid-template-columns:1fr; right:12px; bottom:12px; width:calc(100vw - 24px); }
  .kk-consent-actions { justify-content:flex-start; }
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.kk-news { text-align:center; padding:120px 0; position:relative; }
.kk-news h2 { font-family:var(--font-display); font-weight:800; font-stretch:125%; text-transform:uppercase;
  font-size:clamp(2.8rem,9vw,7rem); line-height:.86; letter-spacing:-.025em; margin:0 0 18px; color:var(--fg); }
.kk-news p { color:var(--fg-2); max-width:42ch; margin:0 auto 34px; line-height:1.6; }
.kk-news-form { display:flex; flex-wrap:wrap; max-width:440px; margin:0 auto; }
.kk-news-form .cf-turnstile { flex-basis:100%; margin-top:12px; display:flex; justify-content:center; }
.kk-news-form input { flex:1; background:var(--ink-3); border:1px solid var(--line); border-right:none; color:var(--fg);
  font-family:var(--font-body); font-size:15px; padding:16px 18px; border-radius:8px 0 0 8px; outline:none; }
.kk-news-form input::placeholder{ color:var(--fg-3) }
.kk-news-form input:focus { box-shadow:var(--shadow-glow); border-color:transparent; }
.kk-news-form button { background:var(--acid); color:#0B0B0C; border:none; font-family:var(--font-mono); font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:0 24px; border-radius:0 8px 8px 0; cursor:pointer; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.kk-pdp-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .kk-pdp-grid{ grid-template-columns:1fr; gap:32px } }
.kk-pdp-main { border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); aspect-ratio:1/1; }
.kk-pdp-main img { width:100%; height:100%; object-fit:cover; }
.kk-pdp-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.kk-pdp-thumbs > div { border-radius:8px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1/1; background:var(--ink-2); }
.kk-pdp-thumbs img { width:100%; height:100%; object-fit:cover; }
.kk-pdp-title { font-family:var(--font-display); font-weight:800; font-stretch:112%; text-transform:uppercase;
  font-size:clamp(2rem,4vw,3.2rem); line-height:.92; letter-spacing:-.015em; color:var(--fg); margin:0; }
.kk-pdp-price { font-family:var(--font-display); font-weight:800; font-size:2rem; letter-spacing:-.02em; color:var(--fg); }
.kk-pdp-sku { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-top:8px; }
.kk-pdp-desc { color:var(--fg-2); line-height:1.7; margin-top:20px; }
.kk-pdp-desc p { margin:0 0 12px; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.kk-checkout-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .kk-checkout-grid{ grid-template-columns:1fr; gap:32px } }
.kk-summary { background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:26px; position:sticky; top:96px; }

/* alerts */
.kk-alert { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--ink-3); color:var(--fg-2); }
.kk-alert-error { border-color:rgba(255,90,31,.4); color:var(--ember); }
.kk-empty { color:var(--fg-3); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:28px 0; }

/* ============================================================
   CHECKOUT SCOPE — remap the partials' light Tailwind utilities
   to the KopjeK dark palette. Two-class selectors out-specify
   Tailwind's single-class utilities, so source order doesn't matter.
   ============================================================ */
.kk-checkout h3 { font-family:var(--font-display); font-weight:800; font-stretch:112%; text-transform:uppercase;
  letter-spacing:-.01em; color:var(--fg); }
.kk-checkout .bg-white { background:var(--ink-2) !important; }
.kk-checkout .bg-gray-50, .kk-checkout .hover\:bg-gray-50:hover, .kk-checkout .hover\:bg-gray-100:hover { background:var(--ink-4) !important; }
.kk-checkout .border-gray-100, .kk-checkout .border-gray-200 { border-color:var(--line) !important; }
.kk-checkout .divide-gray-100 > * { border-color:var(--line-soft) !important; }
.kk-checkout .bg-gray-100 { background:var(--line) !important; }
.kk-checkout .text-gray-500, .kk-checkout .text-gray-600, .kk-checkout .text-gray-700 { color:var(--fg-2) !important; }
.kk-checkout .font-medium { color:inherit; }
.kk-checkout .rounded-xl { border-radius:14px; }

/* form fields inside checkout */
.kk-checkout input[type="text"], .kk-checkout input[type="email"], .kk-checkout input[type="tel"],
.kk-checkout input[type="number"], .kk-checkout select {
  background:var(--ink-3) !important; border:1px solid var(--line) !important; color:var(--fg) !important; border-radius:8px; }
.kk-checkout input:focus, .kk-checkout select:focus { box-shadow:var(--shadow-glow); border-color:transparent !important; }
.kk-checkout .text-red-500, .kk-checkout .text-red-400, .kk-checkout .text-red-700 { color:var(--ember) !important; }

/* primary action buttons (blue) → acid */
.kk-checkout .bg-blue-600, .kk-checkout .bg-green-600 { background:var(--acid) !important; color:#0B0B0C !important; font-weight:700; border-radius:999px; }
.kk-checkout .bg-blue-600:hover, .kk-checkout .hover\:bg-blue-500:hover { background:#ffe14d !important; }
.kk-checkout .text-white { color:#0B0B0C; }
/* selected pills / radios */
.kk-checkout .peer-checked\:border-blue-500:is(.peer:checked ~ *),
.kk-checkout .border-green-600 { border-color:var(--acid) !important; }
.kk-checkout .bg-green-50, .kk-checkout .bg-blue-50 { background:var(--ink-3) !important; }
.kk-checkout .text-green-700, .kk-checkout .text-blue-700, .kk-checkout .text-blue-500, .kk-checkout .text-blue-800 { color:var(--acid) !important; }
.kk-checkout .border-blue-600 { border-color:var(--line-strong) !important; }
.kk-checkout .bg-orange-100 { background:rgba(255,90,31,.15) !important; }
.kk-checkout .text-orange-700 { color:var(--ember) !important; }
.kk-checkout hr { background:var(--line) !important; }