/* ============================================================
   NOIR — Shared Design System
   ============================================================ */

:root{
  --ink:#141211;
  --ink-soft:#5B554D;
  --ink-faint:#8A8377;
  --paper:#FAF7F3;
  --paper-alt:#F1EAE1;
  --surface:#FFFFFF;
  --black:#141211;
  --black-2:#1E1B18;
  --copper:#B9764A;
  --copper-deep:#8A5836;
  --copper-soft:#EDD9C4;
  --border:#E4DACC;
  --border-dark:#38332D;
  --success:#3E7A56;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;

  --shadow-sm:0 1px 2px rgba(20,18,17,0.06);
  --shadow-md:0 8px 24px rgba(20,18,17,0.10);
  --shadow-lg:0 24px 60px rgba(20,18,17,0.16);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms;
  --dur-base:280ms;
  --dur-slow:420ms;

  --container:1200px;
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Rubik',system-ui,-apple-system,sans-serif;
  line-height:1.14;
  margin:0;
  letter-spacing:-0.015em;
  color:var(--ink);
}
p{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
svg{display:block;flex-shrink:0;}

::selection{background:var(--copper-soft);color:var(--black);}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--copper-deep);
  outline-offset:3px;
  border-radius:4px;
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px;}
@media (min-width:768px){.container{padding:0 40px;}}

.container-narrow{max-width:820px;margin:0 auto;padding:0 20px;}

/* Anchor jumps must clear the sticky bar instead of landing under it. */
:target{scroll-margin-top:calc(var(--header-h) + 20px);}

/* ---------------- Agency credit ----------------
   Full-width white band closing the page. The logo's wordmark is
   near-black, so it needs a light ground to be legible at all. */
.footer-credit{
  background:#fff;
  padding:28px 0 30px;
}
.footer-credit .container{
  display:flex;flex-direction:column;gap:22px;
}
/* Copyright line rides in the white band, so it needs dark-on-light. */
.footer-credit .footer-bottom{color:var(--ink-faint);}
.footer-credit .credit-row{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding-top:20px;border-top:1px solid var(--border);
}
.footer-credit .credit-label{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:#8A8378;font-weight:600;
}
.footer-credit a{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;padding:6px 10px;
  transition:background var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.footer-credit a:hover{background:var(--paper-alt);transform:translateY(-2px);}
.footer-credit a:focus-visible{outline:2.5px solid var(--copper-deep);outline-offset:2px;}
.footer-credit img{height:38px;width:auto;display:block;}
@media (max-width:560px){
  .footer-credit{padding:24px 0 26px;}
  .footer-credit .container{gap:18px;}
  .footer-credit img{height:32px;}
}

/* ---------------- Preview notice ----------------
   Sits above everything and stays put: this build is a design preview,
   not a live shop, and that has to be unmistakable on every page. */
.preview-flag{
  background:#F5E3C4;
  color:#5A3E14;
  border-bottom:1px solid #E0C79B;
  font-size:12.5px;
  line-height:1.5;
  padding:9px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:9px;
  text-align:left;
}
.preview-flag svg{stroke:#8A5F1B;flex-shrink:0;margin-top:1px;}
.preview-flag strong{font-weight:800;}
.preview-flag span{max-width:74ch;}
@media (max-width:560px){
  .preview-flag{font-size:11.5px;padding:8px 14px;gap:7px;}
  .preview-flag svg{width:14px;height:14px;}
}
@media (min-width:768px){.container-narrow{padding:0 40px;}}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.cursor-pointer{cursor:pointer;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;
  border-radius:100px;
  font-weight:700;
  font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
  white-space:nowrap;
  min-height:46px;
  touch-action:manipulation;
  text-align:center;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--black);color:#fff;}
.btn-primary:hover{background:var(--black-2);box-shadow:var(--shadow-md);}
.btn-copper{background:var(--copper-deep);color:#fff;}
.btn-copper:hover{background:#754626;box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{padding:9px 18px;font-size:13.5px;min-height:38px;}
.btn-lg{padding:16px 32px;font-size:16.5px;min-height:54px;}
.btn-block{width:100%;}

/* ---------------- Announcement ---------------- */
.announce{
  background:var(--black);
  color:#EFE7DC;
  text-align:center;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  padding:9px 16px;
}
.announce strong{color:var(--copper);font-weight:700;}
@media (max-width:520px){ .announce{font-size:12px;padding:8px 14px;} }

/* ---------------- Header ---------------- */
/* Transparent while the dark hero / page header is behind it; solid once
   the page scrolls under it. The `scrolled` class is set in main.js. */
header.site{
  position:sticky;top:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             backdrop-filter var(--dur-base) var(--ease-out);
}
header.site.scrolled{
  background:rgba(250,247,243,0.88);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--border);
}

/* Light-on-dark while transparent. */
header.site .logo{color:#fff;}
header.site .nav-links a{color:rgba(255,255,255,0.78);}
header.site .nav-links a:hover,
header.site .nav-links a[aria-current="page"]{color:#fff;}
header.site .nav-price{color:#fff;}
header.site .burger svg{stroke:#fff;}

header.site.scrolled .logo{color:var(--ink);}
header.site.scrolled .nav-links a{color:var(--ink-soft);}
header.site.scrolled .nav-links a:hover,
header.site.scrolled .nav-links a[aria-current="page"]{color:var(--ink);}
header.site.scrolled .nav-price{color:var(--ink);}
header.site.scrolled .burger svg{stroke:var(--ink);}

header.site .logo,header.site .nav-links a,
header.site .nav-price,header.site .burger svg{
  transition:color var(--dur-base) var(--ease-out),
             stroke var(--dur-base) var(--ease-out);
}

/* Price + buy button only appear once the user scrolls. */
.nav-actions .nav-price,
.nav-actions .btn-sm{
  opacity:0;visibility:hidden;transform:translateY(-6px);
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility var(--dur-base) var(--ease-out);
}
header.site.scrolled .nav-actions .nav-price,
header.site.scrolled .nav-actions .btn-sm{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}

/* Let the dark top section run underneath the transparent bar — only
   when it's actually the first thing in <main>. If another section
   (e.g. the bundle teaser) precedes it, this must NOT apply, or it
   would yank the hero up underneath that section instead of the header.
   The matching top padding lives on .hero / .page-header themselves,
   because those rules come later in this file and would reset it here. */
main#top > .hero:first-child,
main#top > .page-header:first-child{margin-top:calc(-1 * (var(--header-h) + 1px));}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  height:var(--header-h);
}
.logo{
  font-family:'Rubik',sans-serif;
  font-weight:800;
  font-size:21px;
  letter-spacing:0.04em;
  display:inline-flex;align-items:center;gap:9px;
  flex-shrink:0;
}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--copper);display:inline-block;}

.nav-links{display:none;gap:32px;font-size:15px;font-weight:600;}
.nav-links a{
  color:var(--ink-soft);
  transition:color var(--dur-fast) var(--ease-out);
  position:relative;
  padding:4px 2px;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--copper);
  transition:right var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after{right:0;}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{right:0;}
/* 768px = iPad portrait: show the real navigation there, otherwise the
   site reads as a single long page because the links sit in the burger. */
@media (min-width:768px){.nav-links{display:flex;}}
/* Six items only fit on tablets once the gaps tighten.
   (The matching .nav-price override lives further down, after that
   element's own display rules, or it would be overridden here.) */
@media (min-width:768px) and (max-width:1023px){
  /* NOIRMESSER is a long wordmark — tighten logo and gaps so six nav
     items still fit on iPad portrait without overflowing. */
  .nav-links{gap:15px;font-size:13.5px;}
  .logo{font-size:17px;letter-spacing:0.02em;}
}

.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-price{font-weight:700;font-size:15px;display:none;}
@media (min-width:640px){.nav-price{display:inline-block;}}
/* Tablets run six nav items; the buy button already carries the price. */
@media (min-width:768px) and (max-width:1023px){.nav-price{display:none;}}
@media (max-width:400px){ .nav-actions .btn{padding:9px 14px;font-size:13px;} }

.burger{
  display:flex;background:none;border:none;padding:8px;cursor:pointer;
  align-items:center;justify-content:center;
}
@media (min-width:768px){.burger{display:none;}}
.burger svg{stroke:var(--ink);}

/* Mobile nav */
.mobile-nav{
  position:fixed;inset:0;z-index:200;
  background:rgba(20,18,17,0.5);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
}
.mobile-nav.open{opacity:1;pointer-events:auto;}
.mobile-nav-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(330px,88vw);
  background:var(--paper);
  padding:20px 24px 32px;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--dur-base) var(--ease-out);
  box-shadow:var(--shadow-lg);
  overflow-y:auto;
}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0);}
.mobile-nav-close{align-self:flex-end;background:none;border:none;padding:10px;cursor:pointer;margin-bottom:8px;}
.mobile-nav-close svg{stroke:var(--ink);}
.mobile-nav-panel .m-link{
  font-family:'Rubik',sans-serif;font-weight:600;font-size:18px;
  padding:15px 4px;border-bottom:1px solid var(--border);
}
.mobile-nav-panel .m-label{
  font-size:11.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink-faint);margin:26px 4px 6px;
}
.mobile-nav-panel .m-link-sm{
  font-size:15px;font-weight:600;color:var(--ink-soft);
  padding:11px 4px;border-bottom:1px solid var(--border);
}
.mobile-nav-cta{margin-top:26px;}

