/* ==========================================================================
   Trikon Accessibility — WCAG 2.1 AA frontend fixes
   v1.0.0 — Sprint 1 baseline
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip-Link (WCAG 2.4.1 Bypass Blocks)
   Visually hidden until focused; first focusable element in DOM.
   -------------------------------------------------------------------------- */
.trikon-a11y-skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: #000;
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}

.trikon-a11y-skip-link:focus {
    left: 0;
    top: 0;
    outline: 3px solid #04697e;
}

/* --------------------------------------------------------------------------
   Screen-reader-only utility class.
   Hides visually but keeps for AT.
   -------------------------------------------------------------------------- */
.trikon-a11y-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   Global :focus-visible indicator (WCAG 2.4.7 Focus Visible)
   Applied to anything keyboard-focusable that lacks a theme focus style.
   Uses :focus-visible so mouse-click doesn't show outlines.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(4, 105, 126, 0.2) !important;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   AGB / Terms link in checkout — distinguish from surrounding body text
   so colour isn't the only differentiator (WCAG 1.4.1 Use of Color).
   -------------------------------------------------------------------------- */
.conditions-to-approve a,
#conditions-to-approve a,
.checkout-process a,
[id^="cta-terms-and-conditions"] {
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Anti-spam honeypot — visually hidden AND removed from a11y tree.
   (JS also sets tabindex=-1 + aria-hidden, this hides visually.)
   -------------------------------------------------------------------------- */
input[name="lpsproaccount_honeypot"],
input[name="lpsproaccount_honeypot"] + label,
.lpsproaccount_honeypot,
.lpsproaccount_honeypot_group {
    display: none !important;
    visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   Hero-Slider pause button (injected by carousel.js into .trikon-hp-slider-dots).
   The dots container is a centred flex row; we sit at the end of it so the
   button always lands in the visible viewport regardless of slider width.
   -------------------------------------------------------------------------- */
.trikon-a11y-pause--dotbar {
    margin-left: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 22px;
}
.trikon-a11y-pause--dotbar:hover {
    background: rgba(0, 0, 0, 0.8);
}
.trikon-a11y-pause--dotbar:focus-visible {
    outline: 2px solid #04697e;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Free-Shipping-Banner Mobile-Padding fix (#27) — prevent left-edge cutoff
   in Trikon Free Shipping module banner on narrow viewports.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .trikon-fs-banner,
    .trikon-freeshipping-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   Navigation reflow at zoom 200% — allow flex-wrap so nav items don't
   get clipped (#28 Resize Text AA).
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
    .navbar-nav,
    .main-menu,
    .top-menu,
    ul.menu {
        flex-wrap: wrap !important;
    }
}

/* --------------------------------------------------------------------------
   Colour contrast overrides (#10 WCAG 1.4.3 AA).
   PRINCIPLE: preserve original hue — only darken to meet 4.5:1 on white.
   No grey was ever brand-teal in the theme; we keep grey neutral.

   Only EXCEPTION: success green (#1e7e34) — same green-hue family as the
   theme's original #4cbb6c, just darker for contrast.
   -------------------------------------------------------------------------- */

/* Header welcome / cart-empty / user labels — original neutral grey, darkened. */
.sb-ttl,             /* "Willkommen" */
.carti,              /* "(Leer)" */
.welcom,
.usr,
.text-muted {
    color: #595959 !important;   /* 7.0:1 on white */
}

/* Form hints, optional-field markers */
.help-block,
.form-control-comment,
.form-text,
.optional-label,
.field.optional > .info {
    color: #595959 !important;
}

/* Strikethrough "regular-price" — faded but still readable */
.regular-price,
.product-discount .regular-price {
    color: #6b6b6b !important;   /* 5.74:1 on white */
}

/* v1.0.131 — WCAG AA contrast fixes (live audit findings).
   (1) Homepage product tiles render .regular-price inside
   .product-price-and-shipping where the theme forces #8a8a8a (3.45:1).
   Boost specificity with html body so the compliant gray wins. */
html body .regular-price,
html body .product-price-and-shipping .regular-price,
html body .product-miniature .regular-price {
    color: #6b6b6b !important;   /* 5.74:1 on white */
}
/* (2) Free-shipping banner secondary text was too light: meta line
   ("X € von Y", "15%") #999 = 2.85:1 @11px, country label .trikon-fs-country
   #777 = 4.48:1 @12px. Darken all to a compliant gray. */
html body .trikon-fs-meta,
html body .trikon-fs-meta *,
html body .trikon-fs-country {
    color: #6b6b6b !important;   /* 5.74:1 on white */
}

/* --------------------------------------------------------------------------
   Audit Run 2 — additional contrast fixes
   (top offending classes identified in the v1.0.8 axe-core audit)
   -------------------------------------------------------------------------- */

/* Status-text colouring is now class-based (set by JS module status-colors.js).
   The JS reads the actual text (DE / IT / EN multilingual) and applies one
   of the .trikon-a11y-status-* classes so each state gets the right hue. */
.trikon-a11y-status-available {
    color: #1e7e34 !important;   /* dark green, 5.17:1 on white */
}
.trikon-a11y-status-unavailable {
    color: #b3261e !important;   /* dark red, 5.94:1 on white */
}
.trikon-a11y-status-onrequest {
    color: #8a6500 !important;   /* dark amber/yellow, 5.05:1 on white */
}
.trikon-a11y-status-download {
    color: #0b5ed7 !important;   /* dark blue, 5.05:1 on white */
}

/* Tax / shipping / delivery hint labels under price ("Steuern inbegriffen",
   "Niedrigster Preis in den letzten 30 Tagen") */
.tax-shipping-delivery-label,
.tax-shipping-delivery-label *,
.omniversepricing-notice,
.omniversepricing-notice * {
    color: #496d75 !important;
}

/* Sidebar service / trust-badge text ("Professionelle Beratung",
   "Mit SSL-Zertifizierung", "30 Tage Rückgaberecht", "Bei Bestellungen über €...") */
.service-desc,
.service-desc *,
.deliveryinfo p,
.deliveryinfo span,
.sbr p,
.sbr span {
    color: #4a4a4a !important;
}

/* Product detail description / details tab body text — long-form copy.
   Narrow selectors ONLY (no .product-d / .tab-pane / .product-tab broad
   selectors — those would catch the status "Verfügbar" paragraph etc.). */
#description p,
#product-details p {
    color: #4a4a4a !important;
}

/* Detail-page status indicator is tagged via JS (see status-colors.js).
   The first <p> in .pronesis_order_timer also gets weight 600 for emphasis. */
.pronesis_order_timer > p:first-child {
    font-weight: 600 !important;
}

/* Trikon FreeShipping badges ("Gratis Versand" / "Abholung In-Store"):
   Original bg rgb(76,187,108) → white text gives 2.3:1 (FAIL).
   New bg #1e7e34 → white text gives 5.17:1 (AA OK). Same hue as the
   "Verfügbar" text so the brand-green signalling stays consistent. */
.product-freeshipping,
.product-freeshipping.trikon-fs-injected,
.product-freeshipping.trikon-fs-filled {
    background-color: #1e7e34 !important;
}

/* ==========================================================================
   v1.0.17 — UI/UX polish (typography scale, CTA hierarchy, neutral tinting)
   Applied on top of WCAG-AA baseline. Respects original hue families.
   ========================================================================== */

/* --- Body neutrals: tint toward brand (subtle teal undertone, not flat black) */
body {
    color: #14222a;            /* near-black, slightly teal-tinted */
    font-size: 15px;
    line-height: 1.5;
}

p, li, dd {
    color: #14222a;
}

/* --- Heading hierarchy: ≥1.25 scale + weight contrast + breathable line-heights
   Headings stay readable but lighter than v1.0.18's heavy 600 weight.
   Section titles get brand-teal accent for elegance, not fat black. */
h1, .h1 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: #1a2932 !important;       /* dark teal-tinted, not pure black */
}

h2, .h2 {
    font-size: 22px !important;
    font-weight: 500 !important;       /* lighter (was 600) — less heavy */
    line-height: 1.3 !important;
    color: #1a2932 !important;         /* dark teal-tinted black */
    letter-spacing: -0.005em !important;
}

h3, .h3 {
    font-size: 17px !important;
    font-weight: 500 !important;       /* lighter (was 600) */
    line-height: 1.35 !important;
    color: #1a2932 !important;
}

h4, .h4 {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #1a2932 !important;
}

/* Section block titles ("Top Kategorien", "Featured Products", "Onsale" etc.)
   Dark teal-tinted black, lighter weight — not heavy black. */
.section-title,
.featured-products .title,
.h2.products-section-title,
.products-section-title,
.title-block,
.block-title h2,
.home-section-title {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #1a2932 !important;
    letter-spacing: -0.005em !important;
    margin-bottom: 16px !important;
}

/* Product card titles ("Electro-Voice ZLX-15P-G2" inside .product-miniature) —
   medium weight, dark-teal tinted, NOT black bold brick. */
.product-miniature .product-name,
.product-miniature .product-title,
.product-miniature h3,
.product-miniature h4,
.product-miniature h5,
.js-product-miniature .product-name,
.js-product-miniature h3,
.js-product-miniature h4,
.js-product-miniature h5,
.product-container .product-name,
.product-container h3 {
    font-weight: 500 !important;
    color: #1a2932 !important;
    line-height: 1.35 !important;
}

/* Product name on detail page — primary information, deserves prominence */
.product-information h1,
.h1.product-name,
.product-name.h1,
.product-detail h1 {
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

/* --- Primary CTA: "In den Warenkorb" — brand-teal background, white text */
button.add-to-cart-btn,
button#add-to-cart,
.product-add-to-cart button[type="submit"],
.product-add-to-cart .add-to-cart {
    background-color: #04697e !important;
    color: #ffffff !important;
    border: 1px solid #04697e !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 12px 24px !important;
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
button.add-to-cart-btn:hover,
button#add-to-cart:hover,
.product-add-to-cart .add-to-cart:hover {
    background-color: #035566 !important;
    border-color: #035566 !important;
    box-shadow: 0 2px 8px rgba(4, 105, 126, 0.25);
}
button.add-to-cart-btn:active,
button#add-to-cart:active,
.product-add-to-cart .add-to-cart:active {
    background-color: #023e4d !important;
    border-color: #023e4d !important;
    box-shadow: none;
}

/* --- Secondary CTAs (Vergleichen / Wunschliste / Weiter einkaufen): outline style */
.compare-button,
.wishlist-button,
a.compare,
a.wishlist,
.back-to-shopping {
    border: 1px solid #04697e !important;
    color: #04697e !important;
    background: #ffffff !important;
    font-weight: 500 !important;
    transition: background-color 180ms ease, color 180ms ease;
}
.compare-button:hover,
.wishlist-button:hover,
.back-to-shopping:hover {
    background: rgba(4, 105, 126, 0.06) !important;
}

/* --- "Paga a rate" yellow PayPal-credit button: tone down so it doesn't
   compete with the primary CTA (sekundär = darker amber, smaller weight) */
[data-action="paga-a-rate"],
.paypal-pay-later-button,
.paga-rate-btn,
.paga-a-rate {
    opacity: 0.92;
    font-weight: 400 !important;
    transform: scale(0.98);
}

/* --- Top "Because Your Passion Deserves It." banner: tighter, less stark */
.top-header-bar,
.header-pre-bar,
.passion-bar,
.top-bar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}

/* --- Trust-badge headings ("GRATIS VERSAND", "RUNDUM SUPPORT" etc.):
   easier to read at small size — no ALL CAPS + tighter spacing */
.service-desc h3,
.deliveryinfo h3,
.sbr h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 2px !important;
    color: #14222a !important;
}
.service-desc p,
.deliveryinfo p,
.sbr p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

/* --- Form controls: slight focus enhancement for product UI feel */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: #04697e !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.18) !important;
    outline: none !important;
}

/* --- Smooth transitions on links so brand-teal hover feels intentional */
a {
    transition: color 150ms ease;
}
a:hover {
    color: #035566;
}

/* ==========================================================================
   v1.0.18 — UI/UX Pro Max polish
   ========================================================================== */

/* --- Product card hover: subtle lift + border accent on hover --- */
.product-miniature,
.js-product-miniature,
.product-container {
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 220ms ease;
    will-change: transform;
}
.product-miniature:hover,
.js-product-miniature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 34, 42, 0.10),
                0 2px 6px rgba(20, 34, 42, 0.06);
}

/* Image inside cards gets a soft zoom on hover for tactile feedback.
   White background instead of light-gray for lighter, cleaner card feel. */
.product-miniature .product-thumbnail,
.product-miniature .thumbnail-container,
.product-miniature .image,
.js-product-miniature .product-thumbnail {
    overflow: hidden !important;
    background: #ffffff;
    padding: 12px;
}

/* Card title sits with breathing room from the image */
.product-miniature .product-name,
.product-miniature h3,
.product-miniature h4,
.js-product-miniature .product-name {
    margin-top: 10px !important;
}
.product-miniature .product-thumbnail img,
.product-miniature .thumbnail-container img,
.product-miniature .image img,
.js-product-miniature .product-thumbnail img {
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.product-miniature:hover .product-thumbnail img,
.product-miniature:hover .thumbnail-container img,
.js-product-miniature:hover .product-thumbnail img {
    transform: scale(1.03);
}

/* --- Price typography: brand-teal accent so it breaks up the
   "black title + black price" stack and signals "this is the key info".
   Detail-page hero price is large; listing/card prices are medium. */
.product-prices .current-price,
.current-price .price,
.product-price .price,
span.price.current,
.product-prices .price {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #04697e !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}

/* Product cards in listings / carousels — price scannable but not as big
   as the detail-page hero price. Size 18px, BLACK (dark teal-tinted),
   weight 600. Detail-page hero stays brand-teal for accent — listings
   stay neutral so brand-teal isn't visually overused on the grid. */
.product-miniature .product-price-and-shipping .price,
.product-miniature .current-price .price,
.product-miniature .price.current,
.product-miniature .product-price .price,
.js-product-miniature .product-price-and-shipping .price,
.js-product-miniature .current-price .price,
.js-product-miniature .price.current,
.product-container .product-price-and-shipping .price,
.product-container .current-price .price {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #14222a !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
}

/* Card strikethrough (regular-price) — smaller than current price, faded */
.product-miniature .regular-price,
.js-product-miniature .regular-price,
.product-container .regular-price {
    font-size: 13px !important;
    color: #6b6b6b !important;   /* v1.0.131: was #6c7479 (~4.0:1, fails AA) → 5.74:1 */
}

/* --- Discount badge "-14%": softer corners, refined size --- */
.discount,
.discount-percentage,
.product-flag.discount,
.product-flag.on-sale,
.product-flag.discount-percentage {
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
}

/* --- Quantity spinner: refined +/- buttons --- */
.bootstrap-touchspin .input-group-btn-vertical button,
.qty .input-group-btn-vertical button,
button.bootstrap-touchspin-up,
button.bootstrap-touchspin-down {
    border: 1px solid #d4dadf !important;
    background: #ffffff !important;
    color: #14222a !important;
    transition: background-color 150ms ease, border-color 150ms ease;
}
button.bootstrap-touchspin-up:hover,
button.bootstrap-touchspin-down:hover {
    background: #f5f7f8 !important;
    border-color: #04697e !important;
    color: #04697e !important;
}

/* --- Breadcrumb: refined typography, brand-teal current item --- */
.breadcrumb,
nav.breadcrumb,
ol.breadcrumb {
    font-size: 13px !important;
    color: #555 !important;
    padding: 12px 0 !important;
    background: transparent !important;
    margin-bottom: 8px !important;
}
.breadcrumb a,
ol.breadcrumb a {
    color: #555 !important;
}
.breadcrumb a:hover,
ol.breadcrumb a:hover {
    color: #04697e !important;
}
.breadcrumb li:last-child,
ol.breadcrumb li:last-child {
    color: #14222a !important;
    font-weight: 500 !important;
}

/* --- Product description tabs: brand-teal active underline via pseudo-element
   (avoids double-border bug when theme already applies a bottom border on the
   underlying <li> or <ul>) --- */
.nav-tabs,
.nav.nav-tabs {
    border-bottom: 1px solid #e6e9eb !important;
    margin-bottom: 20px !important;
    gap: 4px;
}
.nav-tabs > li,
.nav.nav-tabs > li {
    border: 0 !important;
    background: transparent !important;
}
.nav-tabs > li > a,
.nav.nav-tabs .nav-link {
    border: 0 !important;
    background: transparent !important;
    color: #4a4a4a !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    position: relative;
    transition: color 150ms ease;
    margin-bottom: -1px;
}
.nav-tabs > li > a::after,
.nav.nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background-color 150ms ease;
}
.nav-tabs > li > a:hover,
.nav.nav-tabs .nav-link:hover {
    color: #04697e !important;
    background: transparent !important;
}
.nav-tabs > li > a:hover::after,
.nav.nav-tabs .nav-link:hover::after {
    background: rgba(4, 105, 126, 0.35);
}
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav.nav-tabs .nav-link.active {
    color: #04697e !important;
    font-weight: 600 !important;
    background: transparent !important;
}
.nav-tabs > li.active > a::after,
.nav-tabs > li > a.active::after,
.nav.nav-tabs .nav-link.active::after {
    background: #04697e;
}

/* Tab content gets breathing room below the tab strip */
.tab-content,
.tab-pane.active {
    padding-top: 8px;
}

/* --- Search input in HEADER ONLY (not Doofinder overlay).
   Doofinder injects its own UI; the broad input[type="search"] selector
   would clash with it. Scope tightly to the theme's header search form. */
.header-search-form input[name="s"],
#search_widget input[name="s"],
.header-search input.search-input,
form#searchbox input[name="s"] {
    padding: 10px 16px !important;
    font-size: 14px !important;
    border: 1px solid #d4dadf !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.header-search-form input[name="s"]::placeholder,
#search_widget input[name="s"]::placeholder {
    color: #6c7479 !important;
}

/* Make sure Doofinder's own overlay doesn't inherit our heavy overrides. */
[id^="doofinder"],
[id^="doofinder"] *,
.dfd-fullscreen,
.dfd-fullscreen *,
[class^="dfd-"],
[class*=" dfd-"] {
    /* Let Doofinder style itself — don't inherit our forced colours */
}
[id^="doofinder"] input,
.dfd-fullscreen input,
[class^="dfd-"] input {
    border: initial !important;
    padding: initial;
    font-size: initial;
}

/* --- Section rhythm: more breathing room between major page sections --- */
section + section,
.page-content + .page-content,
.block + .block {
    margin-top: 32px !important;
}

/* --- Sidebar block titles: refined spacing + brand-tinted accent --- */
.block-title,
.block-categories .title-block,
.h6.title-block {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #14222a !important;
    letter-spacing: 0.02em !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e6e9eb !important;
    margin-bottom: 16px !important;
}

/* --- Modal / dropdown elevation: refined shadow --- */
.modal-content,
.dropdown-menu,
.popover,
.tooltip-inner {
    border: 1px solid rgba(20, 34, 42, 0.08) !important;
    box-shadow: 0 12px 32px rgba(20, 34, 42, 0.10),
                0 4px 12px rgba(20, 34, 42, 0.06) !important;
    border-radius: 8px !important;
}

/* --- Cart summary block: visual prominence with subtle elevation --- */
.cart-summary,
.cart-total,
.cart-totals,
.checkout-block {
    background: #fafbfc !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
}

/* --- Empty-state copy ("Es gibt keine Artikel...") softer and more inviting --- */
.cart-empty,
.no-results-found,
.search-empty {
    color: #4a4a4a !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 32px 16px !important;
    text-align: center !important;
}

/* --- Footer: tighter typography, calmer rhythm --- */
.footer-container {
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.footer-container h3,
.footer-container .h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 12px !important;
    color: #14222a !important;
}
.footer-container ul {
    margin: 0 !important;
    padding: 0 !important;
}
.footer-container ul li {
    padding: 3px 0 !important;
}

/* --- Image gallery thumbnails on product detail: selected state visible --- */
.product-images img.thumb,
.product-images .thumb,
.js-thumb {
    transition: border-color 150ms ease, opacity 150ms ease;
    cursor: pointer;
}
.product-images img.thumb:hover,
.js-thumb:hover {
    opacity: 0.85;
}
.product-images img.thumb.selected,
.js-thumb.selected {
    border: 2px solid #04697e !important;
    outline: none !important;
}

/* --- Currency / language selector dropdown polish --- */
.language-selector .expand-more,
.currency-selector .expand-more {
    color: #14222a !important;
}

/* --- Pagination buttons (if any) --- */
.pagination a,
.page-list a {
    border-radius: 4px !important;
    padding: 6px 12px !important;
    transition: background-color 150ms ease;
}
.pagination .active a,
.pagination .current a,
.page-list .current a {
    background: #04697e !important;
    color: #ffffff !important;
}

/* --- Selection highlight color (text-selection) tinted to brand --- */
::selection {
    background: rgba(4, 105, 126, 0.20);
    color: #14222a;
}

/* ==========================================================================
   v1.0.25 — Mobile optimisation
   Breakpoints: 767px (phones + small tablets), 480px (small phones)
   Goals: readable typography, ≥44px touch targets, iOS-zoom-safe inputs,
   stacked layouts, full-width primary CTAs.
   ========================================================================== */

@media (max-width: 991px) {
    /* Tablet + below: slightly down-shifted heading scale */
    h1, .h1 { font-size: 26px !important; }
    h2, .h2 { font-size: 20px !important; }
    h3, .h3 { font-size: 16px !important; }
    .product-information h1,
    .h1.product-name,
    .product-detail h1 {
        font-size: 24px !important;
    }
    .current-price .price,
    .product-prices .current-price {
        font-size: 24px !important;
    }
}

