/* ============================================================
   LOHNR'S SHOP — DESIGN SYSTEM  ·  FINAL  ·  Stealth Greyscale
   Cinematic depth · engineered precision · restrained glow
   Pure CSS · no JS · respects reduced-motion
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --ease: cubic-bezier(.22,.7,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.18);
  --glow: rgba(255,255,255,.10);
  --stock: #3ddc84;               /* status dot — set to #fff for pure mono */
}

/* ---- 1. BASE · typography --------------------------------- */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
html{ scroll-behavior:smooth; }
body, button, input, select, textarea{
  font-family:'Inter','Open Sans',sans-serif !important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-0.006em;
}
h1,h2,h3{ letter-spacing:-0.025em; }
h1{ font-weight:800; }
h1,h2{
  background:linear-gradient(180deg,#fff 30%, rgba(255,255,255,.60));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
header{ font-variant-numeric:tabular-nums; }

/* ---- 2. BACKGROUND · glow + grain + vignette -------------- */
body{
  background:
    radial-gradient(1100px 560px at 50% -18%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(700px 700px at 100% 0%, rgba(255,255,255,.025), transparent 60%),
    #000 !important;
  background-attachment:fixed !important;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 80% at 50% 100%, transparent 60%, rgba(0,0,0,.5));
}
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.022; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 3. MOTION · scroll-in entrances (no JS) -------------- */
@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
@keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 8px var(--stock), 0 0 0 0 rgba(61,220,132,.28);} 50%{ box-shadow:0 0 10px var(--stock), 0 0 0 5px rgba(61,220,132,0);} }
@media (prefers-reduced-motion: no-preference){
  a.bg-card.group, h2[class*="border-l"]{
    animation:rise .9s var(--ease-out) both;
    animation-timeline:view();
    animation-range:entry 0% entry 46%;
  }
}

/* ---- 4. HEADER · glass hairline --------------------------- */
header.component{ position:relative; }
header.component::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---- 5. SECTION TITLE · tight glowing accent bar ---------- */
h2[class*="border-l-accent"]{
  display:inline-flex; align-items:center;
  width:fit-content;
  border-left:none !important;
  box-shadow:none !important;
  padding-left:1rem !important;
  letter-spacing:-0.01em;
  position:relative;
}
h2[class*="border-l-accent"]::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:1.05em; border-radius:3px;
  background:linear-gradient(180deg,#fff, rgba(255,255,255,.45));
  box-shadow:0 0 14px rgba(255,255,255,.55);
}

/* ---- 6. CARDS · unified hover system (products + category) - */
a.bg-card.group{
  overflow:hidden; will-change:transform;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5);
}
a.bg-card.group:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 26px 50px -20px rgba(0,0,0,.9),
    0 0 34px -14px var(--glow);
}
a.bg-card.group [class*="overflow-hidden"]{ position:relative; }
a.bg-card.group img{ transition:transform .6s var(--ease), filter .6s ease; }
a.bg-card.group:hover img{ transform:scale(1.05); filter:brightness(1.06); }
a.bg-card.group [class*="overflow-hidden"]::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  transform:translateX(-130%); transition:transform .9s var(--ease);
}
a.bg-card.group:hover [class*="overflow-hidden"]::after{ transform:translateX(130%); }
a.bg-card.group [class*="overflow-hidden"]::before{
  content:"VIEW →"; position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:1.5rem .9rem .8rem; text-align:center; pointer-events:none;
  font-size:.68rem; font-weight:700; letter-spacing:.22em; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.92), transparent);
  opacity:0; transform:translateY(10px);
  transition:opacity .32s ease, transform .42s var(--ease);
}
a.bg-card.group:hover [class*="overflow-hidden"]::before{ opacity:1; transform:none; }
a.bg-card.group h3{
  font-size:1.1rem; font-weight:800; letter-spacing:-0.02em;
  transition:text-shadow .3s ease, transform .3s var(--ease);
}
a.bg-card.group:hover h3{ transform:translateY(-1px); text-shadow:0 0 20px rgba(255,255,255,.3); }
a.bg-card.group p[class*="text-sm"]{
  display:inline-flex; align-items:center; gap:7px; font-weight:500;
  color:rgba(255,255,255,.5) !important;
}
a.bg-card.group p[class*="text-sm"]::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--stock); box-shadow:0 0 8px var(--stock);
  animation:pulse-dot 2.6s var(--ease) infinite;
}
a.bg-card.group .text-accent-500{
  font-size:1rem; font-weight:700; color:#fff !important; letter-spacing:-0.005em;
}