/* ---------------- Sections ---------------- */
section{padding:72px 0;}
@media (max-width:639px){ section{padding:56px 0;} }

.section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.section-head h2{font-size:clamp(26px,4vw,40px);font-weight:800;margin-bottom:14px;}
.section-head p{color:var(--ink-soft);font-size:clamp(15px,1.5vw,16.5px);}
.section-eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--copper-deep);
  display:block;margin-bottom:12px;
}

.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------------- Hero (video) ---------------- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:600px;
  background:var(--black);
}
@media (min-width:960px){ .hero{ min-height:740px; } }

/* Only when the hero is the very first thing in <main> does it duck
   underneath the transparent header — see the margin-top rule above.
   This extra padding/min-height keeps the visible area the same size
   despite that negative margin eating into it from the top. */
main#top > .hero:first-child{
  padding-top:calc(var(--header-h) + 1px);
  min-height:calc(600px + var(--header-h));
}
@media (min-width:960px){ main#top > .hero:first-child{ min-height:calc(740px + var(--header-h)); } }

.hero-media{position:absolute;inset:0;z-index:0;}
.hero-video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 48%;
  display:block;
}
.hero-media-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.76) 28%, rgba(10,9,8,0.40) 52%, rgba(10,9,8,0.08) 74%, rgba(10,9,8,0) 90%),
    linear-gradient(180deg, rgba(10,9,8,0.38) 0%, rgba(10,9,8,0) 26%, rgba(10,9,8,0) 74%, rgba(10,9,8,0.46) 100%);
}
@media (max-width:767px){
  /* Lighter than desktop: the footage is already dark, so a heavy scrim
     just hides the product without buying extra contrast. */
  .hero-media-overlay{
    background:linear-gradient(180deg, rgba(10,9,8,0.70) 0%, rgba(10,9,8,0.48) 30%, rgba(10,9,8,0.28) 55%, rgba(10,9,8,0.50) 80%, rgba(10,9,8,0.76) 100%);
  }
  .hero-video{object-position:64% 50%;}
}

