/* ========================================
   Navigation - Kein Uppercase in Menüs
   ======================================== */

@media (min-width: 992px) {
    .page-header .navigation .level0 > .level-top {
        text-transform: none !important;
    }
}


/* ========================================
   Navigation - Schriftgröße & Gewicht (edler, lesbarer)
   Porto-Default war 13px/700 -> wirkte klein und "gequetscht". 14px/600
   (Semibold) liest ruhiger und wertiger, ohne laut zu sein. 15px wurde
   bewusst verworfen: bei 9 Top-Level-Einträgen bricht die Leiste sonst auf
   gängigen Laptop-Breiten (1280/1200px) in eine zweite Zeile um (live an
   1440/1280/1200 verifiziert). Das horizontale Item-Padding wird passend dazu
   von 16px auf 13px gesenkt -> siehe Regel "breitere Trigger" weiter unten
   (einzige Quelle fuers Padding), damit die groesseren Glyphen einzeilig bleiben.
   !important: Porto lädt später im Bundle ([[porto-css-override-important]]).
   ======================================== */
@media (min-width: 992px) {
    .page-header .navigation .level0 > .level-top {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}


/* ========================================
   Navigation - Hover-Unterstreichung (Links → Rechts)
   ======================================== */

@media (min-width: 992px) {
    /* Basis: Kein Standard-Underline, Farb-Transition vorbereiten */
    .page-header .navigation .level0 > .level-top {
        position: relative;
        text-decoration: none !important;
        transition: color 0.25s ease;
    }

    /* Pseudo-Element als animierte Unterstreichung */
    .page-header .navigation .level0 > .level-top::after {
        content: '';
        position: absolute;
        bottom: 14px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--theme-color);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s ease;
    }

    /* Hover: Farbe + Unterstreichung fährt von links nach rechts ein */
    .page-header .navigation .level0 > .level-top:hover {
        color: var(--theme-color) !important;
        text-decoration: none !important;
    }

    .page-header .navigation .level0 > .level-top:hover::after {
        transform: scaleX(1);
    }

    /* Aktive Seite: Unterstreichung und Farbe bleiben dauerhaft */
    .page-header .navigation .level0.active > .level-top,
    .page-header .navigation .level0.ui-state-active > .level-top,
    .page-header .navigation .level0.current > .level-top {
        color: var(--theme-color) !important;
        text-decoration: none !important;
    }

    .page-header .navigation .level0.active > .level-top::after,
    .page-header .navigation .level0.ui-state-active > .level-top::after,
    .page-header .navigation .level0.current > .level-top::after {
        transform: scaleX(1);
    }
}


/* ========================================
   Navigation - Dropdown-/Submenue-Links: moderner Hover
   Porto unterstreicht Submenue-Links beim Hover (oldfashioned). Stattdessen:
   kein Underline mehr, sondern Farb-Shift zur Markenfarbe + Limetten-Tint.
   NUR Text-Links (Kategorie-Ueberschriften + Unterkategorien), NICHT die
   Bild-Kacheln (a.menu-thumb-link) -> kein Hover-BG auf Bildern.
   Text-Farbe via --header-menu-hover-color (folgt Shop-Config automatisch).
   Tint = --theme-accent-tint (Default Limette #acca4c = edeltee-Markenakzent);
   naturteil setzt den Token im Shop-Overlay (css/shop-tokens.css).
   Nur Desktop-Hover; mobil ist es das Klick-Toggle-Menue (kein :hover).
   !important: Porto laedt spaeter im Bundle ([[porto-css-override-important]]).
   ======================================== */
