/* =====================================================================
   Storefront (Onlineshop) — EINE Stelle, die den ganzen Shop einfärbt.
   Die Shop-Komponenten (Produktkarte, Warenkorb, Mini-Cart, Checkout,
   Detailseite, Wishlist, Filter) lesen diese Variablen via Tailwind-
   arbitrary-values. Wert hier ändern = ganzer Shop neu gestylt.

   --shop-accent / -fg  : primary Buttons + aktiver Tab + Cart-Badge + Herz
   --shop-radius-btn    : Eckenradius ALLER Buttons (Pille wie im Design)
   --shop-radius-box    : Eckenradius der Boxen/Karten (rounded-3xl)
   --color-accent* / --flux-primary : Akzent der Flux-Komponenten (Checkout)
   ===================================================================== */
:root {
    --shop-accent: #194c68;            /* brand-700 */
    --shop-accent-fg: #ffffff;
    --shop-radius-btn: 9999px;         /* Pille (rounded-full) */
    --shop-radius-box: 1.5rem;         /* rounded-3xl */

    --color-accent: #194c68;
    --color-accent-content: #143b51;   /* brand-800 */
    --color-accent-foreground: #ffffff;
    --flux-primary: #194c68;
}
.dark {
    --shop-accent: #194c68;
    --shop-accent-fg: #ffffff;
    --color-accent: #194c68;
    --color-accent-content: #2e7a9f;   /* brand-500 */
    --color-accent-foreground: #ffffff;
}

/* ===== abelsmann theme — base styles (extracted from template) ===== */
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }
body { font-family:'Inter',sans-serif; background:#faf7ef; color:#0f1a26; }

.h-display { font-family:'Outfit',sans-serif; font-weight:500; letter-spacing:-0.035em; line-height:1.04; }
.h-tight   { font-family:'Outfit',sans-serif; font-weight:500; letter-spacing:-0.02em; line-height:1.2; }

.underline-grow { background-image:linear-gradient(currentColor,currentColor); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .35s ease; }
.underline-grow:hover { background-size:100% 2px; }

.step-pill[data-active="true"] { background:#2e7a9f; color:#fff; border-color:#2e7a9f; }
.step-option[data-selected="true"] { background:#2e7a9f; color:#fff; border-color:#2e7a9f; box-shadow: 0 0 0 4px rgba(46,122,159,.18); }
.step-option[data-selected="true"] .opt-label { color:#fff !important; }
.step-option[data-selected="true"] .opt-sub { color:#fff !important; }
.step-option[data-selected="true"] svg { color:#fff !important; }
.progress-bar { transition: width .4s cubic-bezier(.2,.8,.2,1); }

.product-card:hover .product-img { transform: scale(1.04); }

/* Shop-Filter-Sidebar (Desktop): Abstand zwischen den Filtergruppen.
   Die Gruppen sind direkte .border-t-Kinder des <aside class="w-64 ..."> —
   ohne eigenen Abstand kleben sie aneinander. ~18px Luft nach unten. */
aside.w-64 > .border-t { margin-bottom: 20px; }

/* Flux-Buttons (Checkout, Mini-Cart) auf Pill-Radius bringen.
   Sie nutzen NICHT unsere --shop-radius-btn, sondern Tailwind rounded-lg/md.
   Über das data-flux-button-Attribut erzwingen wir denselben runden Look wie
   bei den restlichen Shop-Buttons. Nur im Storefront-Theme geladen. */
[data-flux-button] { border-radius: 9999px !important; }

.ticker { animation: ticker 50s linear infinite; }
@keyframes ticker { from { transform:translateX(0)} to { transform:translateX(-50%)} }

details[open] summary svg { transform: rotate(45deg); }

/* product-package gradients */
.pkg-blue   { background: linear-gradient(170deg,#dceefb 0%,#a9d2e3 60%,#79b6cf 100%); }
.pkg-purple { background: linear-gradient(170deg,#5b3aa9 0%,#3a2378 100%); }
.pkg-green  { background: linear-gradient(170deg,#dff0c4 0%,#9fc23d 100%); }