.hero .container{position:relative;z-index:2;width:100%;}
.hero-content{max-width:580px;padding:56px 0;}
@media (max-width:639px){ .hero-content{padding:52px 0 44px;max-width:100%;} }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--copper-deep);
  background:var(--copper-soft);
  padding:7px 14px 7px 11px;
  border-radius:100px;
  margin-bottom:20px;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.eyebrow svg{stroke:var(--copper-deep);}

.hero h1{
  font-size:clamp(31px,5vw,56px);
  font-weight:800;
  margin-bottom:16px;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,0.35);
  letter-spacing:-0.025em;
}
.hero h1 em{font-style:normal;color:var(--copper);}

.hero-sub{
  font-size:clamp(15.5px,1.5vw,18px);
  color:#DED8CE;
  max-width:38ch;
  margin-bottom:28px;
}

.hero-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.hero-price{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(34px,4vw,44px);color:#fff;}
.hero-price-note{font-size:14px;color:#BFB8AC;font-weight:600;}

.hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;}
/* On the dark video a near-black button disappears — use the brand accent. */
.hero .btn-primary{background:var(--copper-deep);}
.hero .btn-primary:hover{background:#754626;}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.45);backdrop-filter:blur(4px);}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.1);}

.hero-trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,0.16);
  max-width:520px;
}
.trust-item{display:flex;flex-direction:column;gap:7px;}
.trust-item svg{stroke:var(--copper);}
.trust-item span{font-size:12.5px;font-weight:600;color:#D2CCC0;line-height:1.35;}

.hero-only-black{
  position:absolute;top:26px;right:24px;z-index:2;
  background:rgba(20,18,17,0.55);
  color:#fff;
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,0.14);
  padding:8px 14px;border-radius:100px;
  font-size:12px;font-weight:700;letter-spacing:0.03em;
  display:flex;align-items:center;gap:7px;
}
@media (max-width:639px){ .hero-only-black{top:16px;right:16px;font-size:11.5px;padding:7px 12px;} }
.hero-only-black .swatch{width:11px;height:11px;border-radius:50%;background:#0B0A09;border:1.5px solid var(--copper);}

/* --- Mobile hero: compact & restrained so the video stays visible --- */
@media (max-width:639px){
  .hero{min-height:min(90svh,660px);align-items:stretch;}
  main#top > .hero:first-child{min-height:calc(min(90svh,660px) + var(--header-h));}
  .hero .container{display:flex;flex-direction:column;}

  /* Push the headline group to the top and the price/CTA group to the
     bottom, so the footage stays visible in the middle instead of being
     covered by one dense block. */
  .hero-content{
    flex:1;display:flex;flex-direction:column;
    padding:22px 0 26px;
  }
  .hero-price-row{margin-top:auto;}

  .eyebrow{
    font-size:10px;letter-spacing:0.07em;
    padding:5px 11px 5px 9px;margin-bottom:14px;gap:6px;
    /* Flex children stretch by default — keep the pill at its own width. */
    align-self:flex-start;
  }
  .eyebrow svg{width:11px;height:11px;}

  .hero h1{font-size:26px;line-height:1.16;margin-bottom:10px;letter-spacing:-0.02em;}
  .hero-sub{font-size:14px;line-height:1.5;max-width:30ch;margin-bottom:18px;color:#CFC9BF;}

  .hero-price-row{gap:9px;margin-bottom:18px;}
  .hero-price{font-size:26px;}
  .hero-price-note{font-size:12px;}

  /* Side by side, not stacked full-width blocks. */
  .hero-cta-row{gap:9px;margin-bottom:22px;flex-wrap:nowrap;}
  .hero-cta-row .btn{
    flex:1 1 0;min-width:0;
    padding:11px 12px;font-size:13.5px;min-height:44px;gap:6px;
  }
  .hero-cta-row .btn svg{width:15px;height:15px;}

  .hero-trust{gap:8px;padding-top:16px;border-top-color:rgba(255,255,255,0.13);}
  .trust-item{gap:5px;}
  .trust-item svg{width:16px;height:16px;}
  .trust-item span{font-size:10.5px;line-height:1.3;color:#CFC9BF;}

  /* The scrim is lighter here, so lean on a soft shadow for legibility. */
  .hero h1,.hero-sub,.hero-price,.hero-price-note,.trust-item span{
    text-shadow:0 1px 12px rgba(0,0,0,0.55);
  }

  /* The headline group now sits at the top edge, where this badge used to
     be — and the announcement bar already says "Nur in Schwarz". */
  .hero-only-black{display:none;}
}

/* Keep the two hero buttons side by side even on very narrow phones. */
@media (max-width:420px){
  .hero-cta-row .btn{padding:11px 8px;font-size:12.5px;}
}

/* The announcement runs in full on every width — it is the shop's one
   scarcity signal, so nothing gets truncated away on phones. */
.hide-sm{display:inline;}
@media (max-width:560px){
  .announce{font-size:11.5px;line-height:1.45;padding:8px 14px;}
}

/* --- Mobile header: slimmer, less shouty --- */
@media (max-width:639px){
  :root{--header-h:60px;}
  .logo{font-size:18px;gap:7px;}
  .logo .dot{width:7px;height:7px;}
  .nav{gap:10px;}
  .nav-actions{gap:6px;}
  .nav-actions .btn-sm{padding:8px 14px;font-size:12.5px;min-height:36px;gap:6px;}
  .nav-actions .btn-sm svg{width:14px;height:14px;}
  .burger{padding:6px;}
  .burger svg{width:22px;height:22px;}

  /* Keep the header visually small but the tap areas at 44px. */
  .nav-actions .btn-sm,.burger{position:relative;}
  .nav-actions .btn-sm::after,.burger::after{
    content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);
    height:44px;min-width:44px;
  }
}

/* ---------------- Product detail page ---------------- */
.pdp{padding:30px 0 64px;}
.pdp .breadcrumb{margin-bottom:24px;}
.pdp-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start;}
@media (min-width:900px){
  .pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:52px;}
}

