/* ============================================================
   SUNPEPT — Shared Design System
   Look: clean clinical aesthetic · steel blue #C7DCE9 · warm amber warnings.
   ============================================================ */


/* ---------- Tokens ---------- */
:root{
  /* ── Clinical CI · SunPept Rebrand ─────────────────────── */
  --navy:         #1C2E3A;                /* dark clinical navy */
  --steelblue:    #C7DCE9;                /* brand light blue (sticker CI) */

  /* Warning / attention — warm amber, complements steelblue */
  --warn:         oklch(0.880 0.058 70);  /* ≈ #E6CCAA */
  --warn-dk:      oklch(0.520 0.135 58);  /* ≈ #9A5E1E — text/icons */
  --warn-t:       oklch(0.975 0.022 72);  /* ≈ #FBF6EE — surface */

  /* backwards-compat aliases */
  --gold:         var(--steelblue);
  --gold-soft:    oklch(0.960 0.016 218);
  --gold-ink:     oklch(0.480 0.068 218);

  /* neutrals — cool clinical */
  --bg:           oklch(0.990 0.004 215);
  --surface:      #ffffff;
  --surface-2:    oklch(0.963 0.013 215);
  --line:         oklch(0.906 0.020 215);
  --line-2:       oklch(0.876 0.038 218); /* = #C7DCE9 */
  --ink:          oklch(0.200 0.024 220);
  --ink-2:        oklch(0.400 0.030 220);
  --ink-3:        oklch(0.580 0.025 220);

  /* subtle scene tokens (clinical remapped) */
  --sky-1:  oklch(0.950 0.012 215);
  --sky-2:  oklch(0.945 0.010 215);
  --sky-3:  oklch(0.960 0.008 215);
  --sun:    oklch(0.876 0.038 218);
  --ocean:  oklch(0.520 0.082 218);

  /* line accents — clinical muted */
  --pump:   oklch(0.500 0.085 218);
  --brain:  oklch(0.480 0.082 258);
  --health: oklch(0.520 0.080 178);
  --shred:  oklch(0.560 0.110 68);
  --glow:   oklch(0.540 0.085 350);

  --pump-t:   oklch(0.960 0.016 218);
  --brain-t:  oklch(0.958 0.016 258);
  --health-t: oklch(0.960 0.016 178);
  --shred-t:  oklch(0.975 0.022 68);
  --glow-t:   oklch(0.970 0.018 350);

  /* main accent = interactive steel blue */
  --acc:   #C7DCE9;
  --acc-t: oklch(0.950 0.022 218);

  --radius:    16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px oklch(0.25 0.02 218 / .06), 0 2px 8px oklch(0.25 0.02 218 / .05);
  --shadow:    0 4px 14px oklch(0.25 0.02 218 / .08), 0 18px 40px oklch(0.25 0.02 218 / .06);
  --shadow-lg: 0 12px 28px oklch(0.25 0.02 218 / .10), 0 40px 80px oklch(0.25 0.02 218 / .09);
  --maxw: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* line scoping helper: set --acc/--acc-t per line */
[data-line="pump"]  { --acc: var(--pump);  --acc-t: var(--pump-t); }
[data-line="brain"] { --acc: var(--brain); --acc-t: var(--brain-t); }
[data-line="health"]{ --acc: var(--health);--acc-t: var(--health-t); }
[data-line="shred"] { --acc: var(--shred); --acc-t: var(--shred-t); }
[data-line="glow"]  { --acc: var(--glow);  --acc-t: var(--glow-t); }

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ margin:0; line-height:1.05; letter-spacing:-0.02em; font-weight:800; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.mono{ font-family:'Space Mono',monospace; }
.surf{ font-family:'Lilita One',system-ui,sans-serif; font-weight:400; letter-spacing:.01em; }

/* eyebrow / kicker */
.kicker{
  font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{ content:""; width:22px; height:2px; background:var(--gold); border-radius:2px; }

.section{ padding:96px 0; }
.section-head{ max-width:680px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); margin:16px 0 0; }
.section-head p{ color:var(--ink-2); font-size:18px; margin-top:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:13px 22px; border-radius:999px; font-weight:700; font-size:15px;
  letter-spacing:-0.01em; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
  white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-acc{ background:var(--acc); color:var(--navy); box-shadow:var(--shadow-sm); }
.btn-acc:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-navy{ background:var(--navy); color:#fff; box-shadow:var(--shadow-sm); }
.btn-navy:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-lg{ padding:16px 30px; font-size:16px; }
.btn-block{ width:100%; }

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:.5em; font-family:'Space Mono',monospace;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; border:1.5px solid var(--line-2); color:var(--ink-2);
  background:var(--surface);
}
.badge-ruo{ color:var(--warn-dk); border-color:var(--warn); background:var(--warn-t); }
.badge-line{
  color:var(--navy); border:none; background:var(--acc);
  padding:6px 14px;
}
.dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); display:inline-block; }
.dot-ok{ background:oklch(0.62 0.15 150); }

/* ---------- Top utility bar ---------- */
.utility{
  background:var(--navy); color:oklch(0.82 0.02 218);
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.04em;
}
.utility .wrap{ display:flex; justify-content:space-between; align-items:center; min-height:38px; gap:18px; }
.utility .u-left{ display:flex; gap:22px; flex-wrap:wrap; }
.utility .u-left span{ display:inline-flex; align-items:center; gap:.5em; }
.utility .u-right{ color:oklch(0.78 0.03 218); white-space:nowrap; }
.utility svg{ width:14px; height:14px; opacity:.7; }

/* ---------- Header ---------- */
.header{ position:sticky; top:0; z-index:60; background:oklch(0.985 0.006 215 / .92); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); }
.header .wrap{ display:flex; align-items:center; gap:28px; min-height:74px; }
.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo img.mark{ width:30px; height:auto; }
.logo img.word{ height:19px; width:auto; }
.nav{ display:flex; align-items:center; gap:4px; }
.nav > a, .nav > .has-menu > button{
  display:inline-flex; align-items:center; gap:.4em; padding:9px 14px; border-radius:10px;
  font-weight:600; font-size:15px; color:var(--ink-2); transition:color .15s, background .15s;
}
.nav > a:hover, .nav > .has-menu > button:hover{ color:var(--ink); background:var(--surface-2); }
.nav .chev{ width:14px; height:14px; transition:transform .2s; }
.has-menu{ position:relative; }
.has-menu:hover .chev{ transform:rotate(180deg); }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.icon-btn{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:var(--ink-2); transition:background .15s, color .15s; position:relative; }
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.icon-btn svg{ width:21px; height:21px; }
.cart-count{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--acc); color:var(--navy); font-family:'Space Mono',monospace; font-size:10px; font-weight:700; display:grid; place-items:center; }
.hamburger{ display:none; }

/* ── Mega menu: Products ─────────────────────────────────── */
.megamenu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  width:900px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 22px 64px oklch(0.18 0.04 220 / .16), 0 4px 16px oklch(0.18 0.04 220 / .08);
  opacity:0; visibility:hidden; transition:opacity .2s ease .32s, transform .2s ease .32s, visibility 0s linear .52s;
  overflow:hidden; padding:0;
}
.has-menu:hover .megamenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity .18s ease 0s, transform .18s ease 0s, visibility 0s; }
/* invisible bridge over the 10px gap so hover survives mouse travel */
.megamenu::before{ content:''; position:absolute; top:-18px; left:-20px; right:-20px; height:18px; }
.has-menu > button{ position:relative; z-index:2; }
.mm-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.mm-bar-label{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.mm-bar-all{
  font-size:13px; font-weight:600; color:var(--navy);
  display:inline-flex; align-items:center; gap:5px;
  transition:gap .15s;
}
.mm-bar-all:hover{ gap:8px; }
.mm-cols{ display:grid; grid-template-columns:1fr 1fr 0.9fr; }
.mm-col{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px; }
.mm-col:first-child{ border-right:1px solid var(--line); }
.mm-col-head{ display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.mm-col-img-wrap{
  width:68px; height:68px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  overflow:hidden; flex-shrink:0;
  display:grid; place-items:center;
}
.mm-col-img{ width:60px; height:60px; object-fit:contain; }
.mm-col-title{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.mm-col-desc{
  font-family:'Space Mono',monospace; font-size:9.5px; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase; margin-top:5px;
}
.mm-list{ display:flex; flex-direction:column; gap:2px; }
.mm-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:9px;
  font-size:14px; font-weight:500; color:var(--ink-2);
  transition:background .13s, color .13s; text-decoration:none;
}
.mm-link:hover{ background:var(--surface-2); color:var(--ink); }
.mm-link-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--navy); opacity:.22; flex-shrink:0;
  transition:opacity .13s, transform .13s;
}
.mm-link:hover .mm-link-dot{ opacity:.75; transform:scale(1.3); }
.mm-col--cats{ border-left:1px solid var(--line); }
.mm-col-cats-head{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.mm-cat-list{ gap:4px; }
.mm-cat-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mm-link--soon{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:var(--ink-3); opacity:.55; cursor:default; font-size:14px; font-weight:500; }
.mm-soon-badge{ margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:2px 6px; color:var(--ink-3); font-family:'Space Mono',monospace; }
@media (max-width:900px){ .mm-cols{ grid-template-columns:1fr 1fr; } .mm-col--cats{ display:none; } .megamenu{ width:min(700px,90vw); } }
/* Mobile drawer sections */
.d-section{ margin-bottom:6px; }
.d-section-head{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding:10px 0 6px;
}
.d-divider{ height:1px; background:var(--line); margin:14px 0; }

/* ── Product Slider ──────────────────────────────────────── */
.ps-section{ overflow: visible; }
.ps-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:36px; }
.ps-head-copy h2{ font-size:clamp(22px,3.2vw,36px); margin-top:8px; }
.ps-controls{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; padding-top:4px; }
.ps-tabs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ps-tab{
  padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  transition:background .15s, color .15s, border-color .15s;
}
.ps-tab:hover{ background:var(--surface-2); color:var(--ink); }
.ps-tab.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ps-nav{ display:flex; align-items:center; gap:10px; }
.ps-prev, .ps-next{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.ps-prev svg, .ps-next svg{ width:18px; height:18px; }
.ps-prev:hover, .ps-next:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ps-prev:disabled, .ps-next:disabled{ opacity:.28; pointer-events:none; }
.ps-counter{ font-size:12px; color:var(--ink-3); min-width:60px; text-align:center; }
.ps-viewport{ overflow:hidden; }
.ps-track{
  display:flex; gap:24px;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.ps-card{ flex:0 0 calc((100% - 48px)/3); min-width:240px; }
.ps-progress-wrap{ height:3px; background:var(--line); border-radius:2px; margin:24px 0 18px; overflow:hidden; }
.ps-progress-bar{ height:100%; background:var(--navy); border-radius:2px; transition:width .42s cubic-bezier(.4,0,.2,1); width:100%; }
.ps-dots{ display:flex; justify-content:center; gap:6px; }
.ps-dot{
  width:6px; height:6px; border-radius:3px; border:none; cursor:pointer; padding:0;
  background:var(--line-2); transition:width .22s, background .22s;
}
.ps-dot.active{ width:20px; background:var(--navy); }
@media (max-width:959px){
  .ps-head{ flex-direction:column; align-items:flex-start; }
  .ps-controls{ align-items:flex-start; }
  .ps-tabs{ justify-content:flex-start; }
}
@media (max-width:600px){
  .ps-head-copy h2{ font-size:22px; }
}
/* ─────────────────────────────────────────────────────────── */

/* ---------- Sunset scene (hero / section backdrops) ---------- */
.sunset{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--surface) 55%, oklch(0.960 0.012 215) 100%);
}
.sunset::after{ /* film grain */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.sunset .ocean{ position:absolute; left:0; right:0; bottom:0; height:34%; z-index:-1;
  background:linear-gradient(180deg, oklch(0.876 0.038 218 / 0), oklch(0.876 0.038 218 / .18) 60%, oklch(0.876 0.038 218 / .30));
  -webkit-mask:linear-gradient(180deg,transparent,#000 40%); mask:linear-gradient(180deg,transparent,#000 40%);
}
.sunset .sun-glow{ position:absolute; left:50%; bottom:-12%; width:min(620px,90%); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, oklch(0.960 0.016 218 / .8) 0%, oklch(0.876 0.038 218 / .25) 35%, transparent 62%); z-index:-1; }
.sunset .mark-wm{ position:absolute; right:-3%; top:-12%; width:min(440px,46%); opacity:.10; z-index:-1; pointer-events:none; transform:rotate(-6deg); }
.sunset .shimmer{ position:absolute; left:0; right:0; bottom:0; height:30%; z-index:-1; opacity:.5;
  background:repeating-linear-gradient(180deg, oklch(0.876 0.038 218 / .25) 0 1px, transparent 1px 9px);
  -webkit-mask:linear-gradient(180deg,transparent,#000); mask:linear-gradient(180deg,transparent,#000); }

/* ---------- Vial render (photoreal glass vial w/ wraparound sticker) ---------- */
.vial{ --vw:128px; width:var(--vw); position:relative; display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 20px 18px oklch(0.28 0.09 268 /.24)); }
/* blue flip-off cap */
.vial__cap{ width:43%; height:calc(var(--vw)*.16); position:relative; z-index:4;
  border-radius:38% 38% 22% 22% / 58% 58% 42% 42%;
  background:linear-gradient(180deg, oklch(0.68 0.14 256) 0%, oklch(0.54 0.17 259) 48%, oklch(0.42 0.16 262) 100%);
  box-shadow:inset 0 2px 3px oklch(1 0 0/.6), inset 0 -4px 6px oklch(0.2 0.1 262/.55); }
.vial__cap::after{ content:""; position:absolute; left:24%; right:36%; top:14%; height:34%; border-radius:50%;
  background:oklch(1 0 0/.5); filter:blur(1.2px); }
/* aluminium crimp collar */
.vial__crimp{ width:50%; height:calc(var(--vw)*.2); position:relative; z-index:3; margin-top:calc(var(--vw)*-.055);
  border-radius:5px 5px 9px 9px; overflow:hidden;
  background:linear-gradient(180deg, oklch(0.62 0.12 257) 0%, oklch(0.47 0.15 261) 55%, oklch(0.39 0.14 262) 100%);
  box-shadow:inset 0 2px 2px oklch(1 0 0/.5), inset 0 -4px 6px oklch(0.15 0.08 262/.6); }
.vial__crimp::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, oklch(1 0 0/.18) 0 1px, transparent 1px 5px); }
/* glass body */
.vial__body{ width:100%; height:calc(var(--vw)*1.82); margin-top:calc(var(--vw)*-.045); position:relative; z-index:1;
  border-radius:18px 18px 15px 15px; overflow:hidden;
  background:linear-gradient(90deg,
    oklch(0.74 0.025 258/.6) 0%, oklch(0.97 0.012 255/.85) 24%, oklch(0.86 0.018 255/.5) 50%,
    oklch(0.99 0.006 255/.82) 73%, oklch(0.7 0.03 258/.62) 100%);
  box-shadow:inset 0 3px 6px oklch(1 0 0/.6), inset 0 -18px 28px oklch(0.55 0.05 260/.3), inset 0 0 0 1px oklch(1 0 0/.4); }
/* shoulder shading */
.vial__body::before{ content:""; position:absolute; top:0; left:0; right:0; height:18%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, oklch(0.6 0.05 260/.22), transparent); }
/* cylinder curvature + reflections over whole body incl. label */
.vial__body::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg,
    oklch(0.28 0.06 262/.4) 0%, transparent 15%, oklch(1 0 0/.22) 31%, transparent 47%,
    transparent 55%, oklch(1 0 0/.14) 69%, transparent 86%, oklch(0.28 0.06 262/.4) 100%); }
.vial__sticker{ position:absolute; left:0; right:0; top:25%; height:54%; width:100%; z-index:1;
  object-fit:cover; object-position:center;
  box-shadow:0 -1px 2px oklch(0.2 0.05 262/.18), 0 1px 0 oklch(1 0 0/.45); }
.vial--sm{ --vw:94px; }
.vial--lg{ --vw:182px; }
.vial--xs{ --vw:50px; }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .2s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }

