/*
Theme Name:   SPLITT Child
Theme URI:    https://splitt.shop
Description:  Design-System für den SPLITT Abo-Shop. Child-Theme für Blocksy.
Author:       Oliver
Template:     blocksy
Version:      2.0.0
Text Domain:  splitt-child
*/

/* ############################################################
   INHALT
   Teil 1 — Design-System (Farben, Fonts, Komponenten)
   Teil 2 — Layout & Sektionen (Hero, Grid, How, Trust, FAQ)
   Teil 3 — Blocksy-Korrekturen
   Teil 4 — WooCommerce-Produktseite
   ############################################################ */


/* ############################################################
   TEIL 1 + 2 — DESIGN-SYSTEM, LAYOUT & SEKTIONEN
   ############################################################ */

:root{
  --ink:#0F1222;          /* Tiefes Nachtblau — Header, Hero, Footer */
  --ink-2:#181C33;        /* Karten auf dunklem Grund */
  --paper:#F4F5FA;        /* Kühles Hellgrau — Body */
  --card:#FFFFFF;
  --line:#E4E6F0;
  --text:#1B1E2E;
  --dim:#5C6076;
  --accent:#4353FF;       /* Ultramarin — CTAs, Fokus */
  --accent-ink:#2E3BD6;
  --accent-soft:#EAECFF;
  --free:#17B26A;         /* Plätze frei */
  --few:#F79009;          /* Wenige Plätze */
  --radius:20px;
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Instrument Sans",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--paper);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ===== NAV ===== */
.nav-shell{position:sticky;top:0;z-index:50;background:rgba(15,18,34,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;gap:28px;height:68px;color:#fff}
.logo{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:.5px}
.logo em{font-style:normal;color:#8B96FF}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:500;color:#C7CBE0}
.nav-links a:hover{color:#fff}
.nav-search{flex:1;max-width:340px;margin-left:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:9px 16px;font-size:14px;color:#AEB3CC}
.nav-cta{background:var(--accent);color:#fff;font-weight:600;font-size:14px;padding:10px 20px;border-radius:99px;transition:background .15s}
.nav-cta:hover{background:var(--accent-ink)}
.nav-account{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#8B96FF,#4353FF);display:grid;place-items:center;font-weight:700;font-size:14px}

/* ===== HERO ===== */
.hero{background:var(--ink);color:#fff;padding:76px 0 140px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:90px;background:var(--paper);border-radius:48px 48px 0 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8B96FF;background:rgba(67,83,255,.14);border:1px solid rgba(139,150,255,.3);padding:7px 14px;border-radius:99px;margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--free);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.2vw,64px);line-height:1.04;letter-spacing:-.01em;margin-bottom:20px}
h1 .split{color:#8B96FF}
.hero p.lead{font-size:18px;color:#B9BDD4;max-width:52ch;margin-bottom:32px}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn-primary{background:var(--accent);color:#fff;font-weight:600;font-size:16px;padding:15px 30px;border-radius:99px;transition:transform .15s,background .15s;display:inline-block}
.btn-primary:hover{background:var(--accent-ink);transform:translateY(-1px)}
.btn-ghost{color:#C7CBE0;font-weight:500;font-size:15px;padding:15px 8px}
.btn-ghost:hover{color:#fff}
.hero-stats{display:flex;gap:36px;margin-top:44px}
.stat b{display:block;font-family:var(--font-mono);font-size:22px;font-weight:700}
.stat span{font-size:13px;color:#8A8FA8}

/* Hero-Pass (Signatur: Mitgliedskarte mit Platz-Anzeige) */
.pass{background:linear-gradient(150deg,#1C2140,#12152A);border:1px solid rgba(139,150,255,.25);border-radius:24px;padding:28px;max-width:400px;margin-left:auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative;transform:rotate(2deg)}
.pass::before{content:"";position:absolute;left:-1px;top:36px;bottom:36px;width:4px;border-radius:4px;background:linear-gradient(180deg,#1DB954,#4353FF)}
.pass-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.pass-brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff}
.pass-brand small{display:block;font-size:12px;color:#8A8FA8}
.pass-brand b{font-size:16px}
.pass-chip{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:#0F1222;background:#8B96FF;padding:5px 10px;border-radius:6px}
.pass-price{font-family:var(--font-mono);font-size:42px;font-weight:700;letter-spacing:-.02em}
.pass-price small{font-size:14px;color:#8A8FA8;font-weight:500}
.slots{display:flex;align-items:center;gap:10px;margin:18px 0 6px}
.slot-dots{display:flex;gap:6px}
.slot-dots i{width:12px;height:12px;border-radius:50%;background:#2A2F52}
.slot-dots i.taken{background:var(--free)}
.slots span{font-size:13px;color:#B9BDD4}
.pass-foot{display:flex;justify-content:space-between;font-size:12px;color:#8A8FA8;border-top:1px dashed rgba(139,150,255,.3);padding-top:16px;margin-top:16px}

/* Marquee: zuletzt gekauft */
.ticker{position:absolute;bottom:104px;left:0;right:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:12px;width:max-content;animation:scroll 40s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#B9BDD4;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:99px;padding:7px 14px;white-space:nowrap}
.tick b{color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.eyebrow .dot{animation:none}}

/* ===== KATEGORIEN ===== */
.cats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:-8px 0 44px}
.cat{font-size:14px;font-weight:600;color:var(--dim);background:var(--card);border:1px solid var(--line);padding:10px 20px;border-radius:99px;transition:all .15s}
.cat:hover{border-color:var(--accent);color:var(--accent)}
.cat.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== PRODUKT-GRID ===== */
.section{padding:64px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}
h2{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,36px);letter-spacing:-.01em}
.section-head p{color:var(--dim);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;transition:transform .18s,box-shadow .18s;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand,#4353FF)}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -20px rgba(15,18,34,.25)}
.card-top{display:flex;align-items:center;gap:12px}
.card-top small{font-size:12px;color:var(--dim);display:block}
.card-top b{font-size:16.5px}
.badge{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink)}
.price{font-family:var(--font-mono);font-size:32px;font-weight:700;letter-spacing:-.02em}
.price small{font-size:13px;color:var(--dim);font-weight:500;font-family:var(--font-body)}
.card .slots span{color:var(--dim)}
.card .slot-dots i{background:#E9EBF5}
.card .slot-dots i.taken{background:var(--free)}
.card .slot-dots.few i.taken{background:var(--few)}
.feat{list-style:none;font-size:13.5px;color:var(--dim);display:grid;gap:7px;flex:1}
.feat li{display:flex;gap:8px;align-items:start}
.feat li::before{content:"✓";color:var(--free);font-weight:700;flex-shrink:0}
.card-cta{background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;padding:13px;border-radius:12px;text-align:center;transition:background .15s}
.card-cta:hover{background:var(--accent)}
.card-more{text-align:center;font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.card-more:hover{color:var(--accent)}

/* ===== SO FUNKTIONIERT'S ===== */
.how{background:var(--ink);color:#fff;border-radius:32px;padding:64px 56px;margin:32px 0}
.how h2{margin-bottom:8px}
.how>.wrap>p{color:#B9BDD4;margin-bottom:44px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--ink-2);border:1px solid rgba(139,150,255,.18);border-radius:20px;padding:28px}
.step-num{font-family:var(--font-mono);font-size:13px;font-weight:700;color:#8B96FF;margin-bottom:14px;display:block}
.step b{font-family:var(--font-display);font-weight:600;font-size:19px;display:block;margin-bottom:8px}
.step p{font-size:14px;color:#B9BDD4}

/* ===== TRUST ===== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:16px 0 64px}
.trust div{display:flex;gap:14px;align-items:start}
.trust .ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:19px}
.trust b{display:block;font-size:15px;margin-bottom:2px}
.trust span{font-size:13px;color:var(--dim)}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto}
.faq h2{text-align:center;margin-bottom:36px}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:12px}
summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--accent)}
details[open] summary::after{content:"–"}
details p{padding:0 24px 20px;font-size:14.5px;color:var(--dim)}

/* ===== FOOTER ===== */
footer{background:var(--ink);color:#B9BDD4;margin-top:64px;padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-grid .logo{color:#fff;margin-bottom:12px;display:block}
.foot-grid p{font-size:13.5px;max-width:34ch}
.foot-grid h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:9px;font-size:14px}
.foot-grid a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:12.5px;color:#8A8FA8;flex-wrap:wrap;gap:10px}

@media (max-width:900px){
  .nav-links,.nav-search{display:none}
  .hero-grid{grid-template-columns:1fr}
  .pass{margin:0 auto;transform:none}
  .steps,.trust{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .how{padding:44px 28px}
  .hero{padding:52px 0 130px}
}


/* ############################################################
   TEIL 3 — BLOCKSY-KORREKTUREN
   ############################################################ */



/* ------------------------------------------------------------
   1. BLOCKSY-HEADER UND -FOOTER AUSBLENDEN
   Mein HTML bringt eigene Navigation und Footer mit.
   Wirkt nur auf der Startseite — Shop und Konto behalten
   Blocksys Header, damit Warenkorb und Menü funktionieren.
   ------------------------------------------------------------ */
.home header#header,
.home .ct-header,
.home footer#footer,
.home .ct-footer{
  display:none !important;
}


/* ------------------------------------------------------------
   2. VOLLE BREITE ERZWINGEN
   Blocksy steckt den Inhalt in einen Container mit fester
   Breite. Diese "Ausbruch"-Technik holt die Sektionen wieder
   über die gesamte Fensterbreite.
   ------------------------------------------------------------ */
.home .entry-content,
.home .ct-container,
.home .ct-container-narrow,
.home article > .entry-content{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Die einzelnen Sektionen über die volle Fensterbreite ziehen */
.home .nav-shell,
.home .hero,
.home footer{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* Abstand oben entfernen, damit der Hero direkt anschließt */
.home .entry-content > *:first-child{margin-top:0 !important}
.home main,
.home .ct-container{padding-top:0 !important}


/* ------------------------------------------------------------
   3. ÜBERSCHRIFTEN IM HERO WIEDER WEISS
   Blocksy setzt eine globale Überschriftenfarbe, die stärker
   ist als meine. Hier gewinnen wir sie zurück.
   ------------------------------------------------------------ */
.hero h1,
.hero h1 *,
.hero p,
.hero .stat b,
.hero .stat span,
.entry-content .hero h1{
  color:#fff !important;
}
.hero h1 .split,
.entry-content .hero h1 .split{
  color:#8B96FF !important;
}
.hero p.lead{color:#B9BDD4 !important}
.hero .stat span{color:#8A8FA8 !important}

/* Dunkle Sektionen: Überschriften und Text ebenfalls hell */
.how h2,
.how .step b,
.entry-content .how h2{color:#fff !important}
.how p,
.how .step p{color:#B9BDD4 !important}

footer h4,
footer .logo{color:#fff !important}


/* ------------------------------------------------------------
   4. NAVIGATION REPARIEREN
   Suchfeld und Button überlappen, weil der Flex-Container
   von Blocksy-Styles gestört wird.
   ------------------------------------------------------------ */
.nav-shell .nav{
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
  height:68px !important;
  flex-wrap:nowrap !important;
}
.nav-shell .nav-links{
  display:flex !important;
  gap:22px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}
.nav-shell .nav-search{
  flex:1 1 auto !important;
  max-width:340px !important;
  margin-left:auto !important;
  white-space:nowrap !important;
}
.nav-shell .nav-cta{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.nav-shell .nav-account{flex:0 0 36px !important}


/* ------------------------------------------------------------
   5. LISTEN-RESET
   Blocksy gibt Listen Aufzählungspunkte und Einrückung,
   die unsere Feature-Listen und den Footer zerschießen.
   ------------------------------------------------------------ */
.entry-content .feat,
.entry-content .pass-feats,
.entry-content footer ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.entry-content .feat li::marker,
.entry-content footer li::marker{content:none}


/* ------------------------------------------------------------
   6. KARTEN-GRID ABSICHERN
   ------------------------------------------------------------ */
.entry-content .grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr)) !important;
  gap:22px !important;
}
.entry-content .hero-grid{
  display:grid !important;
  grid-template-columns:1.15fr .85fr !important;
  gap:60px !important;
  align-items:center !important;
}
@media (max-width:900px){
  .entry-content .hero-grid{grid-template-columns:1fr !important}
}

/* ------------------------------------------------------------
   7. RESTLICHE BALKEN OBEN ENTFERNEN
   Blocksy legt um den Inhalt noch Wrapper mit Abstand und
   hellem Hintergrund. Die räumen wir hier komplett ab.
   ------------------------------------------------------------ */
.home #main,
.home main,
.home .site-main,
.home article,
.home .entry-content,
.home .ct-container,
.home .ct-container-full,
.home #primary,
.home .content-area{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
}

/* Leere Absätze, die WordPress beim Einfügen erzeugt hat,
   verschwinden lassen — sie erzeugen die Lücken. */
.home .entry-content p:empty,
.home .entry-content br{
  display:none !important;
}

/* Navigation direkt an den Hero andocken */
.home .nav-shell{margin-bottom:0 !important}
.home .hero{margin-top:0 !important}


/* ------------------------------------------------------------
   8. HERO WIEDER ZWEISPALTIG
   Textblock links, Spotify-Karte rechts daneben —
   feste Platzierung, damit eingestreute Absätze nichts
   mehr verschieben können.
   ------------------------------------------------------------ */
.home .hero-grid{
  display:grid !important;
  grid-template-columns:1.15fr .85fr !important;
  gap:60px !important;
  align-items:center !important;
}

/* Erste Spalte: der Textblock */
.home .hero-grid > div{
  grid-column:1 !important;
  grid-row:1 !important;
}

/* Zweite Spalte: die Karte */
.home .hero-grid > .pass,
.home .hero-grid > aside{
  grid-column:2 !important;
  grid-row:1 !important;
  margin-left:auto !important;
}


/* ------------------------------------------------------------
   9. HÖHE REDUZIEREN
   Der Hero war für ein leeres Mockup gebaut. Im echten
   Theme ist er zu hoch — hier straffen wir ihn.
   ------------------------------------------------------------ */
.home .hero{
  padding:56px 0 110px !important;
}
.home .hero h1{
  font-size:clamp(34px,4.4vw,56px) !important;
  margin-bottom:18px !important;
}
.home .hero .hero-stats{margin-top:32px !important}
.home .ticker{bottom:88px !important}


/* Auf Mobil wieder einspaltig */
@media (max-width:900px){
  .home .hero-grid{grid-template-columns:1fr !important}
  .home .hero-grid > div,
  .home .hero-grid > .pass,
  .home .hero-grid > aside{
    grid-column:1 !important;
    margin-left:0 !important;
  }
  .home .hero-grid > .pass{grid-row:2 !important}
}
   ============================================================ */


/* ------------------------------------------------------------
   10. ZENTRIERTER INHALTSRAHMEN
   Alles mit der Klasse .wrap wird wieder mittig gesetzt.
   ------------------------------------------------------------ */
.home .wrap,
.home main.wrap,
.home main.section.wrap{
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  width:auto !important;
}


/* ------------------------------------------------------------
   11. VERTIKALE ABSTÄNDE DER SEKTIONEN
   ------------------------------------------------------------ */
.home .section{
  padding-top:64px !important;
  padding-bottom:64px !important;
}

/* Kategorie-Leiste mittig */
.home .cats{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:10px !important;
  margin:0 0 44px !important;
}

/* Überschrift + Untertitel über dem Raster */
.home .section-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  margin-bottom:32px !important;
}

/* "So funktioniert's" und Trust-Leiste wieder ausrichten */
.home .how{
  padding:64px 56px !important;
  margin:32px 0 !important;
  border-radius:32px !important;
}
.home .trust{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  padding:16px 0 64px !important;
}
.home .faq{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (max-width:900px){
  .home .trust{grid-template-columns:1fr !important}
  .home .how{padding:44px 28px !important}
}


/* ############################################################
   TEIL 4 — WOOCOMMERCE-PRODUKTSEITE
   ############################################################ */



/* ------------------------------------------------------------
   12. GRUNDGERÜST
   ------------------------------------------------------------ */
.single-product .entry-title,
.single-product .product_title{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  font-size:clamp(28px,3.4vw,40px) !important;
  letter-spacing:-.01em !important;
  line-height:1.1 !important;
  color:var(--text) !important;
}

/* Preis groß und in Mono — die Signatur des Shops */
.single-product .summary .price,
.single-product div.product p.price,
.single-product div.product span.price{
  font-family:var(--font-mono) !important;
  font-size:40px !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:var(--text) !important;
  margin:18px 0 6px !important;
}
.single-product .summary .price del{
  font-size:18px !important;
  color:var(--dim) !important;
  font-weight:500 !important;
}
.single-product .summary .price ins{text-decoration:none !important}

/* Kurzbeschreibung als Häkchen-Liste, wie auf den Karten */
.single-product .woocommerce-product-details__short-description{
  color:var(--dim) !important;
  font-size:15px !important;
  margin:18px 0 !important;
}
.single-product .woocommerce-product-details__short-description ul{
  list-style:none !important;
  padding:0 !important;
  display:grid !important;
  gap:8px !important;
}
.single-product .woocommerce-product-details__short-description li{
  display:flex !important;
  gap:10px !important;
}
.single-product .woocommerce-product-details__short-description li::before{
  content:"✓";
  color:var(--free);
  font-weight:700;
}


/* ------------------------------------------------------------
   13. LAUFZEIT-AUSWAHL (Produktvariationen)
   WooCommerce zeigt Varianten als Dropdown. Wir machen daraus
   sichtbare Auswahlfelder im Design des Mockups.
   ------------------------------------------------------------ */
.single-product table.variations{
  border:0 !important;
  margin-bottom:18px !important;
}
.single-product table.variations th.label{
  font-size:13px !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  color:var(--dim) !important;
  padding-bottom:10px !important;
}
.single-product table.variations select{
  width:100% !important;
  border:1.5px solid var(--line) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
  background:var(--card) !important;
  color:var(--text) !important;
}
.single-product table.variations select:focus{
  border-color:var(--accent) !important;
  outline:none !important;
}


/* ------------------------------------------------------------
   14. KAUF-BUTTON
   ------------------------------------------------------------ */
.single-product .single_add_to_cart_button{
  background:var(--ink) !important;
  color:#fff !important;
  font-family:var(--font-body) !important;
  font-weight:600 !important;
  font-size:16.5px !important;
  padding:17px 32px !important;
  border-radius:14px !important;
  width:100% !important;
  transition:background .15s !important;
}
.single-product .single_add_to_cart_button:hover{
  background:var(--accent) !important;
}

/* Mengenfeld — bei geteilten Plätzen meist unnötig */
.single-product .quantity{
  margin-right:12px !important;
}
.single-product .quantity input{
  border:1.5px solid var(--line) !important;
  border-radius:12px !important;
  padding:14px !important;
}


/* ------------------------------------------------------------
   15. LAGERBESTAND = FREIE PLÄTZE
   ------------------------------------------------------------ */
.single-product .stock{
  font-weight:600 !important;
  font-size:14px !important;
  color:var(--free) !important;
  margin-bottom:14px !important;
}
.single-product .stock.out-of-stock{color:var(--few) !important}

/* Die Punkte-Anzeige aus functions.php sitzt hier ebenfalls */
.single-product .slots{margin:14px 0 !important}
.single-product .slot-dots i{width:14px !important;height:14px !important}


/* ------------------------------------------------------------
   16. TABS (Beschreibung / Zusätzliche Infos)
   ------------------------------------------------------------ */
.single-product .woocommerce-tabs ul.tabs{
  padding:0 !important;
  border-bottom:1px solid var(--line) !important;
  display:flex !important;
  gap:26px !important;
}
.single-product .woocommerce-tabs ul.tabs::before{display:none !important}
.single-product .woocommerce-tabs ul.tabs li{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{display:none !important}
.single-product .woocommerce-tabs ul.tabs li a{
  font-family:var(--font-body) !important;
  font-weight:600 !important;
  font-size:14.5px !important;
  color:var(--dim) !important;
  padding:16px 2px !important;
  border-bottom:2px solid transparent !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a{
  color:var(--text) !important;
  border-bottom-color:var(--accent) !important;
}
.single-product .woocommerce-Tabs-panel{
  padding-top:22px !important;
  color:var(--dim) !important;
  font-size:14.5px !important;
}
.single-product .woocommerce-Tabs-panel h2{display:none !important}


/* ------------------------------------------------------------
   17. PRODUKTBILD-BEREICH
   Bei digitalen Produkten oft leer — dann Platz sparen.
   ------------------------------------------------------------ */
.single-product .woocommerce-product-gallery{
  border-radius:24px !important;
  overflow:hidden !important;
}
.single-product .woocommerce-product-gallery__image img{
  border-radius:24px !important;
}


/* ------------------------------------------------------------
   18. HINWEISE UND MELDUNGEN
   ------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info{
  border-top-color:var(--accent) !important;
  background:var(--accent-soft) !important;
  border-radius:14px !important;
  font-size:14.5px !important;
}
.woocommerce-message .button,
.woocommerce-info .button{
  background:var(--ink) !important;
  color:#fff !important;
  border-radius:99px !important;
}