/* --- Media column: one large image + thumbnail strip --- */
.pdp-media{display:flex;flex-direction:column;gap:12px;min-width:0;}
.pdp-main{
  position:relative;display:block;width:100%;padding:0;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--paper-alt);
  cursor:zoom-in;aspect-ratio:1/1;
}
.pdp-main img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.pdp-main:hover img{transform:scale(1.04);}
.pdp-main-badge{
  position:absolute;left:14px;top:14px;
  background:rgba(20,18,17,0.72);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:6px 13px;border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:0.03em;
  display:flex;align-items:center;gap:7px;
}
.pdp-main-badge .swatch{width:9px;height:9px;border-radius:50%;background:#0B0A09;border:1.2px solid var(--copper);}
.pdp-zoom{
  position:absolute;right:14px;bottom:14px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,0.94);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease-out);
}
.pdp-main:hover .pdp-zoom{transform:scale(1.08);}
.pdp-zoom svg{stroke:var(--ink);}

.pdp-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.pdp-thumb{
  padding:0;background:var(--paper-alt);cursor:pointer;
  border:2px solid var(--border);border-radius:10px;
  overflow:hidden;aspect-ratio:1/1;
  transition:border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp-thumb:hover{border-color:var(--copper);transform:translateY(-2px);}
.pdp-thumb.is-active{border-color:var(--ink);}
@media (max-width:520px){.pdp-thumbs{gap:7px;}.pdp-thumb{border-width:1.5px;border-radius:8px;}}

/* --- Info column --- */
.pdp-info{min-width:0;}
@media (min-width:900px){
  .pdp-info{position:sticky;top:calc(var(--header-h) + 18px);}
}
.pdp-info h1{
  font-size:clamp(25px,3.2vw,36px);font-weight:800;
  margin:10px 0 12px;line-height:1.12;
}
.pdp-lead{color:var(--ink-soft);font-size:15.5px;margin-bottom:22px;}
.pdp-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:5px;}
.pdp-price{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,34px);}
.pdp-stock{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--success);
}
.pdp-stock .dot{width:8px;height:8px;border-radius:50%;background:var(--success);}
.pdp-tax{font-size:12.5px;color:var(--ink-soft);margin-bottom:24px;}
.pdp-tax a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:2px;}

.pdp-usp{display:flex;flex-direction:column;gap:11px;margin-bottom:24px;}
.pdp-usp li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink);}
.pdp-usp svg{stroke:var(--copper-deep);flex-shrink:0;margin-top:2px;}

.pdp-variant{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;margin-bottom:18px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);font-size:14px;font-weight:600;
}
.pdp-variant .swatch-dot{width:15px;height:15px;border-radius:50%;background:#0B0A09;border:2px solid var(--copper);flex-shrink:0;}
.pdp-variant em{font-style:normal;color:var(--ink-soft);font-weight:500;}

.pdp-buy{
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);padding:20px;box-shadow:var(--shadow-sm);
}
@media (max-width:520px){.pdp-buy{padding:16px;}}
.pdp-buy .price-lines{padding-top:0;border-top:none;}
.qty-hint{font-size:12.5px;color:var(--ink-soft);margin:-6px 0 16px;}
.pdp-trust{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.pdp-trust div{display:flex;gap:11px;align-items:center;font-size:13.5px;color:var(--ink-soft);}
.pdp-trust svg{stroke:var(--copper-deep);flex-shrink:0;}
.pdp-trust a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* --- Colour choice (one variant only) --- */
.pdp-colors{margin-bottom:20px;}
.pdp-colors .label{display:block;font-size:13px;font-weight:700;margin-bottom:9px;}
.pdp-swatches{display:flex;gap:10px;align-items:center;}
.pdp-swatch{
  width:36px;height:36px;border-radius:9px;padding:0;
  background:#0B0A09;border:2px solid var(--ink);
  position:relative;cursor:default;
  box-shadow:inset 0 0 0 2px #fff;
}
.pdp-swatch::after{
  content:"";position:absolute;inset:-5px;border-radius:12px;
  border:2px solid var(--ink);
}
.pdp-colors .only{font-size:13px;color:var(--ink-soft);}

/* --- One clear CTA — Stripe's own checkout handles quantity --- */
.pdp-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px;}
.pdp-actions .btn{width:100%;}

/* --- Tabbed detail section --- */
.tabs-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.tab-bar{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid var(--border);margin-bottom:44px;
}
.tab-btn{
  background:none;border:none;cursor:pointer;
  padding:14px 20px;margin-bottom:-1px;
  font-family:'Rubik',sans-serif;font-weight:600;font-size:15.5px;
  color:var(--ink-soft);border-bottom:2.5px solid transparent;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  white-space:nowrap;min-height:44px;
}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--copper);}
@media (max-width:520px){.tab-btn{padding:12px 13px;font-size:14px;}}
.tab-panel[hidden]{display:none;}