/* line cards */
.lines-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:44px; }
.line-card{ position:relative; overflow:hidden; padding:26px 22px 24px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease); display:flex; flex-direction:column; min-height:300px; }
.line-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--acc); }
.line-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.line-card .lc-name{ font-family:'Lilita One',sans-serif; font-size:30px; line-height:.9; color:var(--navy); margin-top:14px; }
.line-card .lc-out{ font-weight:700; font-size:16px; margin-top:12px; }
.line-card .lc-aud{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; margin-top:6px; }
.line-card .lc-peps{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
.line-card .chip{ font-family:'Space Mono',monospace; font-size:11px; padding:4px 9px; border-radius:7px; background:var(--acc-t); color:oklch(from var(--acc) calc(l - .18) c h); font-weight:700; }
.line-card .lc-link{ margin-top:auto; padding-top:18px; font-weight:700; font-size:14px; color:var(--navy); display:inline-flex; align-items:center; gap:.4em; }
.line-card .lc-link svg{ width:16px; height:16px; transition:transform .2s; }
.line-card:hover .lc-link svg{ transform:translateX(4px); }

/* product cards */
.prod-card{ position:relative; padding:26px 22px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease); display:flex; flex-direction:column; align-items:center; text-align:center; }
.prod-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.prod-card .pc-line{ position:absolute; top:12px; left:12px; z-index:3; }
.prod-card .pc-stock{ position:absolute; top:12px; right:12px; z-index:3; font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.86); border:1px solid var(--line); padding:3px 8px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.prod-card .vial{ margin:18px 0 18px; }
.prod-card .pc-img{ width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; margin:16px 0 18px; padding:10px; background:#fff; border:1px solid var(--line); }
.prod-card .pc-img img{ width:100%; height:100%; object-fit:contain; transition:transform .4s var(--ease); }
.prod-card:hover .pc-img img{ transform:scale(1.04); }
.prod-card h3{ font-size:21px; }
.prod-card .pc-out{ color:var(--ink-2); font-size:13.5px; margin-top:5px; font-weight:600; }
.prod-card .pc-meta{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--ink-3); margin-top:10px; letter-spacing:.03em; }
.prod-card .pc-foot{ margin-top:18px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.prod-card .price{ font-weight:800; font-size:20px; }
.prod-card .price small{ font-family:'Space Mono',monospace; font-weight:400; font-size:11px; color:var(--ink-3); display:block; letter-spacing:.02em; }

/* trust band */
.trust-band{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.trust-item{ display:flex; flex-direction:column; gap:10px; padding:24px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.trust-item .ti-ic{ width:40px; height:40px; border-radius:11px; background:var(--acc-t); color:oklch(from var(--acc) calc(l - .12) c h); display:grid; place-items:center; }
.trust-item .ti-ic svg{ width:21px; height:21px; }
.trust-item h4{ font-size:15px; }
.trust-item p{ font-size:13px; color:var(--ink-2); line-height:1.45; }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:oklch(0.78 0.02 218); margin-top:0; }
.footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:72px 0 56px; }
.footer .f-word{ height:20px; margin-bottom:18px; }
.footer .f-about{ font-size:14px; line-height:1.6; color:oklch(0.72 0.02 218); max-width:300px; }
.footer h5{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:oklch(0.65 0.03 218); margin:0 0 16px; }
.footer .f-links{ display:flex; flex-direction:column; gap:11px; font-size:14.5px; color:oklch(0.82 0.02 218); }
.footer-ruo{ border-top:1px solid oklch(0.28 0.03 218); padding:26px 0; font-family:'Space Mono',monospace; font-size:12px; color:oklch(0.68 0.03 218); line-height:1.7; }
.footer-bottom{ border-top:1px solid oklch(0.28 0.03 218); padding:22px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:oklch(0.62 0.02 218); }

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ background:var(--ink); color:#fff; padding:13px 20px; border-radius:14px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px; font-weight:600; font-size:14.5px; transform:translateY(20px); opacity:0; transition:transform .3s var(--ease), opacity .3s; }
.toast.show{ transform:translateY(0); opacity:1; }
.toast .t-ic{ width:24px; height:24px; border-radius:50%; background:var(--acc); display:grid; place-items:center; flex-shrink:0; }
.toast .t-ic svg{ width:15px; height:15px; color:#fff; }

/* ---------- Mobile drawer ---------- */
.drawer-scrim{ position:fixed; inset:0; background:oklch(0.18 0.02 218/.55); backdrop-filter:blur(3px); z-index:90; opacity:0; visibility:hidden; transition:opacity .25s; }
.drawer-scrim.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(360px,86vw); background:var(--surface); z-index:100; transform:translateX(100%); transition:transform .3s var(--ease); display:flex; flex-direction:column; padding:22px; overflow-y:auto; }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.drawer-head img{ height:18px; }
.drawer-nav{ display:flex; flex-direction:column; margin-top:14px; }
.drawer-nav a{ padding:15px 6px; font-size:18px; font-weight:700; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.drawer-nav .d-line{ display:flex; align-items:center; gap:10px; }
.drawer-nav .d-line .dl-swatch{ width:10px; height:10px; border-radius:3px; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.breadcrumb{ padding:22px 0 4px; font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.03em; color:var(--ink-3); display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--navy); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .cur{ color:var(--ink-2); }

.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:26px 0 80px; align-items:start; }

/* gallery */
.pdp-gallery{ position:sticky; top:96px; }
.gallery-main{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:520px; display:grid; }
.gallery-main .g-view{ grid-area:1/1; display:flex; align-items:center; justify-content:center; padding:40px; }
.gallery-main .g-view[data-view="product"]{ background:
    radial-gradient(120% 90% at 50% 18%, #ffffff 0%, oklch(0.968 0.012 215) 55%, oklch(0.950 0.020 215) 100%); position:relative; overflow:hidden; }
.gallery-main .g-view[data-view="product"]::after{ content:""; position:absolute; left:14%; right:14%; bottom:11%; height:34px; border-radius:50%; background:radial-gradient(ellipse, oklch(0.5 0.06 262/.22), transparent 70%); filter:blur(3px); }
.gallery-main .g-view[data-view="product"] .mark-wm{ position:absolute; right:-8%; bottom:-10%; width:48%; opacity:.07; transform:rotate(-8deg); }
.gallery-main .g-view[data-view="coa"]{ background:var(--surface-2); flex-direction:column; gap:18px; padding:54px; }
.gallery-main .g-view[data-view="specs"]{ background:var(--ink); flex-direction:column; gap:0; padding:0; align-items:stretch; }
.g-ruo-tag{ position:absolute; top:18px; left:18px; }
.coa-doc{ width:300px; max-width:100%; background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:30px; border:1px solid var(--line); }
.coa-doc .cd-top{ display:flex; justify-content:space-between; align-items:start; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:14px; }
.coa-doc h4{ font-size:16px; } .coa-doc .cd-top p{ font-family:'Space Mono',monospace; font-size:10px; color:var(--ink-3); margin-top:4px; }
.coa-doc .cd-row{ display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:11.5px; padding:7px 0; border-bottom:1px dotted var(--line-2); }
.coa-doc .cd-row span:last-child{ font-weight:700; }
.coa-doc .cd-chart{ height:70px; margin-top:14px; background:linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/22px 100%, linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 22px; position:relative; border-left:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); }
.coa-doc .cd-chart::after{ content:""; position:absolute; left:62%; bottom:0; width:4px; height:90%; background:var(--acc); border-radius:2px 2px 0 0; }
.gallery-thumbs{ display:flex; gap:12px; margin-top:14px; }
.g-thumb{ width:84px; height:84px; border-radius:14px; border:2px solid var(--line); overflow:hidden; cursor:pointer; display:grid; place-items:center; transition:border-color .18s, transform .18s; background:var(--surface-2); position:relative; }
.g-thumb:hover{ transform:translateY(-2px); }
.g-thumb.active{ border-color:var(--navy); }
.g-thumb .gt-cap{ position:absolute; bottom:0; left:0; right:0; font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; text-align:center; background:oklch(0.2 0.02 280/.7); color:#fff; padding:2px; }
.g-thumb[data-target="product"]{ background:linear-gradient(180deg,var(--sky-1),var(--sky-3)); }
.g-thumb[data-target="specs"]{ background:var(--ink); color:#fff; }

/* info column */
.pdp-info .pi-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pdp-info h1{ font-size:clamp(38px,5vw,56px); margin:18px 0 0; }
.pdp-info .pi-sub{ font-size:19px; color:var(--ink-2); margin-top:12px; font-weight:600; max-width:46ch; }
.pi-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.pi-stat{ flex:1; min-width:120px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.pi-stat .s-lab{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.pi-stat .s-val{ font-weight:800; font-size:20px; margin-top:4px; display:flex; align-items:center; gap:7px; }
.pi-purity{ color:var(--navy); }

.pi-buy{ margin-top:26px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.variant-group{ display:flex; gap:10px; margin-bottom:18px; }
.variant{ flex:1; padding:13px 12px; border:1.5px solid var(--line-2); border-radius:13px; background:var(--surface); cursor:pointer; text-align:center; transition:border-color .15s, background .15s; }
.variant:hover{ border-color:var(--navy); }
.variant.sel{ border-color:var(--acc); background:var(--acc-t); }
.variant .v-size{ font-weight:800; font-size:16px; }
.variant .v-price{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-2); margin-top:3px; }
.buy-row{ display:flex; gap:12px; align-items:stretch; }
.qty{ display:flex; align-items:center; border:1.5px solid var(--line-2); border-radius:13px; overflow:hidden; }
.qty button{ width:46px; align-self:stretch; font-size:20px; color:var(--ink-2); transition:background .15s; }
.qty button:hover{ background:var(--surface-2); color:var(--ink); }
.qty [data-qty-val]{ width:42px; text-align:center; font-weight:800; font-size:17px; }
.btn-acc.added{ background:var(--ink); color:#fff; }
.pi-price-big{ display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.pi-price-big .pb{ font-size:34px; font-weight:800; }
.pi-price-big .pu{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-3); }

.pi-trust{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.pi-trust a, .pi-trust div{ display:flex; gap:11px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--surface); font-size:13px; transition:border-color .15s; }
.pi-trust a:hover{ border-color:var(--navy); }
.pi-trust .pt-ic{ width:34px; height:34px; border-radius:9px; background:var(--acc-t); color:oklch(from var(--acc) calc(l - .14) c h); display:grid; place-items:center; flex-shrink:0; }
.pi-trust .pt-ic svg{ width:18px; height:18px; }
.pi-trust strong{ display:block; font-size:13.5px; } .pi-trust span{ color:var(--ink-3); font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.03em; }

.ruo-box{ margin-top:18px; padding:15px 18px; border-radius:13px; background:var(--warn-t); border:1px solid var(--warn); display:flex; gap:13px; align-items:flex-start; }
.ruo-box .rb-ic{ color:var(--warn-dk); flex-shrink:0; margin-top:1px; } .ruo-box .rb-ic svg{ width:20px; height:20px; }
.ruo-box p{ font-size:12.5px; line-height:1.5; color:var(--warn-dk); } .ruo-box strong{ font-family:'Space Mono',monospace; letter-spacing:.04em; }

/* research tabs */
.pdp-tabs{ border-top:1px solid var(--line); padding-top:56px; }
.tab-bar{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:36px; flex-wrap:wrap; }
.tab-bar button{ padding:13px 20px; font-weight:700; font-size:15px; color:var(--ink-3); border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; }
.tab-bar button:hover{ color:var(--ink); }
.tab-bar button.active{ color:var(--navy); border-color:var(--navy); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fade .4s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{opacity:1;transform:none;} }
.prose{ max-width:760px; }
.prose p{ color:var(--ink-2); font-size:16.5px; margin-bottom:18px; }
.prose h3{ font-size:23px; margin:34px 0 14px; }
.prose .src{ font-family:'Space Mono',monospace; font-size:13px; color:var(--ink-3); border-left:3px solid var(--acc); padding:6px 0 6px 16px; margin:22px 0; }
.prose .research-note{ background:var(--acc-t); border-radius:14px; padding:18px 22px; font-size:15px; margin:22px 0; }

.spec-table{ width:100%; border-collapse:collapse; max-width:760px; }
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table td{ padding:15px 0; font-size:15px; }
.spec-table td:first-child{ font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); width:42%; }
.spec-table td:last-child{ font-weight:700; }

/* FAQ */
.faq-wrap{ max-width:820px; }
.acc{ border:1px solid var(--line); border-radius:16px; margin-bottom:12px; overflow:hidden; background:var(--surface); transition:border-color .2s; }
.acc.open{ border-color:var(--acc); box-shadow:var(--shadow-sm); }
.acc-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 24px; text-align:left; font-weight:700; font-size:17px; }
.acc-head .acc-ic{ width:28px; height:28px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; position:relative; transition:background .2s, border-color .2s; }
.acc.open .acc-ic{ background:var(--acc); border-color:var(--acc); color:var(--navy); }
.acc-ic::before,.acc-ic::after{ content:""; position:absolute; background:var(--ink-2); border-radius:2px; transition:transform .2s, background .2s; }
.acc-ic::before{ width:12px; height:2px; } .acc-ic::after{ width:2px; height:12px; }
.acc.open .acc-ic::before,.acc.open .acc-ic::after{ background:#fff; } .acc.open .acc-ic::after{ transform:scaleY(0); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.acc-body p{ padding:0 24px 22px; color:var(--ink-2); font-size:15.5px; line-height:1.6; }

@media (max-width:920px){
  .pdp{ grid-template-columns:1fr; gap:30px; }
  .pdp-gallery{ position:static; }
  .gallery-main{ min-height:auto; }
  .gallery-main .g-view{ min-height:380px; }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */
.hero{ padding:72px 0 84px; }

/* full-bleed image hero */
.hero--img{ position:relative; padding:0; min-height:clamp(600px,78vh,820px); display:flex; align-items:center; overflow:hidden; background:var(--navy); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 50%; z-index:0; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, oklch(0.22 0.08 268/.92) 0%, oklch(0.25 0.09 266/.78) 26%, oklch(0.3 0.1 60/.32) 50%, transparent 68%); }
.hero-img-inner{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:56px 0; }
.hero--img .hero-copy{ max-width:560px; }
.hero--img .kicker{ color:var(--gold); }
.hero--img .kicker::before{ background:var(--gold); }
.hero--img .hero-copy h1{ color:#fff; text-shadow:0 2px 24px oklch(0.2 0.06 266/.6); }
.hero--img .hero-em{ color:var(--gold); -webkit-text-stroke:0; text-shadow:0 2px 20px oklch(0.5 0.16 80/.5); }
.hero--img .hero-sub{ color:oklch(0.94 0.02 80); text-shadow:0 1px 12px oklch(0.2 0.06 266/.6); max-width:46ch; }
.hero--img .hero-ghost{ background:oklch(1 0 0/.12); border-color:oklch(1 0 0/.55); color:#fff; backdrop-filter:blur(4px); }
.hero--img .hero-ghost:hover{ background:oklch(1 0 0/.2); border-color:#fff; }
.hero--img .hero-ruo .badge-ruo{ background:oklch(1 0 0/.92); }
.hero--img .hero-ruo-txt{ color:oklch(0.92 0.02 80); text-shadow:0 1px 8px oklch(0.2 0.06 266/.7); }
.hero--img .hero-chip{ position:static; flex-shrink:0; align-self:flex-end; margin-bottom:8px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero-copy h1{ font-size:clamp(26px,3.2vw,44px); line-height:.96; margin:22px 0 0; color:var(--ink); }
.hero-em{ color:var(--acc); -webkit-text-stroke:0; display:inline-block; }
.hero-sub{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); max-width:48ch; margin-top:24px; line-height:1.55; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-ruo{ display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-ruo .badge-ruo{ background:var(--warn-t); }
.hero-ruo-txt{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.02em; color:var(--ink-3); max-width:30ch; }
.hero-vials{ position:relative; display:flex; justify-content:center; align-items:flex-start; gap:8px; }
.hero-chip{ position:absolute; left:-6%; bottom:6%; background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:14px 18px; box-shadow:var(--shadow); text-align:center; }
.hero-chip .hc-big{ font-size:30px; font-weight:700; color:var(--ink); line-height:1; }
.hero-chip .hc-lab{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.04em; color:var(--ink-2); margin-top:6px; line-height:1.3; }

.linebar{ background:var(--navy); }
.linebar-inner{ display:flex; align-items:center; gap:28px; min-height:58px; flex-wrap:wrap; }
.linebar .lb-lead{ color:oklch(0.65 0.02 218); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.linebar a{ display:inline-flex; align-items:center; gap:9px; color:oklch(0.90 0.02 218); font-weight:700; font-size:15px; transition:color .15s; }
.linebar a:hover{ color:#fff; }
.linebar .lb-dot{ width:9px; height:9px; border-radius:3px; background:var(--acc); }

.lc-all{ background:linear-gradient(160deg, var(--surface-2), var(--acc-t)); border-style:dashed; align-items:center; justify-content:center; }
.lc-all::before{ display:none; }
.lc-all-inner{ text-align:center; }
.lc-all-num{ font-size:58px; color:var(--ink); line-height:1; }
.lc-all .lc-out{ margin-top:6px; }
.lc-all .lc-link{ justify-content:center; margin-top:16px; color:var(--ink); }

/* full-width line CTA banner */
.line-cta{ grid-column:1 / -1; margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:34px 40px; border-radius:var(--radius-lg); position:relative; overflow:hidden;
  background:linear-gradient(110deg, var(--navy) 0%, oklch(0.36 0.08 218) 55%, oklch(0.44 0.08 218) 100%);
  box-shadow:var(--shadow); transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.line-cta::after{ content:""; position:absolute; right:-6%; top:-40%; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, oklch(0.876 0.038 218/.4), transparent 65%); pointer-events:none; }
.line-cta:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.line-cta-text{ position:relative; z-index:1; }
.line-cta .lct-title{ font-size:30px; color:#fff; line-height:1; }
.line-cta-text p{ color:oklch(0.88 0.02 218); font-size:15.5px; margin-top:10px; max-width:60ch; line-height:1.5; }
.line-cta .btn{ position:relative; z-index:1; flex-shrink:0; }

.trust-sec{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-top{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:48px; }
.trust-top h2{ font-size:clamp(28px,3.4vw,42px); margin-top:14px; }
.trust-lead{ color:var(--ink-2); font-size:17px; line-height:1.6; }

.journal-sec{ color:var(--ink); }
.journal-sec .kicker{ color:var(--ink-2); }
.journal-sec .kicker::before{ background:var(--acc); }
.journal-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:42px; }
.journal-head h2{ font-size:clamp(30px,3.8vw,46px); margin-top:14px; }
.journal-head p{ color:var(--ink-2); font-size:17px; line-height:1.6; }
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.journal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-height:230px; transition:transform .2s var(--ease), box-shadow .2s; }
.journal-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.journal-card .jc-tag{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); font-weight:700; }
.journal-card h3{ font-size:20px; line-height:1.2; margin-top:14px; text-wrap:pretty; color:var(--ink); }
.journal-card .jc-read{ margin-top:auto; padding-top:18px; font-size:12.5px; color:var(--ink-2); }

/* ---------- Reviews ---------- */
.reviews-sec{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reviews-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:44px; flex-wrap:wrap; }
.reviews-head h2{ font-size:clamp(28px,3.6vw,42px); margin-top:14px; }
.rating-summary{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.rating-summary .rs-score{ font-size:46px; font-weight:800; color:var(--ink); line-height:1; }
.rating-summary .rs-meta{ font-size:13px; color:var(--ink-2); }
.stars{ display:inline-flex; gap:2px; color:oklch(0.72 0.14 68); }
.stars svg{ width:16px; height:16px; }
.rating-summary .stars svg{ width:18px; height:18px; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.review-card .rv-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.review-card .rv-line{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); font-weight:700; }
.review-card p{ font-size:15.5px; line-height:1.6; color:var(--ink); text-wrap:pretty; }
.review-card .rv-foot{ display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.review-card .rv-av{ width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:var(--acc); }
.review-card .rv-name{ font-weight:700; font-size:14.5px; }
.review-card .rv-verif{ font-family:'Space Mono',monospace; font-size:11px; color:oklch(0.55 0.12 150); display:flex; align-items:center; gap:5px; margin-top:2px; }
.review-card .rv-verif svg{ width:13px; height:13px; }

/* ---------- About ---------- */
.about-sec{ position:relative; overflow:hidden; }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.about-copy h2{ font-size:clamp(30px,3.8vw,46px); margin-top:16px; }
.about-copy .about-lead{ font-size:19px; color:var(--ink); margin-top:20px; line-height:1.55; font-weight:600; }
.about-copy p{ color:var(--ink-2); font-size:16.5px; margin-top:16px; line-height:1.6; }
.about-values{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.about-values .av{ display:flex; align-items:center; gap:9px; padding:10px 15px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-weight:700; font-size:14px; }
.about-values .av svg{ width:17px; height:17px; color:var(--navy); }
.about-visual{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.about-visual img{ width:100%; height:100%; object-fit:cover; }
.av-usps{ position:absolute; left:14px; right:14px; bottom:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.av-usp{ display:flex; align-items:center; gap:10px; padding:12px 13px; background:oklch(1 0 0/.10); backdrop-filter:blur(22px) saturate(1.8); -webkit-backdrop-filter:blur(22px) saturate(1.8); border:1px solid oklch(1 0 0/.28); border-radius:12px; box-shadow:0 4px 20px oklch(0 0 0/.14),inset 0 1px 0 oklch(1 0 0/.38); color:#fff; }
.av-usp-ico{ flex-shrink:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:oklch(1 0 0/.13); border:1px solid oklch(1 0 0/.22); border-radius:8px; }
.av-usp-ico svg{ width:15px; height:15px; }
.av-usp-txt{ display:flex; flex-direction:column; gap:1px; }
.av-usp-txt strong{ font-size:11.5px; font-weight:700; line-height:1.2; color:#fff; letter-spacing:-.01em; }
.av-usp-txt span{ font-size:9.5px; color:oklch(0.88 0.01 218); letter-spacing:.03em; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:34px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.about-stats .as{ background:var(--surface); padding:22px 18px; text-align:center; }
.about-stats .as-num{ font-size:30px; font-weight:800; color:var(--acc); line-height:1; }
.about-stats .as-num .surf{ color:var(--navy); }
.about-stats .as-lab{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }

/* ---------- FAQ (homepage) ---------- */
.faq-sec .faq-wrap{ max-width:880px; margin:44px auto 0; }
.faq-sec .section-head{ margin:0 auto; text-align:center; }
.faq-sec .section-head .kicker{ justify-content:center; }
.faq-foot{ text-align:center; margin-top:32px; font-size:15px; color:var(--ink-2); }
.faq-foot a{ color:var(--acc); font-weight:700; }

@media (max-width:1080px){
  .reviews-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:920px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .about-visual{ aspect-ratio:4/5; max-height:580px; }
  .av-usps{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:480px){
  .av-usps{ grid-template-columns:1fr; gap:6px; }
  .av-usp{ padding:10px 11px; }
}
@media (max-width:680px){
  .reviews-grid{ grid-template-columns:1fr; }
}

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-vials{ justify-content:flex-start; }
  .trust-top, .journal-head{ grid-template-columns:1fr; gap:18px; }
  .journal-grid{ grid-template-columns:1fr; }
  /* image hero: stack so vials stay visible above copy */
  .hero--img{ min-height:0; padding-bottom:0; }
  .hero-bg{ position:relative; height:auto; aspect-ratio:1672/941; object-position:center; }
  .hero-scrim{ background:linear-gradient(180deg, transparent 30%, oklch(0.2 0.07 267/.6) 62%, var(--navy) 100%); }
  .hero-img-inner{ position:absolute; inset:0; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:0 0 30px; }
  .hero--img .hero-chip{ align-self:flex-start; margin-top:18px; }
}
@media (max-width:600px){
  .hero--img{ background:var(--navy); }
  .hero-bg{ aspect-ratio:1/1; object-position:72% 30%; }
  .hero-scrim{ background:linear-gradient(180deg, transparent 22%, oklch(0.2 0.07 267/.72) 52%, var(--navy) 88%); }
  .hero--img h1{ font-size:clamp(38px,11vw,52px); }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .lines-grid{ grid-template-columns:repeat(3,1fr); }
    .trust-band{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .section{ padding:64px 0; }
  .nav, .header-actions .icon-btn.search-d{ display:none; }
  .hamburger{ display:grid; }
  .lines-grid{ grid-template-columns:1fr 1fr; }
    .trust-band{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .utility .u-left span:not(:first-child){ display:none; }
}
@media (max-width:760px){
  .line-cta{ flex-direction:column; align-items:flex-start; gap:20px; padding:28px 26px; }
  .line-cta .btn{ width:100%; }
}
@media (max-width:480px){
  .lines-grid{ grid-template-columns:1fr; }
  }

/* ============================================================
   PRODUCT GALLERY — real image view
   ============================================================ */
.gallery-main .g-view.g-img{ padding:0; background:none; }
.gallery-main .g-view.g-img img.g-photo{ width:100%; height:100%; object-fit:contain; }
.g-thumb.g-thumb-img{ overflow:hidden; padding:0; }
.g-thumb.g-thumb-img img{ width:100%; height:100%; object-fit:cover; }

/* product card as link */
a.prod-card{ color:inherit; }
a.prod-card .btn{ position:relative; z-index:2; }

/* about section CTA button */
.about-copy .about-cta{ margin-top:26px; }

/* ============================================================
   BLOG / JOURNAL
   ============================================================ */
.page-hero{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; right:-4%; top:-50%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, oklch(0.876 0.038 218/.3), transparent 65%); pointer-events:none; }
.page-hero .wrap{ position:relative; z-index:1; padding:60px 0 64px; }
.page-hero .kicker{ color:var(--steelblue); }
.page-hero .kicker::before{ background:var(--steelblue); }
.page-hero h1{ color:#fff; font-size:clamp(38px,5.4vw,64px); margin-top:18px; max-width:18ch; }
.page-hero p{ color:oklch(0.84 0.02 218); font-size:19px; margin-top:18px; max-width:60ch; line-height:1.55; }

.blog-cats{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 36px; }
.blog-cats button, .blog-cats a{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line-2); color:var(--ink-2); background:var(--surface); font-weight:700; transition:border-color .15s, color .15s, background .15s; }
.blog-cats .active, .blog-cats button:hover, .blog-cats a:hover{ border-color:var(--acc); color:#fff; background:var(--acc); }

.blog-featured{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:36px; background:var(--surface); transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.blog-featured:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.blog-featured .bf-img{ position:relative; min-height:360px; overflow:hidden; }
.blog-featured .bf-img img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.blog-featured .bf-body{ padding:40px; display:flex; flex-direction:column; }
.blog-featured .bf-cat{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); font-weight:700; }
.blog-featured h2{ font-size:clamp(26px,3vw,36px); margin-top:14px; text-wrap:pretty; }
.blog-featured p{ color:var(--ink-2); font-size:16px; margin-top:14px; line-height:1.6; }
.blog-featured .bf-meta{ margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:12px; font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink-3); }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.blog-card .bc-img{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.blog-card .bc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.blog-card:hover .bc-img img{ transform:scale(1.05); }
.blog-card .bc-cat{ position:absolute; top:14px; left:14px; }
.blog-card .bc-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.blog-card h3{ font-size:20px; line-height:1.22; text-wrap:pretty; }
.blog-card p{ color:var(--ink-2); font-size:14.5px; margin-top:10px; line-height:1.55; }
.blog-card .bc-meta{ margin-top:auto; padding-top:18px; font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-3); display:flex; gap:8px; align-items:center; }

/* ---- Article (single post) ---- */
.post-top{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.post-top .wrap{ padding:30px 0 0; }
.post-head{ max-width:820px; margin:0 auto; text-align:center; padding:18px 0 36px; }
.post-head .post-cat{ display:inline-block; }
.post-head h1{ font-size:clamp(32px,4.6vw,56px); margin-top:18px; text-wrap:balance; line-height:1.05; }
.post-head .post-dek{ font-size:20px; color:var(--ink-2); margin-top:18px; line-height:1.5; }
.post-meta{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; font-family:'Space Mono',monospace; font-size:13px; color:var(--ink-3); flex-wrap:wrap; }
.post-meta .pm-av{ width:38px; height:38px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; font-weight:800; font-family:'Manrope',sans-serif; font-size:14px; }
.post-meta .pm-sep{ width:4px; height:4px; border-radius:50%; background:var(--line-2); }
.post-cover{ max-width:1040px; margin:0 auto; padding:0 28px; transform:translateY(40px); }
.post-cover img{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.article{ max-width:740px; margin:0 auto; padding:80px 28px 20px; }
.article > p:first-of-type{ font-size:20px; line-height:1.6; color:var(--ink); }
.article p{ font-size:17.5px; line-height:1.72; color:var(--ink-2); margin-bottom:22px; }
.article h2{ font-size:28px; margin:42px 0 16px; letter-spacing:-0.02em; }
.article h3{ font-size:21px; margin:30px 0 12px; }
.article ul.art-list{ margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px; }
.article ul.art-list li{ position:relative; padding-left:30px; font-size:17px; color:var(--ink-2); line-height:1.6; }
.article ul.art-list li::before{ content:""; position:absolute; left:4px; top:10px; width:9px; height:9px; border-radius:3px; background:var(--acc); }
.article .pullquote{ border-left:4px solid var(--acc); background:var(--acc-t); border-radius:0 16px 16px 0; padding:22px 26px; margin:30px 0; font-size:19px; font-weight:600; color:var(--ink); line-height:1.5; }
.article .art-note{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:20px 24px; margin:28px 0; font-size:15.5px; color:var(--ink-2); }
.article .art-note strong{ color:var(--ink); }
.article .art-sources{ font-family:'Space Mono',monospace; font-size:13px; color:var(--ink-3); border-top:1px solid var(--line); margin-top:40px; padding-top:20px; line-height:1.7; }
.post-cta{ max-width:740px; margin:40px auto 0; padding:0 28px; }
.post-cta-inner{ display:flex; align-items:center; gap:24px; padding:26px 30px; border-radius:var(--radius-lg); background:linear-gradient(110deg, var(--navy), oklch(0.38 0.08 218)); color:#fff; position:relative; overflow:hidden; }
.post-cta-inner img{ width:96px; height:96px; border-radius:14px; object-fit:cover; flex-shrink:0; }
.post-cta-inner .pcc-t{ flex:1; }
.post-cta-inner .pcc-cat{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steelblue); font-weight:700; }
.post-cta-inner h4{ font-size:21px; margin-top:6px; }
.post-cta-inner p{ color:oklch(0.84 0.02 218); font-size:14px; margin-top:4px; }
.post-ruo{ max-width:740px; margin:34px auto 0; padding:0 28px; }
.post-ruo .pr-box{ display:flex; gap:13px; align-items:flex-start; background:var(--warn-t); border:1px solid var(--warn); border-radius:13px; padding:15px 18px; }
.post-ruo .pr-box svg{ width:20px; height:20px; color:var(--warn-dk); flex-shrink:0; margin-top:1px; }
.post-ruo .pr-box p{ font-size:12.5px; line-height:1.5; color:var(--warn-dk); }
.post-back{ max-width:740px; margin:0 auto; padding:40px 28px 0; }
.post-back a{ font-weight:700; color:var(--navy); display:inline-flex; align-items:center; gap:8px; }

@media (max-width:920px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured .bf-img{ min-height:240px; aspect-ratio:16/9; }
}
@media (max-width:680px){
  .blog-grid{ grid-template-columns:1fr; }
  .post-cover{ transform:translateY(28px); }
  .article{ padding-top:56px; }
  .post-cta-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ============================================================
   ADDITIONS — Journal Archive, Line Landing Pages, PDP extras
   ============================================================ */

/* Journal archive: filter bar */
.journal-filter{ display:flex; gap:8px; flex-wrap:wrap; padding:8px 0 24px; }
.jf-btn{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:8px 16px; border-radius:100px; border:1.5px solid var(--line); color:var(--ink-3); font-weight:700; transition:all .15s; white-space:nowrap; }
.jf-btn:hover{ border-color:var(--acc); color:var(--navy); }
.jf-btn.active{ background:var(--acc); border-color:var(--acc); color:#fff; }

/* Journal grid — full archive (solid cards, works on white bg) */
.journal-grid--full{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.journal-grid--full .journal-card{ background:var(--surface); border:1px solid var(--line); backdrop-filter:none; }

/* Journal card: excerpt & footer row */
.jc-excerpt{ font-size:14.5px; color:var(--ink-3); line-height:1.5; margin-top:10px; }
.jc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }

/* Trust grid wrapper (line landing page) */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-item strong{ display:block; font-size:14px; }
.trust-item p{ font-size:13px; color:var(--ink-2); margin-top:4px; }

/* WC add-to-cart button override */
.pi-buy .single_add_to_cart_button,
.pi-buy .woocommerce button.button.alt{ all:unset; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:16px 24px; border-radius:var(--radius-sm); background:var(--acc); color:#fff; font-weight:800; font-size:17px; font-family:'Manrope',sans-serif; cursor:pointer; transition:opacity .15s; box-sizing:border-box; margin-top:16px; }
.pi-buy .single_add_to_cart_button:hover,
.pi-buy .woocommerce button.button.alt:hover{ opacity:.9; }
.pi-buy .woocommerce-variation-add-to-cart,
.pi-buy form.cart{ margin:0; }
.pi-buy .qty.woocommerce{ width:70px; border:1px solid var(--line); border-radius:10px; padding:10px; font-size:16px; font-weight:700; text-align:center; }
.pi-buy .quantity .qty{ width:70px; border:1px solid var(--line); border-radius:10px; padding:10px; font-size:16px; font-weight:700; text-align:center; box-sizing:border-box; }

/* Page top (dark header for archive / single post) */
.page-top{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.page-top .wrap{ padding-top:28px; padding-bottom:28px; }
.page-top .post-head{ text-align:left; margin:0; }

/* Responsive additions */
@media (max-width:920px){
  .journal-grid--full{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .journal-grid--full{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .jf-btn{ font-size:11px; padding:7px 13px; }
}

/* ============================================================
   WooCommerce Variable Product — Variation Form Styles
   ============================================================ */

/* Attribute-Tabelle als Flex-Stack */
.pi-buy .variations {
	width: 100%;
	border-collapse: collapse;
	display: block;
	margin-bottom: 4px;
}
.pi-buy .variations tbody {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pi-buy .variations tr {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.pi-buy .variations .label {
	display: block;
}
.pi-buy .variations .label label {
	font-family: 'Space Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 700;
}
.pi-buy .variations .value {
	display: block;
}

/* Select als Button-ähnliches Element */
.pi-buy .variations select {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	font-family: 'Manrope', sans-serif;
	color: var(--ink);
	background: var(--surface);
	cursor: pointer;
	appearance: auto;
	transition: border-color .15s;
}
.pi-buy .variations select:focus {
	border-color: var(--acc);
	outline: none;
	box-shadow: 0 0 0 3px var(--acc-t);
}

/* Variation: Preis nach Auswahl */
.pi-buy .single_variation_wrap {
	margin-top: 16px;
}
.pi-buy .woocommerce-variation-price {
	min-height: 44px;
}
.pi-buy .woocommerce-variation-price .price {
	font-size: 30px;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.1;
}
.pi-buy .woocommerce-variation-price .price del {
	font-size: 18px;
	color: var(--ink-3);
	font-weight: 400;
}

/* Menge + Button in einer Reihe */
.pi-buy .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 14px;
}
.pi-buy .woocommerce-variation-add-to-cart .quantity {
	display: flex;
	align-items: center;
}
.pi-buy .woocommerce-variation-add-to-cart .qty {
	width: 72px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 13px 10px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: var(--ink);
	background: var(--surface);
}
.pi-buy .single_add_to_cart_button {
	flex: 1;
	padding: 15px 20px;
	border-radius: var(--radius-sm);
	background: var(--acc);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	font-family: 'Manrope', sans-serif;
	cursor: pointer;
	transition: opacity .15s;
	border: none;
	text-align: center;
}
.pi-buy .single_add_to_cart_button:hover {
	opacity: .9;
}
.pi-buy .single_add_to_cart_button.disabled,
.pi-buy .single_add_to_cart_button:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Reset-Link */
.pi-buy .reset_variations {
	display: block;
	margin-top: 10px;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	color: var(--ink-3);
	text-decoration: underline;
}
.pi-buy .reset_variations:hover {
	color: var(--acc);
}

/* Preisspanne auf Produktkarte & im pi-price-big-Bereich */
.pi-buy .pi-price-big .price ins,
.pi-buy .pi-price-big .price {
	font-size: 30px;
	font-weight: 800;
	text-decoration: none;
	color: var(--ink);
}
.pi-buy .pi-price-big .price .woocommerce-Price-currencySymbol {
	font-size: 18px;
}

/* Produktkarte: Preisspanne (von–bis) */
.prod-card .price ins {
	text-decoration: none;
}
.prod-card .price .from {
	font-size: 11px;
	color: var(--ink-3);
	font-family: 'Space Mono', monospace;
	display: block;
	margin-bottom: 2px;
}

/* ============================================================
   Hero — Canvas variant (white bg + animation)
   ============================================================ */
.hero--canvas {
	position: relative;
	padding: 0;
	min-height: clamp(600px, 78vh, 820px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #fff;
}
#hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}
.hero-canvas-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 56px 28px;
}
.hero--canvas .hero-copy   { max-width: 560px; }
.hero--canvas .kicker      { color: var(--navy); }
.hero--canvas .kicker::before { background: var(--acc); }
.hero--canvas .hero-chip   { position: static; flex-shrink: 0; align-self: flex-end; margin-bottom: 8px; }
.hero--canvas .hero-ghost  { background: transparent; border-color: var(--line); color: var(--ink); }
.hero--canvas .hero-ghost:hover { background: var(--surface-2); border-color: var(--ink-2); }
.hero--canvas .hero-ruo .badge-ruo { background: var(--warn-t); }
@media (max-width: 768px) {
	.hero--canvas          { min-height: 0; padding-bottom: 48px; }
	.hero-canvas-inner     { flex-direction: column; align-items: stretch; padding: 48px 20px 0; }
	.hero--canvas .hero-chip { align-self: flex-start; margin-top: 18px; }
}

/* ============================================================
   Research Areas Section  —  .ra-section  (v3)
   ============================================================ */

.ra-section { padding: 88px 0 96px; background: var(--bg); }

.ra-head { max-width: 600px; margin-bottom: 52px; }

/* Grid: 1px gaps + container bg = clinical dividers */
.ra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px oklch(0.2 0.04 220 / .06);
}

/* ── Card base ── */
.ra-card {
  position: relative;
  padding: 32px 28px 26px;
  background: var(--surface);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: inherit;
  overflow: hidden;
  transition: background .18s ease;
}

/* Top accent sweep */
.ra-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cc, var(--acc));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .36s cubic-bezier(.4, 0, .2, 1);
}

a.ra-card:hover { background: oklch(0.984 0.005 215); }
a.ra-card:hover::before { transform: scaleX(1); }

/* ── Inner elements ── */
.ra-num {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.ra-ico {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--cc, var(--acc));
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.ra-ico svg { width: 18px; height: 18px; }
a.ra-card:hover .ra-ico {
  background: color-mix(in oklch, var(--cc, var(--acc)) 10%, white);
  border-color: color-mix(in oklch, var(--cc, var(--acc)) 30%, var(--line));
}

.ra-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -.015em;
}

.ra-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}

.ra-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; }

.ra-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.ra-cnt {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.ra-arr {
  font-size: 17px;
  color: var(--cc, var(--acc));
  transition: transform .22s ease;
  line-height: 1;
}
a.ra-card:hover .ra-arr { transform: translateX(5px); }

/* ── Coming-soon state ── */
.ra-soon {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}
.ra-soon::before { display: none; }

.ra-soon-b {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* ── Product card: new data-line colors ── */
.prod-card[data-line="metabolic"] { --lc: oklch(0.560 0.110 68); }
.prod-card[data-line="longevity"] { --lc: oklch(0.520 0.080 178); }
.prod-card[data-line="derma"]     { --lc: oklch(0.540 0.085 350); }
.prod-card[data-line="tissue"]    { --lc: oklch(0.500 0.085 218); }
.prod-card[data-line="neuro"]     { --lc: oklch(0.480 0.082 258); }
.prod-card[data-line="immun"]     { --lc: oklch(0.500 0.105 148); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .ra-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .ra-section { padding: 64px 0 72px; }
  .ra-grid { grid-template-columns: 1fr; border-radius: 8px; }
  .ra-card { padding: 26px 22px 22px; }
}
/* ============================================================
   Hero Visual — Product Image (v3)
   z-order: hero-visual(1) < #hero-canvas(2) < .hero-canvas-inner(3)
   ============================================================ */

.hero-visual {
  position: absolute;
  right: max(28px, calc((100% - var(--maxw)) / 2 + 28px));
  top: 0;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0 40px 32px;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.hero-prod-img {
  max-height: 60vh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 1;
  filter: none;
  animation: heroFloat 5.6s cubic-bezier(.45, .05, .55, .95) infinite;
  will-change: transform;
}

@keyframes heroFloat {
  0%,  100% { transform: translateY(0px)   rotate(0deg);  }
  50%        { transform: translateY(-13px) rotate(.35deg); }
}

/* chip floats below image as a subtle stat badge */
.hero-visual .hero-chip {
  position: relative;
  margin-top: 20px;
  z-index: 1;
  pointer-events: auto;
}

/* hero-canvas-inner: only copy on left, no chip needed there */
.hero--canvas .hero-canvas-inner {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .hero-visual {
    width: 44%;
    padding-right: 3%;
  }
  .hero-prod-img { max-height: 52vh; }
}

@media (max-width: 640px) {
  .hero-visual { display: none; }
}

/* ============================================================
   Responsive Hardening
   ============================================================ */
/* Kein horizontales Überlaufen site-weit (clip bricht sticky NICHT) */
html, body { overflow-x: clip; max-width: 100%; }
body { overflow-wrap: break-word; }
img, svg, video, canvas { max-width: 100%; }

/* Utility-Bar: saubere Mobile-Darstellung statt 2-zeiligem Umbruch */
@media (max-width: 760px) {
  .utility { font-size: 11px; }
  .utility .wrap { gap: 12px; min-height: 34px; }
  .utility .u-left span { white-space: nowrap; }
}
@media (max-width: 440px) {
  .utility .u-left { display: none; }
  .utility .wrap { justify-content: center; }
  .utility .u-right { white-space: normal; text-align: center; }
}

/* Produkt-Slider: keine erzwungene Mindestbreite auf kleinen Phones */
@media (max-width: 560px) {
  .ps-card { min-width: 0; }
}

/* ============================================================
   WooCommerce pages (Cart / Checkout / My Account) + legal pages
   ============================================================ */
.wc-page-main { padding: 48px 0 80px; min-height: 50vh; }
.wc-page-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.wc-page-head h1 { font-size: clamp(28px,3.4vw,44px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
:is(.wc-page-content,.woocommerce-page .entry-content), .entry-content { font-size: 16px; line-height: 1.72; color: var(--ink-2); }
:is(.wc-page-content,.woocommerce-page .entry-content) h2, .entry-content h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 32px 0 12px; letter-spacing: -.01em; }
:is(.wc-page-content,.woocommerce-page .entry-content) h3, .entry-content h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 24px 0 8px; }
:is(.wc-page-content,.woocommerce-page .entry-content) p, .entry-content p { margin: 0 0 14px; }
:is(.wc-page-content,.woocommerce-page .entry-content) ul, .entry-content ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; }
:is(.wc-page-content,.woocommerce-page .entry-content) li, .entry-content li { margin-bottom: 6px; }
:is(.wc-page-content,.woocommerce-page .entry-content) a, .entry-content a { color: var(--navy); text-decoration: underline; }
.legal-draft { background: var(--warn-t, oklch(0.96 0.04 75)); border: 1px solid var(--warn, oklch(0.8 0.09 70)); border-radius: 10px; padding: 14px 18px; margin: 0 0 24px; font-size: 14px; color: var(--ink); }

/* ── Dynamische Versand-Infos (Lieferbedingungen) ── */
.versandinfo { margin: 0 0 10px; }
.versandinfo > div { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.versandinfo dt { flex: 0 0 210px; font-weight: 700; color: var(--ink); }
.versandinfo dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px){ .versandinfo > div { flex-direction: column; gap: 2px; } .versandinfo dt { flex: none; } }

/* ============================================================
   Reguläre Seiten (page.php) — modernes Layout
   ============================================================ */
.pg-hero { background: linear-gradient(180deg, var(--sky-1) 0%, #fff 100%); border-bottom: 1px solid var(--line); padding: 46px 0 38px; }
.pg-hero .breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.pg-hero .breadcrumb a { color: var(--ink-2); text-decoration: none; }
.pg-hero .breadcrumb a:hover { color: var(--navy); }
.pg-hero .breadcrumb .sep { margin: 0 8px; opacity: .45; }
.pg-hero .kicker { color: var(--navy); }
.pg-hero .kicker::before { background: var(--acc); }
.pg-hero h1 { font-size: clamp(30px,3.6vw,46px); font-weight: 800; color: var(--ink); letter-spacing: -.022em; line-height: 1.05; margin-top: 12px; }
.pg-body { display: block; padding: 44px 0 80px; }
.pg-body .entry-content { max-width: 880px; margin: 0 auto; }

/* ============================================================
   WooCommerce — Mein Konto / Formulare / Tabellen
   ============================================================ */
.woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.woocommerce-MyAccount-navigation { flex: 0 0 230px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 11px 16px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); transition: background .15s, color .15s; text-decoration: none; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--surface-2); color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--navy); color: #fff; }
.woocommerce-MyAccount-content { flex: 1 1 0; min-width: 0; }
.woocommerce-MyAccount-content a { color: var(--navy); }

/* WC forms & buttons */
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce button.button, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce a.button, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce input.button, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center; background: var(--acc); color: var(--navy);
  font-weight: 800; padding: 12px 22px; border-radius: 10px; border: none; cursor: pointer; font-size: 15px; text-decoration: none; transition: opacity .15s;
}
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce button.button:hover, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce a.button:hover { opacity: .88; }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce form .form-row { margin-bottom: 16px; }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce .input-text,
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce input[type="text"], :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce input[type="email"],
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce input[type="password"], :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce input[type="tel"],
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce select, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce textarea {
  width: 100%; max-width: 440px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-family: inherit; background: #fff; box-sizing: border-box;
}
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-form-login__rememberme { display: inline-flex; gap: 8px; align-items: center; max-width: none; }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-form-login__rememberme input { width: auto; }

/* WC tables (orders / addresses) */
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce table.shop_table th, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce table.shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce table.shop_table th { font-weight: 700; color: var(--ink); }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-message, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-info, :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-error { padding: 14px 18px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 18px; list-style: none; }

/* ============================================================
   Mini Cart Drawer
   ============================================================ */
.mini-cart-scrim { position: fixed; inset: 0; background: oklch(0.18 0.02 218/.5); backdrop-filter: blur(3px); z-index: 95; opacity: 0; visibility: hidden; transition: opacity .25s; }
.mini-cart-scrim.open { opacity: 1; visibility: visible; }
.mini-cart { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--surface); z-index: 96; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 40px oklch(0.2 0.04 220/.18); }
.mini-cart.open { transform: translateX(0); }
.mc-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.mc-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.mc-close { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); }
.mc-close:hover { background: var(--surface-2); }
.mc-close svg { width: 20px; height: 20px; }
.sunpept-mini-cart-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mc-ship { padding: 15px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.mc-ship-txt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; line-height: 1.35; }
.mc-ship-txt svg { width: 17px; height: 17px; color: var(--navy); flex-shrink: 0; }
.mc-ship-txt strong { color: var(--ink); font-weight: 800; }
.mc-ship.is-done .mc-ship-txt svg { color: oklch(0.62 0.15 150); }
.mc-ship-bar { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; }
.mc-ship-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--navy)); border-radius: 99px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.mc-ship.is-done .mc-ship-bar span { background: oklch(0.62 0.15 150); }
.mc-items { flex: 1; overflow-y: auto; padding: 6px 22px; }
.mc-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mc-item-img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.mc-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mc-item-info { flex: 1; min-width: 0; }
.mc-item-name { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.mc-item-meta { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.mc-item-remove { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); font-size: 18px; line-height: 1; }
.mc-item-remove:hover { background: var(--surface-2); color: var(--ink); }
.mc-item.removing { opacity: .4; pointer-events: none; }
.mc-foot { flex-shrink: 0; padding: 18px 22px 22px; border-top: 1px solid var(--line); }
.mc-subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mc-subtotal span { font-size: 14px; color: var(--ink-2); }
.mc-subtotal strong { font-size: 19px; font-weight: 800; color: var(--ink); }
.mc-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-bottom: 16px; }
.mc-trust span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.mc-trust svg { width: 13px; height: 13px; color: oklch(0.62 0.15 150); flex-shrink: 0; }
.mini-cart .btn-block { display: flex; width: 100%; justify-content: center; }
.mc-checkout { font-size: 16px; padding: 14px; }
.mc-viewcart { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.mc-viewcart:hover { color: var(--navy); }
.mc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; }
.mc-empty svg { width: 48px; height: 48px; color: var(--line-2); }
.mc-empty p { color: var(--ink-3); font-size: 15px; }

/* ============================================================
   Cart Button-Fix + Trust/Upsells + Produkt-COA-Links
   ============================================================ */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button {
  background: var(--navy) !important; color: #fff !important;
}
.wc-block-cart__submit-button *, .wc-block-components-checkout-place-order-button *, .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button * { color: #fff !important; }
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { opacity: .9; color: #fff !important; }

.cart-extras { margin-top: 12px; }
.cart-trustbar { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 30px; }
.cart-trustbar .ct-ship { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.cart-trustbar .ct-ship svg { width: 19px; height: 19px; color: var(--navy); flex-shrink: 0; }
.cart-trustbar .ct-items { display: flex; flex-wrap: wrap; gap: 9px 22px; }
.cart-trustbar .ct-items span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cart-trustbar .ct-items svg { width: 13px; height: 13px; color: oklch(0.62 0.15 150); flex-shrink: 0; }
.cart-upsell h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 16px; letter-spacing: -.01em; }
.cu-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cu-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.cu-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.cu-img { aspect-ratio: 4/3; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; display: grid; place-items: center; }
.cu-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cu-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.cu-price { font-size: 14px; color: var(--navy); font-weight: 700; margin-top: 5px; }
@media (max-width:680px){ .cu-grid { grid-template-columns: 1fr; } }

.pi-coa { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 18px; background: var(--surface); }
.pi-coa-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.pi-coa-head svg { width: 17px; height: 17px; color: var(--navy); flex-shrink: 0; }
.pi-coa-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-coa-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; text-decoration: none; transition: background .15s; }
.pi-coa-links a:hover { background: var(--acc); }
.pi-coa-links a svg { width: 12px; height: 12px; }

/* ============================================================
   Checkout — Shopify-Style 2-Spalten-Layout + Trust
   ============================================================ */
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__main { flex: 1 1 56%; min-width: 0; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__sidebar {
  flex: 1 1 40%; min-width: 320px; max-width: 480px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 26px; position: sticky; top: 24px; box-sizing: border-box;
}
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__sidebar .wc-block-components-order-summary { background: transparent; }
@media (max-width: 980px) {
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout { flex-direction: column; gap: 32px; }
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__main,
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__sidebar { flex: none; width: 100%; max-width: none; position: static; }
}
/* Trust-Panel (per JS in die Sidebar injiziert) */
.checkout-trust { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.checkout-trust .ct-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.checkout-trust .ct-row svg { width: 16px; height: 16px; color: oklch(0.62 0.15 150); flex-shrink: 0; }
.checkout-trust .ct-row strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   Cart-Block: kompakte Sidebar (Panel) + Upsell Quick-Add
   ============================================================ */
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__main { flex: 1 1 60%; min-width: 0; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__sidebar {
  flex: 0 1 360px; max-width: 400px; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px; position: sticky; top: 24px;
}
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child { padding-top: 0; }
@media (max-width: 980px) {
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart { flex-direction: column; gap: 28px; }
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__main, :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__sidebar { flex: none; width: 100%; max-width: none; position: static; }
}

/* Upsell-Karten mit Quick-Add */
.cu-card { display: flex; flex-direction: column; }
.cu-media { display: block; }
.cu-name { display: block; text-decoration: none; }
.cu-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.cu-price { margin-top: 0; }
.cu-add { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 8px; padding: 8px 13px; text-decoration: none; white-space: nowrap; transition: opacity .15s, background .15s; }
.cu-add:hover { opacity: .9; }

/* ============================================================
   Cart/Checkout — Fix: Button-Text + volle Breite + Spalten
   ============================================================ */
/* Quick-Add-Button lesbar (überschreibt :is(.wc-page-content,.woocommerce-page .entry-content) a) */
:is(.wc-page-content,.woocommerce-page .entry-content) .cu-add { color: #fff !important; text-decoration: none !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) .cu-add:hover { color: #fff !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) .cu-name { color: var(--ink) !important; text-decoration: none !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) .cu-media { text-decoration: none !important; }

/* Breiterer Container für Warenkorb & Kasse (mehr Breite nutzen) */
.woocommerce-cart .wc-page-main > .wrap,
.woocommerce-checkout .wc-page-main > .wrap { max-width: 1480px; }

/* Spalten füllen die volle Breite (überschreibt Block-eigene .is-large-Regeln) */
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart,
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout { display: flex !important; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__sidebar { flex: 0 0 380px !important; width: 380px !important; max-width: 380px !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; }
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__sidebar { flex: 0 0 440px !important; width: 440px !important; max-width: 440px !important; }
@media (max-width: 980px) {
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart, :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout { flex-direction: column; gap: 28px; }
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__main, :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-cart__sidebar,
  :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__main, :is(.wc-page-content,.woocommerce-page .entry-content) .wc-block-checkout__sidebar {
    flex: none !important; width: 100% !important; max-width: none !important; position: static; }
}

/* Quick-Add-Button bombensicher lesbar: Akzent-BG + Navy-Text */
:is(.wc-page-content,.woocommerce-page .entry-content) .cu-add,
.cart-upsell .cu-add { background: var(--acc) !important; color: var(--navy) !important; text-decoration: none !important; border: 1px solid var(--line-2) !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) .cu-add:hover,
.cart-upsell .cu-add:hover { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }

/* ============================================================
   Mobile-Overflow-Fixes — Produktseite (PDP) + global
   ============================================================ */
/* Grid-Spalten dürfen unter Content-Breite schrumpfen */
.pdp { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.pdp-gallery, .pdp-info, .pi-buy, .pdp-tabs { min-width: 0; }
/* Galeriebild passt IMMER in den Container (verhindert 1024px-Overflow) */
.gallery-main img { width: 100% !important; max-width: 100% !important; height: auto !important; }

@media (max-width: 920px) {
  .pdp { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .pi-stats { gap: 8px; }
  .pi-stat { min-width: 0; padding: 12px 11px; }
  .pi-stat .s-val { font-size: 16px; min-width: 0; }
  .pi-stat .s-lab { font-size: 9.5px; }
  .pdp-info h1 { font-size: clamp(26px, 7vw, 40px); }
  .pdp-info .pi-sub { font-size: 16px; }
  .tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .gallery-thumbs { flex-wrap: wrap; }
  .spec-table { max-width: 100%; }
  /* Sicherheitsnetz: nichts ragt über die Section hinaus */
  .pdp-tabs, .pdp-info, .article, .entry-content, :is(.wc-page-content,.woocommerce-page .entry-content) { max-width: 100%; }
}

/* ============================================================
   Pre-Header Ticker (Lauftext)
   ============================================================ */
.utility { overflow: hidden; }
.ut-viewport { overflow: hidden; width: 100%; }
.ut-track { display: inline-flex; align-items: center; white-space: nowrap; animation: ut-scroll 32s linear infinite; will-change: transform; }
.ut-item { display: inline-flex; align-items: center; gap: .55em; padding: 0 28px; min-height: 38px; position: relative; }
.ut-item::after { content: "·"; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); opacity: .3; }
.ut-item svg { width: 14px; height: 14px; opacity: .7; flex-shrink: 0; }
@keyframes ut-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
.utility:hover .ut-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ut-track { animation: none; } }


/* ── Fix: pi-trust Grid darf schrumpfen (kein Mobile-Overflow) ── */
.pi-trust { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.pi-trust a, .pi-trust div { min-width: 0; }
.pi-trust strong, .pi-trust span { overflow-wrap: anywhere; }
@media (max-width: 420px) { .pi-trust { grid-template-columns: 1fr; } }


/* ── Badge-Reihen als horizontaler Slide auf Mobile ── */
@media (max-width: 600px) {
  .about-values { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .about-values::-webkit-scrollbar { display: none; }
  .about-values .av { flex-shrink: 0; white-space: nowrap; }
}

/* ── Shop: Trust-Bar + Filter-Tabs als horizontaler Slide (Mobile) ── */
@media (max-width: 600px) {
  .shop-trust-inner {
    display: flex; flex-wrap: nowrap; gap: 24px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .shop-trust-inner::-webkit-scrollbar { display: none; }
  .st-item { flex-shrink: 0; }

  .shop-toolbar { gap: 16px; }
  .shop-filter-group { width: 100%; align-items: center; }
  .shop-filter-group .shop-tabs { flex: 1; min-width: 0; }
  .shop-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .shop-tabs::-webkit-scrollbar { display: none; }
  .shop-tab { flex-shrink: 0; }
}

/* ── About-Section: alle Spalten/Rows schrumpfbar (kein Mobile-Overflow) ── */
.about-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
.about-copy, .about-visual { min-width: 0; }
.about-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.about-values { min-width: 0; }
@media (max-width: 920px) { .about-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) {
  .about-stats .as-num { font-size: 24px; }
  .about-stats .as { padding: 18px 10px; }
}

/* ── Shop-Slide mit !important (überschreibt Inline-Styles in woocommerce.php) ── */
@media (max-width: 600px) {
  .shop-trust-inner { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 24px; scrollbar-width: none; padding-bottom: 2px; }
  .shop-trust-inner::-webkit-scrollbar { display: none; }
  .st-item { flex-shrink: 0 !important; }
  .shop-filter-group { width: 100%; }
  .shop-filter-group .shop-tabs { flex: 1 1 auto; min-width: 0; }
  .shop-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; padding-bottom: 2px; }
  .shop-tabs::-webkit-scrollbar { display: none; }
  .shop-tab { flex-shrink: 0 !important; }
}

/* ── Homepage Produkt-Slider: Kategorie-Tabs als Slide (Mobile only) ── */
@media (max-width: 600px) {
  .ps-controls { width: 100%; }
  .ps-tabs {
    flex-wrap: nowrap; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ps-tabs::-webkit-scrollbar { display: none; }
  .ps-tab { flex-shrink: 0; }
}

/* ── Mobile Drawer — Mega-Menü-Stil (einklappbare Produktsektionen) ── */
.drawer-nav .d-acc { border-bottom: 1px solid var(--line); }
.drawer-nav .d-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 4px; cursor: pointer; font-size: 16px; font-weight: 800; color: var(--ink); list-style: none; letter-spacing: -.01em; }
.drawer-nav .d-acc-head::-webkit-details-marker { display: none; }
.drawer-nav .d-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .25s ease; flex-shrink: 0; }
.drawer-nav .d-acc[open] .d-chev { transform: rotate(180deg); }
.drawer-nav .d-acc-body { padding: 2px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.drawer-nav .d-prod { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .12s, color .12s; }
.drawer-nav .d-prod:hover, .drawer-nav .d-prod:active { background: var(--surface-2); color: var(--ink); }
.drawer-nav .d-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drawer-nav .d-prod--soon { color: var(--ink-3); opacity: .65; }
.drawer-nav .d-prod--soon em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; font-family: 'Space Mono', monospace; color: var(--ink-3); }
.drawer-nav .d-divider { height: 1px; background: var(--line); margin: 14px 0; }
.drawer-nav .d-main { display: block; padding: 13px 4px; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.drawer-nav .d-main:hover, .drawer-nav .d-main:active { color: var(--navy); }

/* ============================================================
   Sprach-Wahl-Popup (Language chooser modal)
   ============================================================ */
.lang-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;animation:lm-fade .35s ease forwards}
.lang-modal[hidden]{display:none}
@keyframes lm-fade{to{opacity:1}}
.lang-modal__backdrop{position:absolute;inset:0;background:oklch(0.30 0.04 240 / .55);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.lang-modal__card{position:relative;width:min(440px,100%);background:oklch(0.99 0.004 240 / .82);border:1px solid oklch(1 0 0 / .65);border-radius:24px;padding:38px 34px 32px;box-shadow:0 30px 70px -20px oklch(0.30 0.06 240 / .45),inset 0 1px 0 oklch(1 0 0 / .7);backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);text-align:center;transform:translateY(12px) scale(.98);animation:lm-pop .4s cubic-bezier(.2,.9,.3,1.1) .05s forwards}
@keyframes lm-pop{to{transform:translateY(0) scale(1)}}
.lang-modal__logo{font-family:"Lilita One",sans-serif;letter-spacing:.16em;font-size:15px;color:oklch(0.52 0.082 218);margin-bottom:18px}
.lang-modal__title{font-family:"Manrope",sans-serif;font-weight:800;font-size:24px;line-height:1.2;color:oklch(0.28 0.04 240);margin:0 0 8px}
.lang-modal__title span{display:inline;font-weight:600;font-size:16px;color:oklch(0.55 0.02 240);opacity:.7}
.lang-modal__sub{font-size:14px;line-height:1.5;color:oklch(0.50 0.02 240);margin:0 0 24px}
.lang-modal__btns{display:flex;flex-direction:column;gap:12px}
.lang-opt{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;background:oklch(1 0 0 / .7);border:1.5px solid oklch(0.80 0.03 230 / .6);border-radius:16px;cursor:pointer;text-align:left;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.lang-opt:hover{border-color:oklch(0.52 0.082 218);background:oklch(1 0 0 / .95);transform:translateY(-2px);box-shadow:0 12px 24px -12px oklch(0.52 0.082 218 / .5)}
.lang-opt__flag{font-size:30px;line-height:1;flex:none}
.lang-opt__txt{flex:1;display:flex;flex-direction:column;gap:2px}
.lang-opt__txt strong{font-family:"Manrope",sans-serif;font-weight:700;font-size:16px;color:oklch(0.28 0.04 240)}
.lang-opt__txt em{font-style:normal;font-size:12.5px;color:oklch(0.56 0.02 240)}
.lang-opt__arrow{width:20px;height:20px;flex:none;color:oklch(0.52 0.082 218);opacity:.5;transition:transform .18s,opacity .18s}
.lang-opt:hover .lang-opt__arrow{opacity:1;transform:translateX(3px)}
.lang-modal__close{position:absolute;top:14px;right:16px;width:34px;height:34px;border:none;background:transparent;color:oklch(0.55 0.02 240);font-size:26px;line-height:1;cursor:pointer;border-radius:50%;transition:background .15s,color .15s}
.lang-modal__close:hover{background:oklch(0.90 0.02 240 / .6);color:oklch(0.28 0.04 240)}
@media(max-width:480px){.lang-modal__card{padding:32px 22px 26px;border-radius:20px}.lang-modal__title{font-size:21px}.lang-modal__title span{display:block;margin-top:4px}}

/* ============================================================
   Produkt-Karten-Grid (global, auch auf Produktseiten) + Quick-Add
   ============================================================ */
.prod-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.prod-card .pc-link{ display:flex; flex-direction:column; align-items:center; text-align:center; color:inherit; text-decoration:none; width:100%; }
.prod-card .pc-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding-top:14px; }
button.pc-add, button.cu-add{ font:inherit; border:none; cursor:pointer; }
.pc-add{ white-space:nowrap; }
.pc-add.is-loading, .cu-add.is-loading{ opacity:.6; pointer-events:none; }
.pc-add.is-added, .cu-add.is-added{ background:oklch(0.52 0.09 150) !important; color:#fff !important; }
@media(max-width:900px){ .prod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }
@media(max-width:560px){
	.prod-grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 20px 8px; margin:0 -20px; }
	.prod-grid::-webkit-scrollbar{ display:none; }
	.prod-grid > .prod-card{ flex:0 0 80%; scroll-snap-align:start; }
}

/* Mini-Cart: Mengen-Steuerung (+/-) */
.mc-qty{ display:inline-flex; align-items:center; margin-top:8px; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.mc-qty-btn{ width:28px; height:28px; border:none; background:transparent; color:var(--ink-1); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.mc-qty-btn:hover{ background:rgba(30,58,68,.07); }
.mc-qty-val{ min-width:30px; text-align:center; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.mc-qty.is-loading{ opacity:.5; pointer-events:none; }

/* ============================================================
   Mobile-Menü: Produktbild neben Pen/Vial (contain, nicht abgeschnitten)
   ============================================================ */
.drawer-nav .d-prod-img{ width:38px; height:38px; flex:none; border-radius:9px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:3px; overflow:hidden; }
.drawer-nav .d-prod-img img{ width:100%; height:100%; object-fit:contain; }
.drawer-nav .d-prod-name{ min-width:0; }

/* ============================================================
   PDP Add-to-Cart Farblogik
   Navy = Default (Simple-Produkte immer + Variable NACH Auswahl);
   Accent = solange Variable noch KEINE Auswahl hat (.disabled / .wc-variation-selection-needed)
   ============================================================ */

/* ============================================================
   Mobile-Hero: RUO-Badge weg, Produktbild drunter (verlinkt) mit sanftem Float
   ============================================================ */
.hero-mobile-img{ display:none; }
@media (max-width:640px){
	.hero-ruo{ display:none; }
	.hero--canvas .hero-canvas-inner{ padding-bottom:22px; }
	.hero-mobile-img{ display:block; margin:26px auto 0; max-width:76%; }
	.hero-mobile-img img{ width:100%; height:auto; object-fit:contain; animation:heroFloat 6.4s ease-in-out infinite; will-change:transform; }
}

/* PDP Add-to-Cart: Navy nur wenn Auswahl getroffen (Simple sofort, Variable per JS bei show_variation) */
.pi-buy .single_add_to_cart_button.sp-navy{ background:var(--navy) !important; color:#fff !important; }

.ps-track{ touch-action:pan-y; overscroll-behavior-x:contain; }

/* Produkt-Slider: Filter mobil hinter „Filter"-Button (Produkte above the fold) */
.ps-filter-toggle{ display:none; }
@media (max-width:640px){
	.ps-controls{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
	.ps-filter-toggle{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; color:var(--navy); cursor:pointer; }
	.ps-filter-toggle svg{ width:16px; height:16px; }
	.ps-filter-toggle[aria-expanded="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
	.ps-nav{ order:2; }
	.ps-tabs{ display:none; order:3; width:100%; margin-top:4px; }
	.ps-tabs.is-open{ display:flex; }
}

/* Slider-Swipe auch ueber Bildern/Karten (nicht nur am Rand) */
.ps-track, .ps-track *{ touch-action:pan-y; }
.ps-track img, .ps-track a{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }

/* Mobil-Menue: Bild neben Pens/Vials-Header */
.drawer-nav .d-acc-title{ display:flex; align-items:center; gap:11px; min-width:0; }
.drawer-nav .d-acc-thumb{ width:40px; height:40px; flex:none; border-radius:9px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:3px; overflow:hidden; }
.drawer-nav .d-acc-thumb img{ width:100%; height:100%; object-fit:contain; }

/* Mobil-Menue: Trust-Anker unter dem Button */
.d-trust{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:var(--sky-1); }
.d-trust-ic{ width:34px; height:34px; flex:none; border-radius:9px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:oklch(0.5 0.12 150); }
.d-trust-ic svg{ width:18px; height:18px; }
.d-trust-txt{ display:flex; flex-direction:column; min-width:0; }
.d-trust-txt strong{ font-size:14px; color:var(--navy); font-weight:800; }
.d-trust-txt em{ font-style:normal; font-size:11.5px; color:var(--ink-2); margin-top:1px; }

/* TP-Floater aus - Sprachwechsel dezent im Footer */
.trp-floater, .trp-language-switcher-container, [id^="trp-floater"], #trp-floater-ls{ display:none !important; }
.footer-lang{ display:inline-flex; align-items:center; gap:6px; font-family:'Space Mono',monospace; font-size:12px; }
.footer-lang a{ color:var(--ink-3); text-decoration:none; padding:2px 5px; border-radius:5px; transition:color .15s; }
.footer-lang a:hover{ color:var(--ink); }
.footer-lang a.active{ color:var(--navy); font-weight:700; }
.footer-lang .fl-sep{ color:var(--ink-3); opacity:.5; }

/* Footer-Credit */
.footer-credit{ text-align:center; font-size:12px; color:var(--ink-3); padding:18px 0 2px; }
.footer-credit a{ color:var(--ink-2); text-decoration:none; font-weight:600; }
.footer-credit a:hover{ color:var(--navy); }

/* TP-Floater (v2) ausblenden – Sprachwechsel im Footer */
#trp-switcher-dropdown-list, .trp-language-switcher.trp-floater-language-switcher, [class*="floater-language-switcher"]{ display:none !important; }

/* TP-Floater (richtiger Container) endgueltig aus */
.trp-floating-switcher{ display:none !important; }

/* Hero: Fläschchen + Liquid-Glass-USP-Karten (mobile, unter der Headline) */
.hero-mobile-vis{ display:none; }
@media (max-width:640px){
	.hero-mobile-vis{ display:grid; grid-template-columns:42% 1fr; gap:11px; align-items:stretch; margin:22px auto 6px; max-width:100%; }
	.hmv-img{ display:block; border-radius:16px; overflow:hidden; box-shadow:0 14px 32px -16px rgba(30,58,68,.42); }
	.hmv-img img{ width:100%; height:100%; object-fit:cover; animation:heroFloat 6.4s ease-in-out infinite; will-change:transform; }
	.hmv-cards{ display:flex; flex-direction:column; gap:10px; }
	.hmv-card{ background:linear-gradient(155deg, rgba(255,255,255,.76), rgba(255,255,255,.42)); backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6); border:1px solid rgba(255,255,255,.78); border-radius:14px; box-shadow:0 12px 28px -14px rgba(30,58,68,.3), inset 0 1px 0 rgba(255,255,255,.9); padding:12px 13px; }
	.hmv-card--big{ flex:1.25; display:flex; align-items:center; gap:11px; }
	.hmv-ic{ width:36px; height:36px; flex:none; border-radius:10px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
	.hmv-ic svg{ width:19px; height:19px; }
	.hmv-tx{ display:flex; flex-direction:column; min-width:0; }
	.hmv-tx strong{ font-size:13.5px; color:var(--navy); font-weight:800; line-height:1.15; }
	.hmv-tx span{ font-size:11px; color:var(--ink-2); margin-top:2px; }
	.hmv-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; }
	.hmv-card--sm{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 6px; }
	.hmv-card--sm strong{ font-size:17px; color:var(--navy); font-weight:800; line-height:1; }
	.hmv-card--sm span{ font-size:10px; color:var(--ink-2); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
}

/* ===== Quickview ===== */
.prod-card .pc-img{ position:relative; }
.qv-btn{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%) translateY(8px); z-index:4; display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border:none; border-radius:999px; background:rgba(28,46,58,.93); color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; cursor:pointer; opacity:0; transition:opacity .2s,transform .2s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); white-space:nowrap; box-shadow:0 8px 22px -8px rgba(20,40,50,.5); }
.qv-btn svg{ width:15px; height:15px; }
.qv-btn:hover{ background:var(--navy); }
.prod-card:hover .qv-btn{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (hover:none){ .qv-btn{ opacity:.96; transform:translateX(-50%); bottom:10px; padding:7px 14px; font-size:11.5px; } }

.sp-qv{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:22px; opacity:0; transition:opacity .22s; }
.sp-qv[hidden]{ display:none; }
.sp-qv.open{ opacity:1; }
.sp-qv-scrim{ position:absolute; inset:0; background:oklch(0.30 0.04 240/.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.sp-qv-panel{ position:relative; width:min(860px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 34px 80px -24px rgba(20,40,50,.55); transform:translateY(16px) scale(.985); transition:transform .24s; }
.sp-qv.open .sp-qv-panel{ transform:none; }
.sp-qv-close{ position:absolute; top:13px; right:15px; width:36px; height:36px; border:none; background:#eef2f3; border-radius:50%; font-size:23px; line-height:1; cursor:pointer; color:#52666e; z-index:3; transition:background .15s; }
.sp-qv-close:hover{ background:#dde6e9; color:var(--navy); }
.sp-qv-body{ display:grid; grid-template-columns:1fr 1fr; min-height:340px; }
.sp-qv-loading{ grid-column:1/-1; display:flex; gap:6px; align-items:center; justify-content:center; min-height:340px; }
.sp-qv-loading span{ width:9px; height:9px; border-radius:50%; background:var(--acc); animation:spqvb 1.1s infinite; }
.sp-qv-loading span:nth-child(2){ animation-delay:.18s; } .sp-qv-loading span:nth-child(3){ animation-delay:.36s; }
@keyframes spqvb{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }
.sp-qv-err{ grid-column:1/-1; padding:50px; text-align:center; color:var(--ink-2); }
.qv-media{ background:#f4f6f7; display:flex; align-items:center; justify-content:center; padding:34px; }
.qv-media img{ width:100%; height:auto; object-fit:contain; max-height:440px; }
.qv-info{ padding:40px 36px 34px; display:flex; flex-direction:column; }
.qv-cat{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--acc); font-weight:700; }
.qv-name{ font-size:clamp(22px,2.6vw,28px); margin:9px 0 8px; color:var(--navy); line-height:1.15; }
.qv-price{ font-size:21px; font-weight:800; color:var(--navy); margin-bottom:14px; }
.qv-price .price, .qv-price .amount{ color:var(--navy); }
.qv-desc{ font-size:14px; color:var(--ink-2); line-height:1.6; margin-bottom:20px; }
.qv-desc p{ margin:0 0 8px; }
.qv-form{ margin-top:auto; }
.qv-form .single_add_to_cart_button{ background:var(--navy) !important; color:#fff !important; width:100%; }
.qv-form .quantity{ margin-bottom:10px; }
.qv-full{ margin-top:14px; font-size:13px; font-weight:700; color:var(--acc); text-decoration:none; align-self:flex-start; }
.qv-full:hover{ color:var(--navy); }
.qv-trust{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.qv-trust span{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); font-weight:600; }
.qv-trust svg{ width:14px; height:14px; color:oklch(0.55 0.12 150); }
@media(max-width:680px){
	.sp-qv{ padding:0; align-items:flex-end; }
	.sp-qv-panel{ max-height:94vh; border-radius:20px 20px 0 0; width:100%; }
	.sp-qv-body{ grid-template-columns:1fr; }
	.qv-media{ padding:24px; } .qv-media img{ max-height:240px; }
	.qv-info{ padding:24px 22px; }
}

/* ============================================================
   Klassischer Cart/Checkout (Shortcodes) — Design wie Block-Version
   ============================================================ */

/* Breiterer Container */
.woocommerce-cart .wc-page-main > .wrap,
.woocommerce-checkout .wc-page-main > .wrap { max-width: 1480px; }

/* ---- Buttons (Navy, voll) ---- */
:is(.wc-page-content,.woocommerce-page .entry-content) a.checkout-button,
:is(.wc-page-content,.woocommerce-page .entry-content) #place_order,
:is(.wc-page-content,.woocommerce-page .entry-content) button.button.alt,
:is(.wc-page-content,.woocommerce-page .entry-content) .wc-proceed-to-checkout a.checkout-button {
	background: var(--navy) !important; color: #fff !important; border: none !important;
	border-radius: 12px !important; font-weight: 800 !important; font-size: 16px !important;
	padding: 15px 26px !important; width: 100%; box-sizing: border-box; text-align: center;
	display: block; cursor: pointer; transition: opacity .15s; box-shadow: none !important;
}
:is(.wc-page-content,.woocommerce-page .entry-content) a.checkout-button:hover,
:is(.wc-page-content,.woocommerce-page .entry-content) #place_order:hover,
:is(.wc-page-content,.woocommerce-page .entry-content) button.button.alt:hover { opacity: .9; color: #fff !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) button.button:not(.alt) {
	background: var(--surface-2); color: var(--navy); border: 1px solid var(--line);
	border-radius: 10px; font-weight: 700; padding: 11px 18px; cursor: pointer;
}

/* ---- Formularfelder ---- */
:is(.wc-page-content,.woocommerce-page .entry-content) .form-row label,
:is(.wc-page-content,.woocommerce-page .entry-content) #customer_details label { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 5px; display: block; }
:is(.wc-page-content,.woocommerce-page .entry-content) .input-text,
:is(.wc-page-content,.woocommerce-page .entry-content) select,
:is(.wc-page-content,.woocommerce-page .entry-content) .select2-selection {
	border: 1px solid var(--line-2, var(--line)) !important; border-radius: 11px !important;
	padding: 12px 14px !important; font-size: 15px !important; font-family: 'Manrope', sans-serif !important;
	background: #fff !important; color: var(--ink) !important; box-shadow: none !important; min-height: 48px; width: 100%; box-sizing: border-box;
}
:is(.wc-page-content,.woocommerce-page .entry-content) .input-text:focus, :is(.wc-page-content,.woocommerce-page .entry-content) select:focus { outline: none; border-color: var(--acc) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--acc) 35%, transparent) !important; }
:is(.wc-page-content,.woocommerce-page .entry-content) .select2-container .select2-selection--single { height: 48px; display: flex; align-items: center; }
:is(.wc-page-content,.woocommerce-page .entry-content) .form-row { margin-bottom: 16px; padding: 0; }

/* ---- Checkout: 2-Spalten (Shopify-Style) ---- */
.woocommerce-checkout :is(.wc-page-content,.woocommerce-page .entry-content) form.checkout.woocommerce-checkout {
	display: grid; grid-template-columns: minmax(0,1fr) 400px; column-gap: 48px; row-gap: 0; align-items: start;
}
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-form-login-toggle,
.woocommerce-checkout form.checkout > .woocommerce-form-login,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon { grid-column: 1 / -1; }
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 50; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; align-self: start; margin: 0 0 14px; font-size: 20px; }
.woocommerce-checkout #order_review {
	grid-column: 2; grid-row: 2; align-self: start; background: var(--surface-2); border: 1px solid var(--line);
	border-radius: 16px; padding: 26px 24px; position: sticky; top: 24px; box-sizing: border-box;
}
.woocommerce-checkout #customer_details .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: auto; float: none; }
@media (max-width: 980px) {
	.woocommerce-checkout :is(.wc-page-content,.woocommerce-page .entry-content) form.checkout.woocommerce-checkout { grid-template-columns: 1fr; gap: 26px; }
	.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
}

/* ---- Cart: 2-Spalten ---- */
.woocommerce-cart :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce {
	display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 44px; align-items: start;
}
.woocommerce-cart :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: auto !important; float: none !important; }
.woocommerce-cart .cart-collaterals .cart_totals {
	width: auto !important; float: none !important; background: var(--surface-2);
	border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; position: sticky; top: 24px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 { margin: 0 0 14px; font-size: 18px; }
.woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; width: 100%; margin-top: 8px; }
@media (max-width: 980px) {
	.woocommerce-cart :is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce { grid-template-columns: 1fr; gap: 26px; }
	.woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals { grid-column: 1; }
	.woocommerce-cart .cart-collaterals .cart_totals { position: static; }
}

/* ---- Tabellen (Cart-Items + Order-Review) ---- */
:is(.wc-page-content,.woocommerce-page .entry-content) table.shop_table { border: 1px solid var(--line); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; width: 100%; }
:is(.wc-page-content,.woocommerce-page .entry-content) table.shop_table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 700; padding: 14px 16px; border: none; }
:is(.wc-page-content,.woocommerce-page .entry-content) table.shop_table td { padding: 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; }
:is(.wc-page-content,.woocommerce-page .entry-content) table.cart .product-thumbnail img { width: 60px; border-radius: 10px; border: 1px solid var(--line); }
:is(.wc-page-content,.woocommerce-page .entry-content) table.cart td.product-name a { color: var(--navy); font-weight: 700; text-decoration: none; }
:is(.wc-page-content,.woocommerce-page .entry-content) .cart_totals table.shop_table, :is(.wc-page-content,.woocommerce-page .entry-content) #order_review table.shop_table { border: none; background: transparent; }
:is(.wc-page-content,.woocommerce-page .entry-content) .cart_totals table.shop_table td, :is(.wc-page-content,.woocommerce-page .entry-content) .cart_totals table.shop_table th,
:is(.wc-page-content,.woocommerce-page .entry-content) #order_review table.shop_table td, :is(.wc-page-content,.woocommerce-page .entry-content) #order_review table.shop_table th { padding: 11px 0; border-top: 1px solid var(--line); background: transparent; }
:is(.wc-page-content,.woocommerce-page .entry-content) .order-total th, :is(.wc-page-content,.woocommerce-page .entry-content) .order-total td { font-size: 18px; font-weight: 800; color: var(--navy); }
:is(.wc-page-content,.woocommerce-page .entry-content) .order-total .amount { color: var(--navy); }
:is(.wc-page-content,.woocommerce-page .entry-content) td.product-remove a.remove { color: var(--ink-3) !important; border: 1px solid var(--line); }

/* ---- Zahlungsarten ---- */
:is(.wc-page-content,.woocommerce-page .entry-content) #payment { background: transparent; border-radius: 0; margin-top: 18px; }
:is(.wc-page-content,.woocommerce-page .entry-content) #payment ul.payment_methods { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 8px 14px; }
:is(.wc-page-content,.woocommerce-page .entry-content) #payment ul.payment_methods li { border: none; }
:is(.wc-page-content,.woocommerce-page .entry-content) #payment div.payment_box { background: var(--surface-2); border-radius: 10px; font-size: 13.5px; color: var(--ink-2); }
:is(.wc-page-content,.woocommerce-page .entry-content) #payment div.payment_box::before { display: none; }
:is(.wc-page-content,.woocommerce-page .entry-content) .woocommerce-terms-and-conditions-wrapper { margin: 14px 0; }
:is(.wc-page-content,.woocommerce-page .entry-content) #payment .place-order { padding: 16px 0 0; }

/* Coupon-Zeile */
:is(.wc-page-content,.woocommerce-page .entry-content) .coupon { display: flex; gap: 8px; align-items: center; }
:is(.wc-page-content,.woocommerce-page .entry-content) table.cart td.actions .input-text { width: auto; min-width: 140px; }

/* ============================================================
   Cart-Tabelle Feinschliff (v.63) — body-class gescopt, robust
   ============================================================ */
.woocommerce-cart table.cart.shop_table { table-layout: auto; }
.woocommerce-cart table.cart thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.woocommerce-cart table.cart td { vertical-align: middle; }
.woocommerce-cart table.cart td.product-remove { width: 40px; text-align: center; padding-left: 10px; padding-right: 6px; }
.woocommerce-cart table.cart td.product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
	border-radius: 50%; font-size: 15px; line-height: 1; color: var(--ink-3) !important;
	border: 1px solid var(--line); background: #fff; text-decoration: none; font-weight: 700;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover { background: var(--navy); color: #fff !important; border-color: var(--navy); }
.woocommerce-cart table.cart td.product-thumbnail { width: 88px; }
.woocommerce-cart table.cart td.product-thumbnail img {
	width: 64px !important; height: 64px !important; max-width: 64px !important;
	object-fit: contain; padding: 5px; background: #fff; border-radius: 10px; border: 1px solid var(--line); display: block;
}
.woocommerce-cart table.cart td.product-name { font-weight: 700; line-height: 1.35; }
.woocommerce-cart table.cart td.product-name a { color: var(--navy); text-decoration: none; }
.woocommerce-cart table.cart td.product-name a:hover { text-decoration: underline; }
.woocommerce-cart table.cart td.product-name .variation { font-weight: 500; font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.woocommerce-cart table.cart td.product-name .variation dt, .woocommerce-cart table.cart td.product-name .variation dd { display: inline; margin: 0; padding: 0; }
.woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-subtotal { white-space: nowrap; }
.woocommerce-cart table.cart td.product-subtotal { font-weight: 800; color: var(--navy); }
.woocommerce-cart table.cart td.product-quantity .quantity { display: inline-flex; }
.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
	width: 66px; min-height: 44px; text-align: center; border: 1px solid var(--line) !important;
	border-radius: 9px !important; padding: 6px 8px !important; font-size: 15px; background: #fff;
}
.woocommerce-cart table.cart td.actions { padding: 18px 16px; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; align-items: center; float: none; margin: 0; }
.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
	min-width: 170px; min-height: 46px; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 11px 14px !important;
}
.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"] {
	background: #fff !important; color: var(--navy) !important; border: 1px solid var(--navy) !important;
	border-radius: 10px !important; padding: 11px 18px !important; font-weight: 700; white-space: nowrap;
}
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	float: right; background: var(--navy) !important; color: #fff !important; border: none !important;
	border-radius: 10px !important; padding: 12px 22px !important; font-weight: 700; cursor: pointer;
}
.woocommerce-cart table.cart td.actions button[name="update_cart"][disabled] { opacity: .45; }
/* Versandkosten-Rechner im Totals-Block */
.woocommerce-cart .cart_totals .shipping-calculator-button { color: var(--navy); font-weight: 600; }
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator { margin-top: 10px; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout { padding-top: 16px; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: block; width: 100%; text-align: center; background: var(--navy) !important; color: #fff !important;
	border-radius: 12px !important; padding: 15px 18px !important; font-weight: 800; font-size: 16px; text-decoration: none;
}
/* Mobile: WC smallscreen kollabiert die Tabelle — Bild + Labels sauber */
@media (max-width: 768px) {
	.woocommerce-cart table.cart td.product-thumbnail { width: auto; }
	.woocommerce-cart table.cart td.product-thumbnail img { margin: 0 auto; }
	.woocommerce-cart table.cart td.actions button[name="update_cart"] { float: none; width: 100%; margin-top: 10px; }
	.woocommerce-cart table.cart td.actions .coupon { flex-wrap: wrap; }
}

/* ===== Cart/Checkout volle Breite (v.64) ===== */
.woocommerce-checkout .pg-body .entry-content,
.woocommerce-cart .pg-body .entry-content { max-width: 1180px; }
@media (max-width: 1240px) {
	.woocommerce-checkout .pg-body .entry-content,
	.woocommerce-cart .pg-body .entry-content { max-width: 100%; }
}

/* Footer trust bar */
.footer-trust{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);margin:16px 0 12px;font-size:13px;color:rgba(255,255,255,.82);}
.footer-trust .ft-item{display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em;}
.footer-trust .ft-item svg{opacity:.85;flex-shrink:0;}
@media (max-width:640px){.footer-trust{gap:12px 22px;font-size:12px;padding:12px 4px;}}

/* --- compact in-image product badges (v.66) --- */
.prod-card .pc-img .pc-line{ font-size:8.5px; letter-spacing:.05em; padding:4px 9px; max-width:calc(100% - 112px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-card .pc-img .pc-stock{ font-size:9px; padding:3px 7px; }
.prod-card .pc-img .pc-stock .dot{ width:7px; height:7px; }


/* --- Add-to-Cart Toast (v.67) --- */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper{ position:fixed; top:84px; right:20px; z-index:9999; width:min(380px,calc(100vw - 32px)); pointer-events:none; background:none; border:0; padding:0; margin:0; }
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message{ pointer-events:auto; position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px 14px 50px; border-radius:12px; background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 12px 30px rgba(16,24,40,.16); margin:0 0 10px; font-size:14px; line-height:1.4; list-style:none; overflow:hidden; animation:sp-toast-in .32s cubic-bezier(.2,.8,.2,1) both, sp-toast-out .45s ease 4.8s forwards; }
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message::before{ content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:oklch(0.62 0.15 150) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat; }
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message .wc-forward{ order:2; margin-left:auto; white-space:nowrap; padding:8px 14px; border-radius:8px; background:var(--navy,#1e3a44); color:#fff !important; font-size:12.5px; font-weight:600; text-decoration:none; border:0; line-height:1; box-shadow:none; }
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message .wc-forward:hover{ filter:brightness(1.12); }
@keyframes sp-toast-in{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
@keyframes sp-toast-out{ to{ opacity:0; transform:translateY(-10px); visibility:hidden; } }
@media (max-width:640px){ body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper{ top:72px; right:12px; left:12px; width:auto; } }


/* --- Checkout Feinschliff (v.68): Feldraster + Zahlart-Überschrift + Order-Table --- */
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row{ float:none !important; width:auto !important; margin-right:0 !important; grid-column:1 / -1; }
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row-first{ grid-column:1; }
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row-last{ grid-column:2; }
@media (max-width:560px){ .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr; } .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row-first,.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row-last{ grid-column:1; } }
:is(.wc-page-content,.woocommerce-page .entry-content) h3.sp-pay-heading{ margin:22px 0 10px; font-size:16px; font-weight:800; color:var(--navy); }
.woocommerce-checkout-review-order-table th.product-total,.woocommerce-checkout-review-order-table td.product-total{ text-align:right; white-space:nowrap; vertical-align:top; }
.woocommerce-checkout-review-order-table td.product-name{ vertical-align:top; }
.woocommerce-checkout-review-order-table .product-quantity{ color:var(--ink-3); font-weight:600; margin-left:4px; }
.woocommerce-checkout-review-order-table dl.variation{ display:flex; flex-wrap:wrap; gap:0 5px; margin:4px 0 0; font-size:12px; color:var(--ink-3); }
.woocommerce-checkout-review-order-table dl.variation dt{ margin:0; font-weight:600; }
.woocommerce-checkout-review-order-table dl.variation dd{ margin:0; }
.woocommerce-checkout-review-order-table dl.variation dd p{ margin:0; display:inline; }
.woocommerce-checkout-review-order-table tfoot th{ text-align:left; }
.woocommerce-checkout-review-order-table tfoot td{ text-align:right; }


/* --- My Account + Danke-Seite (v.69) --- */
/* Navigation: keine Bullets, keine Unterstriche, saubere Pills */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li::marker{ content:"" !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ text-decoration:none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--navy); color:#fff; text-decoration:none !important; }
/* Order-Actions Buttons: gleich groß, nebeneinander, konsistent */
.woocommerce-account .woocommerce-orders-table__cell-order-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{ margin:0 !important; padding:8px 14px !important; font-size:13px !important; font-weight:700 !important; border-radius:9px !important; box-shadow:none !important; line-height:1 !important; text-decoration:none !important; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view{ background:var(--navy) !important; color:#fff !important; border:1px solid var(--navy) !important; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:not(.view){ background:#fff !important; color:var(--navy) !important; border:1px solid var(--line) !important; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover{ filter:brightness(1.06); }
/* Order-Nummer im Content nicht unterstreichen */
.woocommerce-account .woocommerce-orders-table a{ text-decoration:none; font-weight:700; }
.woocommerce-account .woocommerce-orders-table a:hover{ text-decoration:underline; }

/* Danke-Seite (order-received) */
.woocommerce-order-received .woocommerce-thankyou-order-received{ font-size:22px; font-weight:800; color:var(--navy); margin:0 0 22px; padding:16px 20px; background:#fff; border:1px solid var(--line); border-left:4px solid oklch(0.62 0.15 150); border-radius:12px; }
.woocommerce-order-received ul.woocommerce-order-overview{ list-style:none !important; margin:0 0 28px !important; padding:0 !important; border:0 !important; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.woocommerce-order-received ul.woocommerce-order-overview li{ list-style:none !important; margin:0 !important; padding:14px 16px !important; background:#fff; border:1px solid var(--line) !important; border-radius:12px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:700; }
.woocommerce-order-received ul.woocommerce-order-overview li strong{ display:block; margin-top:6px; font-size:16px; text-transform:none; letter-spacing:0; color:var(--navy); font-weight:800; }
.woocommerce-order-received .woocommerce-column__title,.woocommerce-order-received .woocommerce-order-details__title,.woocommerce-order-received h2{ font-size:18px; font-weight:800; color:var(--navy); margin:26px 0 12px; }
.woocommerce-order-received .woocommerce-bacs-bank-details,.woocommerce-order-received .wc-bacs-bank-details{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:0 0 26px; }
.woocommerce-order-received .woocommerce-bacs-bank-details ul,.woocommerce-order-received .wc-bacs-bank-details{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woocommerce-order-received .woocommerce-bacs-bank-details li{ list-style:none !important; margin:0 0 4px !important; font-size:14px; }
.woocommerce-order-received .woocommerce-customer-details,.woocommerce-order-received .woocommerce-order-details{ margin-bottom:26px; }
.woocommerce-order-received address{ font-style:normal; line-height:1.6; }


/* --- My Account Mobile (v.70) --- */
.woocommerce-account .woocommerce-MyAccount-content{ min-width:0; }
.woocommerce-account .woocommerce-MyAccount-content table{ max-width:100%; }
@media (max-width:820px){
  .woocommerce-account .woocommerce{ flex-direction:column; flex-wrap:nowrap; gap:22px; }
  .woocommerce-account .woocommerce-MyAccount-navigation{ flex:none; width:100%; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul{ flex-direction:row !important; flex-wrap:nowrap; overflow-x:auto; gap:6px !important; padding:0 0 4px !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  .woocommerce-account .woocommerce-MyAccount-navigation li{ flex:0 0 auto; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a{ padding:9px 15px; font-size:14px; white-space:nowrap; background:var(--surface-2); border:1px solid var(--line); }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ border-color:var(--navy); }
  .woocommerce-account .woocommerce-MyAccount-content{ width:100%; flex:none; }
  .woocommerce-account .woocommerce-MyAccount-content .col2-set .col-1,
  .woocommerce-account .woocommerce-MyAccount-content .col2-set .col-2{ width:100% !important; float:none !important; margin-bottom:18px; }
  .woocommerce-account table.shop_table_responsive{ border:0 !important; background:transparent !important; box-shadow:none !important; }
  .woocommerce-account table.shop_table_responsive thead{ display:none !important; }
  .woocommerce-account table.shop_table_responsive tbody tr{ display:block !important; background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 16px; margin:0 0 14px; }
  .woocommerce-account table.shop_table_responsive tbody td,.woocommerce-account table.shop_table_responsive tbody th{ display:flex !important; justify-content:space-between; align-items:center; gap:14px; padding:11px 0 !important; border:0 !important; border-top:1px solid var(--line) !important; text-align:right !important; font-size:14px; background:transparent !important; }
  .woocommerce-account table.shop_table_responsive tbody tr > :first-child{ border-top:0 !important; }
  .woocommerce-account table.shop_table_responsive tbody td::before,.woocommerce-account table.shop_table_responsive tbody th::before{ content:attr(data-title) !important; float:none !important; margin:0 !important; font-weight:700; color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; text-align:left; white-space:nowrap; }
  .woocommerce-account table.shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions{ justify-content:flex-start !important; flex-wrap:wrap; gap:8px; }
  .woocommerce-account table.shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions::before{ display:none !important; }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button{ flex:1 1 0; text-align:center; justify-content:center; padding:11px 14px !important; }
}

/* --- My Account Mobile Fix (v.71): Wert als ein Block rechtsbuendig --- */
@media (max-width:820px){
  .woocommerce-account table.shop_table_responsive tbody td:not(.woocommerce-orders-table__cell-order-actions),.woocommerce-account table.shop_table_responsive tbody th{ display:block !important; overflow:hidden; line-height:21px; }
  .woocommerce-account table.shop_table_responsive tbody td:not(.woocommerce-orders-table__cell-order-actions)::before,.woocommerce-account table.shop_table_responsive tbody th::before{ float:left !important; margin-right:14px !important; line-height:21px; }
}

/* --- Order-Details (v.72): Danke-Seite + Bestellansicht --- */
.woocommerce-order-details ul.wc-item-meta{ list-style:none !important; margin:4px 0 0 !important; padding:0 !important; font-size:12px; color:var(--ink-3); }
.woocommerce-order-details ul.wc-item-meta li{ list-style:none !important; display:flex; flex-wrap:wrap; gap:5px; margin:0 !important; }
.woocommerce-order-details ul.wc-item-meta li strong{ font-weight:600; }
.woocommerce-order-details ul.wc-item-meta li p{ margin:0 !important; display:inline; }
.woocommerce-order-details td.product-name a{ text-decoration:none !important; font-weight:700; color:var(--navy); }
.woocommerce-order-details td.product-name .product-quantity{ color:var(--ink-3); font-weight:600; margin-left:4px; }
.woocommerce-order-details thead th.product-total,.woocommerce-order-details td.product-total,.woocommerce-order-details tfoot td{ text-align:right !important; }
.woocommerce-order-details td.product-name,.woocommerce-order-details td.product-total{ vertical-align:top; }
.woocommerce-order-details .button,.woocommerce-order-details a.button{ display:inline-flex !important; align-items:center; background:#fff !important; color:var(--navy) !important; border:1px solid var(--line) !important; border-radius:9px !important; padding:9px 16px !important; font-size:13px !important; font-weight:700 !important; box-shadow:none !important; text-decoration:none !important; line-height:1 !important; }
.woocommerce-order-details .button:hover{ border-color:var(--navy) !important; }

/* ── Mega-Menü-Fix (v.73): am Header-Container ausrichten statt unter dem Button zentrieren,
   damit es auf kleineren Desktop-Breiten nicht links aus dem Bild ragt. ── */
.header .wrap{ position:relative; }
.header .has-menu{ position:static; }
.header .megamenu{
  left:16px; right:auto; top:calc(100% - 6px);
  width:min(900px, calc(100% - 32px));
  transform:translateY(8px);
}
.header .has-menu:hover .megamenu,
.header .has-menu:focus-within .megamenu{ opacity:1; visibility:visible; transform:translateY(0); }
.header .megamenu::before{ top:-26px; left:0; right:0; height:26px; }

/* ── Tablet/kleine Desktops (v.75): Burger-Menü schon ab 900px, damit die Navigation nicht umbricht;
   Hero-Text bleibt links neben dem Produktbild (kein Überlappen). ── */
@media (max-width:900px){
  .nav, .header-actions .icon-btn.search-d{ display:none; }
  .hamburger{ display:grid; }
}
@media (min-width:641px){
  .hero--canvas .hero-copy{ max-width:min(560px, calc(50% - 24px)); }
}

/* ════════════════════════════════════════════════════════════════════════
   Design-Refinement v.76 — einheitliche Typo-Skala + Conversion-Details
   Skala: 12 · 13 · 14 · 15 · 16 (Basis) · 18 · 20 · 24 · 32 · 40 · 48
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:16px; --fs-lead:17px;
  --fs-h4:18px; --fs-h3:20px; --fs-h2:clamp(26px,2.9vw,38px); --fs-h1:clamp(30px,3.4vw,44px);
}
body{ font-size:var(--fs-base); }

/* Section-Überschriften */
.section-head h2{ font-size:var(--fs-h2); line-height:1.08; }
.section-head p{ font-size:var(--fs-lead); }

/* Fließtext / Produkttexte */
.prose p, .prose li, .prose .art-list li{ font-size:var(--fs-base); line-height:1.7; }
.prose h3{ font-size:var(--fs-h3); margin:30px 0 12px; line-height:1.25; }
.prose .research-note{ font-size:var(--fs-md); }
.acc-body, .acc-body p{ font-size:15px; line-height:1.65; }

/* ── Produktseite ─────────────────────────────────────────────────────── */
.pdp-info h1{ font-size:var(--fs-h1); line-height:1.08; margin:16px 0 0; }
.pi-price-top{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-top:12px; }
.pi-price-top .ppt-price{ font-size:26px; font-weight:800; color:var(--ink); white-space:nowrap; letter-spacing:-.01em; }
.pi-price-top .ppt-price .sp-from{ font-size:15px; font-weight:600; color:var(--ink-3); margin-right:2px; }
.pi-price-top .ppt-note{ font-size:var(--fs-sm); color:var(--ink-3); }
.pdp-info .pi-sub{ font-size:var(--fs-base); font-weight:400; line-height:1.65; color:var(--ink-2); margin-top:16px; max-width:62ch; }
.pdp-info .pi-sub p{ margin:0; }
.pdp-info .pi-sub p + p{ margin-top:12px; padding:11px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-2); }
.pdp-info .pi-sub strong{ color:var(--ink); font-weight:700; }
.pi-stat .s-val{ font-size:var(--fs-h4); }

/* Kaufbox */
.pi-buy{ margin-top:22px; }
.pi-buy .variations .label{ text-align:left !important; }
.pi-buy .variations .label label{ text-align:left; display:block; }
.pi-buy .woocommerce-variation-price .price{ font-size:24px; }
.pi-buy .single_add_to_cart_button, .pi-buy .woocommerce button.button.alt{ font-size:16px; }

/* Varianten-Kacheln (ersetzen das Dropdown) */
.has-sp-pills .variations select.sp-pills-select{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none; }
.has-sp-pills .reset_variations{ display:none !important; }
.sp-pills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; margin:6px 0 2px; }
.sp-pills .variant{ padding:12px 10px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); text-align:center; font:inherit; color:var(--ink); transition:border-color .15s, background .15s, box-shadow .15s; }
.sp-pills .variant:hover{ border-color:var(--navy); }
.sp-pills .variant.sel{ border-color:var(--navy); background:var(--acc-t); box-shadow:0 0 0 1px var(--navy) inset; }
.sp-pills .variant .v-size{ font-weight:800; font-size:15px; }
.sp-pills .variant .v-price{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:2px; font-family:inherit; }
.sp-pills .variant.oos{ opacity:.45; cursor:not-allowed; }

/* Trust-Kacheln: doppelte Rahmen entfernen */
.pi-trust > div > div, .pi-trust > a > div{ border:0 !important; padding:0 !important; background:none !important; box-shadow:none !important; }
.pi-trust strong{ font-size:var(--fs-sm); }

/* COA-Links kompakter */
.pi-coa-links a{ font-size:12.5px; }

/* ── Produktkarten (Shop, Startseite, „Weitere Produkte") ─────────────── */
.prod-card{ padding:18px 18px 20px; }
.prod-card .pc-img{ border:1px solid var(--line); background:#fff; padding:10px; margin:0 0 16px; }
.prod-card h3{ font-size:var(--fs-h4); line-height:1.25; }
.prod-card .pc-out{ font-size:var(--fs-sm); font-weight:500; line-height:1.45; color:var(--ink-3); margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em; }
.prod-card .pc-foot{ margin-top:auto; padding-top:14px; }
.prod-card .price{ font-size:var(--fs-h4); font-weight:800; white-space:nowrap; }
.prod-card .price .sp-from{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); }
.prod-card .price .screen-reader-text{ display:none; }
.prod-card .btn{ padding:10px 16px; font-size:var(--fs-md); }

/* Kategorie-Seiten-Karten */
.prod-card-price{ white-space:nowrap; }
.prod-card-price .sp-from{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); }

/* Mobile */
@media (max-width:760px){
  :root{ --fs-h1:30px; --fs-h2:26px; }
  .pi-price-top .ppt-price{ font-size:24px; }
  .sp-pills{ grid-template-columns:repeat(3,1fr); }
  .prod-card h3{ font-size:17px; }
}

/* Checkout (v.78): Aufzählungspunkt vor der Zahlart entfernen, Rechtstexte einheitlich klein */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li{ list-style:none !important; margin-left:0; padding-left:0; }
.woocommerce-checkout #payment ul.payment_methods li::marker{ content:""; }
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p{ font-size:13px; line-height:1.55; color:var(--ink-3); }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-checkout #sunpept_ruo_consent_field label,
.woocommerce-checkout .sp-ruo label{ font-size:14px; line-height:1.5; }

/* Checkout (v.79): Zahlarten-Beschreibung ohne zusätzliche blaue Hinterlegung */
.woocommerce-checkout #payment div.payment_box{ background:none !important; padding:6px 0 0 !important; margin:0 !important; color:var(--ink-2); font-size:14px; line-height:1.6; }
.woocommerce-checkout #payment div.payment_box::before{ display:none !important; }
.woocommerce-checkout #payment div.payment_box p{ font-size:14px; }

/* v.80: nicht verfügbare Substanzen auf der Startseite */
.ra-chips .chip--soon{ opacity:.55; border-style:dashed; }
.ra-chips .chip--soon small{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; margin-left:4px; }

/* ════════════════════════════════════════════════════════════════════════
   v.81 — Designsystem-Konsolidierung (Premium-Overhaul 10/2026)
   Rollen: Navy = Primäraktion (Kauf), Steelblue = sekundär/Fläche,
   Danger/Success nur für Status. Fokus immer sichtbar.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --danger:#B42318; --danger-t:#FEF3F2; --success:#067647; --success-t:#ECFDF3;
  --focus:0 0 0 3px oklch(0.55 0.08 218 / .45);
  --dur:.18s;
}

/* Fokus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* Buttons: Navy = Kauf/Primär, Steelblue-Fläche = sekundär */
.btn-acc{ background:var(--navy); color:#fff; }
.btn-acc:hover{ background:oklch(0.30 0.035 220); color:#fff; }
.prod-card .btn, .prod-card .btn-acc{ background:var(--acc-t); color:var(--navy); box-shadow:none; border:1px solid var(--line); }
.prod-card .btn:hover{ background:var(--navy); color:#fff; transform:none; }
.btn.loading, .button.loading, .single_add_to_cart_button.loading{ opacity:.7; pointer-events:none; cursor:progress; }
.woocommerce a.checkout-button, .woocommerce a.button.checkout, .mc-checkout, .wc-proceed-to-checkout .checkout-button{ background:var(--navy) !important; color:#fff !important; }
.btn, .button, .single_add_to_cart_button{ min-height:44px; }

/* Fehler- & Statusmeldungen (Checkout, Warenkorb, Add-to-Cart) */
.woocommerce-error, .sp-checkout-notices .woocommerce-error{ background:var(--danger-t) !important; border:1px solid oklch(0.85 0.06 25) !important; color:var(--danger) !important; border-radius:12px; padding:14px 16px !important; list-style:none; }
.woocommerce-error li, .woocommerce-error a{ color:var(--danger) !important; }
.woocommerce-error::before{ display:none; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{ border-color:var(--danger) !important; background:var(--danger-t); }
.woocommerce form .form-row.woocommerce-invalid label{ color:var(--danger); }
.checkout-inline-error-message{ color:var(--danger); font-size:13px; margin-top:4px; }
.sp-atc-error{ margin:10px 0 0; padding:9px 12px; border-radius:10px; background:var(--danger-t); color:var(--danger); font-size:13.5px; }

/* Produktseite: Galerie-Thumbs, COA-Hinweis, Trust als Links */
.gallery-thumbs .g-thumb img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.pi-coa-note{ margin:10px 0 0; font-size:12.5px; color:var(--ink-3); }
.pi-trust a{ text-decoration:none; color:inherit; }
.pi-trust a:hover strong{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* Mobile Sticky-Kaufleiste */
.sp-sticky-atc{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -6px 24px oklch(0.2 0.03 220 / .08); transform:translateY(110%); transition:transform .25s var(--ease); }
.sp-sticky-atc .ssa-info{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.sp-sticky-atc strong{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-sticky-atc .ssa-price{ font-size:13px; color:var(--ink-2); }
.sp-sticky-atc .ssa-btn{ background:var(--navy); color:#fff; font-weight:700; font-size:15px; padding:12px 18px; border-radius:999px; min-height:44px; white-space:nowrap; }
@media (max-width:900px){ .sp-sticky-atc{ display:flex; } .sp-sticky-atc.show{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .sp-sticky-atc{ transition:none; } }

/* Suche: Overlay, Drawer, Ergebnisseite */
.sp-search-form{ display:flex; gap:8px; width:100%; }
.sp-search-form input[type=search]{ flex:1; min-width:0; height:48px; padding:0 16px; border:1.5px solid var(--line-2); border-radius:12px; font:inherit; font-size:16px; background:#fff; color:var(--ink); }
.sp-search-form button{ height:48px; padding:0 18px; border-radius:12px; background:var(--navy); color:#fff; font-weight:700; }
.sp-search-ov{ position:fixed; inset:0; z-index:200; background:oklch(0.2 0.03 220 / .35); display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 0; }
.sp-search-ov[hidden]{ display:none; }
.sso-panel{ position:relative; width:min(640px,100%); background:#fff; border-radius:16px; padding:18px 56px 18px 18px; box-shadow:var(--shadow-lg); }
.sso-close{ position:absolute; top:18px; right:12px; width:44px; height:44px; font-size:26px; line-height:1; color:var(--ink-2); border-radius:10px; }
.sso-close:hover{ background:var(--surface-2); }
.d-search{ padding:4px 0 14px; }
.sp-search-form--page{ max-width:560px; margin-top:20px; }
.sp-search-body{ padding:32px 28px 88px; }
.sp-search-h{ font-size:var(--fs-h3,20px); margin:8px 0 18px; }
.sp-search-body .prod-grid{ margin-bottom:40px; }
.sp-search-list{ display:grid; gap:10px; max-width:760px; }
.sp-search-list a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.sp-search-list a:hover{ border-color:var(--navy); }
.sp-search-list strong{ display:block; font-size:15px; } .sp-search-list span{ display:block; font-size:13.5px; color:var(--ink-2); margin-top:4px; }
.sp-search-empty{ max-width:640px; } .sp-search-empty h2{ font-size:22px; } .sp-search-empty p{ color:var(--ink-2); margin-top:10px; }
.sp-search-cats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px !important; }

/* Mobile-Drawer: Produkte linksbündig */
.drawer .d-prod{ justify-content:flex-start; gap:12px; }

/* Warenkorb/Checkout: USt-Hinweiszeile ohne Label (mobil) */
.sp-vat-note td::before{ display:none !important; content:none !important; }
.woocommerce-shipping-totals td .woocommerce-Price-amount{ font-weight:700; }

/* Cookie-Banner (Complianz): kompakte Karte unten rechts */
.cmplz-cookiebanner{
  top:auto !important; left:auto !important; right:24px !important; bottom:24px !important;
  transform:none !important; -ms-transform:none !important; margin:0 !important;
  width:384px !important; max-width:calc(100vw - 32px) !important; min-width:0 !important;
  grid-template-columns:1fr !important; grid-gap:12px !important;
  padding:20px 20px 16px !important; border:1px solid rgba(10,23,38,.08) !important;
  border-radius:18px !important; background:#fff !important;
  box-shadow:0 24px 60px -12px rgba(10,23,38,.35), 0 2px 6px rgba(10,23,38,.06) !important;
  font-family:'Manrope',system-ui,sans-serif !important;
}
.cmplz-cookiebanner .cmplz-header{ grid-template-columns:1fr auto !important; grid-column:1 / -1 !important; }
.cmplz-cookiebanner .cmplz-logo{ display:none !important; }
.cmplz-cookiebanner .cmplz-title{ grid-column-start:1 !important; justify-self:start !important; font-size:15px !important; font-weight:700 !important; color:var(--navy) !important; letter-spacing:-.01em; }
.cmplz-cookiebanner .cmplz-close{ grid-column-start:2 !important; font-size:18px !important; color:var(--ink-3) !important; opacity:.8; }
.cmplz-cookiebanner .cmplz-close:hover{ opacity:1; color:var(--navy) !important; }
.cmplz-cookiebanner .cmplz-body{ min-width:0 !important; grid-column:1 / -1 !important; }
.cmplz-cookiebanner .cmplz-message{ font-size:13px !important; line-height:1.55 !important; color:var(--ink-2) !important; margin:0 !important; }
.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider{ grid-column:1 / -1 !important; }
.cmplz-cookiebanner .cmplz-divider{ display:none !important; }
.cmplz-cookiebanner .cmplz-buttons{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{ min-height:42px !important; height:auto !important; padding:10px 12px !important; border-radius:999px !important; font-size:14px !important; font-weight:700 !important; white-space:nowrap; transition:background-color .15s, color .15s, border-color .15s; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept, .cmplz-cookiebanner .cmplz-btn.cmplz-deny{ background:var(--navy) !important; border:1.5px solid var(--navy) !important; color:#fff !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover{ background:#16324d !important; border-color:#16324d !important; }
/* Einstellungen als ruhiger Textlink über die volle Breite */
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{ grid-column:1 / -1; background:transparent !important; border:0 !important; color:var(--navy) !important; min-height:32px !important; padding:4px !important; font-weight:600 !important; text-decoration:underline; text-underline-offset:3px; }
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{ background:#fff !important; border:1.5px solid var(--navy) !important; text-decoration:none; min-height:42px !important; }
.cmplz-cookiebanner .cmplz-links{ justify-content:flex-start !important; font-size:12px !important; }
.cmplz-cookiebanner .cmplz-links a{ color:var(--ink-3) !important; }
.cmplz-cookiebanner .cmplz-categories .cmplz-category{ border-radius:12px !important; }
/* Erst die RUO-Bestätigung, danach der Cookie-Banner (nie beide übereinander) */
html.ruo-lock .cmplz-cookiebanner{ visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
.cmplz-cookiebanner.cmplz-show{ animation:spCmplzIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes spCmplzIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .cmplz-cookiebanner.cmplz-show{ animation:none; } }
@media (max-width:600px){
  .cmplz-cookiebanner{ right:8px !important; left:8px !important; bottom:8px !important; width:auto !important; max-width:none !important; max-height:70vh; overflow-y:auto; padding:16px !important; border-radius:16px !important; }
}

/* v.82 — QA-Korrekturen */
/* CTA-Bänder mit Navy-Hintergrund: Button hell absetzen */
.faq-cta .btn-acc, .au-cta .btn-acc, .gl-cta .btn-acc, .sp-cta-banner .btn-acc{ background:var(--acc); color:var(--navy); }
.faq-cta .btn-acc:hover, .au-cta .btn-acc:hover, .gl-cta .btn-acc:hover, .sp-cta-banner .btn-acc:hover{ background:#fff; color:var(--navy); }
/* Fokus auf dunklen Flächen hell */
.footer a:focus-visible, .footer button:focus-visible, .utility a:focus-visible,
.faq-cta :focus-visible, .au-cta :focus-visible, .gl-cta :focus-visible, .sp-cta-banner :focus-visible{ outline-color:#fff; }
/* Sticky-Kaufleiste: Footer nicht verdecken */
@media (max-width:900px){ body.has-sticky-atc{ padding-bottom:76px; } }
.sp-sticky-atc:not(.show){ visibility:hidden; }
.sp-sticky-atc.show{ visibility:visible; }
/* Mindesthöhe nur für Aktions-Buttons, nicht für Notice-Links */
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{ min-height:0; }