/* naturteil Shop-Tokens (Overlay). Die geteilten CSS-Dateien lesen diese Variablen mit
   edeltee-Fallback (var(--theme-color-text, #0e7560)) - hier nur die naturteil-Werte.

   Zwei-Stufen-Orange (Entscheid 2026-11-05, Variante "hell + dunkle Buttons"):
   - Akzent hell #f86434 (froehlich, nah am Live-Orange #ff6840): Topbar, Suche, Header-Icons,
     Megamenue-Tint. Nur Flaechen/Icons - Nicht-Text-Kontrast auf Weiss 3.06:1 (>= 3:1).
   - Token --theme-color bleibt textsicher #c2410c (Weiss darauf 5.18:1): das geteilte Theme
     nutzt es an ~60 Stellen als Basis fuer Text und color-mix(..., schwarz)-Flaechen mit weisser
     Schrift. Ein helles Token wuerde viele davon unter AA druecken.
   - Text-Buttons (Warenkorb, Kasse, Anmelden ...) Anthrazit wie auf naturteil live.
   Hell wird per Scope gesetzt: --theme-color wird auf dem jeweiligen Element ueberschrieben,
   dadurch rechnen die geteilten Regeln (inkl. color-mix fuer Hover/Fokus) dort automatisch mit.
   Porto-Admin (porto_design/*, 5 Felder) = #c2410c, sonst bleiben Portos hart generierte
   Regeln (Links, Preisslider ...) im Alt-Ton #ff6840 (2.87:1). */
:root:root {
    /* Porto setzt --theme-color in configed_css/design_default.css auf :root und laedt
       NACH dieser Datei -> :root:root (hoehere Spezifitaet) gewinnt. */
    --theme-color: #c2410c;
    --theme-color-text: #c2410c;
    /* Hover-Tint im Megamenue (wird per color-mix mit 16% genutzt) */
    --theme-accent-tint: #f86434;
    /* Primaer-CTA-Flaeche in Checkout/Warenkorb/Minicart (checkout.css definiert sie aus dem Token) */
    --cta-surface: #222529;
}

/* ---------- Text-Buttons: Anthrazit, weisse Schrift 15.4:1 ----------
   Die geteilten Button-Regeln rechnen color-mix(var(--theme-color) 85%/72%, schwarz) - mit dem
   Token auf dem Button selbst ergibt das Anthrazit (Ruhe) bzw. fast Schwarz (Hover). */
html body :is(.action.primary, .action.tocart, .action-primary, .btn-primary, .action.action-login) {
    --theme-color: #222529;
    /* customer-account.css/checkout.css leiten --om-accent auf einem Vorfahren aus dem Token ab;
       abgeleitete Variablen erben als fertiger Wert -> auf dem Button selbst neu setzen. */
    --om-accent: #222529;
}
/* Porto schreibt die Admin-Themefarbe zusaetzlich hart (ohne !important) in die
   Primaer-Buttons (Login, Kontakt, ...) -> auf das Token umbiegen. */
html body .action.primary,
html body .action.primary:hover,
html body .action.primary:focus,
html body .action.primary:active,
html body .action-primary:hover,
html body .btn-primary {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* ---------- Helles Akzent-Orange: Suche + Header-Icons ---------- */
/* Suchfeld: Rahmen (45%-Tint), Fokus-Rahmen, Such-Button und dessen Hover lesen das Token.
   Weisse Lupe auf #f86434: 3.06:1 (Icon, >= 3:1). */
html body .block.block-search {
    --theme-color: #f86434;
}
/* Konto/Warenkorb lesen Portos --header-menu-hover-color, der Merkzettel das Token. Nur die
   Icon-Links scopen - das Minicart-Dropdown (Text, Buttons) bleibt beim textsicheren Token. */
html body .header-right {
    --header-menu-hover-color: #f86434;
}
html body .o2e-merkzettel-header {
    --theme-color: #f86434;
}
/* Mobil/Tablet: Hamburger und Such-Lupe erben Portos Header-Textfarbe (= Admin #c2410c) -
   gleicher Ton wie Herz und Warenkorb daneben. */
html body .page-header .action.nav-toggle,
html body .page-header .action.nav-toggle::before,
html body .page-header .search-toggle-icon {
    color: #f86434 !important;
}

/* ---------- Topbar: helles Orange wie live, dunkle Schrift (5.45:1) ----------
   Das geteilte header-navigation.css mischt die Topbar aus Token + Schwarz (Rost-Flaeche);
   weisse 12px-Schrift auf hellem Orange haette nur ~2.9:1. */
html body .main-panel-top {
    background: linear-gradient(to right, #ff7a4d 0%, #f86434 100%) !important;
}
html body .main-panel-top,
html body .main-panel-top a,
html body .main-panel-top span,
html body .main-panel-top li,
html body .main-panel-top .header-left .om-topbar-shipping {
    color: #2b1a12 !important;
}

/* ---------- Navigationsleiste Creme (wie live) ---------- */
@media (min-width: 992px) {
    html body .page-header.type1 .nav-sections {
        background-color: #fdf4e7;
    }
    /* Die Top-Level-Liste malt sonst eigenes Weiss ueber die Leiste */
    html body .page-header.type1 .nav-sections .navigation > ul {
        background-color: transparent;
    }
}

/* Grouped-Tabelle, gewaehlte Zeile: product-page.css setzt den Namen in --theme-color auf
   12%-Marken-Tint; 80% Marke + 20% Schwarz bleibt sicher ueber AA. */
html body #super-product-table tr.selected td.col-name .item-name {
    color: color-mix(in srgb, var(--theme-color) 80%, #000);
}

/* Kachel-Herz: merkzettel.css richtet das Herz an einem hoechstens 170px breiten Bild aus
   (edeltee-Porto-Admin "Kategorie > Bildbreite"). naturteil liefert 300px-Bilder, die die
   Kachel fuellen -> ohne diesen Wert sass das Herz ~47px eingerueckt statt an der Bildecke.
   Spezifitaet (0,2,3) schlaegt die geteilte Regel unabhaengig von der Ladereihenfolge. */
html body .products-grid > ol.product-items {
    --o2e-tile-img: 300px;
}