/* --- Specification table --- */
.spec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.spec-table{
  width:100%;border-collapse:collapse;font-size:14.5px;
  min-width:520px;
}
.spec-table th{
  background:var(--black);color:#fff;text-align:left;
  font-family:'Rubik',sans-serif;font-weight:600;font-size:13.5px;
  padding:14px 18px;letter-spacing:0.02em;
}
.spec-table th:first-child{border-top-left-radius:var(--radius-sm);}
.spec-table th:last-child{border-top-right-radius:var(--radius-sm);}
.spec-table td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top;}
.spec-table tbody tr:nth-child(even){background:var(--paper);}
.spec-table td:first-child{font-weight:700;white-space:nowrap;}
.spec-table td:last-child{color:var(--ink-soft);}
.spec-note{
  margin-top:18px;font-size:13px;color:var(--ink-soft);
  display:flex;gap:9px;align-items:flex-start;
}
.spec-note svg{stroke:var(--copper-deep);flex-shrink:0;margin-top:1px;}

/* ---------------- Care guide ---------------- */
/* Structure carries the content: every material gets the same two columns,
   so "do" and "don't" can be compared at a glance instead of being read. */
.care-block{
  border-top:1px solid var(--border);
  padding:44px 0;
}
.care-block:first-of-type{border-top:none;padding-top:8px;}
.care-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px;}
.care-mark{
  flex-shrink:0;width:44px;height:44px;border-radius:12px;
  background:var(--black);color:var(--copper);
  display:flex;align-items:center;justify-content:center;
}
.care-mark svg{stroke:var(--copper);}
.care-head h2{font-size:clamp(21px,2.6vw,27px);font-weight:800;margin-bottom:6px;}
.care-head p{color:var(--ink-soft);font-size:15px;max-width:62ch;}