@media (max-width: 767px) {
    /* ===== Typography on phone ===== */
    body {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    h1, .h1 { font-size: 26px !important; line-height: 1.2 !important; }
    h2, .h2 { font-size: 20px !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 17px !important; line-height: 1.35 !important; }
    h4, .h4 { font-size: 15px !important; }
    /* Product detail title — biggest text on the page, hero-style. */
    .product-information h1,
    .h1.product-name,
    .product-detail h1,
    h1.h1.product-head1,
    h1.product-head1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
    }
    .current-price .price,
    .product-prices .current-price {
        font-size: 26px !important;
    }

    /* ===== iOS-zoom safety: form inputs need 16px+ to prevent auto-zoom ===== */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input.form-control,
    textarea,
    textarea.form-control,
    select,
    select.form-control,
    .js-cart-line-product-quantity {
        font-size: 16px !important;
    }

    /* ===== Touch targets: ≥44px (Apple HIG) ≥ WCAG 2.5.8 floor =====
       NOTE: explicitly excluded — slider arrows, swiper nav, slick nav,
       quantity touchspin buttons, carousel pause control. Those are
       sized by the theme/JS and forcing 44px makes them distorted
       (e.g. 36w × 44h ovals). */
    button:not(.trikon-hp-slider-btn):not(.trikon-hp-slider-dot):not(.swiper-button-prev):not(.swiper-button-next):not(.swiper-pagination-bullet):not(.slick-prev):not(.slick-next):not(.slick-dots button):not(.bootstrap-touchspin-up):not(.bootstrap-touchspin-down):not(.trikon-a11y-pause--dotbar),
    .btn:not(.trikon-hp-slider-btn):not(.trikon-hp-slider-dot):not(.swiper-button-prev):not(.swiper-button-next),
    a.btn,
    .nav-link,
    .dropdown-toggle,
    .navbar-toggler,
    .user-info,
    .header-cart {
        min-height: 44px;
    }
    .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }
    .bootstrap-touchspin-up,
    .bootstrap-touchspin-down,
    button.bootstrap-touchspin-up,
    button.bootstrap-touchspin-down {
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* ===== Primary CTA "In den Warenkorb" full-width on mobile ===== */
    button.add-to-cart-btn,
    button#add-to-cart,
    .product-add-to-cart button[type="submit"],
    .product-add-to-cart .add-to-cart {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
    }
    .product-add-to-cart .qty {
        margin-bottom: 12px !important;
    }

    /* ===== Header polish on phone ===== */
    .top-header-bar,
    .header-pre-bar,
    .passion-bar {
        font-size: 11px !important;
        padding: 4px 8px !important;
        letter-spacing: 0.01em !important;
    }
    .logo,
    .logo img {
        max-width: 160px;
        height: auto;
    }
    .header-search-form input[name="s"],
    #search_widget input[name="s"] {
        font-size: 16px !important;
        padding: 12px 16px !important;
    }

    /* ===== Cart icon / user icon: tap area without visual change ===== */
    .user-info,
    .cart-link,
    .header-cart {
        padding: 6px 8px !important;
    }

    /* ===== Breadcrumbs compact ===== */
    .breadcrumb,
    nav.breadcrumb,
    ol.breadcrumb {
        font-size: 12px !important;
        padding: 8px 0 !important;
    }

    /* ===== Product cards: one-up to two-up, more breathing room ===== */
    .product-miniature,
    .js-product-miniature {
        margin-bottom: 16px !important;
    }
    .product-miniature:hover,
    .js-product-miniature:hover {
        transform: none !important;     /* no hover-lift on touch */
        box-shadow: 0 4px 12px rgba(20, 34, 42, 0.08) !important;
    }
    .product-miniature .product-name,
    .js-product-miniature .product-name {
        font-size: 14px !important;
    }

    /* ===== Cart line: stack vertically with more spacing ===== */
    .cart-item,
    .cart-line,
    .product-line {
        padding: 12px 0 !important;
    }
    .js-cart-line-product-quantity {
        min-width: 60px !important;
        text-align: center;
    }

    /* ===== Sidebar trust-badges: single column on phone ===== */
    .sbr,
    .deliveryinfo {
        margin-bottom: 8px !important;
    }
    .service-desc {
        padding: 10px 12px !important;
    }
    .service-desc h3 {
        font-size: 13px !important;
    }
    .service-desc p {
        font-size: 12px !important;
    }

    /* ===== Trust-badge row on home (30 Tage / B2B / Beratung / Versand) ===== */
    .featured-services,
    .home-services,
    .header-services {
        gap: 8px !important;
    }

    /* ===== Tabs (product description / details / reviews) on phone ===== */
    .nav-tabs > li > a,
    .nav.nav-tabs .nav-link {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* ===== Section rhythm: tighter on phone ===== */
    section + section,
    .page-content + .page-content,
    .block + .block {
        margin-top: 20px !important;
    }

    /* ===== Footer: stacked columns with bottom margin ===== */
    .footer-container .row > [class^="col-"] {
        margin-bottom: 20px !important;
    }
    .footer-container h3 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .footer-container p,
    .footer-container li {
        font-size: 13px !important;
    }

    /* ===== Modal full-width on phone ===== */
    .modal-content {
        margin: 8px !important;
        border-radius: 8px !important;
    }
    .modal-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    /* ===== Image gallery thumbs ===== */
    .product-images img.thumb,
    .js-thumb {
        width: 56px !important;
        height: 56px !important;
    }

    /* ===== Compare + Wishlist buttons: stacked & full-width ===== */
    .product-actions .compare,
    .product-actions a.compare,
    .product-actions .wishlist,
    .product-actions a.wishlist,
    a.btn.compare-btn,
    a.btn.wishlist-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    /* ===== Hamburger panel: full-height overlay-friendly ===== */
    .navbar-collapse.show,
    .mobile-menu.open {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* ===== Filter sidebar on category: collapsible "Filters" button ===== */
    .filter-toggle,
    .show-filters-btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    /* ===== Skip-link more prominent on phone ===== */
    .trikon-a11y-skip-link:focus {
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* ===== Carousel pause button: bigger tap on mobile ===== */
    .trikon-a11y-pause--dotbar {
        width: 28px !important;
        height: 28px !important;
    }

    /* ===== Free-shipping banner padding refined on phone ===== */
    .trikon-fs-banner,
    .trikon-freeshipping-wrapper {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    /* ===== Small phones (iPhone SE etc.) ===== */
    h1, .h1 { font-size: 22px !important; }
    h2, .h2 { font-size: 18px !important; }
    .product-information h1 { font-size: 20px !important; }
    .current-price .price { font-size: 20px !important; }

    /* Search bar: full-width with smaller padding */
    .header-search-form input[name="s"],
    #search_widget input[name="s"] {
        padding: 10px 14px !important;
    }

    /* Top bar even tighter */
    .top-header-bar,
    .header-pre-bar {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* Product card padding refined */
    .product-miniature,
    .js-product-miniature {
        margin-bottom: 12px !important;
    }

    /* Discount badge */
    .discount,
    .discount-percentage,
    .product-flag.discount {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
}

/* ==========================================================================
   Reduced-motion: respect user preference (impeccable + WCAG 2.3.3 nice-to-have)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Estimated delivery date banner in cart: match the green free-shipping
   banner instead of the brand-blue "info" colour the theme uses. Cart
   uses Bootstrap .alert.alert-info as wrapper — target it via :has() to
   avoid touching other alerts. v1.0.61 extension after stage audit. */
.cart-delivery-information,
.delivery-information,
.estimated-delivery,
[class*="delivery-date"],
[id*="delivery_date"],
.pronesis_delivery_date_wrap,
.cart-grid .alert.alert-info:has(p.h5),
.cart-grid-body .alert.alert-info {
    background: #e8f5ec !important;          /* very light green tint */
    border: 1px solid #1e7e34 !important;    /* sophisticated brand green */
    color: #1e7e34 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
}
.cart-delivery-information a,
.delivery-information a,
.estimated-delivery a,
.cart-grid .alert.alert-info:has(p.h5) a,
.cart-grid-body .alert.alert-info a,
.cart-grid .alert.alert-info:has(p.h5) p,
.cart-grid-body .alert.alert-info p,
.cart-grid .alert.alert-info:has(p.h5) strong,
.cart-grid-body .alert.alert-info strong {
    color: #1e7e34 !important;
}
.cart-delivery-information svg,
.delivery-information svg,
.estimated-delivery svg,
.cart-grid-body .alert.alert-info svg,
.cart-grid-body .alert.alert-info i {
    color: #1e7e34 !important;
}

/* ==========================================================================
   Product-detail "trust + actions + share" block — full restyle (v1.0.27).
   Replaces the cluttered three-stacked-section pattern with one calm,
   integrated block: payments inline, actions as text-links with icons,
   social as small accent icons.
   ========================================================================== */

/* "100% secure payments" + payment-method row: tighter, no harsh per-icon
   borders, lock icon picks up brand teal. */
.product-additional-info,
.product-info-secondary {
    border-top: 1px solid #e6e9eb;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

.secure-payments-message,
[class*="secure-payment"],
.product-additional-info > p:first-child {
    color: #4a4a4a !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.02em !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.secure-payments-message svg,
.secure-payments-message i,
.secure-payments-message img,
[class*="secure-payment"] svg,
[class*="secure-payment"] i {
    color: #04697e !important;
    width: 16px !important;
    height: 16px !important;
}

/* Payment-method logos as inline row: no per-tile box, subtle background only */
.payment-options,
.product-additional-info .accepted-payment-methods,
.payment-methods,
.payment-tiles,
.product-additional-info > p:nth-child(2),
.product-payment-methods {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    margin-bottom: 20px !important;
}
.payment-options img,
.payment-methods img,
.product-additional-info img[src*="payment"],
.product-additional-info img[alt*="payment" i],
.product-additional-info img[alt*="PayPal" i],
.product-additional-info img[alt*="Visa" i],
.product-additional-info img[alt*="Master" i],
.product-additional-info img[alt*="Amex" i] {
    height: 22px !important;
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    opacity: 0.85;
    transition: opacity 150ms ease;
}
.payment-options img:hover,
.payment-methods img:hover {
    opacity: 1;
}

/* Compare + Wishlist: text-with-icon links, not blocky buttons. */
.product-actions,
.product-additional-info .product-actions {
    display: flex !important;
    gap: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    margin: 16px 0 !important;
    align-items: center !important;
}
.product-actions > *,
.product-actions a {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-actions a.compare,
.product-actions a.wishlist,
.product-additional-info a.compare,
.product-additional-info a.wishlist,
a.btn.compare-btn,
a.btn.wishlist-btn,
.compare-button,
.wishlist-button {
    color: #04697e !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 150ms ease;
    border-radius: 0 !important;
    min-height: 0 !important;
}
.product-actions a.compare:hover,
.product-actions a.wishlist:hover,
a.btn.compare-btn:hover,
a.btn.wishlist-btn:hover {
    color: #035566 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    background: transparent !important;
}
.product-actions a.compare i,
.product-actions a.wishlist i,
a.btn.compare-btn i,
a.btn.wishlist-btn i,
.product-actions a.compare svg,
.product-actions a.wishlist svg {
    color: inherit !important;
    font-size: 16px !important;
}

/* Social share row: minimal accent icons, no boxes, teal on hover */
.social-sharing,
.share-buttons,
.product-share {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 16px 0 0 0 !important;
    border-top: 1px solid #e6e9eb !important;
    border-bottom: 0 !important;
    background: transparent !important;
    align-items: center !important;
}
.social-sharing::before,
.share-buttons::before,
.product-share::before {
    content: 'Teilen';
    font-size: 12px;
    color: #6c7479;
    margin-right: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.social-sharing a,
.share-buttons a,
.product-share a {
    background: transparent !important;
    color: #6c7479 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color 150ms ease, transform 150ms ease;
}
.social-sharing a:hover,
.share-buttons a:hover,
.product-share a:hover {
    background: transparent !important;
    color: #04697e !important;
    transform: scale(1.1);
}
.social-sharing a i,
.share-buttons a i,
.product-share a i {
    font-size: 18px !important;
}

/* ==========================================================================
   v1.0.28 — Trust+Actions+Share block: sniper-target the ACTUAL theme classes
   (.bt_compare, .wishtlist_top, .paypal-mark, li.icon-gray etc.)
   ========================================================================== */

/* Payment-method tiles: theme wraps groups of icons in .paypal-mark <div>s
   each with a border. Strip the borders, flatten to single row. */
.paypal-mark,
.payment-mark,
.product-additional-info .paypal-mark {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
}
.paypal-mark img,
.payment-mark img {
    height: 22px !important;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Compare button (the visible outline button). Theme uses .bt_compare. */
button.bt_compare,
.compare-form button,
.compare-form .bt_compare,
.list-inline.compare-h button,
.list-inline.compare-h .bt_compare {
    color: #04697e !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 150ms ease;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
button.bt_compare:hover,
.compare-form .bt_compare:hover,
.list-inline.compare-h button:hover {
    color: #035566 !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
/* Also strip the outer wrappers so they don't add extra borders/padding */
.compare-form,
.list-inline.compare-h,
.list-inline.wishlist-head {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Wishlist link */
a.wishtlist_top,
.wishlist-head a,
.wishlist-head .wishtlist_top {
    color: #04697e !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 150ms ease;
    border-radius: 0 !important;
    box-shadow: none !important;
}
a.wishtlist_top:hover,
.wishlist-head a:hover {
    color: #035566 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Social icons in theme: <li class="facebook icon-gray"> with <a> inside */
li.icon-gray,
li.icon-gray > a,
ul.social-sharing li,
ul.social-sharing li > a,
.product-share li.icon-gray,
.product-share li.icon-gray > a {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}
li.icon-gray > a,
ul.social-sharing li > a {
    color: #6c7479 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    transition: color 150ms ease, transform 150ms ease !important;
}
li.icon-gray > a:hover,
ul.social-sharing li > a:hover {
    color: #04697e !important;
    background: transparent !important;
    transform: scale(1.12);
}
li.icon-gray svg,
li.icon-gray i,
ul.social-sharing li svg,
ul.social-sharing li i {
    fill: currentColor;
    color: inherit !important;
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   v1.0.32 — product-detail block alignment + footer cleanup
   ========================================================================== */

/* (1) Compare + Wishlist visually IDENTICAL — both text-only with no border.
   The compare-form wrapper had a teal outline border bleeding through. Strip
   any border on every descendant of the .compare-form / .list-inline.* wrappers. */
.compare-form,
.compare-form *,
.list-inline.compare-h,
.list-inline.compare-h *,
.list-inline.wishlist-head,
.list-inline.wishlist-head * {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
/* Re-apply hover underline on the actual link/button text */
button.bt_compare,
button.bt_compare:hover,
button.bt_compare:focus,
button.bt_compare:active,
a.wishtlist_top,
a.wishtlist_top:hover,
a.wishtlist_top:focus,
a.wishtlist_top:active {
    color: #04697e !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    padding: 6px 0 !important;
    text-decoration: none !important;
}
button.bt_compare:hover,
a.wishtlist_top:hover {
    color: #035566 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* (2) "100% secure payments" same style pattern as TEILEN label */
.secure-payments-message,
[class*="secure-payment"],
.product-additional-info > p:first-child {
    font-size: 12px !important;
    color: #6c7479 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.secure-payments-message svg,
.secure-payments-message i,
[class*="secure-payment"] svg,
[class*="secure-payment"] i {
    color: #04697e !important;
    width: 14px !important;
    height: 14px !important;
}

/* (3) Card icons modernised — smaller, slightly desaturated, uniform feel */
.payment-options img,
.payment-methods img,
.paypal-mark img,
.product-additional-info img[src*="payment"],
.product-additional-info img[alt*="payment" i],
.product-additional-info img[alt*="PayPal" i],
.product-additional-info img[alt*="Visa" i],
.product-additional-info img[alt*="Master" i],
.product-additional-info img[alt*="Amex" i] {
    height: 18px !important;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 3px !important;
    filter: saturate(0.85) contrast(0.95);
    opacity: 0.85;
    transition: opacity 150ms ease, filter 150ms ease;
}
.payment-options img:hover,
.payment-methods img:hover,
.paypal-mark img:hover {
    filter: saturate(1) contrast(1);
    opacity: 1;
}

/* (5) Footer social icons — match the minimal product-detail social style */
.footer-container .social-links li,
.footer-container .social-icons li,
.footer-container [class*="social"] li,
.footer-container li[class*="facebook"],
.footer-container li[class*="instagram"],
.footer-container li[class*="youtube"],
.footer-container li[class*="twitter"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    display: inline-block !important;
}
.footer-container .social-links li a,
.footer-container .social-icons li a,
.footer-container [class*="social"] li a {
    background: transparent !important;
    color: #6c7479 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: color 150ms ease, transform 150ms ease;
}
.footer-container .social-links li a:hover,
.footer-container .social-icons li a:hover,
.footer-container [class*="social"] li a:hover {
    background: transparent !important;
    color: #04697e !important;
    transform: scale(1.12);
}
.footer-container .social-links li svg,
.footer-container .social-icons li svg,
.footer-container [class*="social"] li svg {
    width: 18px !important;
    height: 18px !important;
}

/* --- Accessibility-Statement Footer-Link (JS-injected) --- */
.trikon-a11y-footer-link {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 13px;
    border-top: 1px solid #e6e9eb;
    background: transparent;
}
.trikon-a11y-footer-link a {
    color: #555 !important;
    text-decoration: none;
    transition: color 150ms ease;
}
.trikon-a11y-footer-link a:hover {
    color: #04697e !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Replacement icons (cart / user) — modern Lucide-style stroke icons --- */
.trikon-a11y-icon {
    display: inline-block;
    vertical-align: middle;
    color: #14222a;
    transition: color 150ms ease, transform 150ms ease;
}
.user-info:hover .trikon-a11y-icon,
a:hover .trikon-a11y-icon,
.header-cart:hover .trikon-a11y-icon,
.cart-link:hover .trikon-a11y-icon {
    color: #04697e;
}
.user-info:active .trikon-a11y-icon,
a:active .trikon-a11y-icon {
    transform: scale(0.96);
}

/* Slightly tighter spacing between icon and label text */
.user-info .trikon-a11y-icon-user,
.cart-link .trikon-a11y-icon-cart {
    margin-right: 6px;
}

/* ==========================================================================
   v1.0.26 — Style-check follow-ups
   ========================================================================== */

/* --- Header sublabels "Willkommen" / "(Leer)" / "Fabian Aster" — premium feel */
.user-info .welcom,
.user-info .usr,
.cart-link .carti,
.cart-link .cart-empty,
.account-text,
.cart-label {
    letter-spacing: 0.04em !important;
    font-size: 12px !important;
    color: #595959 !important;
    text-transform: none !important;
}

/* --- Quantity spinner: broader cell for touch + desktop polish */
.qty input.input-number,
.qty input,
.product-quantity input,
input.product-quantity-spin,
input.js-cart-line-product-quantity {
    min-width: 56px !important;
    text-align: center !important;
    font-weight: 500 !important;
}

/* --- Trash / remove icon: subtle red hint on hover (destructive action) */
.remove-from-cart,
.cart-line-product-actions .remove-from-cart,
a[data-link-action="delete-from-cart"] {
    color: #6c7479 !important;
    transition: color 150ms ease, transform 150ms ease;
}
.remove-from-cart:hover,
.cart-line-product-actions .remove-from-cart:hover,
a[data-link-action="delete-from-cart"]:hover {
    color: #b3261e !important;
    transform: scale(1.08);
}

/* --- Image gallery thumbs: visible gap + clearer hover */
.product-images,
.product-thumbnails {
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
}
.product-images img.thumb,
.product-thumbnails .thumb,
.js-thumb {
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    transition: transform 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.product-images img.thumb:hover,
.js-thumb:hover {
    border-color: rgba(4, 105, 126, 0.4) !important;
    transform: scale(1.04);
}
.product-images img.thumb.selected,
.js-thumb.selected {
    border-color: #04697e !important;
}

/* --- Breadcrumb separators: more breath */
.breadcrumb,
ol.breadcrumb {
    letter-spacing: 0.01em !important;
}
.breadcrumb li,
ol.breadcrumb li {
    padding-right: 6px !important;
    padding-left: 6px !important;
}
.breadcrumb li:first-child,
ol.breadcrumb li:first-child {
    padding-left: 0 !important;
}

/* --- Tax / compliance hints below price: smaller, less visually loud */
.tax-shipping-delivery-label,
.tax-shipping-delivery-label *,
.omniversepricing-notice,
.omniversepricing-notice * {
    font-size: 12px !important;
    color: #6c7479 !important;
    line-height: 1.5 !important;
}

/* --- Footer block headers a touch quieter */
.footer-container h3,
.footer-container .h3,
.footer-block .title-block {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #4a4a4a !important;
    margin-bottom: 12px !important;
}

/* --- "(Leer)" cart label: subtler so the cart icon dominates */
.cart-link .cart-empty,
.cart-link span.empty {
    font-style: normal !important;
    opacity: 0.75;
}

/* --- Detail-page H1 (product name): slightly lighter to balance the teal price */
.product-information h1,
.h1.product-name,
.product-detail h1 {
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Status-colour darkening — same hue family, just enough darker for AA.
   PrestaShop / iqit themes commonly use these state classes:
   -------------------------------------------------------------------------- */

/* RED — "Nicht verfügbar" / "Zurzeit nicht verfügbar" / out-of-stock */
.product-unavailable,
.product-unavailable b,
.product-unavailable span,
.unavailable,
.last_quantities,
.out-of-stock,
span.label-danger,
.text-danger,
.alert-danger {
    color: #b3261e !important;   /* darker red, 5.94:1 on white */
}

/* YELLOW / AMBER — "Auf Anfrage" / pending / warning */
.product-on-request,
.on-request,
.text-warning,
.alert-warning,
.label-warning {
    color: #8a6500 !important;   /* darker amber, 5.05:1 on white — still reads "yellow" */
}

/* BLUE — Download / info / link-action */
.product-download,
.download-link,
a.download,
.text-info,
.alert-info {
    color: #0b5ed7 !important;   /* darker blue, 5.05:1 on white */
}

/* Footer + sidebar CMS / account links — original neutral grey, darkened.
   Was #808080 on #f5f5f5 (3.0:1). #555 on #f5f5f5 = 6.6:1 ✓. */
.cms-page-link,
a.cms-page-link,
.em-ac,
.account-list a,
.account-list li a,
.fot-cms a,
.fot-cm a,
.footer-container a:not(.btn) {
    color: #555 !important;
}

/* Sidebar / section titles "Sprache" etc. — neutral grey, darkened. */
.clc-section-title,
.clc-sidebar-title,
.sidebar-title {
    color: #4a4a4a !important;
}

/* Address block in footer-like sections — neutral dark grey. */
.data,
.clear > .data,
.block .ad.data {
    color: #4a4a4a !important;
}

/* Dark phone-number nav-link block — black on dark gray was nearly invisible.
   Force white text where the parent is dark. */
.navbar-dark .nav-link,
.dark-bg .nav-link,
.bg-dark .nav-link {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Audit Run 3 — final contrast clean-up
   -------------------------------------------------------------------------- */

/* Top-navbar small "Neu" / category labels — was #818181, darken to #555 (7.4:1) */
a.nav-link,
.top-menu .nav-link,
.header-nav .nav-link {
    color: #555 !important;
}

/* Footer paragraphs "TRIKON GmbH...", "In Zusammenarbeit..." — dark neutral grey */
.footer-container p,
.footer-container .small,
.footer-container .f-c {
    color: #4a4a4a !important;
}

/* Trustbadge / Review button "Alle unsere Rezensionen ansehen" — gray text on
   blue button bg (rgb(85,85,85) on rgb(26,115,232)) → force white text */
/* Trustbadge / Review button on dark blue bg — force white text.
   Doubled class for specificity (must beat .footer-container a:not(.btn) rule). */
a.Review__Bt.Review__Bt,
a.review-link.review-link,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
    color: #ffffff !important;
}

/* Blog-post paragraphs ("In Zusammenarbeit mit dem italienischen ...") */
.blog_post p,
.blog_post_content p,
.post_content p,
article.blog_post p {
    color: #4a4a4a !important;
}

/* Category-grid product counts "331 Produkte" — was #999, darken to #595959 */
.trikon-catgrid-count,
.catgrid-count,
.category-count,
.cat-count {
    color: #595959 !important;
}

/* Footer paragraphs without classes — dark neutral grey */
footer p,
footer .small,
.footer p,
.footer .small,
.fot p {
    color: #4a4a4a !important;
}

/* --------------------------------------------------------------------------
   sr-only utility duplicated for use inside <table><caption>.
   -------------------------------------------------------------------------- */
caption.trikon-a11y-sr-only,
.trikon-a11y-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   v1.0.35 — Product-Detail Compare & Wishlist: identical outlined buttons
   --------------------------------------------------------------------------
   Theme markup on the product detail page renders two visually different
   controls side-by-side:

     VERGLEICHEN:
       <a class="add_to_compare btn-product">
         <span class="compare-button-content">
           <svg/>
           <span class="btn btn-outline-primary">Vergleichen</span>
         </span>
       </a>
     -> inner span has 1px teal border (looks like an outlined button)

     WUNSCHLISTE:
       <a id="wishlist_button" class="btn btn-outline-primary">Wunschliste</a>
     -> theme strips its border (looks like plain text)

   We force BOTH into the same outlined-pill shape, identical padding, height,
   typography, hover and focus states. The .product-additional-info scope
   keeps these rules off product cards (grid) and header.
   ========================================================================== */

/* The wrapping <div class="compare d-inline-block"> sits to the LEFT, the
   <p class="panel-product-line panel-product-actions"> with #wishlist_button
   sits to its RIGHT. Pull them into a single flex row with consistent gap. */
.product-additional-info .compare.d-inline-block,
.product-additional-info p.panel-product-actions {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 8px 8px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* The two outlined buttons themselves — identical shape and rhythm.
   v1.0.46: removed the higher-specificity selector variant
   (`.product-additional-info a#wishlist_button.btn.btn-outline-primary`)
   because it outweighed the mobile @767 override and pinned Tech-Rider to
   40px while Compare grew to 44px. Both base-rule selectors now share the
   same specificity (1,3,1 / 0,3,1) so the mobile override wins cleanly. */
.product-additional-info a.add_to_compare.btn-product,
.product-additional-info a#wishlist_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid #04697e !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #04697e !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out !important;
}

/* Reset the inner Vergleichen <span> so its own border/padding doesn't
   stack on top of the outer <a> we just styled. */
.product-additional-info a.add_to_compare.btn-product .compare-button-content,
.product-additional-info a.add_to_compare.btn-product .btn,
.product-additional-info a.add_to_compare.btn-product .btn.btn-outline-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* Hover/focus — fill with teal, white text. Same for both. */
.product-additional-info a.add_to_compare.btn-product:hover,
.product-additional-info a.add_to_compare.btn-product:focus,
.product-additional-info a#wishlist_button:hover,
.product-additional-info a#wishlist_button:focus {
    background: #04697e !important;
    border-color: #04697e !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.product-additional-info a.add_to_compare.btn-product:focus-visible,
.product-additional-info a#wishlist_button:focus-visible {
    outline: 3px solid #04697e !important;
    outline-offset: 2px !important;
}

/* Icons inside — inherit currentColor so they invert correctly on hover. */
.product-additional-info a.add_to_compare.btn-product svg,
.product-additional-info a.add_to_compare.btn-product i,
.product-additional-info a#wishlist_button svg,
.product-additional-info a#wishlist_button i {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
    fill: currentColor !important;
}

/* ==========================================================================
   v1.0.38 — Top-bar spacing + mobile responsive (no hiding)
   --------------------------------------------------------------------------
   Two fixes:

   (1) DESKTOP & MOBILE BOTH — Vergleichen + Wunschliste in the top bar
       had no spacing between them so they read as "vergleichenWunschliste".
       The theme markup uses inline-block wrappers with zero margin. Add
       a proper flex container with gap so all top-bar widgets breathe.

   (2) MOBILE — keep ALL widgets visible (top bar, search, nav). Use flex
       wrap + gap so they re-flow gracefully instead of crashing into each
       other or off-screen. No display:none on header content.
   ========================================================================== */

/* (1) Top-bar widgets: cluster tightly at the right edge on desktop where
   the row sits in a Bootstrap col (50% viewport ≈ 700+px and space-between
   would explode the gaps); distribute with space-between on phones where
   the row spans the full narrow viewport. v1.0.50 fix for v1.0.47 regression. */
.header-nav .display-nav-2,
.header-nav .top-nav .display-nav-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
}
@media (max-width: 767px) {
    .header-nav .display-nav-2,
    .header-nav .top-nav .display-nav-2 {
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }
}
.header-nav .display-nav-2 > * {
    margin: 0 !important;
}
/* Compare + Wishlist link styling: same teal as the legal links, no
   underline by default, underline on hover. Identical sizing so they read
   as a pair, not a typo-merge. */
#compare-link.list-inline.compare-h,
#compare-link.list-inline.compare-h .compare-form,
.list-inline.wishlist-head {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
#compare-link button.bt_compare,
.list-inline.wishlist-head a.wishtlist_top {
    padding: 6px 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* (2) Mobile / tablet: re-flow the top bar gracefully, never hide. */

/* ---- TABLET (<= 991px) ---- */
@media (max-width: 991px) {
    .header-nav .top-nav {
        align-items: center !important;
    }
    .header-nav .display-nav-1,
    .header-nav .display-nav-2 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .header-nav .display-nav-2 {
        justify-content: flex-start !important;
        gap: 14px !important;
        margin-top: 4px !important;
    }
    /* Burger toggle: comfortable touch target. */
    .navbar-toggler,
    .menu-toggle,
    .menu-trigger,
    .nav-trigger,
    a.menu-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        border-radius: 6px !important;
    }
    /* Section rating compact so it doesn't dominate the row. */
    .section-rating,
    .section-rating .Review__Rating,
    .section-rating .Review__Stars {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    .section-rating img {
        max-height: 14px !important;
    }
}

/* ---- PHONE (<= 767px) ---- */
@media (max-width: 767px) {
    /* Marketing slogan: keep visible but shrink so it doesn't push the
       review/compare/wishlist row off the side. */
    #offerblock .offer-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
    /* Top bar: very compact so 4.4 + compare + tech-rider + language all
       fit on a single row even on 360px phones. */
    .header-nav,
    .header-nav .container,
    .header-nav .top-nav {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .header-nav .display-nav-2 {
        gap: 4px 10px !important;
        font-size: 12px !important;
    }
    /* Compare + Wishlist + Review badge tappable targets. */
    #compare-link button.bt_compare,
    .list-inline.wishlist-head a.wishtlist_top {
        min-height: 32px !important;
        padding: 4px 2px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    /* Review badge: keep visible but tight so the language pill stays on the
       same row as everything else. */
    .section-rating,
    .section-rating .Review__Rating,
    .section-rating .Review__Stars {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }
    .section-rating img,
    .section-rating .review-stars img {
        max-height: 12px !important;
    }
    /* Language selector: shrink the flag + label so it doesn't wrap. */
    .clc-trigger-btn,
    button.clc-trigger-btn {
        height: 30px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
    .clc-trigger-btn .clc-trigger-flag,
    button.clc-trigger-btn img {
        height: 12px !important;
        width: auto !important;
    }

    /* Logo / search / user / cart row: make logo modest, search a separate
       full-width row beneath. */
    .logo,
    .logo img,
    .header-logo img,
    .navbar-brand img {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Search widget moves to its own row, full-width. */
    #search_widget,
    .header-search-form,
    .top-search,
    .search-widget {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 99 !important;
        margin: 6px 0 0 0 !important;
    }
    #search_widget input[name="s"],
    .header-search-form input[name="s"],
    .search-widget input[name="s"] {
        height: 44px !important;
        font-size: 16px !important;
        padding: 0 44px 0 14px !important;
        border-radius: 8px !important;
    }
    #search_widget button[type="submit"],
    .header-search-form button[type="submit"],
    .search-widget button[type="submit"] {
        width: 44px !important;
        height: 44px !important;
    }

    /* User + Cart icons: visual size 22, touch area 44.
       IMPORTANT: scope to header context only — a bare a[href*="/anmeldung"]
       also matched the "Privatkunde / Unternehmen registrieren" buttons on
       the login form and squashed them to 44×44 squares. */
    .user-info,
    .cart-link,
    .header-cart,
    .blockcart,
    .header-icon-user,
    header a[href*="/anmeldung"]:not(.btn),
    header a[href*="/my-account"]:not(.btn),
    .header-nav a[href*="/anmeldung"]:not(.btn),
    .header-nav a[href*="/my-account"]:not(.btn) {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    .user-info svg,
    .cart-link svg,
    .header-cart svg,
    .blockcart svg,
    .header-icon-user svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Slider: keep the theme's own aspect ratio + button sizes. Do NOT
       force min-height or set max-height here — both have caused oval
       prev/next arrows in earlier versions. The slider buttons are
       already excluded from the global 44px touch-target rule above. */
    .trikon-hp-slider-btn,
    .trikon-hp-slider-btn--prev,
    .trikon-hp-slider-btn--next,
    .swiper-button-prev,
    .swiper-button-next {
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Slider pagination dots — theme renders them as <button> ~10×12px.
       The global mobile button{min-height:44px} rule was stretching them
       into vertical ovals (10×44/53). Force a square pill shape. */
    .trikon-hp-slider-dot,
    .trikon-hp-slider-dots button,
    .swiper-pagination-bullet,
    .slick-dots button,
    .slick-dots li button {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Product detail: stack Compare + Wishlist outlined buttons full-width
       so they're easy to tap and don't wrap weirdly. */
    .product-additional-info .compare.d-inline-block,
    .product-additional-info p.panel-product-actions,
    .product-additional-info a.add_to_compare.btn-product,
    .product-additional-info a#wishlist_button {
        display: flex !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
    }
    .product-additional-info a.add_to_compare.btn-product,
    .product-additional-info a#wishlist_button {
        height: 44px !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    /* "100% secure payments" stays one row but tighter. */
    .product-additional-info > p:first-child,
    .secure-payments-message {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    .payment-options img,
    .payment-methods img,
    .product-additional-info img[src*="payment"] {
        max-height: 18px !important;
    }

    /* Trust badges row on the right side of the cart button — stack. */
    .product-info-right .service-desc,
    .deliveryinfo,
    .sbr {
        padding: 8px 12px !important;
    }
    .product-info-right .service-desc h3 {
        font-size: 12px !important;
        margin: 0 0 2px 0 !important;
    }
    .product-info-right .service-desc p {
        font-size: 11px !important;
    }

    /* Product cards on home / category: keep a comfortable single-col on
       very narrow phones, two-col from ~480px upward (handled below). */
    .product-miniature .product-title a,
    .js-product-miniature .product-title a {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
    .product-miniature .product-price-and-shipping,
    .js-product-miniature .product-price-and-shipping {
        font-size: 16px !important;
    }

    /* On-sale / Featured sidebar block: cards stretch full-width. */
    aside .product-miniature,
    .sidebar .product-miniature,
    .onsale-block .product-miniature {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Reviews / testimonials row: stack vertically. */
    .testimonial-block .row > [class*="col-"],
    .testimonial-block .swiper-slide {
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Footer columns: more breathing room between groups.
       NOTE: do NOT force ul.collapse open — the theme uses Bootstrap
       collapse on phones so users can tap a heading to expand/collapse
       each link group. Forcing open broke that affordance. */
    .footer-container .links .wrapper {
        margin-bottom: 16px !important;
    }
}

/* ---- SMALL PHONE (<= 480px) ---- */
@media (max-width: 480px) {
    /* Top bar even tighter on small phones — fits 360px width. */
    .header-nav .display-nav-2 {
        gap: 4px 8px !important;
    }
    #compare-link button.bt_compare,
    .list-inline.wishlist-head a.wishtlist_top {
        font-size: 11px !important;
        padding: 4px 0 !important;
    }
    .section-rating {
        font-size: 10px !important;
    }
    .clc-trigger-btn,
    button.clc-trigger-btn {
        height: 26px !important;
        padding: 2px 6px !important;
        font-size: 11px !important;
    }
    .clc-trigger-btn .clc-trigger-flag,
    button.clc-trigger-btn img {
        height: 10px !important;
    }
    /* Logo a touch smaller still. */
    .logo img,
    .navbar-brand img {
        max-width: 120px !important;
    }
    /* In Den Warenkorb button: large primary CTA. */
    button#add-to-cart,
    .product-add-to-cart button[type="submit"] {
        font-size: 15px !important;
        padding: 13px 16px !important;
    }
    /* Featured products carousel arrows out of the way. */
    .featured-products .swiper-button-next,
    .featured-products .swiper-button-prev,
    .home-products .swiper-button-next,
    .home-products .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
    }
    /* Sticky add-to-cart on scroll (if present) — make height comfortable. */
    .product-sticky-add-to-cart,
    .sticky-add-to-cart {
        padding: 8px 12px !important;
    }
}

/* ==========================================================================
   v1.0.39 — Mobile product-page polish
   --------------------------------------------------------------------------
   (1) Thumbnail strip scroll arrows: theme renders <i class="material-icons
       left/right"> chevrons flanking the thumbs. Clicking a thumb already
       switches the cover; the arrows are redundant decoration.
   (2) Quantity touchspin: theme stacks the up/down arrows vertically next
       to a short qty cell, so the arrow column is visually taller than the
       cell. Flatten to a single horizontal row [−][1][+] each 44×44.
   ========================================================================== */

/* (1) Hide thumb-scroll arrows everywhere (not mobile-specific — they were
       always redundant on this theme). */
.scroll-box-arrows,
.scroll-box-arrows.scroll,
.scroll-box-arrows .left,
.scroll-box-arrows .right,
.scroll-box-arrows i.material-icons.left,
.scroll-box-arrows i.material-icons.right {
    display: none !important;
}

/* (2) Touchspin: horizontal row, square 44-px buttons flanking the qty cell.
       Applies at all viewports + EVERYWHERE the bootstrap-touchspin markup
       appears (product detail, cart line, quickview, mini-cart). The
       theme's default vertical stack was awkward on desktop too. */
.input-group.bootstrap-touchspin,
.bootstrap-touchspin,
.qty .input-group {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    height: 44px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
}

/* The number cell — square, 44 tall, ≥56 wide for two-digit room. */
input#quantity_wanted,
input.js-cart-line-product-quantity,
input[name="qty"],
input.product-quantity-spin,
.bootstrap-touchspin input.form-control,
.input-group.bootstrap-touchspin > input {
    width: 56px !important;
    min-width: 56px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}

/* The +/− buttons — square 44, sit either side of the cell. */
.bootstrap-touchspin .input-group-btn-vertical,
.input-group-btn-vertical {
    display: contents !important;          /* dissolve the vertical wrapper */
}
button.bootstrap-touchspin-up,
button.bootstrap-touchspin-down,
.bootstrap-touchspin-up,
.bootstrap-touchspin-down,
.btn.btn-touchspin.bootstrap-touchspin-up,
.btn.btn-touchspin.bootstrap-touchspin-down {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #f5f7f8 !important;
    color: #14222a !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color .12s ease !important;
}
button.bootstrap-touchspin-down,
.bootstrap-touchspin-down {
    order: 0 !important;
    border-right: 1px solid #e6e9eb !important;
}
button.bootstrap-touchspin-up,
.bootstrap-touchspin-up {
    order: 2 !important;
    border-left: 1px solid #e6e9eb !important;
}
.product-add-to-cart input#quantity_wanted,
input#quantity_wanted,
input.js-cart-line-product-quantity,
.input-group.bootstrap-touchspin > input {
    order: 1 !important;
}
button.bootstrap-touchspin-up:hover,
button.bootstrap-touchspin-down:hover,
button.bootstrap-touchspin-up:focus,
button.bootstrap-touchspin-down:focus {
    background: #e8edef !important;
    outline: none !important;
}

/* Use ASCII glyphs so the buttons are obvious without depending on the
   theme's stacked chevron <i> markers. */
button.bootstrap-touchspin-up i,
button.bootstrap-touchspin-down i,
.bootstrap-touchspin-up i,
.bootstrap-touchspin-down i {
    display: none !important;
}
button.bootstrap-touchspin-up::after { content: "+" !important; font-size: 20px !important; }
button.bootstrap-touchspin-down::after { content: "−" !important; font-size: 20px !important; }

/* Mobile-only: title gets one more push because the price below it is the
   visual anchor. */
@media (max-width: 767px) {
    .product-information h1,
    .h1.product-name,
    .product-detail h1,
    h1.h1.product-head1,
    h1.product-head1 {
        font-size: 30px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
        margin-bottom: 12px !important;
    }
}
@media (max-width: 480px) {
    .product-information h1,
    .h1.product-name,
    .product-detail h1,
    h1.h1.product-head1,
    h1.product-head1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }
}

/* ==========================================================================
   v1.0.45 — Tech-Rider stays visible (override stale CCC cache)
   --------------------------------------------------------------------------
   v1.0.43 added a `body:not(.logged) .wishlist-head { display: none }` rule
   to hide the wishlist link for guests; v1.0.44 simply removed it. But
   PrestaShop's CCC (combine/compress/cache) bundles CSS into a single
   blob that is NOT invalidated by changing one source file's query string
   — the bundled stylesheet still carries the v1.0.43 hide rule even after
   v1.0.44 deploys. Counter that with explicit `display: inline-flex`
   override at higher specificity so the link shows regardless of which
   cached bundle the browser is using.
   ========================================================================== */
html body #mywishlist-link,
html body .list-inline.wishlist-head,
html body .wishlist-head {
    display: inline-flex !important;
    align-items: center !important;
}
html body #mywishlist-link {
    display: inline-flex !important;
}

/* ==========================================================================
   v1.0.42 — Login / registration CTAs as full-width stacked teal pills
   --------------------------------------------------------------------------
   Theme renders "Als Privatkunde registrieren" + "Als Unternehmen
   registrieren" as <a class="btn btn-primary"> inside the login form's
   "Hast du noch kein Konto?" section. They benefit from being a clean
   pair of equally-sized CTAs.
   ========================================================================== */
.page-authentication .login-form a.btn,
.page-authentication a.btn[href*="registrierung"],
.page-authentication a.btn[href*="register"],
.page-authentication a.btn[href*="?create_account"],
section.login-form a.btn.btn-primary,
.no-account a.btn,
.no-account-section a.btn {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    margin: 0 0 8px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 6px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   v1.0.40 — Hamburger removal + breadcrumb pills (subcategories style)
   ========================================================================== */

/* (1) Theme's mobile hamburger button (.navbar-header > .btn-navbar.navbar-toggle
       with three .bar divs). User has the modules he needs already — no extra
       burger nav. Hide everywhere. */
.btn-navbar.navbar-toggle,
button.btn-navbar.navbar-toggle,
.navbar-header .btn-navbar,
.navbar-header .navbar-toggle,
.navbar-header > button[class*="navbar-toggle"] {
    display: none !important;
}

/* (2) Breadcrumb on product page styled as pills in the trikon-mf-pill style
       from the trikonsubcategories module. Light card on light background:
       white pill, 1px grey border, teal hover. */
.page-product nav.breadcrumb,
.page-product .breadcrumb {
    padding: 12px 0 18px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 12px !important;
}
.page-product nav.breadcrumb ol,
.page-product .breadcrumb ol,
.page-product .breadcrumb ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.page-product nav.breadcrumb li,
.page-product .breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Theme renders "/" separators between li — hide them, the gap does the work. */
.page-product nav.breadcrumb li::after,
.page-product nav.breadcrumb li::before,
.page-product .breadcrumb li::after,
.page-product .breadcrumb li::before,
.page-product .breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
    display: none !important;
}
.page-product nav.breadcrumb a,
.page-product .breadcrumb a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 14px !important;
    background: #ffffff !important;
    color: #4a5359 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    border: 1px solid #dde0e2 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.page-product nav.breadcrumb a:hover,
.page-product nav.breadcrumb a:focus,
.page-product .breadcrumb a:hover,
.page-product .breadcrumb a:focus {
    background: rgba(4, 105, 126, 0.06) !important;
    color: #04697e !important;
    border-color: #04697e !important;
    text-decoration: none !important;
}
/* Current item (the product name itself, last <li> often a link too) —
   solid teal pill. NOTE: do NOT set max-width:100% with overflow:hidden /
   text-overflow:ellipsis here. The pill row uses flex-wrap:nowrap +
   overflow-x:auto so each pill should size to its own content; constraining
   the last one to 100% of the parent collapsed it to a tiny 30px ellipsis. */
.page-product nav.breadcrumb li:last-child,
.page-product .breadcrumb li.active,
.page-product .breadcrumb-item.active {
    padding: 6px 14px !important;
    background: #04697e !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid #04697e !important;
    border-radius: 20px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.page-product nav.breadcrumb li:last-child a {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

/* On phone allow the pill row to scroll horizontally so long category paths
   don't wrap into 3 lines — preserves the "site links" feel. */
@media (max-width: 767px) {
    .page-product nav.breadcrumb ol,
    .page-product .breadcrumb ol,
    .page-product .breadcrumb ul {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    .page-product nav.breadcrumb ol::-webkit-scrollbar,
    .page-product .breadcrumb ol::-webkit-scrollbar {
        display: none !important;
    }
    .page-product nav.breadcrumb a,
    .page-product .breadcrumb a,
    .page-product .breadcrumb li:last-child {
        font-size: 12px !important;
        padding: 5px 11px !important;
    }
}


/* ==========================================================================
   v1.0.47 — Product card listing polish
   --------------------------------------------------------------------------
   (1) Product title size in list/grid view bumped from 17px/500 to 18px/600.
   (2) Compare icon button (4th action in the row) was 15×18 plain link
       while sibling cart/wishlist/quickview buttons are 35×44 grey pills
       with 4px radius. Force the compare into the same shape.
   ========================================================================== */

/* (1) Product title in cards — bigger + bolder for scannability. */
.product-miniature h3.h3.product-title,
.product-miniature .product-title,
.product-miniature .product-title a,
.js-product-miniature h3.product-title,
.js-product-miniature .product-title,
.js-product-miniature .product-title a {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #14222a !important;
    letter-spacing: -0.005em !important;
}
@media (max-width: 767px) {
    .product-miniature h3.h3.product-title,
    .product-miniature .product-title,
    .product-miniature .product-title a {
        font-size: 17px !important;
    }
}

/* (2) Compare icon button — match sibling cart/wishlist/quickview shape. */
.product-miniature .compare.d-inline-block,
.js-product-miniature .compare.d-inline-block {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f5f5f5 !important;
    border-radius: 4px !important;
    border: 0 !important;
    vertical-align: top !important;
}
.product-miniature .compare.d-inline-block a.add_to_compare.btn-product,
.js-product-miniature .compare.d-inline-block a.add_to_compare.btn-product {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #14222a !important;
}
.product-miniature .compare.d-inline-block a.add_to_compare.btn-product .compare-button-content,
.js-product-miniature .compare.d-inline-block a.add_to_compare.btn-product .compare-button-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Hide the inner "Vergleichen" text span — list view shows icon only. */
.product-miniature .compare.d-inline-block .btn.btn-outline-primary,
.js-product-miniature .compare.d-inline-block .btn.btn-outline-primary {
    display: none !important;
}
.product-miniature .compare.d-inline-block svg,
.js-product-miniature .compare.d-inline-block svg {
    width: 16px !important;
    height: 16px !important;
    color: #14222a !important;
    fill: currentColor !important;
}
.product-miniature .compare.d-inline-block:hover,
.js-product-miniature .compare.d-inline-block:hover {
    background: #e8e8e8 !important;
}

/* ==========================================================================
   v1.0.48 — Product card hierarchy: title <-> price visual separation
   --------------------------------------------------------------------------
   On phones the title (17px/600 dark) sat 4px above the price (16px/700
   dark) — visually a single block. Add proper breathing room and make the
   price the dominant size element so the eye lands on price first.
   ========================================================================== */
.product-miniature .product-title,
.product-miniature h3.h3.product-title,
.js-product-miniature .product-title {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
.product-miniature .product-price-and-shipping,
.product-miniature .price,
.js-product-miniature .product-price-and-shipping,
.js-product-miniature .price {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #14222a !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.01em !important;
}
.product-miniature .regular-price,
.product-miniature del,
.product-miniature .product-price-and-shipping .regular-price,
.js-product-miniature .regular-price,
.js-product-miniature del {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #8a8a8a !important;
    text-decoration: line-through !important;
    margin-left: 8px !important;
    letter-spacing: 0 !important;
}
.product-miniature .discount,
.product-miniature .discount-percentage,
.js-product-miniature .discount,
.js-product-miniature .discount-percentage {
    font-size: 12px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}
@media (max-width: 767px) {
    .product-miniature .product-price-and-shipping,
    .product-miniature .price,
    .js-product-miniature .product-price-and-shipping,
    .js-product-miniature .price {
        font-size: 20px !important;
    }
}

/* Tighten the overall card vertical rhythm so the title/price hierarchy
   reads as one unit, separated from the next (description / availability /
   icons). */
.product-miniature .product-description,
.js-product-miniature .product-description {
    margin-top: 8px !important;
    color: #4a5359 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* v1.0.65 — line-clamp REVERTED: cut text mid-word in side panels
   without ellipsis showing. Let descriptions flow naturally with
   normalized typography (color/size/weight/line-height only). */
.product-miniature .descrip,
.product-miniature .product-description-short,
.product-miniature [id^="product-description-short-"],
.js-product-miniature .descrip,
.js-product-miniature [id^="product-description-short-"] {
    color: #4a5359 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   v1.0.51 — Compare page + Tech-Rider page styling
   --------------------------------------------------------------------------
   (1) Compare page (wbcompare module) — brand teal headings, clean rows,
       new Pronesis Custom Details row styling.
   (2) Tech-Rider page (blockwishlist) — brand teal heading, comfortable
       form spacing.
   (3) Red → teal conversion: any text-danger / red background tied to the
       compare/wishlist flow becomes brand teal so the UI stays on-brand.
   ========================================================================== */

/* ---- COMPARE PAGE ---- */
.page-content .heading-home.page-heading,
.page-content h1.heading-home.page-heading.pro-name {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #14222a !important;
    letter-spacing: -0.01em !important;
    margin: 8px 0 24px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 2px solid #04697e !important;
}

/* Compare table — modern card-style rows */
.products_block.table-responsive table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-top: 8px !important;
}
.products_block.table-responsive table tr {
    border-bottom: 1px solid #eef0f1 !important;
}
.products_block.table-responsive table td {
    padding: 16px 14px !important;
    vertical-align: top !important;
    color: #14222a !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef0f1 !important;
}
.products_block.table-responsive table td:first-child {
    font-weight: 600 !important;
    color: #04697e !important;
    background: #f8fafb !important;
    width: 200px !important;
    border-right: 1px solid #eef0f1 !important;
}

/* Product card in compare table */
.products_block.table-responsive .product-name,
.products_block.table-responsive a {
    color: #14222a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.products_block.table-responsive a:hover {
    color: #04697e !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* "× Remove" close button on each product column */
.products_block.table-responsive .remove-product,
.products_block.table-responsive [class*="remove"] {
    color: #04697e !important;
    opacity: 0.7 !important;
    transition: opacity 150ms ease, color 150ms ease !important;
}
.products_block.table-responsive .remove-product:hover,
.products_block.table-responsive [class*="remove"]:hover {
    color: #035566 !important;
    opacity: 1 !important;
}

/* Footer-link row under the compare table */
.page-content section ul.footer_link {
    list-style: none !important;
    padding: 16px 0 0 0 !important;
    margin: 0 !important;
}
.page-content section ul.footer_link a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #04697e !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.page-content section ul.footer_link a:hover {
    color: #035566 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* "Weiter Einkaufen" back link */
.page-content section ul.footer_link a::before {
    content: '‹' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* New Pronesis Custom Details row */
.trikon-pronesis-row td {
    padding: 20px 14px !important;
}
.trikon-pronesis-label {
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #04697e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 13px !important;
    vertical-align: top !important;
}
.trikon-pronesis-cell {
    color: #14222a !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.trikon-pronesis-cell h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #04697e !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.trikon-pronesis-cell h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #14222a !important;
    margin: 12px 0 4px 0 !important;
}
.trikon-pronesis-cell ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.trikon-pronesis-cell ul li {
    position: relative !important;
    padding: 4px 0 4px 16px !important;
    color: #14222a !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}
.trikon-pronesis-cell ul li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 6px !important;
    height: 6px !important;
    background: #04697e !important;
    border-radius: 50% !important;
}
.trikon-pronesis-cell p {
    margin: 0 0 8px 0 !important;
}
.trikon-pronesis-loading,
.trikon-pronesis-empty {
    color: #6c7479 !important;
    font-style: italic !important;
    font-size: 13px !important;
}

/* ---- TECH-RIDER PAGE (blockwishlist) ---- */
.page-customer-account .page-content h1,
body.page-mywishlist h1,
.wishlistLinkTop ~ * h1,
section.page-wishlist h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #14222a !important;
    letter-spacing: -0.01em !important;
    margin: 8px 0 20px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 2px solid #04697e !important;
}

.page-customer-account form input[type="text"],
.page-customer-account form input[type="email"] {
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    background: #ffffff !important;
}
.page-customer-account form input[type="text"]:focus,
.page-customer-account form input[type="email"]:focus {
    border-color: #04697e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.12) !important;
}

/* "Neue Wunschliste" form label and SPEICHERN button */
.page-customer-account .form-control-label,
.page-customer-account label[for="name"] {
    font-weight: 600 !important;
    color: #14222a !important;
    margin-right: 12px !important;
}
.page-customer-account button[type="submit"].btn,
.page-customer-account .btn.btn-primary {
    background: #04697e !important;
    border-color: #04697e !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    transition: background-color 150ms ease, border-color 150ms ease !important;
}
.page-customer-account button[type="submit"].btn:hover,
.page-customer-account .btn.btn-primary:hover {
    background: #035566 !important;
    border-color: #035566 !important;
}

/* ZURÜCK ZUM KONTO secondary link */
.page-customer-account a.btn.btn-secondary,
.page-customer-account a[href*="my-account"].btn {
    background: transparent !important;
    color: #04697e !important;
    border: 1px solid #04697e !important;
    font-weight: 600 !important;
}
.page-customer-account a.btn.btn-secondary:hover,
.page-customer-account a[href*="my-account"].btn:hover {
    background: rgba(4, 105, 126, 0.08) !important;
    color: #04697e !important;
}

/* ---- RED → TEAL CONVERSION (compare/wishlist flow only) ---- */
/* Theme-default red highlight on active compare button — convert to teal. */
#compare-link .bt_compare.active,
.bt_compare.active,
.add_to_compare.active,
.add_to_compare[data-product-active="1"],
.compare-form .active {
    color: #04697e !important;
    background: rgba(4, 105, 126, 0.08) !important;
    border-color: #04697e !important;
}

/* Popup notice text — if rendered with red color, switch to neutral dark
   for body text and teal for the action link. */
.PopupCompare h3,
.PopupCompareInner h3,
.noty_text_body h3 {
    color: #14222a !important;
    margin: 0 0 8px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
.PopupCompare p,
.PopupCompareInner p,
.noty_text_body p {
    color: #4a5359 !important;
    margin: 0 0 12px 0 !important;
}
.PopupCompare a,
.PopupCompareInner a,
.noty_text_body a {
    color: #04697e !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.PopupCompare a:hover,
.PopupCompareInner a:hover {
    color: #035566 !important;
}

/* Wishlist alert popup */
.whishlist-alert,
.whishlist-am,
.fancybox-inner {
    border-radius: 8px !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e8edef !important;
    box-shadow: 0 12px 32px rgba(20, 34, 42, 0.15) !important;
}
.whishlist-alert .fancybox-error,
.whishlist-am .fancybox-error,
.fancybox-error {
    color: #14222a !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* MOBILE — stack compare table cells vertically (1 col per row) */
@media (max-width: 767px) {
    .products_block.table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .products_block.table-responsive table {
        min-width: 540px !important;
    }
    .products_block.table-responsive table td {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
    .products_block.table-responsive table td:first-child {
        width: 130px !important;
        font-size: 12px !important;
    }
    .trikon-pronesis-cell ul li {
        font-size: 12.5px !important;
    }
    .trikon-pronesis-cell h3 {
        font-size: 13px !important;
    }
    .page-content h1.heading-home.page-heading {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   v1.0.52 — Equal spacing around the short description on product detail
   --------------------------------------------------------------------------
   The .prodes text sits between two horizontal rules:
     - HR above (sibling of .product-information, margin-bottom 16px)
       → 16px gap to .prodes top.
     - HR below (first child of .product-actions, with its own margin-top
       16px). PLUS .product-actions itself has margin-top 16px → 32px gap
       to .prodes bottom.
   Drop the .product-actions margin-top so the HR below ends up exactly 16px
   from the text, symmetric with the HR above.
   ========================================================================== */
.product-information .product-actions {
    margin-top: 0 !important;
}
.product-information .prodes + .product-actions > hr:first-child {
    margin-top: 16px !important;
}

/* ==========================================================================
   v1.0.59 — Out-of-stock product detail: full-width everything below price
   --------------------------------------------------------------------------
   PS classic theme + mailalerts module ships with several narrow-width
   containers that only show when the product is unavailable. Together
   they compress the right column from below the price downward to a
   ~480px-wide stack while the in-stock variant uses ~700px.

   Scope uses :has() so the broad rules ONLY fire when the page actually
   has mailalerts/availability widgets (= out-of-stock). In-stock layout
   is untouched.

   :has() supported by all evergreen browsers since Safari 15.4 / Firefox
   121 / Chrome 105 (Jan 2024+). PS theme is desktop-first, so OK.
   ========================================================================== */

/* Always: the product-information column itself should fill its grid cell */
.page-product .product-information {
    width: 100% !important;
    max-width: 100% !important;
}

/* Out-of-stock variant: every direct child of product-information +
   everything inside the mailalerts/availability widget expands to full
   width. Excludes nothing because none of these elements ever appear
   in the in-stock variant (the :has() guard ensures we're only firing
   on out-of-stock pages). */
.page-product:has(.product-mailalerts) .product-information > *,
.page-product:has(.js-mailalert-form) .product-information > *,
.page-product:has(#product_availability_form) .product-information > *,
.page-product:has(.product-availability) .product-information > * {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* The mailalerts widget + email input + submit button — always full width
   regardless of :has() support */
.page-product .product-mailalerts,
.page-product .ps_emailalerts_form,
.page-product .js-mailalert-form,
.page-product #product_availability_form,
.page-product .product-availability {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.page-product .product-mailalerts input[type="email"],
.page-product .product-mailalerts input[type="text"],
.page-product .product-mailalerts button,
.page-product #product_availability_form input,
.page-product #product_availability_form button,
.page-product .js-mailalert-form input,
.page-product .js-mailalert-form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ==========================================================================
   v1.0.53 — Compare H1 box removal + full Tech-Rider page styling
   --------------------------------------------------------------------------
   Compare H1 had a thin top + bottom line forming a box. Theme uses
   .page-content.card.card-block as the wrapping card. On compare we want
   the H1 with only the teal bottom stroke — no surrounding box, no top
   line. Same for the wishlist page.
   ========================================================================== */

/* ---- COMPARE / WISHLIST: kill the card-block box outline ---- */
section:has(> h1.heading-home.page-heading.pro-name),
section:has(> #blockwishlist),
section:has(.products_block.table-responsive),
section:has(.wishlist) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.page-content section h1.heading-home.page-heading.pro-name {
    border-top: 0 !important;
    background: transparent !important;
}

/* ---- TECH-RIDER (wishlist) view page — full modernisation ---- */

/* Page title H1 — Le mie liste dei desideri / Meine Wunschlisten → Mein Tech-Rider */
.page-customer-account h1,
section h1[class*="page-heading"] {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #14222a !important;
    letter-spacing: -0.01em !important;
    margin: 8px 0 24px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 2px solid #04697e !important;
}

/* "Neue Wunschliste / Nuova lista" sub-heading
   v1.0.109: NARROWED — was matching ALL <h4> on .page-customer-account
   pages including product-miniature card descriptions in sidebar widgets
   (Onsale / On Sale columns), which rendered uppercase teal bold.
   Now scoped to the wishlist/account-content area only. */
.page-customer-account #content h4,
.page-customer-account .blockwishlist h4,
.page-customer-account .wishlist-container h4,
body[class*="wishlist"] #content h4,
.page-content > section > h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #04697e !important;
    letter-spacing: 0.02em !important;
    margin: 24px 0 12px 0 !important;
    text-transform: uppercase !important;
}

/* v1.0.109: Explicit guard — product miniature card h4 (= short description)
   must inherit the muted .descrip styling, never be teal+uppercase+bold. */
.page-customer-account .product-miniature h4,
.page-customer-account .js-product-miniature h4,
.page-customer-account .descrip h4,
.page-customer-account .product-description-short h4,
.page-customer-account [class*="product-description"] h4,
.page-customer-account [id^="product-description-short-"] h4,
body[class*="wishlist"] .product-miniature h4,
body[class*="wishlist"] .descrip h4,
.product-miniature .descrip h4,
.js-product-miniature .descrip h4,
.product-miniature h4,
.js-product-miniature h4 {
    color: #4a5359 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Inline form row — Name input + SALVA button */
.page-customer-account .form-inline,
.page-customer-account form .form-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 0 28px 0 !important;
    padding: 16px !important;
    background: #f8fafb !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 8px !important;
}
.page-customer-account .form-inline label,
.page-customer-account form .form-group label {
    font-weight: 600 !important;
    color: #14222a !important;
    margin: 0 !important;
    min-width: 60px !important;
}
.page-customer-account input[type="text"]:not(.search-input),
.page-customer-account input[name="name"] {
    flex: 1 1 220px !important;
    min-width: 220px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 15px !important;
    color: #14222a !important;
}

/* Wishlist list table — modern card-style */
body[class*="wishlist"] table,
.page-customer-account table {
    width: 100% !important;
    margin: 0 0 28px 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
body[class*="wishlist"] table thead th,
.page-customer-account table thead th {
    padding: 14px 16px !important;
    background: #04697e !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    border: 0 !important;
}
body[class*="wishlist"] table tbody td,
.page-customer-account table tbody td {
    padding: 14px 16px !important;
    border-top: 1px solid #eef0f1 !important;
    background: #ffffff !important;
    color: #14222a !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}
body[class*="wishlist"] table tbody tr:hover td,
.page-customer-account table tbody tr:hover td {
    background: #f8fafb !important;
}

/* "Vedi" link to view list */
body[class*="wishlist"] table a,
.page-customer-account table a {
    color: #04697e !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
body[class*="wishlist"] table a:hover {
    color: #035566 !important;
    text-decoration: underline !important;
}

/* Default checkbox + Cancella icon */
body[class*="wishlist"] table input[type="checkbox"] {
    accent-color: #04697e !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
}
body[class*="wishlist"] table .cancel,
body[class*="wishlist"] table a[href*="delete"],
body[class*="wishlist"] table img[src*="delete"],
body[class*="wishlist"] table img[src*="cancel"] {
    color: #b3261e !important;
    opacity: 0.8 !important;
    transition: opacity 150ms ease !important;
}
body[class*="wishlist"] table .cancel:hover {
    opacity: 1 !important;
}

/* "Hide products" toggle row */
body[class*="wishlist"] p.hide-products,
body[class*="wishlist"] .hide-products,
.page-customer-account .hide-products {
    margin: 16px 0 !important;
    font-size: 14px !important;
    color: #4a5359 !important;
}

/* Permalink display */
body[class*="wishlist"] .wlp-block,
body[class*="wishlist"] p[id*="permalink"],
body[class*="wishlist"] .permalink-block {
    margin: 16px 0 28px 0 !important;
    padding: 14px 16px !important;
    background: #f8fafb !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 8px !important;
    color: #4a5359 !important;
    font-size: 14px !important;
}
body[class*="wishlist"] .wlp-block input,
body[class*="wishlist"] input[id*="permalink"] {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 10px 12px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
    font-size: 13px !important;
    color: #04697e !important;
}

/* Wishlist product cards (Tech-Rider items) */
body[class*="wishlist"] .wishlist-product,
body[class*="wishlist"] .wlp-product,
body[class*="wishlist"] [data-id-product] {
    background: #ffffff !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
body[class*="wishlist"] .wishlist-product:hover,
body[class*="wishlist"] .wlp-product:hover {
    border-color: #04697e !important;
    box-shadow: 0 4px 16px rgba(4, 105, 126, 0.08) !important;
}
body[class*="wishlist"] .wishlist-product img,
body[class*="wishlist"] .wlp-product img {
    border-radius: 6px !important;
    background: #fafbfc !important;
}

/* Product item name on wishlist */
body[class*="wishlist"] .wlp-product-name,
body[class*="wishlist"] .wishlist-product .product-name,
body[class*="wishlist"] p:has(> a[href*="/de/"]) {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #14222a !important;
    margin: 8px 0 12px 0 !important;
}

/* Quantità + Priorità form rows inside product card */
body[class*="wishlist"] .wlp-product label,
body[class*="wishlist"] .wishlist-product label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4a5359 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 8px 0 4px 0 !important;
}
body[class*="wishlist"] .wlp-product input[type="number"],
body[class*="wishlist"] .wlp-product input[type="text"],
body[class*="wishlist"] .wlp-product select,
body[class*="wishlist"] .wishlist-product input[type="number"],
body[class*="wishlist"] .wishlist-product select {
    width: 100% !important;
    max-width: 160px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: #14222a !important;
}
body[class*="wishlist"] .wlp-product input:focus,
body[class*="wishlist"] .wlp-product select:focus {
    border-color: #04697e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.12) !important;
}

/* SALVA per-product button — subtle teal */
body[class*="wishlist"] .wlp-product button[type="submit"],
body[class*="wishlist"] .wishlist-product button[type="submit"],
body[class*="wishlist"] .wlp-product .btn-primary {
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: #04697e !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
body[class*="wishlist"] .wlp-product button[type="submit"]:hover {
    background: #035566 !important;
}

/* × Remove icon on each product card */
body[class*="wishlist"] .wlp-product .remove,
body[class*="wishlist"] .wishlist-product .remove,
body[class*="wishlist"] a.remove-wishlist-product {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #4a5359 !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}
body[class*="wishlist"] .wlp-product .remove:hover {
    background: rgba(179, 38, 30, 0.08) !important;
    color: #b3261e !important;
}

/* TORNA ALL'ACCOUNT / ZURÜCK ZUM KONTO bottom button */
body[class*="wishlist"] a.btn-secondary,
body[class*="wishlist"] a[href*="my-account"].btn,
.page-customer-account a.btn[href*="my-account"] {
    margin-top: 24px !important;
    padding: 10px 20px !important;
    background: transparent !important;
    color: #04697e !important;
    border: 1px solid #04697e !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body[class*="wishlist"] a.btn-secondary:hover {
    background: rgba(4, 105, 126, 0.08) !important;
    color: #04697e !important;
}

/* Mobile: stack form + table responsively */
@media (max-width: 767px) {
    .page-customer-account .form-inline,
    .page-customer-account form .form-group {
        padding: 12px !important;
    }
    .page-customer-account input[name="name"] {
        flex-basis: 100% !important;
    }
    body[class*="wishlist"] table {
        font-size: 12px !important;
    }
    body[class*="wishlist"] table thead th,
    body[class*="wishlist"] table tbody td {
        padding: 10px 8px !important;
    }
    body[class*="wishlist"] .wlp-product {
        padding: 14px !important;
    }
}

/* ==========================================================================
   v1.0.54 — Tech-Rider view page modernisation (real DOM selectors)
   --------------------------------------------------------------------------
   The blockwishlist module renders into:
     #mywishlist > #form_wishlist + #block-history + #block-order-detail
                 + .footer_links.wishlist_footer
   plus tables/forms inside each block. The earlier v1.0.53 styling used
   guessed selectors (.wlp-product etc.) that didn't match. Target the
   real PS-blockwishlist markup here.
   ========================================================================== */

#mywishlist {
    background: transparent !important;
    padding: 0 !important;
}

/* Neue Wunschliste form — already in a #form_wishlist <form> */
#mywishlist #form_wishlist,
#mywishlist form.std.box,
#mywishlist form[id="form_wishlist"] {
    margin: 0 0 28px 0 !important;
    padding: 18px 20px !important;
    background: #f8fafb !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 10px !important;
}
#mywishlist #form_wishlist .form-group,
#mywishlist form .form-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#mywishlist #form_wishlist label,
#mywishlist form label {
    font-weight: 600 !important;
    color: #14222a !important;
    margin: 0 !important;
    min-width: 60px !important;
}
#mywishlist #form_wishlist input[type="text"],
#mywishlist input[name="name"] {
    flex: 1 1 240px !important;
    min-width: 200px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 15px !important;
    color: #14222a !important;
}
#mywishlist #form_wishlist input:focus {
    border-color: #04697e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.12) !important;
}
#mywishlist #form_wishlist button[type="submit"],
#mywishlist button.btn.btn-primary[type="submit"] {
    height: 42px !important;
    padding: 0 22px !important;
    background: #04697e !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 150ms ease !important;
}
#mywishlist #form_wishlist button[type="submit"]:hover {
    background: #035566 !important;
}

/* Wishlist list table (#block-history) */
#mywishlist #block-history {
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#mywishlist #block-history table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
#mywishlist #block-history table thead th {
    padding: 14px 16px !important;
    background: #04697e !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-align: left !important;
    border: 0 !important;
    white-space: nowrap !important;
}
#mywishlist #block-history table tbody td {
    padding: 14px 16px !important;
    background: #ffffff !important;
    color: #14222a !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-top: 1px solid #eef0f1 !important;
}
#mywishlist #block-history table tbody tr:hover td {
    background: #f8fafb !important;
}
#mywishlist #block-history table input[type="text"] {
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    color: #14222a !important;
    transition: border-color 150ms ease, background-color 150ms ease !important;
}
#mywishlist #block-history table input[type="text"]:focus,
#mywishlist #block-history table input[type="text"]:hover {
    background: #ffffff !important;
    border-color: #04697e !important;
    outline: none !important;
}
#mywishlist #block-history table a[href*="view"],
#mywishlist #block-history table a {
    color: #04697e !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#mywishlist #block-history table a:hover {
    color: #035566 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
#mywishlist #block-history table input[type="checkbox"] {
    accent-color: #04697e !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}
/* Delete button — small icon, danger-red on hover only */
#mywishlist #block-history table a.delete,
#mywishlist #block-history a[onclick*="WishlistDelete"],
#mywishlist #block-history button[onclick*="Delete"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    color: #b3261e !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    transition: background-color 150ms ease !important;
}
#mywishlist #block-history table a.delete:hover {
    background: rgba(179, 38, 30, 0.08) !important;
}

/* Product detail panel (#block-order-detail) — shown when a list is opened */
#mywishlist #block-order-detail {
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* "Hide products" toggle row */
#mywishlist #block-order-detail .hide-products,
#mywishlist .hide-products {
    margin: 0 0 16px 0 !important;
    padding: 12px 16px !important;
    background: #f8fafb !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4a5359 !important;
    cursor: pointer !important;
}

/* Permalink block */
#mywishlist .permalink,
#mywishlist p:has(input[id*="permalink"]),
#mywishlist [id*="permalink-block"] {
    margin: 0 0 24px 0 !important;
    padding: 14px 16px !important;
    background: #f8fafb !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #4a5359 !important;
}
#mywishlist input[id*="permalink"],
#mywishlist input.permalink {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 10px 12px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
    font-size: 13px !important;
    color: #04697e !important;
}

/* Product items inside the opened list — they live as direct divs of
   #block-order-detail after the permalink+toggle headers. */
#mywishlist #block-order-detail > div,
#mywishlist .wishlist-products-list > div,
#mywishlist [class*="wishlist-product-"] {
    position: relative !important;
}
/* Each product gets a card wrapper — use a flexible structural rule */
#mywishlist form[id*="form_wishlist_product"],
#mywishlist .wishlist-product,
#mywishlist .wlp-product {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(50% - 12px) !important;
    margin: 0 12px 16px 0 !important;
    padding: 18px !important;
    background: #ffffff !important;
    border: 1px solid #eef0f1 !important;
    border-radius: 10px !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
#mywishlist form[id*="form_wishlist_product"]:hover,
#mywishlist .wishlist-product:hover {
    border-color: #04697e !important;
    box-shadow: 0 6px 20px rgba(4, 105, 126, 0.08) !important;
}
#mywishlist form[id*="form_wishlist_product"] img,
#mywishlist .wishlist-product img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    background: #fafbfc !important;
    margin-bottom: 12px !important;
}
#mywishlist form[id*="form_wishlist_product"] a,
#mywishlist .wishlist-product a {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #14222a !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}
#mywishlist form[id*="form_wishlist_product"] a:hover {
    color: #04697e !important;
}
#mywishlist form[id*="form_wishlist_product"] label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #4a5359 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 10px 0 4px 0 !important;
    min-width: 0 !important;
}
#mywishlist form[id*="form_wishlist_product"] input[type="number"],
#mywishlist form[id*="form_wishlist_product"] input[type="text"],
#mywishlist form[id*="form_wishlist_product"] select {
    width: 100% !important;
    max-width: 160px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    color: #14222a !important;
}
#mywishlist form[id*="form_wishlist_product"] input:focus,
#mywishlist form[id*="form_wishlist_product"] select:focus {
    border-color: #04697e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.12) !important;
}
#mywishlist form[id*="form_wishlist_product"] button[type="submit"] {
    margin-top: 12px !important;
    padding: 8px 18px !important;
    background: #04697e !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
#mywishlist form[id*="form_wishlist_product"] button[type="submit"]:hover {
    background: #035566 !important;
}
/* "×" remove button — top-right of each card */
#mywishlist form[id*="form_wishlist_product"] a[onclick*="WishlistRemoveProduct"],
#mywishlist form[id*="form_wishlist_product"] .remove,
#mywishlist a.cancel {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #4a5359 !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}
#mywishlist form[id*="form_wishlist_product"] a[onclick*="WishlistRemoveProduct"]:hover {
    background: rgba(179, 38, 30, 0.08) !important;
    color: #b3261e !important;
}

/* Footer block — TORNA ALL'ACCOUNT / ZURÜCK ZUM KONTO / BACK TO YOUR ACCOUNT */
#mywishlist .footer_links.wishlist_footer,
#mywishlist .wishlist_footer {
    margin: 28px 0 0 0 !important;
    padding: 16px 0 !important;
    text-align: right !important;
    border-top: 1px solid #eef0f1 !important;
}
#mywishlist .footer_links a,
#mywishlist .wishlist_footer a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    background: transparent !important;
    color: #04697e !important;
    border: 1px solid #04697e !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: background-color 150ms ease !important;
}
#mywishlist .footer_links a:hover,
#mywishlist .wishlist_footer a:hover {
    background: rgba(4, 105, 126, 0.08) !important;
    color: #04697e !important;
}

/* Mobile: stack product cards 1-column */
@media (max-width: 767px) {
    #mywishlist form[id*="form_wishlist_product"],
    #mywishlist .wishlist-product {
        width: 100% !important;
        margin-right: 0 !important;
    }
    #mywishlist #block-history table {
        font-size: 12px !important;
    }
    #mywishlist #block-history table thead th,
    #mywishlist #block-history table tbody td {
        padding: 10px 8px !important;
    }
}

/* ==========================================================================
   Update Pronesis row label class to "Tech-Specs" for clarity (semantic
   class name only — kept legacy class working for backwards-compat).
   ========================================================================== */
.trikon-pronesis-label {
    /* All previous styles still apply (already defined upstream). The
       label TEXT itself is now "Tech-Specs" (set by compare-page.js). */
}

/* ==========================================================================
   v1.0.56 — Image viewer: kill elevateZoom magnifier, add fullscreen lightbox
   ========================================================================== */

/* (1) Hide every overlay element elevateZoom injects. Keep them in the DOM
   (the plugin still references them internally) but make them invisible
   and click-through so they never appear and never block our click. */
.zoomContainer,
.zoomLens,
.zoomWindow,
.zoomWindowContainer,
.zoomPad,
.zoomTracker,
.zoomMask,
.zoomWrapper,
div[class^="zoom"][class*="Container"],
div[class^="zoom"][class*="Window"] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Cover wrapper indicates clickability. */
.product-cover {
    cursor: zoom-in !important;
}
.product-cover:focus-visible {
    outline: 3px solid #04697e !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
}

/* (2) Fullscreen lightbox overlay */
.trikon-lightbox-open {
    overflow: hidden !important;
}
.trikon-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(8, 14, 18, 0.96) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    animation: trikon-lightbox-in 200ms ease-out !important;
}
@keyframes trikon-lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.trikon-lightbox-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    touch-action: none !important;
}
.trikon-lightbox-img {
    max-width: 94vw !important;
    max-height: 92vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    cursor: zoom-in !important;
    transform-origin: center center !important;
    transition: transform 180ms ease-out !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
}
/* When actively dragging, kill transition so the image follows the cursor 1:1 */
.trikon-lightbox-img:active {
    transition: none !important;
}

/* Close button — circle, top-right */
.trikon-lightbox-close {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 150ms ease, transform 150ms ease !important;
    z-index: 1 !important;
}
.trikon-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    transform: rotate(90deg) !important;
}
.trikon-lightbox-close:focus-visible {
    outline: 3px solid #04697e !important;
    outline-offset: 2px !important;
}

/* Mobile tweaks */
@media (max-width: 767px) {
    .trikon-lightbox-img {
        max-width: 98vw !important;
        max-height: 86vh !important;
    }
    .trikon-lightbox-close {
        top: 12px !important;
        right: 12px !important;
    }
}

/* ==========================================================================
   v1.0.61 — STAGE AUDIT FIXES (2026-05-28)
   --------------------------------------------------------------------------
   Compiled from chrome-audit findings on stage.trikon.it. Each block fixes
   one specific issue observed in browser. Kept here (not split into module
   files) because they cross theme/multi-module boundaries.
   ========================================================================== */

/* --- 1. FOCUS-VISIBLE GLOBAL OVERRIDE -----------------------------------
   Audit found 50/50 sampled buttons + links have outline:none from theme.
   WCAG 2.4.7 / EAA-blocker. We restore a visible focus ring globally,
   high-specificity, only on :focus-visible (keyboard) — not on :focus
   (mouse). The body:not(.no-focus) wrapper ensures specificity beats
   the theme's `button:focus { outline: 0 }` reset.
   ------------------------------------------------------------------------ */
body :focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
}
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible,
body [role="button"]:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(4, 105, 126, 0.18) !important;
}
/* Danger-context (cart remove, OOS) gets red focus */
body .remove-from-cart:focus-visible,
body [data-link-action="delete-from-cart"]:focus-visible,
body .trikon-action-btn--danger:focus-visible {
    outline: 2px solid #b3261e !important;
    box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.18) !important;
}

/* --- 2. PRODUCT MINIATURE OOS — KEEP GRID ALIGNMENT ---------------------
   Audit screenshot: OOS card had "Zurzeit nicht verfügbar" + gratis-versand
   tag wrapping to a second line, breaking grid height vs in-stock cards.
   Force the availability label and freeshipping tag to share one row when
   the layout has room; otherwise stack consistently with in-stock cards.
   ------------------------------------------------------------------------ */
.product-miniature .product-availability,
.js-product-miniature .product-availability {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}
/* Availability + freeshipping inline-pair wrapper — keeps both on same baseline */
.product-miniature .product-availability + .product-freeshipping,
.product-miniature .product-availability + .trikon-fs-injected,
.js-product-miniature .product-availability + .product-freeshipping {
    display: inline-flex !important;
    margin-top: 0 !important;
    margin-left: 8px !important;
    vertical-align: middle;
}
/* When OOS-text is long, wrap full-width but stay top-aligned not centered */
.product-miniature:has(.trikon-a11y-status-unavailable) .product-info-bottom,
.js-product-miniature:has(.trikon-a11y-status-unavailable) .product-info-bottom,
.product-miniature:has(.trikon-a11y-status-unavailable) .product-description-short {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
/* Equal-height cards via flex container — applies regardless of stock state */
.product-miniature,
.js-product-miniature {
    display: flex !important;
    flex-direction: column !important;
}
.product-miniature > *,
.js-product-miniature > * {
    text-align: left !important;
}

/* --- 3. GOOGLE REVIEWS WIDGET — MOBILE STACK ---------------------------
   .Rating__module renders 4 columns side-by-side at all viewports. On
   ≤767px this is illegible. Force vertical stack.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
    .Rating__module .Rating__Container,
    .Rating__module .Rating__Container.section-rating {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .Rating__module .Rating__Container__Child,
    .Rating__module .Rating__Item {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        margin: 0 !important;
    }
}
@media (max-width: 575px) {
    .Rating__module .Rating__Container,
    .Rating__module .Rating__Container.section-rating {
        flex-direction: column !important;
    }
    .Rating__module .Rating__Container__Child,
    .Rating__module .Rating__Item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center;
    }
    .Rating__module .Rating__Item__First {
        border-bottom: 1px solid #e6e9eb;
        padding-bottom: 16px;
        margin-bottom: 8px !important;
    }
}

/* --- 4. CHECKOUT-FLOW POLISH (Workshop Counter aesthetic) --------------
   Step-headers, payment-radio cards, AGB checkbox, order button —
   harmonised with cart-page Workshop-Counter style. Audit found the
   checkout uses bootstrap-default sectioning with too much whitespace +
   inconsistent CTA states.
   ------------------------------------------------------------------------ */

/* Checkout-Step Cards: paper bg, rule border, paper hover */
body#checkout .checkout-step,
body.page-order .checkout-step {
    background: #fafafa !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(20, 34, 42, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body#checkout .checkout-step.-current,
body#checkout .checkout-step.js-current-step {
    border-color: #04697e !important;
    box-shadow: 0 2px 12px rgba(4, 105, 126, 0.12) !important;
}

/* Step-title — H1 inside checkout-step demoted via styling
   (a11y fix: theme still has 4× H1, but visually appear as H2 sub-headers) */
body#checkout .checkout-step .step-title,
body#checkout .checkout-step h1,
body.page-order .checkout-step h1 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #14222a !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    letter-spacing: 0.01em;
}

/* Step number badge */
body#checkout .step-number,
body#checkout .checkout-step .step-title > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    background: rgba(4, 105, 126, 0.08) !important;
    color: #04697e !important;
    border-radius: 14px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* Done-step badge (green check) */
body#checkout .checkout-step.-complete .step-number,
body#checkout .checkout-step .done {
    background: rgba(30, 126, 52, 0.12) !important;
    color: #1e7e34 !important;
}
body#checkout .checkout-step.-complete .step-title > i,
body#checkout .step-title-icon {
    color: #1e7e34 !important;
}

/* Step body padding inside card */
body#checkout .checkout-step .content,
body#checkout .checkout-step .form,
body#checkout .checkout-step .step-content {
    padding: 0 22px 22px !important;
}

/* "bearbeiten" link in completed steps */
body#checkout .checkout-step .step-edit {
    color: #04697e !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
body#checkout .checkout-step .step-edit:hover {
    color: #035566 !important;
    text-decoration: none;
}

/* Address cards in step 2 */
body#checkout .address-item,
body#checkout label.address-selector {
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
body#checkout .address-item:hover,
body#checkout label.address-selector:hover {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.03) !important;
}
body#checkout .address-item:has(input[type=radio]:checked),
body#checkout label.address-selector:has(input[type=radio]:checked) {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.06) !important;
    box-shadow: 0 0 0 1px #04697e inset;
}

/* Carrier + Payment option cards (radio rows) */
body#checkout .delivery-option,
body#checkout .payment-option {
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
body#checkout .delivery-option:hover,
body#checkout .payment-option:hover {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.03) !important;
}
body#checkout .delivery-option:has(input[type=radio]:checked),
body#checkout .payment-option:has(input[type=radio]:checked) {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.06) !important;
}