/* ---- 7. CAROUSEL arrows ----------------------------------- */
.splide__arrow{
  background:rgba(255,255,255,.05) !important; border:1px solid var(--line) !important;
  backdrop-filter:blur(6px); opacity:1 !important; transition:all .2s ease;
}
.splide__arrow:hover{ background:rgba(255,255,255,.12) !important; border-color:var(--line-strong) !important; transform:scale(1.06); }
.splide__arrow svg{ fill:#fff; }

/* ---- 8. PRODUCT BUY PANEL · variants · quantity ----------- */
[class*="bg-background/35"]{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; }
[class*="bg-background/35"] [class*="text-3xl"]{ font-weight:800; letter-spacing:-0.02em; }

/* variant row hover (unselected only) */
[class*="transition-colors"][class*="border-transparent"]{
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}
[class*="transition-colors"][class*="border-transparent"]:hover{
  border-color:rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.03) !important;
}
/* SELECTED variant only (scoped to the "!" prefix so it NEVER hits buttons) */
[class*="!border-accent-500"]{
  background:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 22px -10px rgba(255,255,255,.35) !important;
}
/* quantity stepper */
button[class*="size-["]{ transition:background-color .18s ease, transform .1s ease !important; }
button[class*="size-["]:active{ transform:scale(.9); }

/* ---- 9. BUTTONS · primary CTA (white, always readable) ---- */
button[class~="bg-accent-500"], a[class~="bg-accent-500"]{
  background:#fff !important;
  background-image:linear-gradient(180deg,#fff,#e6e6e6) !important;
  color:#141414 !important; border-color:#fff !important;
  font-weight:700; letter-spacing:-0.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.4);
  transition:transform .18s ease, box-shadow .22s var(--ease), filter .2s ease;
}
button[class~="bg-accent-500"]:hover, a[class~="bg-accent-500"]:hover{
  transform:translateY(-1px); filter:brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 28px -8px rgba(255,255,255,.4);
}
button[class~="bg-accent-500"]:active, a[class~="bg-accent-500"]:active{
  transform:translateY(0) scale(.99); filter:brightness(.96);
}
button[class~="bg-accent-500"]:disabled{
  background:rgba(255,255,255,.05) !important; background-image:none !important;
  color:rgba(255,255,255,.55) !important; border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important; transform:none !important;
}
button[class*="border-accent-500"][class*="text-accent-500"]:hover{
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 8px 24px -10px rgba(255,255,255,.3) !important;
  transform:translateY(-1px);
}
button, a[class*="border-white"]{ transition:background-color .22s ease, color .22s ease, border-color .22s ease, transform .18s ease; }

/* ---- 10. FORMS · inputs ----------------------------------- */
input[type="email"], input[type="text"], input[type="number"], input[type="password"], input[type="search"], textarea{
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
input[type="email"]:focus, input[type="text"]:focus, input[type="number"]:focus,
input[type="password"]:focus, textarea:focus{
  border-color:var(--line-strong) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06) !important;
  background:rgba(255,255,255,.05) !important; outline:none !important;
}
.choices__inner{ transition:border-color .2s ease, box-shadow .2s ease; }

/* ---- 11. FOOTER ------------------------------------------- */
footer{ position:relative; }
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---- 12. DETAILS · scrollbar · selection · focus ---------- */
::selection{ background:rgba(255,255,255,.18); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border:3px solid #000; border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); }
:focus-visible{ outline:1px solid rgba(255,255,255,.5); outline-offset:2px; border-radius:4px; }

header, main, footer, section{ position:relative; z-index:2; }