.care-cols{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:760px){.care-cols{grid-template-columns:1fr 1fr;gap:20px;}}
.care-col{
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);padding:20px 22px;
}
.care-col.is-dont{background:var(--paper-alt);}
.care-col .col-label{
  display:flex;align-items:center;gap:8px;
  font-family:'Rubik',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;margin-bottom:14px;
}
.care-col.is-do .col-label{color:var(--success);}
.care-col.is-dont .col-label{color:#A3402F;}
.care-col ul{display:flex;flex-direction:column;gap:11px;}
.care-col li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;line-height:1.55;color:var(--ink);
}
.care-col li svg{flex-shrink:0;margin-top:3px;}
.care-col.is-do li svg{stroke:var(--success);}
.care-col.is-dont li svg{stroke:#A3402F;}

/* The 60-second routine genuinely is a sequence, so it is numbered. */
.routine{
  background:var(--black);color:#fff;
  border-radius:var(--radius-lg);padding:34px;
}
@media (max-width:520px){.routine{padding:24px 20px;}}
.routine h2{color:#fff;font-size:clamp(20px,2.4vw,25px);margin-bottom:6px;}
.routine .lede{color:#B9B2A6;font-size:14.5px;margin-bottom:26px;}
.routine ol{
  display:grid;grid-template-columns:1fr;gap:2px;
  counter-reset:step;
  /* The circles below are the numbering; the browser's own markers would double it. */
  list-style:none;margin:0;padding:0;
}
@media (min-width:760px){.routine ol{grid-template-columns:repeat(3,1fr);gap:20px;}}
.routine li{
  counter-increment:step;position:relative;
  padding:18px 0 18px 46px;
  border-top:1px solid var(--border-dark);
}
@media (min-width:760px){.routine li{border-top:none;padding:0 0 0 44px;}}
.routine li::before{
  content:counter(step);
  position:absolute;left:0;top:16px;
  width:30px;height:30px;border-radius:50%;
  background:var(--copper);color:#141211;
  font-family:'Rubik',sans-serif;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
@media (min-width:760px){.routine li::before{top:0;}}
.routine li strong{display:block;font-family:'Rubik',sans-serif;font-size:15.5px;margin-bottom:5px;}
.routine li span{font-size:14px;color:#ADA598;line-height:1.55;}

/* ---------------- Grouped FAQ ---------------- */
.faq-group{margin-bottom:46px;}
.faq-group:last-child{margin-bottom:0;}
.faq-group > h2{
  font-size:15px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--copper-deep);margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
  max-width:760px;margin-left:auto;margin-right:auto;
}

/* ---------------- About page ---------------- */
.about-lede{
  font-size:clamp(18px,2.2vw,23px);line-height:1.55;
  color:var(--ink);max-width:24ch;font-weight:600;
  font-family:'Rubik',sans-serif;
}
.about-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;}
@media (min-width:860px){.about-grid{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:56px;}}
.about-grid .prose{max-width:none;}
.stance{display:flex;flex-direction:column;gap:0;margin-top:8px;}
.stance-row{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:18px 0;border-bottom:1px solid var(--border);
}
@media (min-width:620px){.stance-row{grid-template-columns:130px 1fr;gap:20px;align-items:baseline;}}
.stance-row:first-child{padding-top:0;}
.stance-row dt{
  font-family:'Rubik',sans-serif;font-weight:700;font-size:13.5px;
  letter-spacing:0.03em;text-transform:uppercase;color:var(--copper-deep);
}
.stance-row dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);}

/* ---------------- Page header (subpages) ---------------- */
.page-header{
  background:var(--black);
  color:#fff;
  /* Top padding clears the transparent bar floating over this section. */
  padding:calc(56px + var(--header-h) + 1px) 0 52px;
}
.page-header h1{
  color:#fff;
  font-size:clamp(28px,4.4vw,46px);
  font-weight:800;
  margin-bottom:14px;
}
.page-header p{color:#B4ADA1;max-width:56ch;font-size:clamp(15px,1.5vw,17px);}
.page-header .section-eyebrow{color:var(--copper);}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:#8F887C;margin-bottom:18px;
}
.breadcrumb a{transition:color var(--dur-fast) var(--ease-out);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb svg{stroke:#6E675C;}
.breadcrumb [aria-current]{color:#D5CEC2;}

/* ---------------- Feature cards ---------------- */
.feature-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:600px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.feature-grid{grid-template-columns:repeat(4,1fr);}}

.features{background:var(--black);color:#fff;}
.features .section-head p{color:#B4ADA1;}
.features .section-eyebrow{color:var(--copper);}
.feature-card{
  background:var(--black-2);border:1px solid var(--border-dark);
  border-radius:var(--radius-md);padding:26px 22px;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.feature-card:hover{transform:translateY(-4px);border-color:var(--copper-deep);}
.feature-icon{
  width:46px;height:46px;border-radius:12px;background:rgba(185,118,74,0.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.feature-icon svg{stroke:var(--copper);}
.feature-card h3{font-size:16.5px;font-weight:700;margin-bottom:8px;color:#fff;}
.feature-card p{font-size:14px;color:#A8A093;line-height:1.55;}

/* ---------------- Bundle teaser (homepage) ---------------- */
.bundle-teaser-section{background:var(--paper-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:36px 0;}
.bundle-teaser-section .section-head{margin-bottom:26px;}

/* Mobil: horizontales Swipe-Karussell mit Scroll-Snap */
.bundle-teaser-scroll{
  overflow-x:auto;overflow-y:hidden;margin:0 -20px;padding:4px 20px 10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.bundle-teaser-scroll::-webkit-scrollbar{display:none;}
.bundle-teaser-grid{display:flex;gap:14px;max-width:900px;margin:0 auto;}
.bundle-teaser-card{flex:0 0 78%;scroll-snap-align:center;}
@media (min-width:480px){.bundle-teaser-card{flex-basis:340px;}}
@media (min-width:700px){
  .bundle-teaser-scroll{overflow:visible;margin:0;padding:4px 0 0;}
  .bundle-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);}
  .bundle-teaser-card{flex-basis:auto;}
}

.bundle-teaser-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:28px 20px 24px;transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.bundle-teaser-card:hover{transform:translateY(-4px);border-color:var(--copper-deep);}
.bundle-teaser-card.is-highlight{border-color:var(--copper-deep);box-shadow:0 0 0 1px var(--copper-deep);}
.bundle-teaser-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--copper-deep);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px;
}
.bundle-teaser-title{font-size:14px;font-weight:600;color:var(--ink-soft);margin-top:6px;}
.bundle-teaser-price{font-family:'Rubik',sans-serif;font-size:28px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.bundle-teaser-save{font-size:12.5px;font-weight:700;color:var(--success);}
.bundle-teaser-cta{
  display:flex;align-items:center;gap:5px;margin-top:14px;font-size:13.5px;font-weight:700;
  color:var(--copper-deep);
}
.bundle-teaser-cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.bundle-teaser-card:hover .bundle-teaser-cta svg{transform:translateX(3px);}
.bundle-teaser-note{text-align:center;font-size:12.5px;color:var(--ink-faint);margin-top:24px;}

/* ---------------- Gallery ---------------- */
.gallery-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px;}}

.gallery-item{
  position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;
  aspect-ratio:1/1;background:var(--paper-alt);
  border:none;padding:0;
}
.gallery-item:first-child{grid-column:span 2;aspect-ratio:16/10;}
@media (min-width:640px){.gallery-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-item .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px;
  background:linear-gradient(0deg,rgba(10,9,8,0.74),transparent 72%);
  color:#fff;font-size:13px;font-weight:600;text-align:left;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out);
}
.gallery-item:hover .cap,.gallery-item:focus-visible .cap{opacity:1;}
.gallery-item .zoom-icon{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out);
}
.gallery-item:hover .zoom-icon{opacity:1;}
.gallery-item .zoom-icon svg{stroke:var(--ink);width:16px;height:16px;}
@media (hover:none){
  .gallery-item .cap{opacity:1;}
  .gallery-item .zoom-icon{opacity:1;}
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(10,9,8,0.93);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out);
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox img{max-width:min(900px,92vw);max-height:80vh;border-radius:12px;object-fit:contain;box-shadow:var(--shadow-lg);}
.lightbox-close{
  position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-close svg{stroke:#fff;}
.lightbox-cap{position:absolute;bottom:26px;left:24px;right:24px;text-align:center;color:#EFE7DC;font-size:14px;font-weight:600;}

/* ---------------- Included list ---------------- */
.included-wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:flex-start;}
@media (min-width:960px){
  .included-wrap{grid-template-columns:0.85fr 1.15fr;gap:56px;}
  .included-image{position:sticky;top:96px;}
}
.included-image{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.included-image img{width:100%;}
.included-list{display:flex;flex-direction:column;}
.included-row{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 2px;border-bottom:1px solid var(--border);
}
.included-row:first-child{padding-top:0;}
.included-count{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  background:var(--black);color:var(--copper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Rubik',sans-serif;font-weight:700;font-size:14.5px;
}
.included-row h3{font-size:16.5px;font-weight:700;margin-bottom:4px;}
.included-row p{font-size:14.5px;color:var(--ink-soft);}
.included-total{
  margin-top:24px;padding:20px 22px;border-radius:var(--radius-md);
  background:var(--black);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.included-total strong{font-family:'Rubik',sans-serif;font-size:18px;}
.included-total span{font-size:13.5px;color:#B4ADA1;}

/* ---------------- Buy card ---------------- */
.buy-section{background:var(--paper-alt);}
.buy-card{
  max-width:620px;margin:0 auto;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:32px;
  border:1px solid var(--border);
}
@media (max-width:480px){.buy-card{padding:22px;}}

.buy-head{display:flex;gap:16px;align-items:center;margin-bottom:24px;}
.buy-head img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex-shrink:0;}
.buy-head h3{font-size:18px;font-weight:700;margin-bottom:6px;}
.buy-head .sku-note{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}
.swatch-dot{width:10px;height:10px;border-radius:50%;background:#0B0A09;border:1.5px solid var(--copper);display:inline-block;flex-shrink:0;}

.qty-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--border);}
.qty-label{font-weight:700;font-size:15px;}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:100px;overflow:hidden;}
.qty-stepper button{
  width:42px;height:42px;background:var(--paper);border:none;cursor:pointer;
  font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-out);
}
.qty-stepper button:hover{background:var(--copper-soft);}
.qty-stepper button:disabled{opacity:0.35;cursor:not-allowed;}
.qty-stepper button:disabled:hover{background:var(--paper);}
.qty-value{width:44px;text-align:center;font-weight:700;font-size:15.5px;font-variant-numeric:tabular-nums;}

.bundle-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.bundle-option{position:relative;cursor:pointer;}
.bundle-option input{position:absolute;opacity:0;width:1px;height:1px;}
.bundle-option-body{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:12px 8px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--paper);transition:border-color .15s ease,background-color .15s ease;
}
.bundle-option-title{font-size:13px;font-weight:600;color:var(--ink-soft);}
.bundle-option-price{font-family:'Rubik',sans-serif;font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.bundle-option-save{font-size:11px;font-weight:700;color:var(--success);}
.bundle-option.is-active .bundle-option-body{border-color:var(--copper-deep);background:var(--surface);box-shadow:0 0 0 1px var(--copper-deep);}
.bundle-option.is-active .bundle-option-title{color:var(--copper-deep);}
.bundle-option input:focus-visible + .bundle-option-body{outline:2px solid var(--copper-deep);outline-offset:2px;}
@media (max-width:380px){.bundle-option-title{font-size:12px;}.bundle-option-price{font-size:15px;}}

.price-lines{padding:18px 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.price-line{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-soft);}
.price-line strong{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.price-line.total{border-top:1px solid var(--border);padding-top:14px;margin-top:4px;font-size:17px;color:var(--ink);align-items:baseline;}
.price-line.total strong{font-family:'Rubik',sans-serif;font-size:24px;font-variant-numeric:tabular-nums;}

.buy-note{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;color:var(--ink-soft);margin-top:16px;
  background:var(--paper);padding:12px 14px;border-radius:var(--radius-sm);
}
.buy-note svg{stroke:var(--copper-deep);flex-shrink:0;margin-top:1px;}
.buy-note a{text-decoration:underline;text-underline-offset:2px;}

.payment-icons{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.payment-chip{
  font-size:11.5px;font-weight:700;letter-spacing:0.02em;
  border:1px solid var(--border);border-radius:6px;padding:6px 10px;
  color:var(--ink-soft);
}

/* ---------------- FAQ ---------------- */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
details.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;}
details.faq-item[open]{border-color:var(--copper);}
details.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;font-weight:700;font-size:15.5px;
  -webkit-tap-highlight-color:transparent;
}
details.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--paper-alt);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-base) var(--ease-out);
}
.faq-plus svg{stroke:var(--ink);transition:transform var(--dur-base) var(--ease-out);}
details.faq-item[open] .faq-plus{background:var(--copper);}
details.faq-item[open] .faq-plus svg{stroke:#fff;transform:rotate(45deg);}
.faq-body{padding:0 20px 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.65;}
.faq-body a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:2px;}

/* ---------------- Prose (legal pages) ---------------- */
.prose{max-width:760px;font-size:16px;line-height:1.75;color:var(--ink-soft);}
.prose h2{
  font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--ink);
  margin:44px 0 14px;padding-top:8px;
}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:17.5px;font-weight:700;color:var(--ink);margin:28px 0 10px;}
.prose p{margin-bottom:16px;}
.prose ul{margin:0 0 18px;padding-left:0;list-style:none;}
.prose ul li{position:relative;padding-left:22px;margin-bottom:9px;}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--copper);
}
.prose a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:2px;}
.prose strong{color:var(--ink);font-weight:700;}
.prose hr{border:none;border-top:1px solid var(--border);margin:36px 0;}