/* AGB checkbox — solid box with clear hit area */
body#checkout .checkbox-wrap,
body#checkout .condition-label,
body#checkout label[for*="conditions"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    margin: 12px 0 !important;
    cursor: pointer;
    line-height: 1.5;
}
body#checkout .checkbox-wrap input[type=checkbox],
body#checkout label[for*="conditions"] input[type=checkbox] {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Final order button — vivid teal, paper text (not pure-white),
   distinct disabled state. v1.0.66: tighter selector — only target the
   #payment-confirmation primary button + .continue (Weiter), not ALL
   form-submit buttons (was hitting .bt_compare / .bt_tech_rider with
   teal-on-teal = invisible text). */
body#checkout #payment-confirmation button,
body#checkout button.continue,
body#checkout button.continue.btn-primary,
body#checkout .checkout-step button[type=submit].btn-primary,
body#checkout .checkout-step button[type=submit].continue {
    background: #04697e !important;
    color: #fafafa !important;
    border: 1px solid #04697e !important;
    padding: 14px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border-radius: 8px !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}
body#checkout #payment-confirmation button:hover:not(:disabled),
body#checkout button.continue:hover:not(:disabled),
body#checkout .checkout-step button[type=submit].btn-primary:hover:not(:disabled) {
    background: #035566 !important;
    border-color: #035566 !important;
}
body#checkout #payment-confirmation button:disabled,
body#checkout button.continue:disabled,
body#checkout .checkout-step button[type=submit].btn-primary:disabled {
    background: #e6e9eb !important;
    color: #6c7479 !important;
    border-color: #e6e9eb !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Defensive: explicitly reset .bt_compare on checkout context — keep it
   as text-link, not styled button. (Same as Block 11 but with !important
   to win checkout-step polish specificity.) */