@media (min-width: 992px) {
    nav.navigation .submenu a:not(.menu-thumb-link) {
        text-decoration: none !important;
        border-radius: 3px;
        transition: color 0.2s ease, background-color 0.2s ease;
    }
    nav.navigation .submenu a:not(.menu-thumb-link):hover,
    nav.navigation .submenu a:not(.menu-thumb-link):focus-visible,
    nav.navigation .submenu a:not(.menu-thumb-link):hover span {
        color: var(--header-menu-hover-color, #179c80) !important;
        text-decoration: none !important;
    }
    nav.navigation .submenu a:not(.menu-thumb-link):hover,
    nav.navigation .submenu a:not(.menu-thumb-link):focus-visible {
        background-color: color-mix(in srgb, var(--theme-accent-tint, #acca4c) 16%, transparent) !important;
    }
}


/* =============================================
   HEADER ACCOUNT LINKS - Horizontal mit Pipe
   ============================================= */

/* Äußere Liste horizontal - korrigierter Selektor */
.header-right .panel.header.show-icon-tablet > ul.header.links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Äußere li Elemente */
.header-right .panel.header.show-icon-tablet > ul.header.links > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Innere verschachtelte ul (Mein Konto, Abmelden) */
.header-right .panel.header.show-icon-tablet > ul.header.links > ul.header.links {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Innere li Elemente */
.header-right .panel.header.show-icon-tablet > ul.header.links > ul.header.links > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pipe-Trennung zwischen Willkommen und Mein Konto */
.header-right .panel.header.show-icon-tablet > ul.header.links > li.greet.welcome::after {
    content: "|" !important;
    margin: 0 10px !important;
}

/* Pipe-Trennung zwischen Mein Konto und Abmelden */
.header-right .panel.header.show-icon-tablet > ul.header.links > ul.header.links > li:first-child::after {
    content: "|" !important;
    margin: 0 10px !important;
    color: #999 !important;
}

/* Desktop: top-links-icon ausblenden */
@media (min-width: 768px) {
    .header-right .panel.header.show-icon-tablet .top-links-icon {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .logo {
        max-width: 80px;
    }
}

.section-item-content[id="store.links"] > ul.header.links ~ ul.header.links {
    display: none !important;
}

.minicart-items .product-item-name {
    white-space: normal !important;
}

/* Mobile: Order Summary immer sichtbar statt als Modal */
@media (max-width: 767px) {
    /* Toggle-Button und kompakte Ansicht ausblenden */
    .opc-estimated-wrapper {
        display: none !important;
    }
    
    /* Sidebar als normales Element statt Modal anzeigen */
    .checkout-container .opc-sidebar.opc-summary-wrapper {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
        margin-bottom: 20px;
    }
    
    /* Modal-Header (Schließen-Button) ausblenden */
    .opc-sidebar .modal-header {
        display: none !important;
    }
    
    /* Modal-Content ohne Modal-Styles */
    .opc-sidebar .modal-inner-wrap {
        position: static !important;
        transform: none !important;
        height: auto !important;
    }
    
    /* Overlay verhindern */
    .modal-custom-overlay {
        display: none !important;
    }
    
    /* Sidebar vor dem Zahlungs-Formular positionieren */
    .checkout-container {
        display: flex;
        flex-direction: column;
    }
    
    .checkout-container .opc-sidebar {
        order: -1; /* Vor den anderen Elementen */
    }
}

/* Doppelpunkt nach Labels in Checkout und Mini Cart */
.block-minicart .subtotal .label:after,
.minicart-items .details-qty .label:after,
.minicart-items .price-minicart .label:after,
.order-details-items .order-gift-message .label:after,
.order-details-items .block-order-details-gift-message .label:after,
.block-wishlist-management .wishlist-select .wishlist-name-label:after {
    content: ":\00a0";
}

/* Checkout-Spaltengewichtung: Hauptspalte (Aufgabe: Zahlart + Rechnungs-
   adresse) traegt das Uebergewicht, die Sidebar-Zusammenfassung begleitet.
   Vorher 47/50 - die Summary war breiter als die Handlungsspalte. */
@media screen and (min-width: 768px) {
    .checkout-container .opc-sidebar {
        width: 42%;
    }

    .checkout-container .opc-wrapper {
        width: 55%; /* 100% - 42% - etwas Abstand */
    }
}


/* Doppeltes Rechnungsadresse-Label im Dropdown ausblenden */
.checkout-billing-address .field-select-billing > .label {
    display: none;
}

/* Rechnungsadress-Auswahl auf volle Breite (Paritaet zur Lieferadresse).
   Der Porto-Field-Control-Wrapper begrenzte die Karten auf ~500px, wodurch die
   Rechnungsadresse im Zahlungsschritt schmaler wirkte als die Lieferadresse im
   Versandschritt (User-Befund "nicht so breit"). Jetzt nutzen Auswahl und
   Formular die volle Breite ihres Containers. */
.checkout-payment-method .checkout-billing-address .field-select-billing,
.checkout-payment-method .checkout-billing-address .field-select-billing > .control,
.checkout-payment-method .billing-address-list {
    width: 100%;
    max-width: none;
}

/* Legend-Stil an step-title angleichen (gleiche Linienfarbe wie alle
   Sektionstitel im Payment-Step) */
#co-payment-form > .fieldset > .legend {
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 15px;
    padding-bottom: 10px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}

/* Doppelte Zahlungsmethode-Überschrift aus payment-methods-list ausblenden */
.payment-group > .step-title {
    display: none;
}

.minicart-items .product-item-details {
    max-width: 100% !important;
    padding: 0 !important;
}

.opc-block-shipping-information {
    padding: 22px 1.5em;
}

/* Lieferadress-Karten: identischer Look wie die Rechnungsadress-Karten
   (.billing-address-item) — abgerundete, ganzflaechig klickbare Karten, aktive
   Karte mit Marken-Gruen-Rahmen + Haken + zartem Tint. Akzent = var(--theme-color).
   !important, da Porto die Basis-Kartenregeln (border/padding/display) spaeter setzt.
   Ganzflaechiger Klick + Tastatur via shipping-address-card-mixin;
   Markup: theme-porto-child/.../shipping-address/address-renderer/default.html */
.opc-wrapper .shipping-address-item {
    --om-accent: var(--theme-color);
    --om-accent-ink: color-mix(in srgb, var(--theme-color) 72%, black);
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75em;
    padding: 1em 2.75em 1em 1em; /* rechts Platz fuer den Haken */
    border: 1px solid #d6d6d6 !important;
    border-radius: 8px;
    background: #fff;
    line-height: 1.5;
    color: #2f2f2f;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease,
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.opc-wrapper .shipping-address-item:last-child {
    margin-bottom: 0;
}

.opc-wrapper .shipping-address-item__name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15em;
}

.opc-wrapper .shipping-address-item:hover {
    border-color: var(--om-accent) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    transform: translateY(-1px);
}

.opc-wrapper .shipping-address-item:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* Aktive Karte: kraeftiger Marken-Rahmen + zarter Tint (wie billing selected-item) */
.opc-wrapper .shipping-address-item.selected-item {
    border-color: var(--om-accent) !important;
    border-width: 2px !important;
    padding: calc(1em - 1px) calc(2.75em - 1px) calc(1em - 1px) calc(1em - 1px);
    background: color-mix(in srgb, var(--om-accent) 8%, #fff);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--om-accent) 16%, transparent);
}

/* Haken oben rechts identisch zur Billing-Karte
   (Porto-Icon-Font-::after vollstaendig ueberschreiben). */
.opc-wrapper .shipping-address-item.selected-item::after {
    content: '\2713' !important;
    font-family: inherit !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--om-accent) !important;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 8px;
}
/* "Hier hin senden"-Button entfaellt: die ganze Karte ist jetzt klickbar
   (wie die Billing-Karten). Klick/Tastatur via shipping-address-card-mixin. */
.opc-wrapper .action-select-shipping-item {
    display: none !important;
}

.table-checkout-shipping-method .col-carrier {
    white-space: nowrap;
}

/* "+ Neue Adresse" als gestrichelte Karte (analog zur Billing-Neue-Adresse-Karte),
   nicht mehr als oranger Porto-Button. */
.opc-wrapper .action-show-popup {
    display: flex !important;
    align-items: center;
    gap: 0.55em;
    width: 100%;
    box-sizing: border-box;
    margin: 0.75em 0 0 !important;
    padding: 1em !important;
    border: 1px dashed #c2c2c2 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    color: color-mix(in srgb, var(--theme-color) 72%, black) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.opc-wrapper .action-show-popup:hover,
.opc-wrapper .action-show-popup:focus-visible {
    border-color: var(--theme-color) !important;
    background: color-mix(in srgb, var(--theme-color) 6%, #fff) !important;
}

.opc-wrapper .action-show-popup::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}


/* ========================================
   Header Panel - Gradient von links nach rechts
   Grün (--theme-color) → dunkles Grün
   ======================================== */

.main-panel-top {
    background: linear-gradient(
        to right,
        var(--cta-surface) 0%,
        color-mix(in srgb, var(--theme-color) 55%, black) 100%
    ) !important;
}

.page-header .panel.wrapper {
    background: transparent !important;
    min-height: 20px !important;
}

/* Eingeloggt rendert Porto „Mein Konto | Abmelden" in einer VERSCHACHTELTEN
   ul.header.links -> ohne die zweite Zeile erbten die Links Portos globales
   a{#179c80} = Markengruen auf gruenem Verlauf (unlesbar). */
.header.panel > .header.links > li,
.header.panel > .header.links > ul.header.links > li {
    text-transform: none;
    color: #e7e7e7;
}

.header.panel > .header.links > ul.header.links > li > a {
    color: inherit;
}


/* ========================================
   Header Suchfeld - Orange Design
   ======================================== */

/* Haupt-Container: transparenter Hintergrund, Marken-Rahmen */
.header-center .search-area .block.block-search {
    border: 2px solid color-mix(in srgb, var(--theme-color) 45%, white) !important;
    border-color: color-mix(in srgb, var(--theme-color) 45%, white) !important;
    border-radius: 10px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Fokus: kräftiger Marken-Rahmen + dezenter Glow */
.header-center .search-area .block.block-search:focus-within {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 18%, transparent);
}

/* Eingabefeld: transparenter Hintergrund; links normaler Textabstand,
   rechts Platz für den absolut positionierten Such-Button (sonst rutscht
   der Placeholder unter die Lupe). Nur EINE Lupe = der Button rechts;
   die früher hier stehende dekorative Lupe links wurde entfernt. */
.header-center .search-area .block-search input.input-text {
    background: transparent !important;
    padding-left: 16px !important;
    padding-right: 52px !important;
    color: #444;
    font-size: 0.95rem;
}

.header-center .search-area .block-search input.input-text::placeholder {
    color: #bbb;
}

/* Such-Button: Markenfarbe, kompakt (46px), rechte Seite abgerundet.
   top/bottom statt fixer Pixelhöhe: Portos height:48px rundet bei Browser-Zoom
   != 100% anders als die Container-Innenhöhe -> Spalt bzw. abgeschnittene Ecke.
   Aufspannen über beide Kanten leitet die Malkanten aus demselben Box-Modell ab. */
.header-center .search-area .actions .action.search {
    background-color: var(--theme-color) !important;
    width: 46px !important;
    padding: 0 !important;
    font-weight: normal;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
}

/* Lupe-Icon: sichtbar und weiß */
.header-center .search-area .actions .action.search::before {
    display: block !important;
    color: #fff !important;
    font-size: 17px;
    line-height: 1;
}

/* Button-Text "Suchen" ausblenden */
.header-center .search-area .actions .action.search > span {
    display: none !important;
}

/* Hover-Effekt Button (dunklere Markenfarbe) */
.header-center .search-area .actions .action.search:hover {
    background-color: color-mix(in srgb, var(--theme-color) 82%, black) !important;
}

.page-header.type1, .page-header {
    background-color: transparent !important;
}


/* ========================================
   Header-Right: Links + Minicart - Orange
   ======================================== */

/* Minicart Icon-Link: Porto setzt explizit color:#fff mit 4 Klassen
   Spezifität → mit !important überschreiben */
.header-right .minicart-wrapper .action.showcart,
.header-right .minicart-wrapper .action.showcart::before,
.header-right .minicart-wrapper .action.showcart.active::before {
    color: var(--header-menu-hover-color, #ff6840) !important;
}

/* cart-design-2: Warenkorb-Icon hat einen Rahmen, auch diesen orange */
.header-right .cart-design-2 .action.showcart .minicart-icon {
    border-color: var(--header-menu-hover-color, #ff6840) !important;
}

/* Konto-Icon-Link (porto-icon-user-2): gleiche Mechanik wie der Minicart oben.
   Ohne explizite Farbe auf allen Zustaenden kippt das generische a:visited
   (color:inherit, Z. ~2140) das Icon nach Orange, sobald /customer/account/
   in der Browser-History liegt — Ruhewert auf :visited spiegeln. */
.header-right a.my-account,
.header-right a.my-account:visited,
.header-right a.my-account:hover,
.header-right a.my-account:focus {
    color: var(--header-menu-hover-color, #ff6840) !important;
}


/* ========================================
   Navigation - Rahmenlinien (kein Hintergrund-Tint)
   ======================================== */

@media (min-width: 992px) {
    /* Dezenter Balken oben und unten (Marken-Ton statt warmes Tan) */
    .page-header.type1 .nav-sections {
        border-top: 1px solid color-mix(in srgb, var(--theme-color) 22%, white);
        border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 22%, white);
    }
}

@media (min-width: 992px) {
    .page-header.type1 .nav-sections {
        padding: 0 !important;
    }
}

.page-header.type1 .search-area .actions button {
    border-radius: 0 8px 8px 0 !important;
}


/* ========================================
   Mobile Suchfeld - Position korrigieren
   ======================================== */

@media (max-width: 991px) {
    .search-area.show-icon-tablet .block.block-search {
        right: auto !important;
        left: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        min-width: unset !important;
        box-sizing: border-box !important;
    }

    /* Innere Elemente volle Breite */
    .search-area.show-icon-tablet .block.block-search .block-content,
    .search-area.show-icon-tablet .block.block-search .form.minisearch,
    .search-area.show-icon-tablet .block.block-search .field.search,
    .search-area.show-icon-tablet .block.block-search .field.search .control {
        width: 100% !important;
    }

    .search-area.show-icon-tablet .block.block-search .field.search .control input.input-text {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.block-search .action.search {
    right: 0 !important;
}

@media (max-width: 991px) {
    .page-header.type1 .search-area .actions button {
        width: 50px !important;
    }
}

/* OwnMag2Ext LayeredNavigation: Kategorie-Seitentitel (H1) wieder einblenden.
   Porto versteckt ihn shop-weit via .catalog-category-view .page-title-wrapper{display:none}.
   body-Prefix erhoeht Specificity (0,3,0) -> schlaegt Porto ohne !important. */
body.catalog-category-view .page-title-wrapper { display: block; }

/* OwnMag2Ext: Kategorie-Seitentitel fluid skalieren statt flachem 36px.
   Der Titel ist ein autorisiertes <h1> in .category-description (Migrations-
   Artefakt; .page-title-wrapper wird auf diesen Seiten gar nicht gerendert).
   Porto/Browser-Default zeigt ihn flach 36px/400 -> auf breitem Desktop
   unterdimensioniert ("manchmal sehr klein"), auf Mobile gross. clamp() gibt
   ihm pro Breakpoint die richtige Praesenz (brand.md: fluide Heading-Skala
   statt flacher Wert; ~30px @375 -> 44px @>=1280). 700 + dunkel = lesbar,
   kohaerent mit dem Produkt-Seitentitel (2rem/700). Zweiter Selektor deckt
   Landing-Kategorien ohne .category-description ab (h1 direkt in column.main). */
body.catalog-category-view .category-description > h1,
body.catalog-category-view .column.main > h1 {
    font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.75rem);
    line-height: 1.15;
    font-weight: 700;
    color: #222529;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}


/* ========================================
   Megamenue - Hover-Verzoegerung + breitere Trigger ("Tee")
   Das Smartwave-Megamenue oeffnet/schliesst rein per CSS-:hover
   (sw_megamenu.js macht nur Positionierung). Das Panel ist immer
   display:block und wird ueber visibility/opacity ein-/ausgeblendet
   (Theme animiert nur opacity 0.2s). Problem: beim Maus-Verlassen
   verschwindet es praktisch sofort -> kein Weg, die Maus ins Panel
   zu bewegen.
   Fix = asymmetrisches transition-delay:
     - Grundzustand (.submenu): delay 0.4s  -> SCHLIESSEN verzoegert
     - :hover:                  delay 0.12s -> OEFFNEN minimal verzoegert
       (ehrt "einblenden" + verhindert Flackern beim Drueberstreifen,
        als Lag nicht spuerbar)
   visibility MUSS in die transition-Liste, sonst springt es trotz
   opacity-Fade sofort auf hidden und das Panel ist maustot.
   Nur Desktop (>=992px); darunter ist es das Klick-Toggle-Menue.
   ======================================== */
@media (min-width: 992px) {
    /* Grundzustand: Schliessen verzoegert (Top-Panel + Classic-Flyouts 2. Ebene).
       !important noetig: Porto setzt auf .submenu `transition: .2s opacity`
       (ohne visibility, ohne Delay) mit gleicher Spezifitaet -> bei reiner
       Gleich-Spezifitaet gewinnt Porto (laedt spaeter im Bundle). Verifiziert
       per computed style: ohne !important blieb der Ruhewert 0s/opacity, das
       Panel schloss trotz korrekt deployter Regel sofort. */
    .sw-megamenu.navigation li.level0 > .submenu,
    .sw-megamenu.navigation li.level0.classic .subchildmenu .subchildmenu {
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
        transition-delay: 0.4s !important;
    }

    /* Hover: Oeffnen nur minimal verzoegert (kein Lag, aber kein Flackern).
       Ebenfalls !important + hoehere Spezifitaet (:hover) -> gewinnt beim
       OEFFNEN gegen die !important-Ruheregel (0.4s), die nur beim Schliessen
       gelten soll. */
    .sw-megamenu.navigation li.level0:hover > .submenu,
    .sw-megamenu.navigation li.level0.classic .subchildmenu > li:hover > .subchildmenu {
        transition-delay: 0.12s !important;
    }

    /* "Tee" & andere kurze Eintraege sind als Trigger zu schmal (Porto setzt
       horizontales Padding 0; "Tee" ist nur ~24px breit). Breiteres
       horizontales Padding vergroessert die Hover-Flaeche UND die Bruecke zum
       Panel (hilft direkt der Schliess-Verzoegerung oben).
       !important noetig: Porto setzt das Padding mit gleicher Spezifitaet
       (reiner Selektor verliert sonst - genau wie bei der text-transform-Regel
       oben). 13px (vorher 16px): seit die Schrift auf 14px angehoben wurde,
       wuerden 9 Eintraege bei 16px-Padding auf 1280/1200px in eine zweite
       Zeile umbrechen. 13px haelt das Breiten-Budget des alten 13px/16px-Stands
       und laesst die groesseren Glyphen weiter einzeilig (live an 1440/1280/1200
       verifiziert). Einzige Quelle fuers Top-Nav-Padding. */
    .page-header .navigation .level0 > .level-top {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    /* Porto setzt ZUSAETZLICH margin-right:30px pro level0-Item -> doppeltes
       Spacing neben dem 13px-Padding (56px optischer Wortabstand) und 270px
       tote Breite: die 9 Eintraege (882px inkl. Padding) brachen damit bei
       992-1199px (Container 940px) in eine zweite Zeile um. Margin raus -
       das Padding traegt den Abstand allein (26px Wortabstand) und bleibt
       als Hover-Flaeche/Bruecke zum Megamenue-Panel erhalten (Margin zaehlt
       nicht zur Hover-Flaeche, Padding schon).
       !important noetig: Porto setzt den Margin gleichspezifisch. */
    .page-header .navigation li.level0 {
        margin-right: 0 !important;
    }

    /* Nav-Zeile linksbuendig an der Ausrichtungsschiene: Logo, Breadcrumb
       und Seiteninhalt starten alle an der Container-Kante - die Nav folgt
       ihr, "Tee" (Kernkategorie) sitzt am F-Muster-Scan-Start. Zentrierung
       war getestet und wirkte an der 940er-Stufe (28px Seitenluft) wie ein
       Ausrichtungsfehler; Premium-Tee-Referenzen (P&T, Kusmi) sind ebenfalls
       links. Flex statt Float -> Floats der li werden ignoriert.
       Negatives margin-left = Stufen-Padding: die TEXTkante von "Tee" steht
       buendig mit der Container-Kante, nicht die unsichtbare Padding-Box
       (optische Kantenkorrektur; Stufen s.u.). Submenu-Positionierung
       (absolute gegen nav) bleibt unberuehrt. */
    .page-header .navigation > ul {
        display: flex !important;
        justify-content: flex-start;
        margin-left: -13px !important;
    }
}

/* Abstands-Stufen fuer die groesseren Porto-Container (1180/1400px):
   mehr Luft zwischen den 9 Eintraegen, wo das Breiten-Budget es hergibt.
   Bewusst ueber padding (nicht margin/gap): die groessere Flaeche ist
   zugleich Hover-Flaeche und Panel-Bruecke. Text-Summe 648px:
   1200px-Stufe: 648 + 9*44 = 1044px im 1180er-Container (Wortabstand 44px),
   1440px-Stufe: 648 + 9*52 = 1116px im 1400er-Container (Wortabstand 52px).
   Zusammen mit der 13px-Basisregel oben die einzigen Quellen fuers
   Top-Nav-Padding. */
@media (min-width: 1200px) {
    .page-header .navigation .level0 > .level-top {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    .page-header .navigation > ul {
        margin-left: -22px !important;
    }
}
@media (min-width: 1440px) {
    .page-header .navigation .level0 > .level-top {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
    .page-header .navigation > ul {
        margin-left: -26px !important;
    }
}


/* ========================================
   Megamenue - lesbare Unterkategorie-Liste (level2)
   Die Textlink-Unterkategorien (z.B. "Klassisch"/"Bio"/"Aromatisiert"
   unter "Gruener Tee"). Zwei Korrekturen nacheinander:
   1) Porto-Default padding:8px 0 bei 12px/18px = 34px Zeilenhoehe -> zu weit.
   2) Erst auf 3px gesenkt (~24px pitch) -> wirkte dann zu gequetscht/klein.
   Jetzt der Mittelweg: 13px Schrift, line-height 1.5, padding 4px -> ~27px
   pitch. Lesbar und ruhig, ohne luftig zu wirken (live verifiziert).
   Schrift dunkler (#4a4a4a statt #696969) und etwas leichter (500) -> klare
   Hierarchie zum 15px/700-Titel; der ›-Chevron + Hover bleiben unveraendert.
   !important noetig: Porto laedt spaeter im Bundle ([[porto-css-override-important]]).
   ======================================== */
.sw-megamenu.navigation li.level2 > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #4a4a4a !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


/* ========================================
   Megamenue - Unterkategorien wie im M1-Original (CT118):
   ›-Chevron als Aufzaehlungszeichen, Text eingerueckt, beim Hover rueckt
   der ganze Eintrag ~4px nach rechts ein (M1: .with-bullets + left:4px).
   Im M1 hat der Eintrag einen sichtbaren ›-Pfeil + 28px Einrueckung; M2
   (Smartwave) rendert die level2-Links nackt (nur <span>Text</span>).
   Hier den visuellen Effekt nachbauen (kein Klon der Infortis-Internals):
     - ::before content "›" in Theme-Akzentfarbe als Bullet
     - padding-left schafft Platz dafuer
     - transform:translateX beim Hover = das "einruecken" aus M1
   Nur Desktop (>=992px); darunter ist das Menue ein Klick-Toggle.
   !important nur beim padding (Porto setzt es gleichspezifisch).
   ======================================== */
@media (min-width: 992px) {
    .sw-megamenu.navigation li.level2 > a {
        position: relative;
        padding-left: 16px !important;
        transition: transform 0.15s ease, color 0.15s ease;
    }
    .sw-megamenu.navigation li.level2 > a::before {
        content: "\203A";            /* › Single Right-Pointing Angle Quotation */
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--theme-color, #ff6840);
        font-weight: 600;
        line-height: 1;
    }
    .sw-megamenu.navigation li.level2 > a:hover {
        transform: translateX(4px);
        color: var(--theme-color, #ff6840);
    }

    /* Titel "nicht so nah am Bild": Smartwave zieht den Kategorie-Titel mit
       margin-bottom:-5px auf .menu-thumb-img an das Thumbnail heran. Auf 8px
       setzen -> der Titel bekommt spuerbar Luft, ohne dass die Spalte ausein-
       anderfaellt (Mittelweg; 12px wirkte zu luftig, live bestaetigt). */
    .sw-megamenu.navigation .menu-thumb-img {
        margin-bottom: 8px !important;
    }

    /* Kategorie-Titel ("Grüner Tee" ...) im Hover nicht am linken oberen Rand
       kleben lassen. Smartwave setzt auf dem Titel-Link nur padding-bottom:8px
       (top/left = 0) -> der Text sitzt oben-links in der Hover-Markierung.
       padding-top gleich padding-bottom -> Text vertikal mittig im Hover-Block;
       kleines padding-left -> etwas Abstand zur linken Kante. */
    .sw-megamenu.navigation li.level0.fullwidth .submenu li.level1 > a,
    .sw-megamenu.navigation li.level0.staticwidth .submenu li.level1 > a {
        padding-top: 8px !important;
        padding-left: 10px !important;
    }

    /* Etwas Luft zwischen Kategorie-Titel und der Unterkategorie-Liste
       (Default 0 -> Liste klebte am Titel). 2px reichen fuer ruhige Trennung. */
    .sw-megamenu.navigation .submenu li.level1 > ul.subchildmenu {
        margin-top: 2px !important;
    }
}


/* ========================================
   Megamenue - Kategorie-Titel (level1): groesser & wertiger
   Porto-Default 13px/700 wirkte klein. 15px/700 in fast-schwarz (#2a2a2a)
   hebt den Spaltentitel klar von den 13px/500-Unterkategorien ab -> Hierarchie
   ueber drei Achsen (Groesse, Gewicht, Ton). Gilt auch im mobilen Toggle-Menue.
   !important: Porto laedt spaeter im Bundle ([[porto-css-override-important]]).
   ======================================== */
.sw-megamenu.navigation .submenu li.level1 > a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2a2a2a !important;
}


/* ========================================
   Megamenue - "Weihnachtstees / Wintertees" (CMS-Block .menu-bottom-block):
   Hover entfernen. Der CMS-Block rendert einen <a> der per Smartwave-Default
   display:block + volle Panel-Breite (~1140px) hat; eine generische Megamenue-
   Hover-Regel faerbt ihn beim Hover gruen ein -> der Highlight laeuft ungebremst
   ueber das Bild und die ganze Menuebreite. Hover auf den Ruhezustand fixieren
   (transparent + graue Ruhefarbe #696969).
   Der volle Pfad ist noetig: die konkurrierende Smartwave-Regel nutzt !important
   und ist spezifischer als ".menu-bottom-block a:hover" (verifiziert: kurzer
   Selektor verlor trotz !important; mit diesem Pfad greift transparent).
   ======================================== */
.sw-megamenu.navigation li.level0 .submenu .menu-bottom-block a:hover {
    background-color: transparent !important;
    color: #696969 !important;
}


/* ==================================================================
   HEADER MOBIL (<=991px) — Markenfarbe + zentriertes Logo
   Befund 375px: Hamburger stand in Porto-Stock-Orange (#ff6840) —
   der einzige orange Fleck im sonst gruenen Header (Suche/Konto/Cart
   sind laengst Markenfarbe). Das Logo klebte links neben dem Hamburger
   (Logo-Mitte x=92 vs. Viewport-Mitte 188), dazwischen ~100px tote
   Zone bis zu den Icons -> unruhige Gewichtung. Jetzt das klassische
   Mobile-Muster: Hamburger links, Logo exakt mittig, Icons rechts.
   Absolut gegen .header.content (position:relative, auch im Sticky-
   Zustand dieselbe Struktur, nur flacher -> top:50% traegt beide).
   Desktop (>=992px) komplett unberuehrt.
   !important: Porto laedt spaeter im Bundle
   ([[porto-css-override-important]]).
   ================================================================== */
@media (max-width: 991px) {
    /* Hamburger: Porto-Orange -> Markenfarbe (hover mit, sonst blitzt
       beim Tap das Orange der gleichspezifischen Porto-Hover-Regel auf) */
    .page-header .nav-toggle:before,
    .page-header .nav-toggle:hover:before {
        color: var(--theme-color, #179c80) !important;
    }

    /* Tap-Target des Hamburgers auf ~48px heben; negative Margins
       halten die optische Position exakt. Der Icon-Glyph selbst ist
       nur ~17x20px (porto-icons, line-height 20) -> Padding traegt
       fast die ganze Zielflaeche (17+30=47 / 20+28=48, gemessen). */
    .page-header .nav-toggle {
        display: inline-block;
        padding: 14px 15px;
        margin: -14px -15px;
    }

    /* Logo mittig zwischen Hamburger (links) und Icon-Gruppe (rechts) -
       nur noch Tablet (576-991px); Handys s. 575px-Stufe unten. */
    .page-header .header.content .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
    }
}

/* Handys (<=575px): Logo mittig im FREIEN Raum zwischen Hamburger und
   Lupe statt Viewport-mittig. Ein Viewport-zentriertes 80px-Logo kollidiert
   mit der Icon-Gruppe (375px: Logo 148-228, Lupe ab 174); links angeklebt
   (Logo ab x=37 direkt am Hamburger-Glyph) wirkte es gequetscht.
   Mechanik: .header-left (Hamburger+Logo) waechst, .header-center (Lupe,
   bei Porto flex:1) schrumpft auf das Icon, das Logo zentriert per
   margin auto. margin-right:-9px = Innenabstand der 44px-Lupen-Trefferflaeche
   -> zentriert wird optisch zwischen den sichtbaren Glyphen (Hamburger
   endet bei 37, Lupe beginnt bei 236), nicht zwischen den Boxen.
   Das Such-Overlay ist position:fixed und von der Spaltenbreite unabhaengig.
   Konto-Icon: auf Handys ausgeblendet - ueber Menue -> Tab "Konto" erreichbar
   (dort mit Text), im Kopf bleiben Suche/Merkzettel/Warenkorb. Hoehere
   Spezifitaet als die inline-flex-!important-Regel der Touch-Targets unten. */
@media (max-width: 575px) {
    .page-header .header.content .header-left {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: -9px;
    }
    .page-header .header.content .header-center {
        flex: 0 0 auto;
    }
    .page-header .header.content .logo {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto !important;
    }
    .page-header .header-right a.my-account {
        display: none !important;
    }
}


/* ==============================================
   Header-Touch-Targets mobil (Critique 2026-07-19, P2/Casey)
   Gemessen bei 375px: Warenkorb 32x26, Konto 41x26, Menue-/Konto-Tabs
   im Off-Canvas 58x19 bzw. 38x19 - alles weit unter den 48px des
   Hauses (Preset) bzw. 44px WCAG-Minimum, und das in der Daumen-
   Todeszone oben rechts. Trefferflaeche wird ueber padding + min-
   Groessen vergroessert, die Icon-Optik bleibt unveraendert (flex-
   zentriert). !important gegen Portos eigene kompakte paddings.
   ============================================== */
@media (max-width: 991px) {
    .header-right .minicart-wrapper .action.showcart,
    .header-right a.my-account,
    .page-header .search-toggle-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .page-header .nav-sections .nav-sections-item-switch {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 16px;
    }
}


/* ========================================
   Header-Zaehler: Warenkorb-Badge auf die Linie des Merkzettel-Badges
   Beide Badges sind gleich gestaltet (16px, #222529, 8px Radius), sassen
   aber auf verschiedenen Hoehen: Porto haengt den Warenkorb-Zaehler mit
   top:-5px/right:-8px an den Link (375px: y=17), das Merkzettel-Modul
   seinen mit top:2px/left:50%+3px (y=24) - 7px Versatz nebeneinander.
   Der Warenkorb uebernimmt die Merkzettel-Verankerung; die Link-Oberkanten
   unterscheiden sich je Kontext minimal, daher je Kontext ein top-Wert
   (gemessen: mobil beide y=24, Desktop beide y=84, Sticky beide y=4).
   Leerer Warenkorb: kein "0"-Badge mehr, wie beim Merkzettel - ein Badge
   erscheint erst, wenn er etwas anzeigt (Porto/Magento setzt .empty per KO).
   ======================================== */
.page-header .header-right .minicart-wrapper .action.showcart .counter.qty {
    top: 2px !important;
    left: calc(50% + 3px) !important;
    right: auto !important;
}
@media (min-width: 992px) {
    .page-header:not(.sticky-header) .header-right .minicart-wrapper .action.showcart .counter.qty {
        top: 1px !important;
    }
    .page-header.sticky-header .minicart-wrapper .action.showcart .counter.qty {
        top: -7px !important;
    }
}
.page-header .minicart-wrapper .action.showcart .counter.qty.empty {
    display: none !important;
}


/* ========================================
   Header-Icons "Konto"/"Warenkorb" beschriften (Header-Prototyp e6a531be)
   Nackte Icons sind schlechter erkennbar als beschriftete (NN/g);
   Label 11px/500 in Ink unter dem Icon, Icon bleibt Markengruen.
   NUR Desktop (>=992px) - mobil (Hamburger+Logo+3 Icons) ist kein
   Platz, dort bleibt die reine Icon-Darstellung (Prototyp macht es
   genauso). Warenkorb: Magentos vorhandener screenreader-Text
   span.text ("Warenkorb", per clip versteckt) wird einfach befreit -
   kein Template-Override noetig. Konto: span.o2e-icon-lbl kommt aus
   dem header.phtml-Child-Override (alle Header-Typ-Varianten).
   Counter-Badge bleibt absolut am Icon verankert (top:-5px).
   ======================================== */
.o2e-icon-lbl {
    display: none;
}
@media (min-width: 992px) {
    .page-header .my-account {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .o2e-icon-lbl,
    .page-header .minicart-wrapper .action.showcart .text {
        display: block;
        position: static !important;
        clip: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        color: #2f2f2f;
    }
    .page-header .minicart-wrapper .action.showcart {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .page-header .my-account:hover .o2e-icon-lbl,
    .page-header .minicart-wrapper .action.showcart:hover .text {
        color: var(--theme-color, #179c80);
    }
    /* Im kompakten Sticky-Header ist keine Hoehe fuer Labels - dort
       wieder reine Icons (Prototyp macht es genauso). */
    .page-header.sticky-header .o2e-icon-lbl,
    .page-header.sticky-header .minicart-wrapper .action.showcart .text {
        display: none !important;
    }
    /* Portos Dropdown-Caret: 14px weisses 45deg-Quadrat an
       .minicart-icon::after, top:16px = kalibriert auf Icon OHNE Label.
       Mit Label landet die Spitze mitten im Wort "Warenkorb" und
       erreicht die (13px tiefer beginnende) Dropdown-Karte nicht mehr.
       Karte hat Schatten + Radius - Caret ersatzlos aus (nur Desktop;
       mobil gibt es kein Label, dort stimmt Portos Geometrie weiter). */
    .page-header .minicart-wrapper .minicart-icon::after {
        display: none !important;
    }
}