.prose-note{
  background:var(--copper-soft);
  border-left:4px solid var(--copper-deep);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  margin:0 0 32px;
  font-size:14px;
  color:#6E4527;
  line-height:1.6;
}
.prose-note strong{color:#5B381F;}

.prose-table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;}
.prose-table td{padding:9px 0;border-bottom:1px solid var(--border);vertical-align:top;}
.prose-table td:first-child{font-weight:700;color:var(--ink);width:36%;padding-right:16px;}

.form-sample{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:24px;font-size:14.5px;line-height:1.7;
}
.form-sample p{margin-bottom:10px;}
.form-sample .fill-line{
  border-bottom:1px solid var(--ink-faint);
  height:0;margin:0 0 22px;
}

.legal-toc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:20px 22px;margin-bottom:36px;
}
.legal-toc h2{font-size:13px !important;font-weight:700 !important;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint) !important;margin:0 0 12px !important;padding:0 !important;}
.legal-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14.5px;}
.legal-toc a{color:var(--ink-soft);text-decoration:none;}
.legal-toc a:hover{color:var(--copper-deep);text-decoration:underline;}

/* ---------------- Contact form ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:flex-start;}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:56px;}}

.contact-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);
}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;}
.field .req{color:var(--copper-deep);}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;
  padding:13px 14px;min-height:48px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6;}
.field input:focus,.field textarea:focus{border-color:var(--copper);background:var(--surface);outline-offset:1px;}
.field .helper{font-size:12.5px;color:var(--ink-faint);margin-top:6px;}

.field-error{
  margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);
  background:#FBEAE7;border:1px solid #E7B8B0;color:#8A2E1E;
  font-size:13.5px;line-height:1.5;
}

/* --- Elektronische Widerrufsbestätigung --- */
.widerruf-success{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-sm);
  text-align:center;
}
.widerruf-success-icon{
  width:52px;height:52px;border-radius:50%;background:var(--success);
  color:#fff;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.widerruf-success h2{font-size:22px;font-weight:800;margin-bottom:10px;}
.widerruf-success > p{color:var(--ink-soft);font-size:14.5px;max-width:44ch;margin:0 auto 20px;}
.widerruf-ref{
  display:flex;flex-direction:column;gap:4px;
  background:var(--paper-alt);border-radius:var(--radius-md);
  padding:16px;margin-bottom:10px;
}
.widerruf-ref span{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;}
.widerruf-ref strong{font-family:'Rubik',sans-serif;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:0.02em;}
.widerruf-timestamp{font-size:13px;color:var(--ink-soft);margin-bottom:18px;}

.info-list{display:flex;flex-direction:column;gap:22px;}
.info-item{display:flex;gap:14px;align-items:flex-start;}
.info-icon{
  width:42px;height:42px;border-radius:11px;background:var(--copper-soft);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.info-icon svg{stroke:var(--copper-deep);}
.info-item h3{font-size:15.5px;font-weight:700;margin-bottom:3px;}
.info-item p{font-size:14.5px;color:var(--ink-soft);}
.info-item a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:2px;}

/* ---------------- CTA band ---------------- */
.cta-band{background:var(--black);color:#fff;text-align:center;}
.cta-band h2{color:#fff;font-size:clamp(26px,3.6vw,38px);font-weight:800;margin-bottom:14px;}
.cta-band p{color:#B4ADA1;max-width:52ch;margin:0 auto 28px;font-size:clamp(15px,1.5vw,16.5px);}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.4);}
.cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.1);}
.cta-band-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
@media (max-width:420px){ .cta-band-actions .btn{width:100%;} }
.cta-band .btn-primary{background:var(--copper-deep);}
.cta-band .btn-primary:hover{background:#754626;}

/* ---------------- Highlights (home) ---------------- */
.highlight-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:768px){.highlight-grid{grid-template-columns:repeat(3,1fr);}}
/* The whole card is one link to the product page. */
.highlight-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  color:inherit;text-decoration:none;cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.highlight-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--copper);}
.highlight-card:focus-visible{outline:2.5px solid var(--copper-deep);outline-offset:3px;}
.highlight-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.highlight-card:hover img{transform:scale(1.04);}
.highlight-card .card-img{overflow:hidden;}