body#checkout .bt_compare,
body#checkout .bt_compare .link-item,
body#checkout .bt_tech_rider,
body#checkout button.bt_compare {
    background: transparent !important;
    color: #04697e !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    border-radius: 0 !important;
}

/* Order summary right rail — paper card with subtle border */
body#checkout #js-checkout-summary,
body#checkout .cart-summary {
    background: #fafafa !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    padding: 22px !important;
    position: sticky;
    top: 80px;
}

/* v1.0.75: Always-expanded product list in checkout summary */
body#checkout .cart-summary-products,
body#checkout .cart-summary-products-list,
body#checkout .cart-summary-products .collapse,
body#checkout #cart-summary-product-list {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}
body#checkout .cart-summary-products-toggle,
body#checkout .js-show-details,
body#checkout [data-action="show-summary"] {
    display: none !important;
}

/* Each item in checkout summary — clean grid with image */
body#checkout .cart-summary-products .media,
body#checkout .cart-summary-products .product-info,
body#checkout .cart-summary-products-list > div,
body#checkout .cart-summary-products li {
    display: grid !important;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "img info price";
    gap: 12px;
    padding: 12px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f1f2;
    align-items: center;
    list-style: none;
}
body#checkout .cart-summary-products .media:last-child,
body#checkout .cart-summary-products-list > div:last-child,
body#checkout .cart-summary-products li:last-child {
    border-bottom: none;
}
body#checkout .cart-summary-products img {
    grid-area: img;
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e6e9eb;
    border-radius: 6px;
    padding: 3px;
    box-sizing: border-box;
}
body#checkout .cart-summary-products .media-body,
body#checkout .cart-summary-products .product-name,
body#checkout .cart-summary-products .product-info {
    grid-area: info;
    font-size: 0.85rem;
    color: #14222a;
    line-height: 1.35;
    font-weight: 600;
    min-width: 0;
}
body#checkout .cart-summary-products .product-name + small,
body#checkout .cart-summary-products .product-quantity,
body#checkout .cart-summary-products small {
    display: block;
    color: #6c7479;
    font-weight: 500;
    font-size: 0.78rem;
    margin-top: 2px;
}
body#checkout .cart-summary-products .price,
body#checkout .cart-summary-products .product-price {
    grid-area: price;
    text-align: right;
    font-weight: 700;
    color: #04697e;
    font-size: 0.95rem;
    white-space: nowrap;
    align-self: center;
}

/* v1.0.81: Cart summary lines in checkout — bigger, generous spacing */
body#checkout .cart-summary-line,
body#checkout .cart-summary-subtotals .cart-summary-line {
    padding: 12px 0 !important;
    font-size: 1rem !important;
    color: #14222a;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    border: none !important;
    margin: 0 !important;
}
body#checkout .cart-summary-line + .cart-summary-line {
    border-top: 1px solid #f0f1f2 !important;
}
body#checkout .cart-summary-line .label,
body#checkout .cart-summary-line span:first-child {
    font-weight: 500;
    color: #14222a;
    flex: 1;
    text-align: left;
}
body#checkout .cart-summary-line .value,
body#checkout .cart-summary-line span:last-child {
    font-weight: 600;
    color: #14222a;
    text-align: right;
    white-space: nowrap;
}

/* Cart Gesamt (inkl. MwSt.) — BIG teal */
body#checkout .cart-summary-line.cart-total,
body#checkout .cart-total {
    border: none !important;
    border-top: 2px solid #e6e9eb !important;
    margin-top: 12px !important;
    padding: 22px 0 18px 0 !important;
    align-items: center !important;
}
body#checkout .cart-summary-line.cart-total .label,
body#checkout .cart-total .label,
body#checkout .cart-total span:first-child {
    font-weight: 700;
    font-size: 1.25rem !important;
    color: #04697e !important;       /* teal label */
}
body#checkout .cart-summary-line.cart-total .value,
body#checkout .cart-total .value,
body#checkout .cart-total span:last-child {
    font-weight: 700;
    font-size: 1.85rem !important;   /* big total */
    color: #04697e !important;       /* teal value */
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Gesamt (o. MwSt.) — middling size with subtle teal hint */
body#checkout .cart-summary-totals .cart-summary-line:not(.cart-total) {
    padding: 14px 0 !important;
    font-size: 1.05rem !important;
    border-top: 1px solid #e6e9eb !important;
}
body#checkout .cart-summary-totals .cart-summary-line:not(.cart-total) .label,
body#checkout .cart-summary-totals .cart-summary-line:not(.cart-total) .value {
    font-weight: 600;
    color: #14222a;
}

/* ==========================================================================
   v1.0.62 — POLISH DRIFTS (Round 2 after audit)
   --------------------------------------------------------------------------
   Cross-page polish fixes for the small drifts identified in the chrome
   stage audit. Each block addresses one specific finding.
   ========================================================================== */

/* --- 5. THEME HEADING DRIFT → CANONICAL ----------------------------------
   Audit: theme.css uses #1a2932 for h1/h2 and #4a4a4a for h3 — close but
   not on-token. Override to canonical ink/muted. Excludes module-specific
   headings that override on purpose.
   -------------------------------------------------------------------------- */
body h1:not(.trikon-hero-title):not(.trikon-hp-section-title),
body h2:not(.trikon-hp-section-title):not(.trikon-action-title),
body .h1, body .h2 {
    color: #14222a !important;        /* ink canonical */
}
body h3:not(.trikon-hp-section-title),
body h4:not(.trikon-hp-section-title),
body .h3, body .h4 {
    color: #14222a !important;        /* h3/h4 also ink — was #4a4a4a (too muted for headers) */
}
body p, body .text-muted {
    color: #14222a;                   /* body text ink (lower specificity, only sets default) */
}
body small, body .small {
    color: #6c7479;                   /* muted canonical */
}

/* --- 6. ALL PRIMARY BUTTONS: pure #fff → #fafafa paper -------------------
   Audit: 61 elements use color: rgb(255,255,255) on Workshop-Teal bg. We
   bump to #fafafa for the brand-consistent anti-pure-white rule.
   -------------------------------------------------------------------------- */
body .btn-primary,
body button[type="submit"]:not(.btn-link):not(.btn-secondary):not(.btn-outline),
body .add-to-cart,
body button.add-to-cart,
body .product-add-to-cart .btn,
body #payment-confirmation button,
body .btn.btn-primary,
body input[type="submit"].btn {
    color: #fafafa !important;        /* paper canonical, not pure white */
}

/* Secondary teal-on-paper buttons — text already #04697e, just ensure paper bg */
body .btn-outline-primary,
body .btn-secondary {
    background-color: #fafafa;
    color: #04697e !important;
}

/* --- 7. .product-freeshipping → GREEN (v1.0.67 final after user feedback) -
   Both "Gratis Versand" + "Abholung In-Store" stay green (positive avail
   signal). The cart-page .trikon-fs-banner also green-themed for consistency.
   -------------------------------------------------------------------------- */
body .product-freeshipping,
body .product-freeshipping.trikon-fs-injected,
body .product-freeshipping.trikon-fs-filled {
    background-color: #1e7e34 !important;
    color: #fafafa !important;
    border: 1px solid #1e7e34 !important;
    font-weight: 600;
}
body a.product-freeshipping:hover,
body a.product-freeshipping:focus-visible {
    background-color: #157049 !important;
    color: #fafafa !important;
    border-color: #157049 !important;
    text-decoration: none;
}

/* trikonfreeshipping cart-banner → TEAL (user: pills green, this bar teal) */
body .trikon-fs-banner,
body .trikon-fs-banner-inner {
    background-color: rgba(4, 105, 126, 0.08) !important;
    color: #04697e !important;
    border: 1px solid rgba(4, 105, 126, 0.2) !important;
    border-radius: 6px;
    padding: 12px 16px !important;
}
body .trikon-fs-banner .trikon-fs-progress,
body .trikon-fs-banner-inner .trikon-fs-progress {
    background-color: rgba(4, 105, 126, 0.15);
}
body .trikon-fs-banner .trikon-fs-progress-fill,
body .trikon-fs-banner-inner .trikon-fs-progress-fill {
    background-color: #04697e;
}

/* --- 8. SWEET-ALERT "Title" PLACEHOLDER --------------------------------
   PS ships sweet-alert.html with un-customized H2 "Title" content that
   appears in DOM but only renders when modal opens. Hide its H2 when text
   is the literal placeholder string (defensive against template change).
   -------------------------------------------------------------------------- */
.sweet-alert > h2:only-of-type {
    /* Tighten + ensure proper inheritance, no broken heading hierarchy */
    color: #14222a !important;
}
/* Selectively hide if the modal isn't open (`visible` class not set) and
   the heading equals the literal placeholder */
.sweet-alert:not(.visible):not(.show) > h2 {
    display: none !important;
}

/* --- 9. CTA INK TEXT ON BUTTONS - icon color follows text ----------------*/
body .btn-primary svg,
body .btn-primary i,
body button[type="submit"] svg,
body button[type="submit"] i {
    color: currentColor !important;
}

/* --- 10. PRODUCT-PAGE STOCK-STATE - announce via screen reader ---------- */
.product-availability[role="status"],
.trikon-a11y-status-unavailable[role="status"],
.pronesis_order_timer[role="status"] {
    /* visual styling unchanged — role just adds live announce semantics */
}

/* ==========================================================================
   v1.0.63 — ROUND 3 STAGE-FIX (Lieferdatum stays green, freeshipping no longer)
   --------------------------------------------------------------------------
   User-reported deltas after re-upload:
     1. "vergleichen" header button reads as pale-white on white bg → restore teal
     2. Gratisversand widget went green → revert to teal/gray modern (above)
     3. Product-page breadcrumbs missing chevrons between pills
   ========================================================================== */

/* --- 11. "VERGLEICHEN" header button — teal text, no rectangular border.
   v1.0.77: theme has higher-spec rule giving bt_compare 1px teal border.
   Use html+body double-prefix and split border into width/style/color
   to win the cascade. */
html body .bt_compare,
html body button.bt_compare,
html body a.bt_compare,
html body .bt_compare .link-item,
html body button.bt_compare span,
html body .compare-list-link,
html body .add_to_compare:not(.disabled) {
    color: #04697e !important;
    background: transparent !important;
    border: 0 none transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Click-focus on bt_compare leaves a focus ring that user reads as "blue
   border". :focus:not(:focus-visible) is the click-focus only path (modern
   browsers) — suppress focus styling there, keep keyboard :focus-visible. */
body .bt_compare:focus:not(:focus-visible),
body .bt_compare:focus:not(:focus-visible) .link-item,
body .add_to_compare:focus:not(:focus-visible),
body button.bt_compare:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
body .bt_compare:hover,
body .bt_compare:hover .link-item {
    color: #035566 !important;
    text-decoration: none;
}
/* Keyboard focus stays accessible: subtle outline only, no border */
body .bt_compare:focus-visible,
body .bt_compare:focus-visible .link-item {
    color: #04697e !important;
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- 12. PRODUCT-PAGE BREADCRUMB CHEVRONS — copy from trikonsubcategories
   subcategory-grid.css has these rules but is cache-stuck on stage; mirror
   them here (trikona11y has cache-bust) for instant deploy.
   ------------------------------------------------------------------------ */
body.page-product nav.breadcrumb,
body.page-product .breadcrumb {
    visibility: visible !important;
    height: auto !important;
    padding: 0.5rem 0 0.75rem !important;
    margin: 0 0 1rem !important;
    background: transparent !important;
    overflow: visible !important;
    min-height: 0 !important;
}

body.page-product .breadcrumb ol,
body.page-product nav.breadcrumb ol {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.4rem 0.3rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-product .breadcrumb li,
body.page-product nav.breadcrumb ol li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

body.page-product .breadcrumb li > a,
body.page-product nav.breadcrumb ol li > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.28rem 0.7rem !important;          /* v1.0.65: smaller pills */
    background-color: rgba(4, 105, 126, 0.08) !important;
    color: #14222a !important;
    font-size: 0.72rem !important;               /* v1.0.65: smaller font */
    font-weight: 600 !important;
    border-radius: 16px !important;              /* v1.0.65: matched radius */
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

body.page-product .breadcrumb li > a:hover,
body.page-product .breadcrumb li > a:focus-visible,
body.page-product nav.breadcrumb ol li > a:hover {
    background-color: #04697e !important;
    color: #fafafa !important;
}

/* Last item (current page = product) — solid teal */
body.page-product .breadcrumb li:last-child > a,
body.page-product .breadcrumb li:last-child > span,
body.page-product nav.breadcrumb ol li:last-child > a,
body.page-product nav.breadcrumb ol li:last-child > span {
    background-color: rgba(4, 105, 126, 0.85) !important;
    color: #fafafa !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.28rem 0.7rem !important;          /* v1.0.65: smaller */
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    white-space: nowrap;
}

/* THE CHEVRONS — between non-last items */
body.page-product .breadcrumb li:not(:last-child)::after,
body.page-product nav.breadcrumb ol li:not(:last-child)::after {
    content: '›' !important;
    color: #6c7479 !important;
    font-size: 1rem !important;
    margin-left: 0.3rem !important;
    display: inline-block !important;
    pointer-events: none;
}

/* Strip the schema <meta> that PS injects between LIs from visual flow */
body.page-product .breadcrumb li > meta {
    display: none !important;
}

/* ==========================================================================
   v1.0.65 — Round 4 fixes after user audit
   --------------------------------------------------------------------------
   - OOS product layout: hr lines + buttons compressed left → force full width
   - Cart: qty stepper "+" runs into price → spacing
   ========================================================================== */

/* --- v1.0.65 ROOT FIX — OOS / OnRequest / Download product page layout
   Diagnosed via Chrome: <form id="add-to-cart-or-refresh"> computes to
   318px width inside a 570px .product-actions parent. No matching CSS
   rule was found — likely shrink-wrap from a flex/inline-flex ancestor.
   Force the form + all its descendants to 100% so VERGLEICHEN/TECH-RIDER,
   payment-icons, HR-lines all span the full column width. */
.page-product .product-information,
.page-product .product-information > .product-additional-info,
.page-product .product-information > .product-actions,
.page-product .product-information > .product-prices,
.page-product .product-information > .product-description-short,
.page-product .product-information > hr,
.page-product .product-information > p,
.page-product .product-information > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.page-product .product-information hr,
.page-product .product-information .hr {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-color: #e6e9eb;
}

/* The actual culprit: the inner FORM + .product-additional-info wrapper */
.page-product #add-to-cart-or-refresh,
.page-product form#add-to-cart-or-refresh,
.page-product .product-actions > form,
.page-product .product-actions form#add-to-cart-or-refresh .product-additional-info,
.page-product .product-additional-info,
.page-product .product-additional-info > form {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* And the trust-row / actions inside it stretch to fill */
.page-product .product-additional-info .secure-payments-message,
.page-product .product-additional-info .payment-message,
.page-product .product-additional-info > p,
.page-product .product-additional-info > div {
    width: 100% !important;
    max-width: 100% !important;
}

/* v1.0.66 — VERGLEICHEN + TECH-RIDER side-by-side (block-flow inline) */
.page-product .product-additional-info {
    display: block !important;
    width: 100% !important;
}
.page-product .product-additional-info > * {
    margin-bottom: 12px;
}
/* compare + panel-product-actions should be on the same line */
.page-product .product-additional-info .compare,
.page-product .product-additional-info .panel-product-line,
.page-product .product-additional-info .panel-product-actions {
    display: inline-block !important;
    margin-right: 12px;
    vertical-align: top;
}
.page-product .product-additional-info .compare .bt_compare,
.page-product .product-additional-info .panel-product-actions a {
    display: inline-flex !important;
}

/* OOS buttons: VERGLEICHEN + TECH-RIDER row */
.page-product .product-actions .actions-additional,
.page-product .product-actions .product-out-of-stock {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Cart: qty stepper "+" button needs breathing room from price total */
.cart-grid-body .cart-line-product-actions,
.cart-grid-body .product-line-grid-right,
.cart-grid-body .cart-line-product-quantity,
.cart-grid-body .input-group-btn-vertical {
    margin-right: 16px;
}
.cart-grid-body .product-line-grid-right .price,
.cart-grid-body .price.col-md-5 {
    padding-left: 12px !important;
    text-align: right;
    min-width: 88px;
}
.cart-grid-body .bootstrap-touchspin {
    margin-right: 18px !important;
}
.cart-grid-body .product-line-info.product-price-and-shipping,
.cart-grid-body .product-line-info .price {
    padding-left: 8px;
}

/* ==========================================================================
   v1.0.67 — Round 5 fixes after audit feedback
   --------------------------------------------------------------------------
   - Search input duplicate border when dropdown open
   - OOS layout: desc + VERGLEICHEN + TECH-RIDER full width
   - Checkout payment options as vertical list
   - Cart: 3-column row + summary spacing
   ========================================================================== */

/* --- v1.0.72: Doofinder + theme search overlay — no inner box border.
   v1.0.132 FIX: removed `.dfd-layer` + `.dfd-layer-content` from this rule.
   They are Doofinder's white RESULTS PANEL, not the input — forcing
   `background: transparent` on them wiped the white overlay so the results
   floated on the dark backdrop. This rule now targets ONLY search inputs. */
body .dfd-search-input,
body .dfd-input,
body [class*="doofinder"] input,
body .df-layer input,
body .df-search-input,
body .search-widget__form input,
body .wb-search-toogle input,
body .wb-search-overlay input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
/* v1.0.132: restore Doofinder's white results panel (deterministic — beats
   any leftover transparent override via html body specificity). */
html body .dfd-layer,
html body .dfd-layer-content {
    background: #ffffff !important;
}
body .dfd-layer .dfd-search,
body .wb-search-overlay-input-wrap,
body .header-search-wrap {
    border: none !important;
    box-shadow: none !important;
}
body .wb-search-block.open,
body .wb-search-toogle.open,
body #search_widget.search-widget__open {
    border: none !important;
    background: transparent;
}

/* --- Search input: kill double-border when dropdown open. PS theme wraps
   the input in a container that gains a border when search results show
   below; the input itself ALSO has a border → double frame. */
body .wb-search-input:focus,
body .wb-search-input.open,
body #search_widget input[name="s"]:focus,
body .wb-search-block input[name="s"]:focus,
body .wb-search-toogle.open input,
body .ui-autocomplete-input:focus,
body input[name="s"]:focus + .wb-search-suggestions,
body input[name="s"]:focus ~ .wb-search-suggestions {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
body .wb-search-block.open,
body .wb-search-toogle.open,
body .ui-autocomplete.ui-front {
    border: none !important;
    box-shadow: 0 4px 18px rgba(20, 34, 42, 0.12) !important;
}
body #search_widget form,
body .wb-search-block form,
body .header-search-form {
    border: 1px solid #e6e9eb !important;
    border-radius: 6px;
    overflow: hidden;
}
body #search_widget form:focus-within,
body .wb-search-block form:focus-within,
body .header-search-form:focus-within {
    border-color: #04697e !important;
}
body #search_widget form input,
body .wb-search-block form input,
body .header-search-form input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- v1.0.70: VERGLEICHEN + TECH-RIDER — IDENTICAL on every product page.
   Both rendered as outline-buttons side-by-side, 50/50 width, regardless
   of product availability (in-stock OR out-of-stock). */
.page-product .product-description-short,
.page-product .product-information .product-description-short {
    width: 100% !important;
    max-width: 100% !important;
}

/* Parent containers: 2-column row */
.page-product .product-additional-info .compare,
.page-product .product-additional-info .panel-product-line,
.page-product .product-additional-info .panel-product-actions,
.page-product .product-actions .compare,
.page-product .product-actions .panel-product-actions {
    display: inline-block !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    vertical-align: top;
    margin: 0 !important;
    box-sizing: border-box;
}
/* Right column gets left margin for gap (12px) */
.page-product .product-additional-info .panel-product-actions,
.page-product .product-additional-info .panel-product-line,
.page-product .product-actions .panel-product-actions {
    margin-left: 12px !important;
}

/* Both VERGLEICHEN + TECH-RIDER: identical outline button look */
.page-product a.add_to_compare,
.page-product a.add_to_compare.btn-product,
.page-product .compare a,
.page-product .panel-product-actions a,
.page-product .panel-product-line a,
.page-product .compare .bt_compare,
.page-product .panel-product-actions .bt_tech_rider,
.page-product .panel-product-actions .bt_tech-rider {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    padding: 10px 14px !important;
    background: transparent !important;
    color: #04697e !important;
    border: 1px solid #04697e !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    white-space: nowrap;
}
.page-product a.add_to_compare:hover,
.page-product .compare a:hover,
.page-product .panel-product-actions a:hover,
.page-product .panel-product-line a:hover {
    background: #04697e !important;
    color: #fafafa !important;
    text-decoration: none !important;
}
.page-product a.add_to_compare:focus-visible,
.page-product .compare a:focus-visible,
.page-product .panel-product-actions a:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
}

/* Mobile: stack vertically with full width */
@media (max-width: 575px) {
    .page-product .product-additional-info .compare,
    .page-product .product-additional-info .panel-product-line,
    .page-product .product-additional-info .panel-product-actions,
    .page-product .product-actions .compare,
    .page-product .product-actions .panel-product-actions {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px 0 !important;
    }
}
/* BENACHRICHTIGUNG SOBALD VERFÜGBAR also full width */
.page-product .product-mailalerts .js-mailalert-form button,
.page-product .product-mailalerts button,
.page-product #product_availability_form button,
.page-product .js-mailalert-form input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- v1.0.71 Checkout: payment options FULL-WIDTH vertical list.
   v1.0.67 left them shrinking-by-row because parent .row forced
   bootstrap col-md-6 widths. Force whole structure to column-flow. */
body#checkout #payment-confirmation,
body#checkout .payment-options,
body#checkout #checkout-payment-step .content,
body#checkout #checkout-payment-step .step-content,
body#checkout .js-payment-binary {
    display: block !important;
    width: 100% !important;
}
body#checkout #payment-confirmation > .row,
body#checkout .payment-options > .row,
body#checkout #checkout-payment-step .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
}
/* Every column wrapper around payment-option → full-width row */
body#checkout #payment-confirmation [class*="col-"],
body#checkout .payment-options [class*="col-"],
body#checkout #checkout-payment-step [class*="col-"]:has(.payment-option),
body#checkout #checkout-payment-step [class*="col-"]:has(.payment-options) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body#checkout .payment-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 18px !important;
    flex-direction: row !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    cursor: pointer;
    margin: 0 !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
body#checkout .payment-option:hover {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.03) !important;
}
body#checkout .payment-option:has(input[type=radio]:checked) {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.06) !important;
}
body#checkout .payment-option > label,
body#checkout .payment-option > div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    margin: 0;
    cursor: pointer;
}
body#checkout .payment-option input[type=radio] {
    flex-shrink: 0;
    margin: 0;
}
body#checkout .payment-option img {
    height: 22px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* v1.0.79: Defensive — hide all submit-button wrappers + alert siblings
   that JS marks as .ps-hidden (belt-and-suspenders alongside the JS
   syncPaymentForms function). */
body#checkout .ps-hidden,
body#checkout [class*="ps-hidden"],
body#checkout .ps-shown-by-js.ps-hidden,
body#checkout #payment-confirmation .ps-shown-by-js.ps-hidden {
    display: none !important;
}
body#checkout .ps-shown-by-js.ps-hidden + .alert,
body#checkout .ps-shown-by-js.ps-hidden ~ .alert.ps-hidden,
body#checkout .ps-shown-by-js[style*="display: none"] + .alert,
body#checkout .ps-shown-by-js[style*="display: none"] ~ .alert {
    display: none !important;
}

/* Hide late-loading card-form fields' parent if card is not selected.
   They render with their own column — keep them inside the active form. */
body#checkout #ps_checkout-form,
body#checkout .payment-form-card,
body#checkout .payment-form-paypal {
    padding: 16px 0;
}
body#checkout #ps_checkout-form input,
body#checkout .payment-form input[type="text"],
body#checkout .payment-form input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e6e9eb;
    border-radius: 6px;
    font-size: 0.95rem;
    background: #ffffff;
    color: #14222a;
    margin-top: 4px;
    box-sizing: border-box;
}
body#checkout #ps_checkout-form input:focus,
body#checkout .payment-form input:focus {
    border-color: #04697e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.12);
}
body#checkout #ps_checkout-form label,
body#checkout .payment-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #14222a;
    margin: 14px 0 4px 0;
}

/* --- v1.0.71 Cart: BOOTSTRAP-RESPECTING layout fixes (no grid override).
   Previous v1.0.69 broke image rendering (0px). Now we keep Bootstrap's
   native .product-line-grid > .product-line-grid-{left,body,right}
   structure and just style the visual pieces. */
.cart-grid-body .cart-item {
    list-style: none;
    padding: 18px 0 !important;
    border-bottom: 1px solid #e6e9eb;
}
.cart-grid-body .cart-item:last-child {
    border-bottom: none;
}
/* Product image — square thumb. v1.0.72: single border on wrapper, no
   border on img (theme already has its own → was creating double frame). */
.cart-grid-body .product-line-grid-left .product-image {
    display: inline-block !important;
    width: 84px;
    height: 84px;
    background: #ffffff;
    border: 1px solid #e6e9eb;
    border-radius: 6px;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
}
.cart-grid-body .product-line-grid-left .product-image img,
.cart-grid-body .product-line img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Product name */
.cart-grid-body .product-line-grid-body .label,
.cart-grid-body .product-line-grid-body .product-title,
.cart-grid-body .product-line-info.product-title {
    font-weight: 600;
    color: #14222a;
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 4px;
}
/* Unit price (sub of body col) */
.cart-grid-body .product-line-grid-body .product-price,
.cart-grid-body .product-price.product-line-info {
    color: #04697e;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 4px;
}
/* Right column: stack qty + total + remove vertically with spacing */
.cart-grid-body .product-line-grid-right {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    text-align: right;
}
.cart-grid-body .product-line-grid-right .bootstrap-touchspin,
.cart-grid-body .product-line-grid-right .input-group {
    align-self: flex-end;
    margin: 0 !important;
}
.cart-grid-body .product-line-grid-right .price,
.cart-grid-body .product-line-grid-right .product-price {
    font-weight: 700;
    color: #04697e;
    font-size: 1.35rem !important;   /* v1.0.72: bigger line-total */
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.cart-grid-body .product-line-grid-right .remove-from-cart,
.cart-grid-body .product-line-grid-right .cart-line-product-actions a,
.cart-grid-body .remove-from-cart {
    color: #6c7479;
    transition: color 0.15s ease;
    align-self: flex-end;
}
.cart-grid-body .product-line-grid-right .remove-from-cart:hover,
.cart-grid-body .remove-from-cart:hover {
    color: #b3261e;
}

/* v1.0.74: Suppress tfs-sidebar + tfs-sidebar-BG backdrop + blockcart etc.
   Backdrop is a SEPARATE element (#tfs-sidebar-bg.tfs-overlay-bg) that was
   greying the whole page even when sidebar itself was hidden. */
body.trikon-a11y-cart-page #tfs-sidebar,
body.trikon-a11y-cart-page #tfs-sidebar-bg,
body.trikon-a11y-cart-page .tfs-overlay,
body.trikon-a11y-cart-page .tfs-overlay-bg,
body.trikon-a11y-cart-page .tfs-sidebar,
body.trikon-a11y-cart-page .tfs-sidebar-bg,
body.trikon-a11y-cart-page .cart-slider,
body.trikon-a11y-cart-page .blockcart-modal,
body.trikon-a11y-cart-page #blockcart-modal,
body.trikon-a11y-cart-page .right-side-modal,
body.trikon-a11y-cart-page .minicart-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateX(120%) !important;
    background: transparent !important;
}
body.trikon-a11y-cart-page .modal-backdrop,
body.trikon-a11y-cart-page .cart-backdrop {
    display: none !important;
}

/* v1.0.74: Hide per-product delivery pill ON CART page (user request:
   "blue pill lieferung entfernen bei warenkorb"). The aggregate green
   Lieferdatum bar below the product list stays as the single source. */
body.trikon-a11y-cart-page .trikon-a11y-item-delivery {
    display: none !important;
}

/* v1.0.82: Cart row — flat horizontal flex (grid was breaking on
   nested Bootstrap col-md-10/col-md-2 inside .product-line-grid-right).
   Force every wrapper to flex-row so qty + total + trash stay inline. */
.cart-grid-body .cart-item {
    padding: 22px 0 !important;
}
.cart-grid-body .product-line-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 4px 0;
    margin: 0 !important;
    width: 100%;
}
.cart-grid-body .product-line-grid-left {
    flex: 0 0 90px !important;
    width: 90px !important;
    max-width: 90px !important;
    padding: 0 !important;
}
.cart-grid-body .product-line-grid-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}
/* Right column: flatten all Bootstrap col-md / .row wrappers */
.cart-grid-body .product-line-grid-right,
.cart-grid-body .product-line-grid-right > .row,
.cart-grid-body .product-line-grid-right .col-md-10,
.cart-grid-body .product-line-grid-right .col-xs-10,
.cart-grid-body .product-line-grid-right .col-md-10 > .row,
.cart-grid-body .product-line-grid-right .col-md-2,
.cart-grid-body .product-line-grid-right .col-xs-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}
/* Outer right is the flex container — fills remaining space, justifies between */
.cart-grid-body .product-line-grid-right {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    min-width: 280px;
}
/* Hide stray clearfix */
.cart-grid-body .product-line-grid > .clearfix,
.cart-grid-body .product-line-grid-right ~ .clearfix {
    display: none !important;
}
.cart-grid-body .product-line-grid-left {
    grid-area: img;
    width: 100px;
    max-width: 100px;
    padding: 0 !important;
    flex: 0 0 100px;
}
.cart-grid-body .product-line-grid-body {
    grid-area: body;
    padding: 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
}
.cart-grid-body .product-line-grid-body .product-title,
.cart-grid-body .product-line-grid-body .label {
    margin-bottom: 6px !important;
    font-size: 1rem;
    font-weight: 700;
    color: #14222a;
}
/* v1.0.78: unit price NOT bold (only line-total is bold) */
.cart-grid-body .product-line-grid-body .product-price,
.cart-grid-body .product-line-grid-body .product-price.product-line-info {
    margin: 4px 0 0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #6c7479 !important;
    letter-spacing: 0;
}
.cart-grid-body .product-line-grid-right {
    grid-area: price;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 !important;
    gap: 6px !important;
}
/* Pull qty stepper OUT of right column INTO its own grid cell */
.cart-grid-body .product-line-grid-right .bootstrap-touchspin,
.cart-grid-body .product-line-grid-right .input-group {
    grid-area: qty !important;
    position: relative;
    align-self: center !important;
    margin: 0 !important;
    /* Move qty stepper to the qty grid area via absolute hack
       since it's still inside right-col flex — use translate */
}
/* Use display: contents on right-col to let qty escape to grid cell */
.cart-grid-body .product-line-grid {
    /* nothing extra */
}
.cart-grid-body .product-line-grid-right > .bootstrap-touchspin,
.cart-grid-body .product-line-grid-right > .input-group.bootstrap-touchspin,
.cart-grid-body .product-line-grid-right > .cart-line-product-quantity {
    /* Move qty stepper to its own grid cell via display: contents on parent */
}
/* Approach 2: make right-col display:contents so its children participate
   in the OUTER grid. Then qty, total, remove become direct grid items. */
.cart-grid-body .product-line-grid-right {
    display: contents !important;
}
.cart-grid-body .product-line-grid-right .bootstrap-touchspin,
.cart-grid-body .product-line-grid-right .input-group,
.cart-grid-body .product-line-grid-right .cart-line-product-quantity {
    grid-area: qty;
    justify-self: center;
    align-self: center;
    margin: 0 !important;
}
.cart-grid-body .product-line-grid-right .price,
.cart-grid-body .product-line-grid-right .product-price {
    text-align: right !important;
    font-weight: 700 !important;
    color: #04697e !important;
    font-size: 1.45rem !important;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 100px;
    flex: 0 0 auto !important;
    white-space: nowrap;
}
.cart-grid-body .product-line-grid-right .remove-from-cart,
.cart-grid-body .product-line-grid-right .cart-line-product-actions a,
.cart-grid-body .product-line-grid-right .cart-line-product-actions {
    color: #6c7479;
    width: 28px;
    height: 28px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 28px !important;
}
.cart-grid-body .product-line-grid-right .bootstrap-touchspin,
.cart-grid-body .product-line-grid-right .input-group {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}
.cart-grid-body .product-line-grid-right .remove-from-cart:hover {
    color: #b3261e;
}
/* Mobile: stack vertically */
@media (max-width: 767px) {
    .cart-grid-body .product-line-grid {
        grid-template-columns: 80px 1fr !important;
        grid-template-areas:
            "img body"
            "img qty"
            "img price"
            "img remove" !important;
        gap: 6px 14px !important;
    }
    .cart-grid-body .product-line-grid-right .price,
    .cart-grid-body .product-line-grid-right .product-price {
        justify-self: start;
        text-align: left;
        font-size: 1.2rem !important;
    }
    .cart-grid-body .product-line-grid-right .bootstrap-touchspin {
        justify-self: start;
    }
}

/* v1.0.73: Per-product delivery info under each cart item */
.trikon-a11y-item-delivery {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(4, 105, 126, 0.06);
    border-left: 2px solid #04697e;
    border-radius: 4px;
    color: #04697e;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.trikon-a11y-item-delivery svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #04697e;
}
.trikon-a11y-item-delivery--oos {
    background: rgba(179, 38, 30, 0.06);
    border-left-color: #b3261e;
    color: #b3261e;
}
.trikon-a11y-item-delivery--oos svg {
    color: #b3261e;
}

/* v1.0.74: Cart summary right rail — clean LEFT|RIGHT layout, no nested
   boxes, prominent Gesamt(inkl.MwSt.) line. */
.cart-grid .cart-summary,
.cart-grid #js-checkout-summary,
.cart-grid .card-block {
    padding: 24px 22px !important;
    background: #fafafa !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
}
/* Every summary line: clean two-column. Values right-aligned consistently */
.cart-grid .cart-summary-line,
.cart-grid .cart-summary-totals .cart-summary-line,
.cart-grid .cart-summary-products,
.cart-grid .cart-summary-subtotals .cart-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.95rem;
    color: #14222a;
}
.cart-grid .cart-summary-line + .cart-summary-line {
    border-top: 1px solid #f0f1f2 !important;
}
.cart-grid .cart-summary-line .label,
.cart-grid .cart-summary-line span:first-child {
    font-weight: 500;
    color: #14222a;
    text-align: left !important;
    flex: 1;
    padding: 0 !important;
}
.cart-grid .cart-summary-line .value,
.cart-grid .cart-summary-line span:last-child {
    font-weight: 600;
    color: #14222a;
    text-align: right !important;
    white-space: nowrap;
    padding: 0 !important;
}

/* Voucher-code prompt line */
.cart-grid .cart-summary-line.cart-summary-coupon,
.cart-grid .promo-discounts,
.cart-grid .promo-code-button {
    padding: 14px 0 !important;
    color: #6c7479;
    font-size: 0.88rem;
}

/* Totals block — single bordered top, no extra boxes */
.cart-grid .cart-summary-totals,
.cart-grid .cart-detailed-totals {
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Gesamt (o. MwSt.) — middling weight */
.cart-grid .cart-summary-totals .cart-summary-line:not(.cart-total) {
    padding: 12px 0 !important;
    border-top: 1px solid #e6e9eb !important;
    border-bottom: none !important;
    font-size: 0.95rem;
}

/* Gesamt (inkl. MwSt.) — the BIG ONE, prominent (no box, just heavy type) */
.cart-grid .cart-summary-line.cart-total,
.cart-grid .cart-total {
    padding: 18px 0 22px 0 !important;
    margin: 4px 0 0 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700;
    font-size: 1.15rem !important;
    color: #14222a !important;
    align-items: center !important;
}
.cart-grid .cart-summary-line.cart-total .label,
.cart-grid .cart-total .label,
.cart-grid .cart-total span:first-child {
    font-weight: 700;
    font-size: 1.15rem !important;
}
.cart-grid .cart-summary-line.cart-total .value,
.cart-grid .cart-total .value,
.cart-grid .cart-total span:last-child {
    font-weight: 700;
    font-size: 1.55rem !important;        /* big total */
    color: #04697e !important;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* Strip any inner card/border that PS classic adds around totals */
.cart-grid .cart-summary-totals > .row,
.cart-grid .cart-summary-totals .row .col-md-12,
.cart-grid .card-block.cart-summary-totals {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   v1.0.78 — Voucher code dropdown polish + checkout summary cleanup
   ========================================================================== */

/* "Haben Sie einen Gutschein-Code?" toggle */
.cart-grid .promo-code-button,
.cart-grid .cart-summary .promo-discounts a,
.cart-grid #js-discount-name-control,
.cart-grid .promo-code-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #04697e !important;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 12px 0;
    cursor: pointer;
    background: transparent !important;
    border: none;
    transition: color 0.15s ease;
}
.cart-grid .promo-code-button:hover,
.cart-grid .promo-code-trigger:hover {
    color: #035566 !important;
}
.cart-grid .promo-code-button::after,
.cart-grid .promo-code-trigger::after {
    content: '+';
    margin-left: 4px;
    font-weight: 400;
    font-size: 1rem;
}
.cart-grid .promo-code-button[aria-expanded="true"]::after,
.cart-grid .promo-code-button.show::after,
.cart-grid .promo-code-trigger.is-open::after {
    content: '−';
}

/* v1.0.80: Voucher form — style only when displayed (don't force display:flex
   which made it open by default). Use :not(.collapse) and rely on PS toggle. */
.cart-grid .promo-code:not(.collapse):not([style*="display: none"]),
.cart-grid .promo-code.show,
.cart-grid .promo-code.in,
.cart-grid #promo-code:not(.collapse):not([style*="display: none"]),
.cart-grid .promo-input:not(.collapse):not([style*="display: none"]),
.cart-grid .voucher-form:not(.collapse):not([style*="display: none"]) {
    margin: 8px 0 4px 0 !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    display: flex !important;
    gap: 8px;
    align-items: stretch;
}
/* Default collapsed — let PS bootstrap-collapse handle visibility */
.cart-grid .promo-code.collapse:not(.show):not(.in) {
    display: none !important;
}
.cart-grid .promo-code input[type="text"],
.cart-grid #promo-code input[type="text"],
.cart-grid .promo-input input[type="text"],
.cart-grid input[name="discount_name"] {
    flex: 1;
    padding: 10px 14px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #14222a !important;
    font-size: 0.92rem !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    margin: 0 !important;
}
.cart-grid .promo-code input[type="text"]:focus,
.cart-grid input[name="discount_name"]:focus {
    border-color: #04697e !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.12) !important;
}
.cart-grid .promo-code button,
.cart-grid #promo-code button,
.cart-grid .promo-input button,
.cart-grid form[method="post"][action*="cart"] button {
    padding: 10px 18px !important;
    background: #04697e !important;
    color: #fafafa !important;
    border: 1px solid #04697e !important;
    border-radius: 6px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cart-grid .promo-code button:hover,
.cart-grid .promo-input button:hover {
    background: #035566 !important;
    border-color: #035566 !important;
}

/* Promo discounts already applied — small green chips */
.cart-grid .cart-summary-line.cart-summary-cashback,
.cart-grid .cart-summary-line.cart-discounts,
.cart-grid .cart-discounts .cart-summary-line {
    color: #1e7e34;
    font-weight: 600;
}

/* ==========================================================================
   v1.0.78 — Checkout summary cleanup
   - hide "Zeige Details" toggle (we keep it always expanded)
   - hide "X Artikel" summary count line
   - article list styled like cart product list
   ========================================================================== */

/* Hide details toggle */
body#checkout .cart-summary-products-toggle,
body#checkout .js-show-details,
body#checkout [data-action="show-summary"],
body#checkout .show-details {
    display: none !important;
}

/* v1.0.83: Hide ALL <p> direct children of .cart-summary-products — they
   are the "16 Artikel" + "Zeige Details" toggle. The product list lives
   in the .collapse div which we always-expand below. */
body#checkout .cart-summary-products > p,
body#checkout .cart-summary-products > .cart-summary-line:first-child,
body#checkout .cart-summary-products-list .cart-summary-products-count,
body#checkout #cart-subtotal-products,
body#checkout .cart-summary-line.cart-summary-products-count {
    display: none !important;
}

/* v1.0.81: Checkout article list — bigger, name+qty left, unit price right.
   Real DOM: li.media > div.media-left > img + div.media-body > spans
   (.product-name, .product-quantity, .product-price.float-xs-right).
   Outer grid for image/body split; inner grid in .media-body so price
   sits right while name+qty stack left. */
body#checkout .cart-summary-products .media,
body#checkout .cart-summary-products li.media {
    display: grid !important;
    /* v1.0.123: minmax(0, 1fr) instead of 1fr — `1fr` resolves to its
       intrinsic content size when no explicit container width is set, which
       caused the second column to grow to 10000px (off-screen) on stage. */
    grid-template-columns: 80px minmax(0, 1fr) !important;
    grid-auto-columns: 0 !important;       /* kill implicit 3rd column from extra DOM children */
    gap: 16px !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e6e9eb !important;
    align-items: center !important;
    list-style: none;
    background: transparent;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
body#checkout .cart-summary-products .media:last-child {
    border-bottom: none !important;
}
body#checkout .cart-summary-products .media-left {
    width: 80px;
    margin: 0 !important;
    padding: 0 !important;
}
body#checkout .cart-summary-products img,
body#checkout .cart-summary-products .media-left img,
body#checkout .cart-summary-products .media-object {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 6px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
}
/* v1.0.83: media-body — grid with minmax(0,1fr) so the name column can
   actually shrink (1fr alone won't shrink below content width → price
   gets pushed off-screen). Use explicit grid-column/row. */