/* Tells the reader the card leads somewhere. */
.card-go{
  margin-top:auto;padding-top:14px;
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Rubik',sans-serif;font-weight:600;font-size:14px;
  color:var(--copper-deep);
}
.card-go svg{stroke:var(--copper-deep);transition:transform var(--dur-base) var(--ease-out);}
.highlight-card:hover .card-go svg{transform:translateX(4px);}
.highlight-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.highlight-body .num{
  font-family:'Rubik',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--copper-deep);
}
.highlight-body h3{font-size:18px;font-weight:700;}
.highlight-body p{font-size:14.5px;color:var(--ink-soft);}

/* ---------------- Split feature (home) ---------------- */
.split{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px;}}
.split-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.split-media img{width:100%;}
.split h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin-bottom:16px;}
.split p{color:var(--ink-soft);margin-bottom:16px;font-size:clamp(15px,1.5vw,16.5px);}
.split-list{display:flex;flex-direction:column;gap:12px;margin:22px 0 28px;}
.split-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;}
.split-list svg{stroke:var(--copper-deep);margin-top:3px;}

/* ---------------- Footer ---------------- */
footer{background:var(--black);color:#A8A093;padding:56px 0 0;font-size:14px;}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:42px;
  margin-bottom:0;
}
@media (min-width:700px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;}}
.footer-brand .logo{color:#fff;margin-bottom:14px;}
.footer-brand p{max-width:38ch;line-height:1.6;}
.footer-col h4{color:#fff;font-family:'Rubik',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:15px;letter-spacing:0.02em;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{transition:color var(--dur-fast) var(--ease-out);}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:12.5px;color:#7A736A;}
.footer-legal-note{
  font-size:12.5px;color:#7A736A;background:var(--black-2);border:1px solid var(--border-dark);
  padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:24px;line-height:1.6;
}

/* ---------------- Sticky mobile buy bar ---------------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--surface);border-top:1px solid var(--border);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -8px 24px rgba(20,18,17,0.10);
  transform:translateY(105%);transition:transform var(--dur-base) var(--ease-out);
}
.mobile-bar.show{transform:translateY(0);}
@media (min-width:900px){.mobile-bar{display:none;}}
.mobile-bar-price{display:flex;flex-direction:column;}
.mobile-bar-price strong{font-family:'Rubik',sans-serif;font-size:19px;}
.mobile-bar-price span{font-size:11.5px;color:var(--ink-soft);}

/* ---------------- Toast ---------------- */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);
  background:var(--black);color:#fff;padding:14px 22px;border-radius:100px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
  z-index:400;opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  display:flex;align-items:center;gap:10px;max-width:90vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast svg{stroke:var(--copper);flex-shrink:0;}
@media (max-width:899px){ #toast{bottom:92px;} }