body#checkout .cart-summary-products .media-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-auto-rows: auto !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
}
body#checkout .cart-summary-products .media-body > br {
    display: none !important;
}
body#checkout .cart-summary-products .media-body .product-name,
body#checkout .cart-summary-products span.product-name {
    grid-column: 1 / -1 !important;    /* v1.0.128: name spans full width on row 1 */
    grid-row: 1 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #14222a !important;
    line-height: 1.35 !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* v1.0.128: qty + line total share row 2 — qty left, price right */
body#checkout .cart-summary-products .media-body .product-quantity,
body#checkout .cart-summary-products span.product-quantity {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    color: #6c7479 !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}
body#checkout .cart-summary-products .media-body .product-price,
body#checkout .cart-summary-products span.product-price,
body#checkout .cart-summary-products .product-price.float-xs-right {
    grid-column: 2 !important;
    grid-row: 2 !important;             /* v1.0.128: same row as qty */
    align-self: center !important;
    justify-self: end !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: #04697e !important;
    font-size: 1.15rem !important;
    white-space: nowrap;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}
/* Hide other small/p elements inside body that might clutter */
body#checkout .cart-summary-products .media-body small:empty,
body#checkout .cart-summary-products .media-body p:empty {
    display: none !important;
}
/* Stop my prior touchspin margin from kicking in on this layout */
.cart-grid-body .bootstrap-touchspin {
    margin-right: 0 !important;
}
@media (max-width: 575px) {
    .cart-grid-body .product-line-grid-left .product-image img {
        width: 64px !important;
        height: 64px !important;
    }
    .cart-grid-body .product-line-grid-right {
        align-items: flex-start;
        margin-top: 8px;
    }
}

/* --- v1.0.71 Cart summary right rail (tighter spacing) */
.cart-grid .card-block,
.cart-grid .cart-summary,
.cart-grid #js-checkout-summary,
body.checkout-content #js-checkout-summary {
    background: #fafafa !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
}
.cart-grid .cart-summary-line,
.cart-grid .cart-summary-totals .cart-summary-line {
    padding: 7px 0 !important;
    border-bottom: none !important;
    font-size: 0.92rem;
    display: flex;
    justify-content: space-between;
    color: #14222a;
    margin: 0 !important;
    line-height: 1.4;
}
.cart-grid .cart-summary-line + .cart-summary-line {
    border-top: 1px solid #f0f1f2 !important;
}
.cart-grid .cart-summary-totals {
    border-top: 1px solid #e6e9eb;
    margin-top: 10px !important;
    padding-top: 10px !important;
}
.cart-grid .cart-summary-line.cart-total,
.cart-grid .cart-total {
    font-weight: 700;
    font-size: 1.05rem !important;
    color: #14222a !important;
    padding: 12px 0 !important;
    border-top: 1px solid #e6e9eb !important;
    margin-top: 6px !important;
}
.cart-grid .cart-summary-line.cart-total .value {
    color: #04697e !important;
}

/* Estimated-delivery widget INSIDE checkout summary — injected by JS,
   styled here so it picks up the green Lieferdatum theme. */
#js-checkout-summary .trikon-a11y-delivery-estimate,
.cart-summary .trikon-a11y-delivery-estimate {
    margin-top: 12px;
    padding: 10px 12px;
    background: #e8f5ec;
    border: 1px solid #1e7e34;
    border-radius: 6px;
    color: #1e7e34;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
#js-checkout-summary .trikon-a11y-delivery-estimate svg,
.cart-summary .trikon-a11y-delivery-estimate svg {
    flex-shrink: 0;
    color: #1e7e34;
}

/* ==========================================================================
   v1.0.68 — Order Confirmation page polish
   --------------------------------------------------------------------------
   The /bestellbestaetigung page rendered a loose Bootstrap-row layout
   with huge whitespace between price/qty columns and unstyled bank-info
   table. Polish to Workshop Counter aesthetic.
   ========================================================================== */

body.page-order-confirmation #content.page-content {
    background: #fafafa !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 1px 4px rgba(20, 34, 42, 0.04);
}

/* Success message celebration block */
body.page-order-confirmation .confirmation-message,
body.page-order-confirmation h3#order-confirmation-h3,
body.page-order-confirmation h1.h1.card-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    color: #1e7e34 !important;
    padding: 18px 22px !important;
    background: #e8f5ec !important;
    border: 1px solid #1e7e34 !important;
    border-radius: 10px !important;
    margin-bottom: 24px !important;
    line-height: 1.3;
}
body.page-order-confirmation h3#order-confirmation-h3 i,
body.page-order-confirmation .confirmation-message i {
    color: #1e7e34 !important;
    font-size: 1.4rem;
}
/* Confirmation paragraph + email message */
body.page-order-confirmation .confirmation-message + p,
body.page-order-confirmation .card-block > p:first-of-type {
    color: #14222a !important;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 28px;
}

/* "BESTELLTE ARTIKEL" heading */
body.page-order-confirmation #order-items h3,
body.page-order-confirmation #order-items > strong,
body.page-order-confirmation #order-items > .h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #6c7479 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e9eb;
}

/* Order line: clean 4-column grid (image | name | qty | price) */
body.page-order-confirmation .order-line.row {
    display: grid !important;
    grid-template-columns: 76px 1fr 80px 120px !important;
    grid-template-areas: "img name qty price" !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #e6e9eb !important;
    margin: 0 !important;
}
body.page-order-confirmation .order-line.row:last-child {
    border-bottom: none;
}
body.page-order-confirmation .order-line .col-sm-2,
body.page-order-confirmation .order-line .col-xs-3 {
    grid-area: img;
    max-width: 76px;
    padding: 0 !important;
}
body.page-order-confirmation .order-line .col-sm-2 .image,
body.page-order-confirmation .order-line .col-sm-2 img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e6e9eb;
    display: block;
}
body.page-order-confirmation .order-line .details {
    grid-area: name;
    padding: 0 !important;
    font-weight: 600;
    color: #14222a;
    font-size: 0.95rem;
}
body.page-order-confirmation .order-line .qty {
    /* The original .col-sm-6 contained price + qty + total as inline spans —
       break them out into their own grid areas. */
    grid-area: qty;
    padding: 0 !important;
    display: contents !important;
}
body.page-order-confirmation .order-line .qty > span:first-child,
body.page-order-confirmation .order-line .qty .unit-price {
    /* Unit price — hide if duplicated (we use only line total) */
    display: none;
}
body.page-order-confirmation .order-line .qty > span:nth-child(2),
body.page-order-confirmation .order-line .qty .quantity {
    grid-area: qty;
    text-align: center;
    color: #6c7479;
    font-size: 0.9rem;
}
body.page-order-confirmation .order-line .qty > span:last-child,
body.page-order-confirmation .order-line .qty .total {
    grid-area: price;
    text-align: right;
    font-weight: 700;
    color: #04697e;
    font-size: 1rem;
}

/* Order totals summary table */
body.page-order-confirmation .table-bordered,
body.page-order-confirmation #order-detail-content,
body.page-order-confirmation .order-summary-totals {
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    overflow: hidden;
    margin-top: 24px !important;
}
body.page-order-confirmation .table-bordered td,
body.page-order-confirmation .table-bordered th {
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px dashed #e6e9eb !important;
    font-size: 0.95rem;
    color: #14222a;
}
body.page-order-confirmation .table-bordered tr:last-child td {
    border-bottom: none !important;
    font-weight: 700;
    color: #14222a;
    background: #fafafa;
    font-size: 1.05rem;
}
body.page-order-confirmation tr:last-child td:last-child,
body.page-order-confirmation .order-summary-totals .total {
    color: #04697e !important;
}

/* Bank transfer instructions (PS_BankWire) */
body.page-order-confirmation #content .row .col-md-12:last-child,
body.page-order-confirmation .well,
body.page-order-confirmation .box,
body.page-order-confirmation .bank-wire-information {
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    padding: 24px !important;
    margin-top: 24px !important;
}
body.page-order-confirmation table.table:not(.table-bordered) {
    width: 100%;
    margin-bottom: 16px;
}
body.page-order-confirmation table.table:not(.table-bordered) td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #f4f5f6 !important;
    vertical-align: top;
    font-size: 0.92rem;
}
body.page-order-confirmation table.table:not(.table-bordered) td:first-child {
    font-weight: 600;
    color: #6c7479;
    width: 30%;
    min-width: 140px;
}
body.page-order-confirmation table.table:not(.table-bordered) td:last-child {
    color: #14222a;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.88rem;
}

/* Verwendungszweck callout */
body.page-order-confirmation p {
    line-height: 1.55;
    color: #14222a;
    margin-bottom: 8px;
}

/* Action buttons area */
body.page-order-confirmation .order-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e6e9eb;
}
body.page-order-confirmation .order-confirmation-actions a,
body.page-order-confirmation .order-confirmation-actions .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.page-order-confirmation .order-confirmation-actions .btn-primary {
    background: #04697e;
    color: #fafafa;
    border: 1px solid #04697e;
}
body.page-order-confirmation .order-confirmation-actions .btn-primary:hover {
    background: #035566;
    border-color: #035566;
}

/* Hide spurious "Zeige Details" links if PS adds them noisily */
body.page-order-confirmation .show-details-toggle,
body.page-order-confirmation [data-action="show-details"] {
    color: #04697e;
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    body.page-order-confirmation #content.page-content {
        padding: 18px !important;
    }
    body.page-order-confirmation .order-line.row {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "img name"
            "img qty"
            "img price";
        gap: 4px 12px;
    }
    body.page-order-confirmation .order-line .col-sm-2,
    body.page-order-confirmation .order-line .col-xs-3 {
        max-width: 60px;
    }
    body.page-order-confirmation .order-line .col-sm-2 .image,
    body.page-order-confirmation .order-line .col-sm-2 img {
        width: 60px;
        height: 60px;
    }
    body.page-order-confirmation .order-line .qty > span:nth-child(2) { text-align: left; }
    body.page-order-confirmation .order-line .qty > span:last-child { text-align: left; }
}

/* ==========================================================================
   v1.0.84 — Cart + Checkout polish round 9
   --------------------------------------------------------------------------
   1. Cart voucher form: refined input + button alignment
   2. Cart "ZUR KASSE" CTA: full-width, larger, shadowed, prominent
   3. Cart summary: more breathing room between Versand / Gesamt rows
   4. Checkout: hide "Zeige Details" (any remaining variants)
   5. Checkout voucher form: mirror cart styling
   6. Checkout Versand row: bigger + "kostenlos" in teal (via JS class)
   7. Checkout AGB checkbox: inline with text (not offset top-left)
   ========================================================================== */

/* ---- (1) Cart voucher form polish — refined card ------------------------- */
.cart-grid .promo-code:not(.collapse):not([style*="display: none"]),
.cart-grid .promo-code.show,
.cart-grid .promo-code.in,
.cart-grid #promo-code:not(.collapse):not([style*="display: none"]) {
    margin: 12px 0 8px 0 !important;
    padding: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(20, 34, 42, 0.04);
}
.cart-grid .promo-code form,
.cart-grid #promo-code form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.cart-grid .promo-code input[type="text"],
.cart-grid #promo-code input[type="text"],
.cart-grid input[name="discount_name"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #14222a !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    margin: 0 !important;
    height: auto !important;
}
.cart-grid .promo-code input[type="text"]::placeholder,
.cart-grid input[name="discount_name"]::placeholder {
    color: #9aa1a6;
}
.cart-grid .promo-code input[type="text"]:focus,
.cart-grid input[name="discount_name"]:focus {
    border-color: #04697e !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.15) !important;
}
.cart-grid .promo-code button,
.cart-grid #promo-code button,
.cart-grid .promo-code form[data-link-action="add-voucher"] button {
    flex: 0 0 auto !important;
    padding: 12px 22px !important;
    background: #04697e !important;
    color: #fafafa !important;
    border: 1px solid #04697e !important;
    border-radius: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
.cart-grid .promo-code button:hover,
.cart-grid #promo-code button:hover {
    background: #035566 !important;
    border-color: #035566 !important;
}
.cart-grid .promo-code button span {
    color: inherit !important;
}

/* The "Haben Sie einen Gutschein-Code?" toggle — make it look like a calm link, not a heavy button */
.cart-grid .promo-code-button,
.cart-grid a.promo-code-button,
.cart-grid .collapse-button.promo-code-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    color: #04697e !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    padding: 8px 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
}
.cart-grid .promo-code-button:hover {
    color: #035566 !important;
}

/* ---- (2) Cart ZUR KASSE — full-width, prominent ------------------------- */
.cart-grid .checkout.cart-detailed-actions,
.cart-grid .cart-detailed-actions {
    margin-top: 16px !important;
}
.cart-grid .cart-detailed-actions a.btn,
.cart-grid .cart-detailed-actions .btn-primary,
.cart-grid a.btn-checkout-trikon,
.cart-grid a.btn.btn-checkout-trikon,
.cart-grid a[href*="/Bestellung"].btn,
.cart-grid a[href*="/bestellung"].btn,
.cart-grid a[href*="/order"].btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 18px 28px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    background: #04697e !important;
    color: #fafafa !important;
    border: 1px solid #04697e !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(4, 105, 126, 0.22) !important;
    text-decoration: none !important;
    text-align: center !important;
    margin-top: 14px !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
.cart-grid .cart-detailed-actions a.btn:hover,
.cart-grid a.btn-checkout-trikon:hover {
    background: #035566 !important;
    border-color: #035566 !important;
    box-shadow: 0 6px 20px rgba(4, 105, 126, 0.32) !important;
    transform: translateY(-1px);
    color: #fafafa !important;
}
.cart-grid .cart-detailed-actions a.btn:focus-visible {
    outline: 3px solid rgba(4, 105, 126, 0.45) !important;
    outline-offset: 2px !important;
}

/* ---- (3) Cart summary — more spacing between rows ------------------------ */
.cart-grid .cart-summary-line,
.cart-grid .cart-summary-totals .cart-summary-line {
    padding: 13px 0 !important;
    font-size: 0.98rem !important;
}
.cart-grid .cart-summary-totals {
    margin-top: 14px !important;
    padding-top: 12px !important;
}
.cart-grid .cart-summary-line.cart-total,
.cart-grid .cart-total {
    padding: 18px 0 14px 0 !important;
    margin-top: 10px !important;
}
.cart-grid .cart-summary-line.cart-total .label,
.cart-grid .cart-total .label,
.cart-grid .cart-total span:first-child {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #04697e !important;
}
.cart-grid .cart-summary-line.cart-total .value,
.cart-grid .cart-total .value,
.cart-grid .cart-total span:last-child {
    font-size: 1.55rem !important;
    color: #04697e !important;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* ---- (4) Hide "Zeige Details" — any remaining variants ------------------- */
body#checkout .cart-summary-products-toggle,
body#checkout .js-show-details,
body#checkout .show-details,
body#checkout [data-action="show-summary"],
body#checkout a[href="#cart-summary-product-list"],
body#checkout a[data-toggle="collapse"][href*="cart-summary"],
body#checkout button[data-toggle="collapse"][data-target*="cart-summary"] {
    display: none !important;
}

/* ---- (5) Checkout voucher form — mirror the cart card -------------------- */
body#checkout .promo-code:not(.collapse):not([style*="display: none"]),
body#checkout .promo-code.show,
body#checkout .promo-code.in,
body#checkout #promo-code:not(.collapse):not([style*="display: none"]),
body#checkout .cart-summary .promo-code {
    margin: 12px 0 8px 0 !important;
    padding: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(20, 34, 42, 0.04);
}
body#checkout .promo-code form,
body#checkout #promo-code form,
body#checkout .cart-summary .promo-code form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
body#checkout .promo-code input[type="text"],
body#checkout #promo-code input[type="text"],
body#checkout input[name="discount_name"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #14222a !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    outline: none !important;
    margin: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body#checkout .promo-code input[type="text"]:focus,
body#checkout input[name="discount_name"]:focus {
    border-color: #04697e !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.15) !important;
}
body#checkout .promo-code button,
body#checkout #promo-code button,
body#checkout .promo-code form[data-link-action="add-voucher"] button {
    flex: 0 0 auto !important;
    padding: 12px 22px !important;
    background: #04697e !important;
    color: #fafafa !important;
    border: 1px solid #04697e !important;
    border-radius: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
body#checkout .promo-code button:hover {
    background: #035566 !important;
    border-color: #035566 !important;
}
body#checkout .promo-code button span {
    color: inherit !important;
}
body#checkout .promo-code-button,
body#checkout a.promo-code-button,
body#checkout .collapse-button.promo-code-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    color: #04697e !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    padding: 8px 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
}

/* ---- (6) Checkout Versand row — larger, teal "kostenlos" ---------------- */
body#checkout .cart-summary-line#cart-subtotal-shipping,
body#checkout .cart-summary-line.cart-summary-shipping,
body#checkout #cart-subtotal-shipping,
body#checkout .cart-summary-line[data-id="cart-subtotal-shipping"] {
    padding: 16px 0 !important;
    font-size: 1.1rem !important;
    align-items: baseline !important;
}
body#checkout #cart-subtotal-shipping .label,
body#checkout #cart-subtotal-shipping span:first-child,
body#checkout .cart-summary-line.cart-summary-shipping .label,
body#checkout .cart-summary-line.cart-summary-shipping span:first-child {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: #14222a !important;
}
body#checkout #cart-subtotal-shipping .value,
body#checkout #cart-subtotal-shipping span:last-child,
body#checkout .cart-summary-line.cart-summary-shipping .value,
body#checkout .cart-summary-line.cart-summary-shipping span:last-child {
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #14222a !important;
}
/* "kostenlos" detection via JS-added class — teal on free shipping */
body#checkout .trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}

/* ---- (7) AGB checkbox — INLINE with text, no offset --------------------- */
body#checkout ul#conditions-to-approve,
body#checkout #conditions-to-approve {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 !important;
}
body#checkout #conditions-to-approve li,
body#checkout .custom-checkbox.condition-checkbox,
body#checkout li.checkbox.condition-checkbox,
body#checkout .checkbox-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    margin: 10px 0 !important;
    line-height: 1.55 !important;
    cursor: pointer;
    list-style: none !important;
}
/* Both possible structures: checkbox direct child OR inside label */
body#checkout #conditions-to-approve li > input[type="checkbox"],
body#checkout .custom-checkbox.condition-checkbox > input[type="checkbox"],
body#checkout .checkbox-wrap > input[type="checkbox"],
body#checkout #conditions-to-approve li input[type="checkbox"],
body#checkout label[for*="conditions"] input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 4px 0 0 0 !important;        /* tiny top-nudge to align with text x-height */
    padding: 0 !important;
    accent-color: #04697e;
    cursor: pointer;
    vertical-align: top;
}
body#checkout #conditions-to-approve li > label,
body#checkout .custom-checkbox.condition-checkbox > label,
body#checkout .checkbox-wrap > label,
body#checkout li.checkbox.condition-checkbox > label,
body#checkout #conditions-to-approve label[for*="conditions"] {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-block !important;
    line-height: 1.55 !important;
    color: #14222a !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}
body#checkout #conditions-to-approve label span,
body#checkout .condition-label span {
    display: inline !important;
}

/* ==========================================================================
   v1.0.87 — Micro-polish
   1. Cart: hard-enforce unit-price NOT bold, line-total BOLD (defeat any
      Theme/Bootstrap selector that wins on specificity)
   2. Checkout: scan all .cart-summary-line values for "kostenlos"/"free"
      (broader than #cart-subtotal-shipping which doesn't always exist)
   3. Voucher toggle: NO underline in cart + checkout
   4. Checkout: Voraussichtliches Lieferdatum banner — larger
   ========================================================================== */

/* (1) Cart row prices — final word on weight */
.cart-grid-body .cart-item .product-line-grid-body .product-price,
.cart-grid-body .cart-item .product-line-grid-body .product-price.product-line-info,
.cart-grid-body .cart-item .product-line-info.product-price,
body.page-cart .cart-grid-body .product-line-grid-body .product-price {
    font-weight: 500 !important;
    color: #6c7479 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0 !important;
}
.cart-grid-body .cart-item .product-line-grid-right .product-price,
.cart-grid-body .cart-item .product-line-grid-right .price,
.cart-grid-body .cart-item .cart-line-product-total,
body.page-cart .cart-grid-body .product-line-grid-right .product-price {
    font-weight: 800 !important;
    color: #04697e !important;
    font-size: 1.45rem !important;
    letter-spacing: -0.01em !important;
}

/* (3) Voucher toggle — NO underline */
.cart-grid .promo-code-button,
.cart-grid a.promo-code-button,
.cart-grid .collapse-button.promo-code-button,
body#checkout .promo-code-button,
body#checkout a.promo-code-button,
body#checkout .collapse-button.promo-code-button {
    text-decoration: none !important;
    border-bottom: none !important;
}
.cart-grid .promo-code-button:hover,
body#checkout .promo-code-button:hover {
    text-decoration: none !important;
    color: #035566 !important;
}

/* (4) v1.0.97 — Checkout Lieferdatum banner — dezenter (less attention-grabbing) */
body#checkout .trikon-a11y-delivery-estimate,
body#checkout #js-checkout-summary .trikon-a11y-delivery-estimate,
body#checkout .cart-summary .trikon-a11y-delivery-estimate {
    margin-top: 14px !important;
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    gap: 8px !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
}
body#checkout .trikon-a11y-delivery-estimate svg,
body#checkout #js-checkout-summary .trikon-a11y-delivery-estimate svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   v1.0.88 — Order Confirmation page (Bestellbestätigung) polish
   --------------------------------------------------------------------------
   - Order-line: unit price | qty | line-total formatted like cart/checkout
   - Totals table: bigger, cleaner; "kostenlos" teal; Gesamt active row teal
     (active = the row the customer actually pays — tax-included for B2C,
     tax-excluded for foreign B2B). JS tags rows.
   - Empty spacer rows compressed.
   ========================================================================== */

/* (1) Order-line: 3-column qty layout (override prior display:contents/none) */
body.page-order-confirmation .order-line.row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #e6e9eb !important;
    margin: 0 !important;
}
body.page-order-confirmation .order-line.row:last-child {
    border-bottom: none !important;
}
/* v1.0.128: image fixed, name grows to fill, qty/price block pinned right —
   kills the dead whitespace between the name and the price columns. */
body.page-order-confirmation .order-line .col-sm-2,
body.page-order-confirmation .order-line .col-xs-3 {
    flex: 0 0 76px !important;
    width: 76px !important;
    max-width: 76px !important;
}
body.page-order-confirmation .order-line .details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body.page-order-confirmation .order-line .qty {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    padding: 0 !important;
    flex: 0 0 auto !important;          /* v1.0.128: don't grow, sit at the right edge */
    margin-left: auto !important;
}
body.page-order-confirmation .order-line .qty > .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;  /* v1.0.128: align unit/qty/total to the right */
    width: auto !important;
    gap: 18px !important;
    margin: 0 !important;
}
/* Unit price — first col-xs-5 — gray, small, NOT bold (override prior hide) */
body.page-order-confirmation .order-line .qty > .row > .col-xs-5:first-child,
body.page-order-confirmation .order-line .qty > .row > div:first-child {
    display: block !important;
    flex: 0 0 auto !important;          /* v1.0.128: content-sized, no stretch */
    font-weight: 500 !important;
    color: #6c7479 !important;
    font-size: 0.92rem !important;
    text-align: right !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}
/* Quantity badge — center */
body.page-order-confirmation .order-line .qty > .row > .col-xs-2,
body.page-order-confirmation .order-line .qty > .row > div:nth-child(2) {
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    color: #14222a !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    min-width: 36px !important;
    padding: 5px 12px !important;
    background: #f4f5f6 !important;
    border-radius: 6px !important;
    width: auto !important;
    max-width: none !important;
}
/* Line total — last col-xs-5.bold — teal, BOLD, larger */
body.page-order-confirmation .order-line .qty > .row > .col-xs-5:last-child,
body.page-order-confirmation .order-line .qty > .row > .col-xs-5.bold,
body.page-order-confirmation .order-line .qty > .row > div:last-child {
    flex: 0 0 auto !important;          /* v1.0.128: content-sized, no stretch */
    min-width: 96px !important;         /* keep line totals visually aligned */
    font-weight: 800 !important;
    color: #04697e !important;
    font-size: 1.2rem !important;
    text-align: right !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}
/* Revert the v1.0.71 unit-price hide (it was hiding our show) */
body.page-order-confirmation .order-line .qty > span:first-child,
body.page-order-confirmation .order-line .qty .unit-price {
    display: block !important;
}

/* (2) Totals table — target the unclassed <table> inside .order-confirmation-table */
body.page-order-confirmation .order-confirmation-table > table,
body.page-order-confirmation .order-confirmation-table table {
    width: 100% !important;
    margin-top: 22px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 10px !important;
    overflow: hidden;
}
body.page-order-confirmation .order-confirmation-table > table td,
body.page-order-confirmation .order-confirmation-table table td {
    padding: 16px 20px !important;
    border: none !important;
    font-size: 1.05rem !important;
    color: #14222a !important;
    vertical-align: middle !important;
    background: transparent !important;
}
body.page-order-confirmation .order-confirmation-table > table td:first-child,
body.page-order-confirmation .order-confirmation-table table td:first-child {
    font-weight: 500 !important;
    text-align: left !important;
}
body.page-order-confirmation .order-confirmation-table > table td:last-child,
body.page-order-confirmation .order-confirmation-table table td:last-child {
    text-align: right !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
/* Empty spacer rows — compress to thin separator */
body.page-order-confirmation tr.trikon-a11y-spacer-row td {
    padding: 0 !important;
    height: 1px !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border-bottom: 1px solid #f0f1f2 !important;
}
/* Subtotal (Zwischensumme) — bigger */
body.page-order-confirmation tr.trikon-a11y-subtotal-row td {
    font-size: 1.18rem !important;
    padding: 20px 20px !important;
}
body.page-order-confirmation tr.trikon-a11y-subtotal-row td:first-child {
    font-weight: 600 !important;
}
body.page-order-confirmation tr.trikon-a11y-subtotal-row td:last-child {
    font-weight: 800 !important;
    color: #14222a !important;
    font-size: 1.25rem !important;
}
/* Shipping (Versandkosten) row — slightly bigger */
body.page-order-confirmation tr.trikon-a11y-shipping-row td {
    font-size: 1.08rem !important;
    padding: 16px 20px !important;
}
body.page-order-confirmation tr.trikon-a11y-shipping-row td:first-child {
    font-weight: 600 !important;
}
/* Free-shipping value — teal */
body.page-order-confirmation .trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}
/* Gesamt ACTIVE row — the one the customer pays (BIG, teal, highlighted) */
body.page-order-confirmation tr.trikon-a11y-gesamt-active td {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    background: #fafafa !important;
    padding: 24px 20px !important;
    border-top: 2px solid #e6e9eb !important;
    color: #04697e !important;
}
body.page-order-confirmation tr.trikon-a11y-gesamt-active td:first-child {
    font-weight: 700 !important;
    color: #04697e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}
body.page-order-confirmation tr.trikon-a11y-gesamt-active td:last-child {
    color: #04697e !important;
    font-size: 1.7rem !important;
    letter-spacing: -0.01em !important;
}
body.page-order-confirmation tr.trikon-a11y-gesamt-active .text-uppercase {
    color: #04697e !important;
}
/* Gesamt INACTIVE row (secondary — visible but not the one paid) */
body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td {
    font-size: 1.05rem !important;
    color: #6c7479 !important;
    font-weight: 500 !important;
    padding: 14px 20px !important;
}
body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td:first-child {
    font-weight: 500 !important;
    color: #6c7479 !important;
}
body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td:last-child {
    color: #6c7479 !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

/* ==========================================================================
   v1.0.89 — "vergleichen" header link: HARD reset of any border/outline
   --------------------------------------------------------------------------
   The teal rectangle around "vergleichen" reappeared (likely wbcompare.css
   updated, or theme injection added a focus/hover border). Nuke border,
   outline, box-shadow, AND pseudo-elements on every selector path + state.
   Keep keyboard a11y via subtle underline-only focus indicator.
   ========================================================================== */
html body #compare-link,
html body #compare-link .compare-form,
html body #compare-link form,
html body #compare-link button.bt_compare,
html body #compare-link button.bt_compare > *,
html body #compare-link button.bt_compare .link-item,
html body #compare-link .compare-list-link,
html body .list-inline.compare-h,
html body .list-inline.compare-h .compare-form,
html body .list-inline.compare-h button.bt_compare,
html body .compare-form button.bt_compare,
html body button.bt_compare,
html body a.bt_compare,
html body .bt_compare,
html body .bt_compare .link-item,
html body .bt_compare > span {
    border: 0 none transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: 0 none transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* All interaction states — same reset */
html body #compare-link button.bt_compare:hover,
html body #compare-link button.bt_compare:focus,
html body #compare-link button.bt_compare:active,
html body #compare-link button.bt_compare:focus-within,
html body #compare-link button.bt_compare:focus-visible,
html body #compare-link button.bt_compare:focus:not(:focus-visible),
html body #compare-link .compare-form:focus-within,
html body #compare-link:focus-within,
html body button.bt_compare:hover,
html body button.bt_compare:focus,
html body button.bt_compare:active,
html body button.bt_compare:focus-visible,
html body button.bt_compare:focus:not(:focus-visible),
html body .bt_compare:hover,
html body .bt_compare:hover .link-item,
html body .bt_compare:focus,
html body .bt_compare:focus .link-item,
html body .bt_compare:focus-visible,
html body .bt_compare:focus-visible .link-item,
html body .bt_compare:active,
html body .bt_compare:active .link-item {
    border: 0 none transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0 !important;
    outline: 0 none transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Kill any decorative pseudo-elements that might be drawing the rectangle */
html body #compare-link::before,
html body #compare-link::after,
html body .compare-form::before,
html body .compare-form::after,
html body button.bt_compare::before,
html body button.bt_compare::after,
html body .bt_compare::before,
html body .bt_compare::after,
html body .bt_compare .link-item::before,
html body .bt_compare .link-item::after {
    content: none !important;
    display: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep keyboard a11y — subtle underline on focus-visible (no rectangle) */
html body button.bt_compare:focus-visible .link-item,
html body .bt_compare:focus-visible .link-item {
    text-decoration: underline !important;
    text-decoration-color: #04697e !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    color: #04697e !important;
}

/* Color/hover text only — link-style, no chrome */
html body button.bt_compare,
html body .bt_compare,
html body .bt_compare .link-item,
html body .bt_compare > span {
    color: #04697e !important;
    padding: 6px 4px !important;
    cursor: pointer !important;
}
html body button.bt_compare:hover,
html body button.bt_compare:hover .link-item,
html body .bt_compare:hover,
html body .bt_compare:hover .link-item {
    color: #035566 !important;
}

/* ==========================================================================
   v1.0.93 — kostenlos teal on CART page + unit price in checkout summary
   ========================================================================== */

/* (1) Free-shipping value teal — UNgated from body#checkout (now also cart) */
html body .trikon-a11y-free-shipping,
body.page-cart .trikon-a11y-free-shipping,
body#cart .trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}

/* Cart Versand row — also pick up the teal kostenlos value */
body.page-cart .cart-summary-line#cart-subtotal-shipping .value,
body.page-cart .cart-summary-line.cart-summary-shipping .value,
.cart-grid .cart-summary-line#cart-subtotal-shipping .trikon-a11y-free-shipping,
.cart-grid .cart-summary-line.cart-summary-shipping .trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}

/* (2.a) v1.0.94 — Bestellbestätigung: details card (col-md-4 right side) */
body.page-order-confirmation .col-md-4 {
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 0 !important;
    box-shadow: 0 1px 4px rgba(20, 34, 42, 0.04) !important;
}
body.page-order-confirmation .col-md-4 .h3.card-title,
body.page-order-confirmation .col-md-4 h3.card-title,
body.page-order-confirmation .col-md-4 > h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #14222a !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #e6e9eb !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
body.page-order-confirmation .col-md-4 > ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}
body.page-order-confirmation .col-md-4 > ul > li {
    padding: 12px 0 !important;
    border-bottom: 1px dashed #f0f1f2 !important;
    font-size: 1rem !important;
    color: #14222a !important;
    line-height: 1.5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
body.page-order-confirmation .col-md-4 > ul > li:last-child {
    border-bottom: none !important;
}
body.page-order-confirmation .col-md-4 > ul > li > strong,
body.page-order-confirmation .col-md-4 > ul > li > b {
    color: #04697e !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    display: block;
}

/* v1.0.108 — Lieferdatum badge: soft tinted green (matches Gratisversand) */
body.page-order-confirmation .col-md-4 p.badge,
body.page-order-confirmation p.badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: rgba(30, 126, 52, 0.10) !important;
    background-color: rgba(30, 126, 52, 0.10) !important;
    color: #1e7e34 !important;
    border: 1px solid rgba(30, 126, 52, 0.30) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 14px 0 0 0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
body.page-order-confirmation .col-md-4 p.badge::before,
body.page-order-confirmation p.badge::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7e34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
body.page-order-confirmation .col-md-4 p.badge *,
body.page-order-confirmation p.badge * {
    color: #1e7e34 !important;
}

/* (2.b) v1.0.95 — Computed "Gesamt (inkl. MwSt.)" row for DOMESTIC B2B.
   It's the ACTIVE row (customer actually pays this, recovers tax later),
   so picks up the standard .trikon-a11y-gesamt-active styling.
   No extra rules needed — the .trikon-a11y-gesamt-active class above
   already handles teal/big/bold styling. */

/* v1.0.128: legacy .trikon-a11y-unit-price element is no longer injected
   (JS now replaces .product-price text directly). The old row-3 placement
   and the price `grid-row: 1 / 4` override are removed so the price stays
   on row 2 next to the quantity (see media-body grid above). */

/* ==========================================================================
   v1.0.92 — Lieferdatum banner: solid green badge style (= Abholung In-Store)
   --------------------------------------------------------------------------
   Was light-tinted (#e8f5ec bg + #1e7e34 text). Now matches the solid
   .product-freeshipping badge: bg #1e7e34 + white text. Same on cart
   page injected banner + checkout summary banner.
   ========================================================================== */
/* v1.0.108: soft tinted green (matches Gratisversand-Banner pattern) */
html body .trikon-a11y-delivery-estimate,
html body .cart-delivery-information,
html body .delivery-information,
html body .estimated-delivery,
html body .cart-grid .alert.alert-info:has(p.h5),
html body .cart-grid-body .alert.alert-info,
html body #js-checkout-summary .trikon-a11y-delivery-estimate,
html body .cart-summary .trikon-a11y-delivery-estimate,
html body#checkout .trikon-a11y-delivery-estimate {
    background: rgba(30, 126, 52, 0.10) !important;
    background-color: rgba(30, 126, 52, 0.10) !important;
    border: 1px solid rgba(30, 126, 52, 0.30) !important;
    color: #1e7e34 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    gap: 8px !important;
}
/* v1.0.108: text color = brand-green #1e7e34 (matches soft tint pattern) */
html body .trikon-a11y-delivery-estimate,
html body .trikon-a11y-delivery-estimate *,
html body .cart-delivery-information,
html body .cart-delivery-information *,
html body .cart-grid-body .alert.alert-info,
html body .cart-grid-body .alert.alert-info *,
html body .cart-grid-body .alert.alert-info p,
html body .cart-grid-body .alert.alert-info p.h5,
html body .cart-grid-body .alert.alert-info p.mb-0,
html body .cart-grid-body .alert.alert-info span,
html body .cart-grid-body .alert.alert-info strong,
html body .cart-grid-body .alert.alert-info i,
html body .cart-grid .alert.alert-info p,
html body .cart-grid .alert.alert-info p.h5,
html body .cart-grid .alert.alert-info span,
html body #js-checkout-summary .trikon-a11y-delivery-estimate,
html body #js-checkout-summary .trikon-a11y-delivery-estimate * {
    color: #1e7e34 !important;
}
html body .trikon-a11y-delivery-estimate a,
html body .cart-delivery-information a,
html body .cart-grid-body .alert.alert-info a {
    color: #1e7e34 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
html body .trikon-a11y-delivery-estimate svg,
html body .trikon-a11y-delivery-estimate i,
html body .cart-grid-body .alert.alert-info svg,
html body .cart-grid-body .alert.alert-info i {
    color: #1e7e34 !important;
    fill: #1e7e34 !important;
}

/* ==========================================================================
   v1.0.90 — Cart unit price: target the INNER .current-price .price span
   --------------------------------------------------------------------------
   v1.0.87 set .product-line-grid-body .product-price weight 500 — but the
   visible price is the INNER <span class="price"> inside .current-price,
   which has its OWN bold 28px from theme via .h5 class on the wrapper.
   Hit the inner span directly + neutralize .h5 effect.
   ========================================================================== */

/* Outer wrapper — kill .h5 visual + ensure NOT bold */
html body .cart-grid-body .product-line-grid-body .product-line-info.product-price,
html body .cart-grid-body .product-line-grid-body .product-price.h5,
html body .cart-grid-body .product-line-grid-body .product-line-info.product-price.h5,
html body .cart-grid-body .product-line-grid-body .product-price.has-discount {
    font-weight: 500 !important;
    color: #6c7479 !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    margin: 4px 0 0 !important;
}

/* INNER span — the actual visible unit price text */
html body .cart-grid-body .product-line-grid-body .product-price .current-price,
html body .cart-grid-body .product-line-grid-body .product-price .current-price .price,
html body .cart-grid-body .product-line-grid-body .product-price span.price,
html body .cart-grid-body .product-line-grid-body .current-price,
html body .cart-grid-body .product-line-grid-body .current-price .price,
html body .cart-grid-body .product-line-grid-body span.price,
html body .cart-grid-body .product-line-grid-body .regular-price {
    font-weight: 500 !important;
    color: #6c7479 !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

/* Line total (right column) — BOLD teal, bigger than unit */
html body .cart-grid-body .product-line-grid-right .product-price,
html body .cart-grid-body .product-line-grid-right .col-md-6.price,
html body .cart-grid-body .product-line-grid-right div.price,
html body .cart-grid-body .product-line-grid-right .row > .price,
html body .cart-grid-body .product-line-grid-right .price,
html body .cart-grid-body .cart-line-product-total,
html body .cart-grid-body .product-line-grid-right .col-md-6 {
    font-weight: 800 !important;
    color: #04697e !important;
    font-size: 1.45rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}
html body .cart-grid-body .product-line-grid-right .col-md-6.price span,
html body .cart-grid-body .product-line-grid-right .price span,
html body .cart-grid-body .product-line-grid-right div.price span {
    font-weight: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* ==========================================================================
   v1.0.96 — Specificity override: "kostenlos" teal on Versand row
   --------------------------------------------------------------------------
   The v1.0.84 rule `body#checkout #cart-subtotal-shipping .value` has spec
   (2,1,1) which beat v1.0.93's `html body .trikon-a11y-free-shipping` (0,1,2).
   Same conflict on order confirmation: general td color rule beat
   .trikon-a11y-free-shipping. Bump compound spec on every shipping context.
   ========================================================================== */

/* CHECKOUT: span.value.trikon-a11y-free-shipping inside shipping row */
html body#checkout #cart-subtotal-shipping .value.trikon-a11y-free-shipping,
html body#checkout #cart-subtotal-shipping span.trikon-a11y-free-shipping,
html body#checkout .cart-summary-line.cart-summary-shipping .value.trikon-a11y-free-shipping,
html body#checkout .cart-summary-line.cart-summary-shipping span.trikon-a11y-free-shipping,
body#checkout #cart-subtotal-shipping span.trikon-a11y-free-shipping,
body#checkout #cart-subtotal-shipping .value.trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}

/* CART: same compound spec */
html body .cart-grid #cart-subtotal-shipping .value.trikon-a11y-free-shipping,
html body .cart-grid #cart-subtotal-shipping span.trikon-a11y-free-shipping,
html body.page-cart #cart-subtotal-shipping .value.trikon-a11y-free-shipping,
html body.page-cart #cart-subtotal-shipping span.trikon-a11y-free-shipping,
body.page-cart #cart-subtotal-shipping span.trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}

/* ORDER CONFIRMATION: td.trikon-a11y-free-shipping in totals table */
html body.page-order-confirmation .order-confirmation-table td.trikon-a11y-free-shipping,
html body.page-order-confirmation .order-confirmation-table table td.trikon-a11y-free-shipping,
html body.page-order-confirmation .order-confirmation-table tr td.trikon-a11y-free-shipping,
body.page-order-confirmation .order-confirmation-table td.trikon-a11y-free-shipping {
    color: #04697e !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   v1.0.99 — impeccable polish pass (product register)
   --------------------------------------------------------------------------
   Workshop Counter aesthetic applied to cart + checkout. Targets the
   accumulated drift from 98 iterative versions:

   1. Flat-At-Rest rule: ZUR KASSE + place-order buttons lose resting shadow,
      shadow appears only on :hover (per DESIGN.md Elevation).
   2. Tinted-neutrals: replace any #ffffff / pure neutrals with paper #fafafa
      and rule #e6e9eb on my v1.0.84+ blocks.
   3. Spacing rhythm: vary the cart-summary line padding so the eye groups
      items (subtotal-cluster, shipping-cluster, totals-cluster) rather than
      reading a flat list.
   4. Stock warning: full-width red alert → calmer amber inline notice
      (cosmetic — preserves screen-reader role=alert).
   5. Checkout step states: clear color hierarchy for -current / -complete /
      -unreachable using only Workshop Teal + tinted neutrals.
   6. Payment-option list: more breathing between options, less within (group
      with proximity, distinguish with whitespace).
   7. Universal interaction transitions: 180ms ease-out on color/bg/border/
      shadow only (DESIGN.md ban on layout-property motion).
   8. prefers-reduced-motion: disable all transitions for that audience.
   9. Focus rings audited everywhere on cart + checkout: 2px Workshop Teal
      outline + 2px offset, never removed without replacement.
   ========================================================================== */

/* ---- (1) Flat-At-Rest: primary CTAs ------------------------------------ */
html body .cart-grid .cart-detailed-actions a.btn,
html body .cart-grid .cart-detailed-actions .btn-primary,
html body .cart-grid a.btn-checkout-trikon {
    box-shadow: none !important;
}
html body .cart-grid .cart-detailed-actions a.btn:hover,
html body .cart-grid a.btn-checkout-trikon:hover {
    box-shadow: 0 4px 14px rgba(4, 105, 126, 0.22) !important;
    transform: none !important;        /* override the v1.0.84 translateY */
}
html body .cart-grid .cart-detailed-actions a.btn:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.18) !important;
}
/* Place-order button on checkout — same flat-at-rest pattern */
html body#checkout #payment-confirmation button {
    box-shadow: none !important;
    transition: background-color 180ms ease-out, border-color 180ms ease-out, box-shadow 200ms ease-out, color 180ms ease-out !important;
}
html body#checkout #payment-confirmation button:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(4, 105, 126, 0.22) !important;
}
html body#checkout #payment-confirmation button:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.18) !important;
}

/* ---- (2) Tinted-neutrals audit: kill any pure white on my surfaces ------ */
html body .cart-grid .promo-code:not(.collapse):not([style*="display: none"]),
html body .cart-grid .promo-code.show,
html body .cart-grid #promo-code:not(.collapse):not([style*="display: none"]),
html body#checkout .promo-code:not(.collapse):not([style*="display: none"]),
html body#checkout .cart-summary .promo-code,
html body#checkout #conditions-to-approve li,
html body#checkout .custom-checkbox.condition-checkbox,
html body.page-order-confirmation .col-md-4 {
    background-color: #fafafa !important;
    border-color: #e6e9eb !important;
}
html body .cart-grid .promo-code input[type="text"],
html body#checkout .promo-code input[type="text"],
html body#checkout input[name="discount_name"] {
    background-color: #ffffff !important;     /* input stays paper-white as affordance */
}

/* ---- (3) Cart summary rhythm: cluster lines, vary padding -------------- */
/* Subtotal cluster (Artikel-Anzahl) — comfortable */
html body .cart-grid .cart-summary-line:not(.cart-total):not(.cart-summary-coupon) {
    padding: 11px 0 !important;
}
/* Voucher-coupon row — slight separator above */
html body .cart-grid .cart-summary-line.cart-summary-coupon {
    padding: 14px 0 11px 0 !important;
    margin-top: 4px !important;
    border-top: 1px dashed #e6e9eb !important;
}
/* Totals cluster — generous breathing */
html body .cart-grid .cart-summary-totals .cart-summary-line:not(.cart-total) {
    padding: 14px 0 !important;
    border-top: 1px solid #e6e9eb !important;
    margin-top: 8px !important;
}
/* Final Gesamt (inkl. MwSt.) — most space, anchor of the rail */
html body .cart-grid .cart-summary-line.cart-total,
html body .cart-grid .cart-total {
    padding: 20px 0 16px 0 !important;
    border-top: 1px solid #e6e9eb !important;
    margin-top: 6px !important;
}

/* Checkout summary — same rhythm pattern */
html body#checkout .cart-summary-line:not(.cart-total) {
    padding: 12px 0 !important;
}
html body#checkout .cart-summary-totals .cart-summary-line:not(.cart-total) {
    padding: 15px 0 !important;
    border-top: 1px solid #e6e9eb !important;
}
html body#checkout .cart-summary-line.cart-total,
html body#checkout .cart-total {
    padding: 22px 0 18px 0 !important;
    border-top: 1px solid #e6e9eb !important;
    margin-top: 6px !important;
}

/* ---- (4) Stock warning: calm to amber, less alarming ------------------- */
html body .cart-grid .alert.alert-warning,
html body .cart-grid-body .alert.alert-warning,
html body.page-cart > .alert.alert-warning {
    background: rgba(138, 101, 0, 0.06) !important;
    border: 1px solid rgba(138, 101, 0, 0.25) !important;
    color: #8a6500 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
    margin: 12px 0 !important;
}
/* Stock-warning icon (if theme renders one) inherits the amber */
html body .cart-grid .alert.alert-warning svg,
html body .cart-grid .alert.alert-warning i,
html body.page-cart > .alert.alert-warning svg {
    color: #8a6500 !important;
    fill: #8a6500 !important;
}

/* ---- (5) Checkout step states: clear hierarchy ------------------------- */
/* Step header: structural baseline */
html body#checkout .checkout-step {
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    overflow: hidden;
    transition: border-color 180ms ease-out, box-shadow 200ms ease-out !important;
}
html body#checkout .checkout-step .step-title,
html body#checkout .checkout-step > h1.step-title,
html body#checkout .checkout-step > h2.step-title {
    padding: 16px 20px !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #14222a !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
/* Current step — teal anchor */
html body#checkout .checkout-step.-current {
    border-color: #04697e !important;
    box-shadow: 0 1px 4px rgba(4, 105, 126, 0.08) !important;
}
html body#checkout .checkout-step.-current .step-title {
    color: #04697e !important;
}
/* Complete step — muted but legible */
html body#checkout .checkout-step.-complete .step-title {
    color: #6c7479 !important;
}
html body#checkout .checkout-step.-complete .step-edit {
    color: #04697e !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}
/* Unreachable step — most muted */
html body#checkout .checkout-step.-unreachable .step-title {
    color: #b6bbbe !important;
}
html body#checkout .checkout-step.-unreachable {
    opacity: 0.65;
}
/* Step number circle (PS-rendered) — teal when current/complete */
html body#checkout .checkout-step.-current .step-number,
html body#checkout .checkout-step.-complete .step-number {
    background: #04697e !important;
    color: #fafafa !important;
}

/* ---- (6) Payment-option list rhythm ------------------------------------ */
html body#checkout .payment-options {
    display: flex !important;
    flex-direction: column !important;
    /* v1.0.130: theme/ps_checkout sets align-items:center → each option became
       content-width (~534px) and horizontally centered. Stretch to full width
       so it reads as a proper left-aligned list. */
    align-items: stretch !important;
    gap: 12px !important;
}
/* v1.0.130: ps_checkout wraps each option in an unclassed <div> (flex:0 1 auto)
   that stayed content-sized; force the wrapper + option to fill the row. */
html body#checkout .payment-options > div,
html body#checkout .payment-option {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}
html body#checkout .payment-option label {
    justify-content: flex-start !important;
    text-align: left !important;
}
html body#checkout .payment-option {
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    transition: border-color 180ms ease-out, background-color 180ms ease-out !important;
    cursor: pointer;
}
html body#checkout .payment-option:hover {
    border-color: rgba(4, 105, 126, 0.4) !important;
    background: rgba(4, 105, 126, 0.02) !important;
}
html body#checkout .payment-option:has(input[type="radio"]:checked) {
    border-color: #04697e !important;
    background: rgba(4, 105, 126, 0.04) !important;
    box-shadow: 0 0 0 1px #04697e !important;
}
html body#checkout .payment-option label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    cursor: pointer;
    font-size: 0.95rem !important;
    color: #14222a !important;
    line-height: 1.4 !important;
}
html body#checkout .payment-option input[type="radio"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #04697e !important;
    margin: 0 !important;
}

/* ---- (7) Universal interaction transitions (180-220ms ease-out) -------- */
html body .cart-grid a.btn,
html body .cart-grid button,
html body#checkout a.btn,
html body#checkout button:not(.bt_compare),
html body#checkout .payment-option,
html body#checkout .checkout-step,
html body .cart-grid .promo-code-button,
html body#checkout .promo-code-button {
    transition:
        color 180ms ease-out,
        background-color 180ms ease-out,
        border-color 180ms ease-out,
        box-shadow 220ms ease-out !important;
}

/* ---- (8) prefers-reduced-motion: kill transitions for that audience ---- */
@media (prefers-reduced-motion: reduce) {
    html body .cart-grid *,
    html body#checkout *,
    html body.page-order-confirmation * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- (9) Focus rings: complete audit on cart + checkout ---------------- */
html body .cart-grid input[type="text"]:focus-visible,
html body .cart-grid input[type="number"]:focus-visible,
html body .cart-grid .bootstrap-touchspin input:focus-visible,
html body#checkout input[type="text"]:focus-visible,
html body#checkout input[type="email"]:focus-visible,
html body#checkout input[type="tel"]:focus-visible,
html body#checkout select:focus-visible,
html body#checkout textarea:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.18) !important;
    border-color: #04697e !important;
}
html body .cart-grid .bootstrap-touchspin button:focus-visible,
html body .cart-grid .cart-line-product-actions a:focus-visible,
html body .cart-grid .remove-from-cart:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
html body#checkout .payment-option:focus-within {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
}

/* ---- (10) Stage detail: cart row gap rhythm ---------------------------- */
/* Image column gets less right-margin; body column breathes; right column
   tightens. The flat-flex layout from v1.0.82 was monotone-gap (18px); vary it. */
html body .cart-grid-body .product-line-grid {
    gap: 22px !important;        /* outer rhythm */
}
html body .cart-grid-body .product-line-grid-right,
html body .cart-grid-body .product-line-grid-right > .row,
html body .cart-grid-body .product-line-grid-right .col-md-10,
html body .cart-grid-body .product-line-grid-right .col-md-10 > .row,
html body .cart-grid-body .product-line-grid-right .col-md-2 {
    gap: 14px !important;        /* inner rhythm: qty stepper feels grouped with total */
}
/* Cart row vertical breathing: between items */
html body .cart-grid-body .cart-item {
    padding: 24px 0 !important;
    border-bottom: 1px solid #e6e9eb !important;
}
html body .cart-grid-body .cart-item:last-child {
    border-bottom: none !important;
}

/* ---- (11) Checkout summary product list: row hover + scannable -------- */
html body#checkout .cart-summary-products .media,
html body#checkout .cart-summary-products li.media {
    border-radius: 6px !important;
    padding: 14px 8px !important;
    margin: 0 -8px !important;       /* negative margin makes hover bg extend visually */
    transition: background-color 180ms ease-out !important;
}
html body#checkout .cart-summary-products .media:hover {
    background: rgba(4, 105, 126, 0.025) !important;
}
html body#checkout .cart-summary-products .media + .media {
    margin-top: 2px !important;
    border-top: 1px solid #f0f1f2 !important;
    border-radius: 0 !important;
}
html body#checkout .cart-summary-products .media:last-child {
    border-radius: 6px !important;
}

/* v1.0.131: removed dead .trikon-a11y-unit-price rule — JS no longer injects
   that element (it replaces .product-price text directly). */

/* ---- (12) "100% secure payments" microcopy below ZUR KASSE: calmer ---- */
html body .cart-grid .cart-summary p.text-muted,
html body .cart-grid .cart-summary .text-muted,
html body .cart-grid .cart-summary [class*="secure-payment"] {
    font-size: 0.78rem !important;
    color: #6c7479 !important;
    margin-top: 10px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
}
html body .cart-grid .cart-summary .payment-icons img,
html body .cart-grid .cart-summary [class*="payment-method"] img {
    opacity: 0.7;
    filter: grayscale(20%);
    transition: opacity 180ms ease-out, filter 180ms ease-out !important;
}
html body .cart-grid .cart-summary .payment-icons img:hover {
    opacity: 1;
    filter: none;
}

/* ---- (13) Voucher toggle hover: subtle teal-tint reveal --------------- */
html body .cart-grid .promo-code-button,
html body#checkout .promo-code-button {
    border-radius: 4px !important;
    margin: 4px -6px !important;
    padding: 6px 6px !important;
}
html body .cart-grid .promo-code-button:hover,
html body#checkout .promo-code-button:hover {
    background: rgba(4, 105, 126, 0.05) !important;
}

/* ---- (14) AGB checkbox: slight refinement ----------------------------- */
html body#checkout #conditions-to-approve li {
    background-color: #fafafa !important;
    padding: 16px 18px !important;
    transition: border-color 180ms ease-out, background-color 180ms ease-out !important;
}
html body#checkout #conditions-to-approve li:hover {
    border-color: rgba(4, 105, 126, 0.4) !important;
}
html body#checkout #conditions-to-approve li:has(input[type="checkbox"]:checked) {
    border-color: rgba(4, 105, 126, 0.5) !important;
    background-color: rgba(4, 105, 126, 0.03) !important;
}
html body#checkout #conditions-to-approve label a {
    color: #04697e !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
}

/* ---- (15) Cart product image: subtle hover treatment ------------------ */
html body .cart-grid-body .product-line-grid-left img,
html body .cart-grid-body .product-image img {
    transition: opacity 180ms ease-out !important;
}
html body .cart-grid-body .product-line-grid-left:hover img {
    opacity: 0.92;
}

/* ---- (16) Step "Weiter" continue button — match primary treatment ---- */
html body#checkout .checkout-step button.continue,
html body#checkout .checkout-step button[type="submit"].btn-primary {
    box-shadow: none !important;
}
html body#checkout .checkout-step button.continue:hover,
html body#checkout .checkout-step button[type="submit"].btn-primary:hover {
    box-shadow: 0 3px 10px rgba(4, 105, 126, 0.18) !important;
}

/* ==========================================================================
   v1.0.101 — Tax-display logic per customer type
   --------------------------------------------------------------------------
   Body classes added by applyB2BTaxDisplay():
     .trikon-a11y-b2c           → no changes (PS native behavior)
     .trikon-a11y-b2b-domestic  → product prices converted to NET via JS,
                                  both totals visible, "inkl. MwSt." active
     .trikon-a11y-b2b-foreign   → hide "Gesamt (inkl. MwSt.)" row entirely
                                  (= "Gesamt o. MwSt." anyway, redundant),
                                  promote "o. MwSt." to be the active total
   ========================================================================== */

/* B2B FOREIGN: hide the "Gesamt (inkl. MwSt.)" line — same value as net */
html body.trikon-a11y-b2b-foreign .cart-summary-line.cart-total,
html body.trikon-a11y-b2b-foreign .cart-total {
    display: none !important;
}
/* Promote "Gesamt o. MwSt." to be the prominent total */
html body.trikon-a11y-b2b-foreign .cart-summary-totals .cart-summary-line {
    padding: 20px 0 16px 0 !important;
    border-top: 1px solid #e6e9eb !important;
    margin-top: 6px !important;
    font-size: 1.1rem !important;
}
html body.trikon-a11y-b2b-foreign .cart-summary-totals .cart-summary-line .label,
html body.trikon-a11y-b2b-foreign .cart-summary-totals .cart-summary-line span:first-child {
    font-weight: 700 !important;
    color: #04697e !important;
    font-size: 1.1rem !important;
}
html body.trikon-a11y-b2b-foreign .cart-summary-totals .cart-summary-line .value,
html body.trikon-a11y-b2b-foreign .cart-summary-totals .cart-summary-line span:last-child {
    font-weight: 800 !important;
    color: #04697e !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
}

/* B2B DOMESTIC: net prices marker on converted product prices */
html body.trikon-a11y-b2b-domestic [data-trikon-net-applied="1"] {
    cursor: help;
}
html body.trikon-a11y-b2b-domestic [data-trikon-net-applied="1"]::after {
    content: "*";
    color: #6c7479;
    font-size: 0.65em;
    vertical-align: super;
    margin-left: 2px;
    font-weight: 400;
}
/* Footnote at bottom of summary explaining the asterisk */
html body.trikon-a11y-b2b-domestic .cart-summary::after,
html body.trikon-a11y-b2b-domestic #js-checkout-summary::after {
    content: "* Preise ohne MwSt. — Endbetrag inkl. MwSt. unten";
    display: block;
    font-size: 0.78rem;
    color: #6c7479;
    margin-top: 12px;
    font-style: italic;
    line-height: 1.4;
}

/* B2B (any): subtle indicator on the page title that we're in B2B mode */
html body.trikon-a11y-b2b-foreign .cart-summary-products::before,
html body.trikon-a11y-b2b-domestic .cart-summary-products::before {
    content: "Geschäftskunde, Nettopreise";
    display: block;
    font-size: 0.75rem;
    color: #04697e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e9eb;
}

/* ==========================================================================
   v1.0.103 — Checkout summary: explicit "Einzelpreis:" label on unit price
   --------------------------------------------------------------------------
   PS-native rendering shows "x3" + "3,00 €" — the customer has to infer
   that 3,00 € is the unit price. Now explicit: "Einzelpreis: 3,00 €".
   Pairs with JS-injected "Gesamt: X,XX €" line (only for qty >= 2).
   Per-language via :lang() selector.
   ========================================================================== */
/* v1.0.117 — Removed v1.0.103/v1.0.104 "Einzelpreis: " pseudo-label.
   Price element now shows LINE TOTAL directly (= unit when qty=1, = qty×unit
   when qty>1). No prefix needed — qty="x3" + price="9,00 €" speaks for itself. */
body#checkout .cart-summary-products .product-price.float-xs-right::before,
body#checkout .cart-summary-products span.product-price::before {
    content: none !important;
}

/* ==========================================================================
   v1.0.106 — MOBILE + A11y comprehensive audit fixes
   --------------------------------------------------------------------------
   Findings from 500px viewport audit on cart + checkout:

   1. Cart row v1.0.82 flat-flex broke on <768px: line-total overflowed under
      qty stepper, trash icon clipped, horizontal scroll present
   2. Strikethrough discount price wrapped under qty stepper at narrow viewport
   3. Image+name column took ≥60% width forcing other cells off-screen
   4. ZUR KASSE + summary right rail OK (PS stacks them automatically)
   5. Touch targets: qty stepper buttons were 31×31, trash icon 24px — below
      WCAG 2.1 AA target-size minimum (24×24) and WCAG 2.2 enhanced (44×44)

   This block applies progressive mobile layout in 3 breakpoints:
   - ≤768px (tablet): cart row 2-column grid (image+info | actions)
   - ≤575px (phone landscape): cart row stacks 3 rows (image+name, price, actions)
   - ≤375px (phone portrait): tighter sizes, larger touch targets

   Plus a11y additions:
   - All interactive controls ≥44×44px on touch devices via @media (hover: none)
   - Visible focus indicators on every cart/checkout interactive element
   - Form-field labels properly associated (verified existing)
   - prefers-reduced-motion respected (already in v1.0.99, extended)
   ========================================================================== */

/* ---- (1) v1.0.116 Cart row mobile: proper 2-column GRID with areas --- */
/* Layout:
     [ image  ] [ body (name + unit price + strikethrough + discount) ]
     [ actions actions actions ]
   Actions row spans full width and contains qty stepper LEFT, line total
   MIDDLE, trash RIGHT — distributed via flex justify-content: space-between.
*/
@media (max-width: 768px) {
    html body .cart-grid-body .product-line-grid {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "image body"
            "actions actions" !important;
        gap: 14px 14px !important;
        padding: 18px 14px !important;
        align-items: start !important;
        flex-wrap: initial !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    /* IMAGE — grid col 1 row 1, no float (broke layout) */
    html body .cart-grid-body .product-line-grid-left {
        grid-area: image !important;
        float: none !important;       /* override v1.0.106 float */
        width: 80px !important;
        height: auto !important;
        max-width: 80px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: initial !important;
    }
    /* v1.0.128: border ONLY the img, not also the .product-image wrapper —
       bordering both produced a double frame on mobile. */
    html body .cart-grid-body .product-line-grid-left img,
    html body .cart-grid-body .product-line-grid-left .product-image img {
        width: 80px !important;
        height: 80px !important;
        object-fit: contain !important;
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #e6e9eb !important;
        border-radius: 6px !important;
    }
    html body .cart-grid-body .product-line-grid-left .product-image {
        width: 80px !important;
        height: 80px !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
    /* BODY — grid col 2 row 1 (name + price + strikethrough + discount) */
    html body .cart-grid-body .product-line-grid-body {
        grid-area: body !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        padding: 0 !important;
        flex: initial !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    /* v1.0.119: Single flex container, intermediate Bootstrap cols
       become display: contents so qty/total/trash are flat siblings */
    html body .cart-grid-body .product-line-grid-right {
        grid-area: actions !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: initial !important;
    }
    /* Bootstrap intermediate wrappers transparent → children float up */
    html body .cart-grid-body .product-line-grid-right > .row,
    html body .cart-grid-body .product-line-grid-right .col-md-10,
    html body .cart-grid-body .product-line-grid-right .col-md-10 > .row,
    html body .cart-grid-body .product-line-grid-right .col-xs-10 {
        display: contents !important;
    }
    /* Qty stepper LEFT (col-md-6.qty becomes direct flex child) */
    html body .cart-grid-body .product-line-grid-right .col-md-6.qty,
    html body .cart-grid-body .product-line-grid-right .col-xs-6.qty,
    html body .cart-grid-body .product-line-grid-right .cart-line-product-quantity,
    html body .cart-grid-body .product-line-grid-right .bootstrap-touchspin {
        flex: 0 0 auto !important;
        order: 1 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Line total MIDDLE — grow + right-align */
    html body .cart-grid-body .product-line-grid-right .col-md-6.price,
    html body .cart-grid-body .product-line-grid-right .col-xs-6.price,
    html body .cart-grid-body .product-line-grid-right .col-md-6.col-xs-2.price {
        flex: 1 1 auto !important;
        order: 2 !important;
        font-size: 1.2rem !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        white-space: nowrap !important;
        font-weight: 800 !important;
        color: #04697e !important;
    }
    /* Trash RIGHT (col-md-2 becomes direct flex child) */
    html body .cart-grid-body .product-line-grid-right .col-md-2,
    html body .cart-grid-body .product-line-grid-right .col-xs-2,
    html body .cart-grid-body .product-line-grid-right .col-md-2.cart-line-product-actions {
        flex: 0 0 auto !important;
        order: 3 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    html body .cart-grid-body .product-line-grid-right .remove-from-cart,
    html body .cart-grid-body .product-line-grid-right .cart-line-product-actions a {
        flex: 0 0 auto !important;
    }
    /* Name wraps cleanly */
    html body .cart-grid-body .product-line-grid-body .product-line-info.product-title,
    html body .cart-grid-body .product-line-grid-body .product-title,
    html body .cart-grid-body .product-line-grid-body h3 {
        font-size: 1rem !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
        color: #14222a !important;
    }
    /* Unit price + strikethrough + discount badge inline beneath name */
    html body .cart-grid-body .product-line-grid-body .product-line-info.product-price,
    html body .cart-grid-body .product-line-grid-body .product-price.h5,
    html body .cart-grid-body .product-line-grid-body .current-price,
    html body .cart-grid-body .product-line-grid-body .regular-price,
    html body .cart-grid-body .product-line-grid-body .discount {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 6px 0 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }
    /* Cart-row container vertical separator + breathing */
    html body .cart-grid-body .cart-item {
        padding: 14px 0 !important;
        border-bottom: 1px solid #e6e9eb !important;
    }
}

/* ---- (2) Tighter for ≤ 575px ------------------------------------------- */
@media (max-width: 575px) {
    /* Cart row: image inline-left, name+price body, actions row below */
    html body .cart-grid-body .product-line-grid {
        padding: 14px 10px !important;
        gap: 12px !important;
    }
    html body .cart-grid-body .product-line-grid-left {
        flex: 0 0 64px !important;
        width: 64px !important;
        max-width: 64px !important;
    }
    html body .cart-grid-body .product-line-grid-left img,
    html body .cart-grid-body .product-line-grid-left .product-image img {
        width: 64px !important;
        height: 64px !important;
    }
    html body .cart-grid-body .product-line-grid-right .price,
    html body .cart-grid-body .product-line-grid-right .product-price {
        font-size: 1.15rem !important;
        min-width: auto !important;
    }
    /* Summary right rail: full width on mobile */
    html body .cart-grid .cart-summary,
    html body .cart-grid #js-checkout-summary {
        padding: 16px 14px !important;
    }
    /* ZUR KASSE keeps full width via existing rule */
}

/* ---- (3) Phone portrait ≤ 375px ---------------------------------------- */
@media (max-width: 375px) {
    /* Tighter qty stepper */
    html body .cart-grid-body .bootstrap-touchspin input[type="text"],
    html body .cart-grid-body .bootstrap-touchspin input[type="number"] {
        width: 36px !important;
        text-align: center !important;
    }
    html body .cart-grid-body .bootstrap-touchspin .input-group-btn-vertical,
    html body .cart-grid-body .bootstrap-touchspin .btn {
        min-width: 32px !important;
    }
    /* Hide breadcrumb on cart on very narrow */
    body.page-cart .breadcrumb,
    body#checkout .breadcrumb {
        display: none !important;
    }
}

/* ---- (4) Touch targets: ≥44×44 on touch devices ------------------------ */
@media (hover: none) and (pointer: coarse) {
    /* Qty stepper buttons */
    html body .cart-grid-body .bootstrap-touchspin .btn,
    html body .cart-grid-body .bootstrap-touchspin button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Trash / remove icon */
    html body .cart-grid-body .remove-from-cart,
    html body .cart-grid-body .cart-line-product-actions a,
    html body .cart-grid-body .cart-line-product-actions {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    /* Voucher toggle */
    html body .cart-grid .promo-code-button,
    html body#checkout .promo-code-button {
        min-height: 44px !important;
        padding: 12px 8px !important;
    }
    /* Continue/edit step buttons */
    html body#checkout .step-edit,
    html body#checkout button.continue,
    html body#checkout .checkout-step button[type="submit"] {
        min-height: 44px !important;
    }
    /* Quantity input itself */
    html body .cart-grid-body .bootstrap-touchspin input {
        min-height: 44px !important;
    }
    /* Payment options */
    html body#checkout .payment-option {
        min-height: 56px !important;
    }
    /* Radio buttons + checkboxes */
    html body#checkout input[type="radio"],
    html body#checkout input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        margin: 0 8px 0 0 !important;
    }
}

/* ---- (5) Checkout mobile: step cards full-width ------------------------ */
@media (max-width: 768px) {
    html body#checkout .checkout-step {
        margin-bottom: 12px !important;
    }
    html body#checkout .checkout-step .step-title {
        padding: 14px 16px !important;
        font-size: 1rem !important;
    }
    /* Step number circles slightly smaller */
    html body#checkout .checkout-step .step-number {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.85rem !important;
    }
    /* Address cards: stack vertically on mobile */
    html body#checkout .address-item,
    html body#checkout .js-address {
        margin-bottom: 12px !important;
    }
    /* Voucher form: input + button stack on narrow */
    html body#checkout .promo-code form,
    html body .cart-grid .promo-code form {
        flex-wrap: wrap !important;
    }
    html body#checkout .promo-code input[type="text"],
    html body .cart-grid .promo-code input[type="text"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    html body#checkout .promo-code button,
    html body .cart-grid .promo-code button {
        flex: 1 1 100% !important;
        margin-top: 8px !important;
    }
    /* Summary right rail full width on mobile */
    html body#checkout #js-checkout-summary,
    html body#checkout .cart-summary {
        position: static !important;
        margin-top: 16px !important;
    }
}

/* ---- (6) Bestellbestätigung mobile ------------------------------------ */
@media (max-width: 768px) {
    html body.page-order-confirmation #content.page-content {
        padding: 18px 14px !important;
    }
    html body.page-order-confirmation .confirmation-message,
    html body.page-order-confirmation h3#order-confirmation-h3 {
        font-size: 1.25rem !important;
        padding: 14px 16px !important;
    }
    html body.page-order-confirmation .order-line.row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 14px 0 !important;
        gap: 12px !important;
    }
    html body.page-order-confirmation .order-line .col-sm-2,
    html body.page-order-confirmation .order-line .col-xs-3 {
        flex: 0 0 60px !important;
        max-width: 60px !important;
    }
    html body.page-order-confirmation .order-line .details {
        flex: 1 1 auto !important;
        min-width: 0;
        word-break: normal;
    }
    html body.page-order-confirmation .order-line .qty {
        flex: 1 1 100% !important;
    }
    html body.page-order-confirmation .col-md-4 {
        margin-top: 18px !important;
        padding: 18px 14px !important;
    }
    /* Totals table mobile padding */
    html body.page-order-confirmation .order-confirmation-table table td {
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-gesamt-active td {
        font-size: 1.2rem !important;
        padding: 16px 14px !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-gesamt-active td:last-child {
        font-size: 1.35rem !important;
    }
}

/* ---- (7) Kill horizontal overflow ------------------------------------- */
html body.page-cart,
html body#checkout,
html body.page-order-confirmation {
    overflow-x: hidden !important;
}
html body.page-cart .cart-grid,
html body.page-cart .cart-grid-body,
html body#checkout .cart-summary-products,
html body#checkout .checkout-step,
html body.page-order-confirmation .order-confirmation-table {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    /* Force narrow-friendly container behavior */
    html body .container,
    html body .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }
}

/* ---- (8) A11y: ensure focus rings visible on all interactive elements -- */
html body.page-cart a:focus-visible,
html body.page-cart button:focus-visible,
html body.page-cart input:focus-visible,
html body.page-cart select:focus-visible,
html body#checkout a:focus-visible,
html body#checkout button:focus-visible,
html body#checkout input:focus-visible,
html body#checkout select:focus-visible,
html body.page-order-confirmation a:focus-visible,
html body.page-order-confirmation button:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(4, 105, 126, 0.18) !important;
    border-radius: 4px;
}

/* ---- (9) Skip-link: ensure visible on focus -------------------------- */
html body .skip-link,
html body .skip-to-content,
html body a[href="#content"]:first-child,
html body a[href="#main"]:first-child {
    position: absolute !important;
    top: -100px;
    left: 0;
    background: #04697e !important;
    color: #fafafa !important;
    padding: 12px 18px !important;
    border-radius: 0 0 6px 0 !important;
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
}
html body .skip-link:focus,
html body .skip-link:focus-visible,
html body .skip-to-content:focus {
    top: 0 !important;
    outline: 3px solid #fafafa !important;
    outline-offset: -3px !important;
}

/* ---- (10) Form labels & error messages: WCAG 2.1 baseline ------------ */
html body#checkout .form-group label,
html body#checkout label.required::after {
    color: #14222a;
}
html body#checkout .form-group .form-control-comment,
html body#checkout .form-group small,
html body#checkout .help-block {
    color: #6c7479 !important;
    font-size: 0.85rem !important;
    margin-top: 4px;
}
/* Required-field asterisk: amber not pure red */
html body#checkout label.required::after,
html body#checkout .form-group .required::after {
    content: " *";
    color: #8a6500 !important;
    font-weight: 600;
}
/* Error state: signal-red but with sufficient contrast */
html body#checkout .form-group.has-error label,
html body#checkout .form-group.has-error .form-control-label,
html body#checkout .form-group .text-danger,
html body#checkout .help-block.text-danger {
    color: #b3261e !important;
}
html body#checkout .form-group.has-error input,
html body#checkout .form-group.has-error select,
html body#checkout .form-group.has-error textarea {
    border-color: #b3261e !important;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12) !important;
}

/* ---- (11) prefers-reduced-motion: extend beyond v1.0.99 ------------- */
@media (prefers-reduced-motion: reduce) {
    html body *,
    html body *::before,
    html body *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- (12) Print stylesheet for confirmation page ------------------- */
@media print {
    html body.page-order-confirmation .order-confirmation-actions,
    html body.page-order-confirmation #_iub_cs_activate,
    html body.page-order-confirmation header,
    html body.page-order-confirmation footer,
    html body.page-order-confirmation #blockcart-modal,
    html body.page-order-confirmation .navbar {
        display: none !important;
    }
    html body.page-order-confirmation {
        background: #ffffff !important;
        color: #000 !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-gesamt-active td {
        color: #000 !important;
        background: transparent !important;
    }
}

/* ==========================================================================
   v1.0.111 — Registration form polish
   --------------------------------------------------------------------------
   1. Hide "Ape" field (irrelevant for non-FR/IT companies anyway)
   2. Hide the empty honeypot form-group (only "Optional" text visible)
   3. Move "(Optional)" inline next to label (JS adds .trikon-a11y-opt span)
   4. Hide the original .form-control-comment column (now redundant)
   ========================================================================== */

/* (1) + (2) Hide Ape + Honeypot rows entirely */
.page-authentication .form-group:has(input[name="lpsproaccount_ape"]),
.page-authentication .form-group:has(input[name="lpsproaccount_honeypot"]),
.page-customer-account .form-group:has(input[name="lpsproaccount_ape"]),
.page-customer-account .form-group:has(input[name="lpsproaccount_honeypot"]),
form .form-group:has(input[name="lpsproaccount_ape"]),
form .form-group:has(input[name="lpsproaccount_honeypot"]) {
    display: none !important;
}

/* (3) Inline "(Optional)" tag next to label — JS-added span */
.trikon-a11y-opt {
    display: inline !important;
    color: #6c7479 !important;
    font-size: 0.85em !important;
    font-weight: 400 !important;
    margin-left: 6px !important;
    font-style: italic;
}

/* (4) Hide the original col-md-3 "Optional" comment now we moved it */
form .form-group .form-control-comment[data-trikon-optional-moved="1"] {
    display: none !important;
}

/* Polish: required-Asterisk inline at label */
form .form-group label .trikon-a11y-required-mark {
    color: #8a6500 !important;
    margin-left: 4px;
    font-weight: 600;
}

/* v1.0.115: Hide form-group with !important so theme/Bootstrap can't override */
html body form .form-group.trikon-a11y-hidden-field {
    display: none !important;
}

/* v1.0.120 — DEFENSIVE: ensure checkout summary product prices ALWAYS
   visible (overflow:hidden + grid layout was hiding them on narrow mobile) */
html body#checkout .cart-summary-products .media-body {
    overflow: visible !important;
}
html body#checkout .cart-summary-products .product-price,
html body#checkout .cart-summary-products .product-price.float-xs-right,
html body#checkout .cart-summary-products .media-body .product-price,
html body#checkout .cart-summary-products span.product-price {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #04697e !important;
    font-weight: 800 !important;
    min-width: 60px !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;
    position: static !important;
}

/* v1.0.125 — Hide idxcodfees COD-fee line (actual ID is #idxcodfees-feerow,
   not what I guessed). JS-applied class .trikon-a11y-cod-hidden wins over
   v1.0.84 .cart-summary-line { display: flex !important }. */
body#checkout #idxcodfees-feerow,
body#checkout .cart-summary-line#idxcodfees-feerow,
body#checkout .cart-summary-line.trikon-a11y-cod-hidden,
body#checkout .cart-summary-line[data-trikon-cod-hidden="1"],
body#checkout .cart-summary-line#cart-summary-line-idxcodfees,
body#checkout .cart-summary-line[data-id="idxcodfees-fee"],
body#checkout .cart-summary-line.cart-summary-cod-fee {
    display: none !important;
}

/* v1.0.122 — Fixed v1.0.121 broken selector chain (had double "body
   body#checkout" which can't match in valid HTML). Now uses simple
   `body#checkout` form so the rule actually applies. */
body#checkout .alert.alert-info.accept-cgv,
body#checkout p.accept-cgv,
body#checkout p.alert.accept-cgv,
body#checkout .js-payment-binary .alert.alert-info.accept-cgv,
body#checkout .js-payment-binary p.accept-cgv,
body#checkout .payment-options .alert.alert-info.accept-cgv,
body#checkout .payment-options p.accept-cgv,
html .alert.alert-info.accept-cgv,
html p.accept-cgv {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* v1.0.120 — AGGRESSIVE blue-square removal: any visible empty box in
   payment area + any element with bright blue background or known PayPal
   placeholder selectors. */
html body#checkout .payment-options *[style*="background-color: blue"],
html body#checkout .payment-options *[style*="background: blue"],
html body#checkout .payment-options *[style*="rgb(0, 0, 255)"],
html body#checkout .payment-options *[style*="#00f"],
html body#checkout .payment-options *[style*="#0000ff"],
html body#checkout #checkout-payment-step *[style*="background-color: blue"],
html body#checkout #checkout-payment-step *[style*="background: blue"] {
    display: none !important;
}
/* Any direct div with class containing 'paypal-buttons' or 'zoid' before render */
html body#checkout .payment-options > .zoid-outlet:empty,
html body#checkout .payment-options > div[class*="paypal-buttons"]:empty,
html body#checkout .payment-options > .paypal-button-container:empty {
    display: none !important;
}
/* Last-resort: any element with computed blue colors and no children */
html body#checkout .payment-options input[type="button"][value=""],
html body#checkout .payment-options input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="text"]):not([type="email"]):not([type="password"]):not([type="tel"]):not([type="search"]) {
    display: none !important;
}

/* v1.0.120 — Mobile order confirmation totals: prevent label/value truncation */
@media (max-width: 768px) {
    html body.page-order-confirmation .order-confirmation-table table {
        table-layout: fixed !important;
    }
    html body.page-order-confirmation .order-confirmation-table td {
        padding: 12px 12px !important;
        word-break: break-word !important;
    }
    html body.page-order-confirmation .order-confirmation-table td:first-child {
        font-size: 0.92rem !important;
        width: 60% !important;
    }
    html body.page-order-confirmation .order-confirmation-table td:last-child {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        width: 40% !important;
        padding-left: 4px !important;
        padding-right: 12px !important;
    }
    /* Subtotal mobile */
    html body.page-order-confirmation tr.trikon-a11y-subtotal-row td {
        font-size: 1.02rem !important;
        padding: 14px 12px !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-subtotal-row td:last-child {
        font-size: 1.08rem !important;
    }
    /* Gesamt active mobile — smaller fonts, no wrap, fit viewport */
    html body.page-order-confirmation tr.trikon-a11y-gesamt-active td {
        font-size: 1.08rem !important;
        padding: 16px 12px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        word-break: keep-all !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-gesamt-active td:first-child {
        font-weight: 700 !important;
        text-transform: none !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-gesamt-active td:last-child {
        font-size: 1.25rem !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
    }
    /* Inactive Gesamt mobile */
    html body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td,
    html body.page-order-confirmation tr.trikon-a11y-gesamt-computed td {
        font-size: 0.92rem !important;
        padding: 12px 12px !important;
    }
    html body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td:last-child,
    html body.page-order-confirmation tr.trikon-a11y-gesamt-computed td:last-child {
        font-size: 0.98rem !important;
    }
}

/* v1.0.128 — Blue square is a PayPal Smart Button container (#0070ba)
   rendered inside a NON-selected (display:none) payment binary that some
   mobile reflow un-collapses. Force-hide PayPal SDK button containers that
   live inside a hidden/ps-hidden binary or a non-checked payment option. */
body#checkout .js-payment-binary.ps-hidden,
body#checkout .js-payment-binary[style*="display: none"],
body#checkout .js-payment-binary[style*="display:none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
body#checkout .js-payment-option-form.ps-hidden .paypal-buttons,
body#checkout .js-payment-option-form.ps-hidden [class*="paypal-button"],
body#checkout .js-payment-option-form.ps-hidden .zoid-outlet,
body#checkout .ps-hidden .paypal-buttons,
body#checkout .ps-hidden [id^="zoid-"],
body#checkout .ps-hidden .zoid-outlet {
    display: none !important;
    visibility: hidden !important;
}

/* v1.0.119 — Payment options: hide blue placeholder squares from PayPal
   Smart Button container before its iframe renders. Caused by browser
   default <input> blue or empty .js-payment-binary outer divs. */
html body#checkout .js-payment-binary {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body#checkout .js-payment-binary > div:empty,
html body#checkout .js-payment-binary > span:empty,
html body#checkout .js-payment-binary:empty {
    display: none !important;
}
html body#checkout .js-payment-binary iframe {
    background: transparent !important;
    border: none !important;
}
/* PayPal Smart Button container reset (zoid-outlet is the PayPal SDK iframe wrap) */
html body#checkout .zoid-outlet,
html body#checkout div[id*="paypal-button"],
html body#checkout div[class*="paypal-button"] {
    background: transparent !important;
    background-color: transparent !important;
}
/* Generic catch — any element with a hardcoded blue background inside payment area */
html body#checkout .payment-options input[type="color"],
html body#checkout .payment-options input[type="button"]:not([class*="btn-"]) {
    display: none !important;
}

/* v1.0.118 — Carrier-error helper box */
.trikon-a11y-carrier-help {
    margin: 12px 0 4px 0 !important;
    padding: 14px 16px !important;
    background: #fafafa !important;
    border: 1px solid #e6e9eb !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.trikon-a11y-carrier-help-text {
    margin: 0 !important;
    padding: 0 !important;
    color: #14222a !important;
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}
.trikon-a11y-go-to-addresses {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #04697e !important;
    color: #fafafa !important;
    border: 1px solid #04697e !important;
    padding: 11px 20px !important;
    border-radius: 8px !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: background-color 180ms ease-out !important;
    min-height: 44px;
}
.trikon-a11y-go-to-addresses:hover {
    background: #035566 !important;
    border-color: #035566 !important;
}
.trikon-a11y-go-to-addresses:focus-visible {
    outline: 2px solid #04697e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(4, 105, 126, 0.18) !important;
}

/* ==========================================================================
   v1.0.126 — Mobile order-confirmation totals: STOP TRUNCATION
   --------------------------------------------------------------------------
   The v1.0.120 mobile rules used a broken "html body.page-order-
   confirmation" selector (doubled <body>) so they never applied — totals
   kept overflowing the viewport. These use correct single-body scoping and
   convert each totals row to flex (label left / value right) so the value
   can never push off-screen. Also forces table + container to viewport width.
   ========================================================================== */
@media (max-width: 768px) {
    body.page-order-confirmation #content.page-content,
    body.page-order-confirmation #order-items,
    body.page-order-confirmation .order-confirmation-table {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    body.page-order-confirmation .order-confirmation-table > table,
    body.page-order-confirmation .order-confirmation-table table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    /* Each totals row → flex (label flexes, value pinned right, never clipped) */
    body.page-order-confirmation .order-confirmation-table tbody tr {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
    }
    body.page-order-confirmation .order-confirmation-table tbody tr td {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        word-break: normal !important;
    }
    body.page-order-confirmation .order-confirmation-table tbody tr td:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: left !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.page-order-confirmation .order-confirmation-table tbody tr td:last-child {
        flex: 0 0 auto !important;
        text-align: right !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        max-width: 55% !important;
    }
    /* Spacer rows collapse */
    body.page-order-confirmation .order-confirmation-table tbody tr.trikon-a11y-spacer-row {
        padding: 0 !important;
        min-height: 1px !important;
    }
    /* Subtotal */
    body.page-order-confirmation tr.trikon-a11y-subtotal-row td {
        font-size: 1rem !important;
    }
    body.page-order-confirmation tr.trikon-a11y-subtotal-row td:last-child {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
    }
    /* Gesamt ACTIVE — sentence case (NOT uppercase which wrapped to 3 lines) */
    body.page-order-confirmation tr.trikon-a11y-gesamt-active td {
        font-size: 1rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: #fafafa !important;
        padding: 16px 14px !important;
    }
    body.page-order-confirmation tr.trikon-a11y-gesamt-active td:first-child {
        font-weight: 700 !important;
        font-size: 0.98rem !important;
        text-transform: none !important;
        line-height: 1.3 !important;
        color: #04697e !important;
    }
    body.page-order-confirmation tr.trikon-a11y-gesamt-active td:last-child {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        color: #04697e !important;
        white-space: nowrap !important;
    }
    /* Gesamt INACTIVE / computed */
    body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td,
    body.page-order-confirmation tr.trikon-a11y-gesamt-computed td {
        font-size: 0.9rem !important;
    }
    body.page-order-confirmation tr.trikon-a11y-gesamt-inactive td:last-child,
    body.page-order-confirmation tr.trikon-a11y-gesamt-computed td:last-child {
        font-size: 0.95rem !important;
    }
}