@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/index.css');
  @import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/600.css');
  @import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/700.css');
  @import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/800.css');

  :root {
    --mts-bg:#ffffff;
    --mts-bg-soft:#fafafa;
    --mts-bg-dark:#0a0a0a;
    --mts-text:#1d1d1f;
    --mts-text-muted:#6e6e73;
    --mts-line:#e5e5e7;
    --mts-accent:#ff6a00;
    --mts-accent-hover:#ff8533;
    --mts-radius:18px;
    --mts-radius-lg:24px;
    --mts-shadow:0 30px 60px -15px rgba(0,0,0,0.18);
    --mts-shadow-soft:0 12px 30px rgba(0,0,0,0.06);
    --mts-font:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
    --mts-font-display:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  }

  body, html { font-family: var(--mts-font) !important; color: var(--mts-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fff !important; }
  h1, h2, h3, h4, h5, .heading-title, .pd-name, .cat-page-title, .page-title { font-family: var(--mts-font-display) !important; letter-spacing: -0.02em; font-weight: 700; }

  /* ===== CONTAINER ===== */
  .container, .megamenu-container, .footer-main, .footer-bottom, .footer-social { max-width: 1680px !important; padding-left: 32px !important; padding-right: 32px !important; }
  @media (max-width: 700px) { .container, .megamenu-container, .footer-main, .footer-bottom, .footer-social { padding-left: 20px !important; padding-right: 20px !important; } }

  /* ===== HEADER — kompakter, solid weiß ===== */
  /* z-index 1050: Bootstrap-Modal-Backdrop = 1040, Smartstore .artlist .art Hover = no
     explicit z-index aber via transform neuer Stacking-Context. Header MUSS drueber
     bleiben — daher 1050. Offcanvas (z-index 9999) und PD-Modal (9998) bleiben oben. */
  header#header { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 1050 !important; transition: box-shadow 0.3s ease; isolation: isolate; }
  /* Kompletten Header inkl. aller Sub-Sektionen aus dem Stacking-Context der Karten heben.
     z-index pro Section GESTAFFELT (3/2/1), damit Bootstrap-Dropdowns aus der menubar
     (oben: Service/Kontakt/Anmelden) die nachfolgenden Sections shopbar/megamenu nicht
     visuell verdeckt bekommen. Vorher: alle drei = 1 → Source-Order entscheidet, und
     shopbar (DOM-Index 1) + megamenu (DOM-Index 2) lagen über menubar-Dropdowns.
     .megamenu-dropdown-container (Sibling unter header, z-index 1040) bleibt unberührt
     über allem. */
  header#header .menubar-section { position: relative; z-index: 3; }
  header#header .shopbar-section { position: relative; z-index: 2; }
  header#header .megamenu-section { position: relative; z-index: 1; }
  /* Listing-/Carousel-Karten erzeugen via transform/will-change einen Stacking-Context.
     Wir lassen ihn bestehen (fuer Hover-Lift), zwingen aber via z-index niedriger als Header. */
  .mts-store .mts-pcard,
  .mts-store .mts-tile,
  .mts-store .mts-mtile,
  .artlist .art,
  .product-card { z-index: 0 !important; }
  .mts-store .mts-pcard:hover,
  .mts-store .mts-tile:hover,
  .mts-store .mts-mtile:hover,
  .artlist .art:hover { z-index: 1 !important; }
  header#header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
  /* ALLE Header-Sub-Sections explizit weiß — Smartstore-Default ist .navbar-light grau (#f7f7f9) */
  header#header,
  header#header .navbar,
  header#header .navbar-light,
  header#header .megamenu-section,
  header#header .megamenu-section .navbar,
  header#header .megamenu-section .navbar-light,
  header#header .menubar-section,
  header#header .menubar-light,
  header#header .shopbar-section,
  header#header .shopbar { background-color: #ffffff !important; }
  /* Top-bar (KONTAKT/SERVICE/ANMELDEN) */
  header#header .menubar-section, header#header .menubar-light { background: #ffffff !important; border: 0 !important; padding: 4px 0 !important; min-height: 0 !important; }
  header#header .menubar { padding: 0 !important; min-height: 0 !important; }
  .menubar-link { color: var(--mts-text) !important; font-weight: 500 !important; font-size: 12px !important; padding: 4px 10px !important; border-radius: 999px; line-height: 1.2; }
  .menubar-link:hover { color: var(--mts-accent) !important; background: transparent !important; }
  /* Shopbar (Logo + Search + Cart) */
  header#header .shopbar-section { padding: 6px 0 !important; min-height: 0 !important; }
  header#header .shopbar { padding: 0 !important; min-height: 0 !important; background: transparent !important; }
  header#header .shopbar-container { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* Logo: maximal 56px hoch, contain — verhindert dass quadratische User-Logos die Headerleiste sprengen */
  header#header .shop-logo a.brand,
  header#header .shop-logo .brand { display: inline-flex; align-items: center; }
  header#header .shop-logo img,
  header#header .shopbar img.img-fluid {
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
  }
  /* Megamenu (Bikes, Cube, ...) — kompakt + horizontal zentriert.
     Iter 18 Bugfix: Dropdown-Position folgte dem zentrierten <li> nicht.
     Ursache: smartstore.megamenu.js -> alignDrop() rechnet
       left = popper.position().left + parseInt(nav.css('margin-inline-start'))
     Mit `margin: 0 auto` auf ul#menu-main blieb margin-inline-start im
     computed style "auto" -> parseInt('auto') = NaN -> NaNpx wird vom
     Browser ignoriert -> Dropdown bleibt auf alter Inline-left-Position.
     Fix: margin auf 0 setzen, Zentrierung ueber justify-content im
     Flex-Container (.megamenu / .cms-menu) erledigen. */
  header#header .megamenu-section { padding: 0 !important; min-height: 0 !important; }
  header#header .megamenu-section .navbar { padding: 0 !important; min-height: 0 !important; height: auto !important; }
  header#header .megamenu-section .megamenu-container { min-height: 0 !important; height: auto !important; display: flex !important; justify-content: center !important; }
  header#header .megamenu-section .megamenu { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; }
  header#header .megamenu-section .cms-menu,
  header#header .megamenu-section .cms-menu-navbar {
    padding: 0 !important; margin: 0 !important;
    display: flex !important; justify-content: center !important;
    width: 100% !important;
  }
  /* ul#menu-main: KEIN margin:auto (das brach alignDrop), Zentrierung
     erledigt der .cms-menu Flex-Container darueber.
     position:static ist KRITISCH: Smartstore alignDrop() rechnet
     `popper.position().left` (= LI relativ zum naechsten positionierten
     Vorfahren). Wenn das <ul> position:relative ist, liefert das nur den
     Offset des LI INNERHALB des UL — unsere Flex-Zentrierung des UL geht
     dabei verloren. Mit position:static wandert die Bezugsbasis hoch zu
     .megamenu (position:relative) und das LI-Offset enthaelt die Zentrierung. */
  header#header .megamenu-section ul.navbar-nav#menu-main,
  header#header .megamenu-section .navbar-nav,
  header#header .megamenu-section .nav-slider {
    margin: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    position: static !important;
  }
  header#header .megamenu-section .nav-link { padding: 10px 14px !important; }
  /* Slider-Navigation-Pfeile (megamenu-nav-btn) sollen Menue-Zentrierung nicht stoeren */
  header#header .megamenu-section .megamenu-nav { position: absolute !important; top: 0 !important; }
  header#header .megamenu-section .megamenu-nav.alpha { left: 0 !important; }
  header#header .megamenu-section .megamenu-nav.omega { right: 0 !important; }
  header#header .megamenu-section .megamenu { position: relative !important; }
  /* Default-rendered Dropdown-Container darunter ist leer + 48px tall — collapse,
     ABER: nur solange KEIN inneres .dropdown-menu offen (.show) ist. Smartstore
     setzt .show auf das innere <div id="dropdown-menu-XXX">, NICHT auf den
     .megamenu-dropdown-container selbst (Iter 17 hatte das vertauscht ->
     Dropdowns oeffneten gar nicht mehr).

     Iter 19 Bugfix: Header-Bar wuchs beim Oeffnen eines Dropdowns mit.
     Ursache: .megamenu-dropdown-container ist Schwester-Element (NICHT Kind)
     von .megamenu-section und liegt im normalen Flow des Header-Wrappers.
     Iter-18-CSS schaltete height von 0 auf auto im show-Zustand -> Header
     bekam zusaetzliche Pixel.
     Fix: Container aus dem Flow nehmen (position:absolute, oben am Header
     verankert via top:100%). Naechster positionierter Vorfahre ist
     header#header (position:sticky etabliert containing block).
     Im geschlossenen Zustand zusaetzlich pointer-events:none, damit der
     unsichtbare Container keine Hover-Targets im Viewport blockiert. */
  header#header .megamenu-dropdown-container {
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1040 !important;
    pointer-events: none !important;
  }
  header#header .megamenu-dropdown-container:has(> div.show),
  header#header .megamenu-dropdown-container:has(.dropdown-menu.show),
  header#header .megamenu-dropdown-container.show,
  header#header .megamenu-dropdown-container.in,
  header#header .megamenu-dropdown-container[aria-expanded='true'] {
    height: auto !important; overflow: visible !important;
    padding: 24px !important; background: #fff !important;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.18) !important;
    border-radius: var(--mts-radius) !important;
    pointer-events: auto !important;
  }
  /* Header-Wrapper darf das absolut positionierte Dropdown nicht clippen */
  header#header { overflow: visible !important; }
  header#header .megamenu-section { overflow: visible !important; }

  /* ===== SALE!-Menueintrag rot (Iter 19) ===== */
  /* Robuster Selektor: stabile URL /sale-/ statt Text-Match.
     Underline-/Active-States des Standardmenues bleiben erhalten,
     nur Farbe + Background-on-hover werden roetlich ueberschrieben. */
  header#header ul#menu-main a.nav-link[href*="/sale-" i],
  header#header ul#menu-main a.nav-link[href*="/sale-" i] > span {
    color: #ff3b30 !important;
    font-weight: 700 !important;
  }
  header#header ul#menu-main a.nav-link[href*="/sale-" i]:hover,
  header#header ul#menu-main a.nav-link[href*="/sale-" i]:focus {
    color: #d70015 !important;
    background: rgba(255, 59, 48, 0.08) !important;
  }
  header#header ul#menu-main a.nav-link[href*="/sale-" i]:hover > span,
  header#header ul#menu-main a.nav-link[href*="/sale-" i]:focus > span {
    color: #d70015 !important;
  }
  /* Search field: Lupe sitzt rechts; Padding genug vorhalten */
  .instasearch-form { background: var(--mts-bg-soft) !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important; position: relative; overflow: hidden; }
  .instasearch-form:focus-within { background: #fff !important; box-shadow: 0 0 0 2px var(--mts-accent) !important; }
  .instasearch-form .instasearch-term, .instasearch-term.form-control { border: 0 !important; background: transparent !important; font-size: 14px !important; padding: 11px 48px 11px 18px !important; box-shadow: none !important; }
  .instasearch-icon, .input-group-icon.instasearch-icon, .instasearch-addon { position: absolute !important; right: 8px !important; top: 50%; transform: translateY(-50%); color: var(--mts-text-muted) !important; background: transparent !important; left: auto !important; padding: 0 !important; pointer-events: none; }
  .instasearch-submit, button.instasearch-submit {
    position: absolute !important;
    right: 0 !important; top: 0 !important; bottom: 0 !important; left: auto !important;
    width: 44px !important;
    height: 100% !important;          /* Smartstore-Default 20px ueberschreiben */
    min-height: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .instasearch-submit i, .instasearch-submit svg { font-size: 16px !important; color: var(--mts-text-muted) !important; }
  .shopbar-icon, .menubar-icon { color: var(--mts-text) !important; transition: color 0.18s ease, transform 0.18s ease; }
  .shopbar-icon:hover { color: var(--mts-accent) !important; transform: translateY(-1px); }
  .badge.cart-badge, .badge.wishlist-badge { background: var(--mts-accent) !important; color: #fff !important; font-weight: 600 !important; }

  /* Megamenu */
  .megamenu .nav-link, .megamenu .nav-item > a { font-weight: 500 !important; color: var(--mts-text) !important; padding: 10px 16px !important; border-radius: 999px !important; }
  .megamenu .nav-link:hover, .megamenu .nav-item > a:hover { background: var(--mts-bg-soft) !important; color: var(--mts-accent) !important; }
  .megamenu-dropdown-container { border: 0 !important; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.18) !important; border-radius: var(--mts-radius) !important; padding: 24px !important; }

  /* ===== FOOTER ===== */
  footer#footer { background: var(--mts-bg-dark) !important; color: rgba(255,255,255,0.75) !important; padding: 80px 0 40px !important; margin-top: 80px; }
  /* iPad-Round-2 P9: Auf der Homepage endet der Content mit einer DUNKLEN
     Sektion (CTA). Der 80px-margin-top des Footers belichtete dort den weissen
     Page-Bg -> sichtbarer weisser Spalt zwischen CTA und Footer. Auf body.home
     den Margin entfernen -> dunkle CTA flieesst nahtlos in den dunklen Footer.
     Andere Seiten (Kategorie/PDP/Cart enden hell) behalten den 80px-Abstand. */
  body.home footer#footer,
  body:has(.home-page) footer#footer {
    margin-top: 0 !important;
  }
  footer#footer * { color: rgba(255,255,255,0.75); }
  footer#footer h1, footer#footer h2, footer#footer h3, footer#footer h4, footer#footer h5 { color: #fff !important; font-weight: 600 !important; margin-bottom: 18px !important; }
  footer#footer a { color: rgba(255,255,255,0.75) !important; }
  footer#footer a:hover { color: #fff !important; text-decoration: none !important; }
  /* Newsletter form on dark footer — sauberer Pill-Container (kein .shadow-xs Halo, kein weißer Addon-Bg) */
  footer#footer .footer-newsletter .input-group {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: 4px !important;
    align-items: stretch !important;
    overflow: hidden;
    flex-wrap: nowrap !important;
    position: relative;
  }
  footer#footer .footer-newsletter .input-group .form-control,
  footer#footer .footer-newsletter input[type='email'],
  footer#footer .footer-newsletter input.rounded-start-pill {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 14px 12px 44px !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  footer#footer .footer-newsletter input::placeholder { color: rgba(255,255,255,0.55) !important; }
  /* Envelope-Icon links statt rechts ueber dem Text */
  footer#footer .footer-newsletter .input-group-icon {
    position: absolute !important;
    left: 18px !important; right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255,255,255,0.5) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 2;
    pointer-events: none;
    --inline-icon-offset: 0 !important;
  }
  /* Addon-Wrapper transparent (war weiß und erzeugte den Halo um den orangenen Button) */
  footer#footer .footer-newsletter .input-group-append,
  footer#footer .footer-newsletter .input-group-inline-addon {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: stretch !important;
  }
  /* Newsletter submit button — orange, fluid pill am rechten Rand des Pills */
  footer#footer #newsletter-subscribe-button,
  footer#footer .footer-newsletter button[type='submit'],
  footer#footer .footer-newsletter .btn,
  footer#footer .btn-primary {
    background: var(--mts-accent) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
  }
  footer#footer #newsletter-subscribe-button:hover,
  footer#footer .footer-newsletter .btn:hover,
  footer#footer .btn-primary:hover { background: var(--mts-accent-hover) !important; transform: none !important; }
  /* Subscribe-only — Abbestellen-Radio + komplette „Aktion wählen" fieldset weg */
  footer#footer .footer-newsletter fieldset,
  footer#footer .footer-newsletter fieldset.mb-2 { display: none !important; }
  /* GDPR-Checkbox-Block bleibt sichtbar (war via fieldset hidden? nein, ist ausserhalb) */
  footer#footer .footer-newsletter .form-group.gdpr-consent { margin-top: 14px !important; }
  .footer-social .btn { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 0 !important; width: 44px !important; height: 44px !important; margin: 0 6px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition: all 0.2s cubic-bezier(.22,.61,.36,1) !important; }
  .footer-social .btn i, .footer-social .btn svg { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }
  .footer-social .btn:hover { background: var(--mts-accent) !important; color: #fff !important; transform: translateY(-2px); }
  .footer-social-wrapper { padding: 24px 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; margin-top: 24px !important; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08) !important; padding-top: 32px !important; margin-top: 40px !important; }

  /* ===== BUTTONS ===== */
  .btn-primary, .btn.btn-primary, button.btn-primary {
    background: var(--mts-accent) !important; border-color: var(--mts-accent) !important; color: #fff !important;
    border-radius: 999px !important; font-weight: 600 !important; padding: 12px 28px !important;
    box-shadow: 0 8px 20px rgba(255,106,0,0.3); transition: all 0.18s cubic-bezier(.22,.61,.36,1);
  }
  .btn-primary:hover, .btn.btn-primary:hover, button.btn-primary:hover {
    background: var(--mts-accent-hover) !important; border-color: var(--mts-accent-hover) !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,106,0,0.4);
  }
  .btn-secondary, .btn.btn-secondary, button.btn-secondary { background: var(--mts-text) !important; border-color: var(--mts-text) !important; color: #fff !important; border-radius: 999px !important; font-weight: 600 !important; padding: 12px 28px !important; }
  .btn-secondary:hover { background: #000 !important; transform: translateY(-2px); }
  .btn-outline-primary { border-radius: 999px !important; font-weight: 600 !important; }

  /* ===== LISTING (`.art`) — Category, Search, Recently-Viewed: gleiches Look-and-Feel
     wie die Home-Carousel-Karten (.mts-pcard). Reines Weiss, links-buendig,
     Bild GANZ sichtbar (contain), Buttons IMMER unten am Karten-Fuss sichtbar. ===== */
  .artlist { gap: 24px !important; align-items: stretch !important; }
  .artlist-grid .art, .artlist .art {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: var(--mts-radius) !important;
    overflow: visible !important;            /* art-drop nicht mehr clippen — Buttons sichtbar */
    box-shadow: var(--mts-shadow-soft) !important;
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    height: auto !important;
    /* WICHTIG: Smartstore-Default `.artlist-4-cols .art { width: 25% }` ueberschreiben.
       Ohne diesen Override schrumpft die Karte auf 25% der Grid-Zelle (~81px) zusammen. */
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  .artlist .art:hover { transform: translateY(-6px); box-shadow: var(--mts-shadow) !important; }

  /* Bild-Container: 4:3 (Bikes sind landscape), reines Weiss — KEIN Grau mehr.
     flex-shrink:0 damit der Container in flex-Eltern (Slick-Carousel) nicht
     zusammenklappt; aspect-ratio allein reichte da nicht. */
  .art-picture-block, .art .art-picture-block {
    background: #ffffff !important;
    border: 0 !important;
    aspect-ratio: 4/3 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    border-radius: var(--mts-radius) var(--mts-radius) 0 0;
    overflow: hidden;
    position: relative !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }
  /* Inner anchor (.art-picture) — Smartstore-Default setzt `height: 0` (aspect-ratio
     ueber padding-bottom%-Trick). Das ueberschreiben wir mit explizitem 100% damit
     das absolute Layer wirklich die Picture-Block-Hoehe (244px @ 4:3) ausfuellt. */
  .art-picture-block .art-picture, .art-picture-block > a, .art-picture.img-center-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Bild GANZ sichtbar — fixe Kanten via absolute inset:0, contain, nie cropped.
     `width:auto/height:auto` kollabiert in flex-Eltern auf 0px (Browser-Quirk),
     daher hier explizit width:100%/height:100% mit object-fit:contain. */
  /* SCOPE: nur Listing-Cards (.art), NIEMALS img.file-img global. Sonst wird
     u. a. .pd-brand-picture.file-img (PDP-Brand-Logo) absolut positioniert
     und kollidiert mit dem Titel. */
  .art-picture img, .art-picture .file-img, .art-picture-block img, .art img.file-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
  }
  /* Defensive: PDP-Brand-Picture darf NIE absolute sein, immer inline */
  .pd-brand-picture, .pd-brand-block img, .pd-info .pd-brand img {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
  }
  .artlist .art:hover .art-picture img { transform: scale(1.04); }

  /* Brand-Logo (Cube etc.) — links-buendig, schoen platziert ueber dem Titel */
  .art-brand, .art-vendor, .pd-brand, .pd-brand-name {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--mts-text-muted) !important;
    font-weight: 500 !important;
    padding: 14px 18px 0 !important;
    text-align: left !important;
    margin: 0 !important;
    display: block;
  }
  .art-brand img.mts-brand-img, .art-vendor img.mts-brand-img, .pd-brand img.mts-brand-img {
    height: 24px !important; width: auto !important; max-width: 100px;
    object-fit: contain; display: inline-block; vertical-align: middle;
  }
  /* PD-Brand-Picture (Manufacturer-Logo auf der Produktdetailseite) — gut sichtbar */
  .pd-brand-picture, .pd-brand img, .pd-brand-block img,
  .product-page .pd-brand img, .product-page [class*="brand"] img {
    max-height: 64px !important;
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  .pd-brand-block, .pd-brand {
    display: inline-flex !important;
    align-items: center;
    margin-bottom: 16px;
  }

  /* Titel — IMMER links-buendig, voller Name sichtbar, kein Truncate */
  .art-genericname, .art-name {
    margin: 0 !important; padding: 0 !important;
    font-family: var(--mts-font-display) !important;
    text-align: left !important;
    min-height: auto !important;
  }
  .art-name-link, .art-name a {
    display: block !important;
    padding: 6px 18px 4px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--mts-text) !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    overflow: visible !important;          /* Smartstore-Default clippt 2. Zeile -> aufheben */
    max-height: none !important;
    height: auto !important;
    -webkit-line-clamp: unset !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  .art-name-link span, .art-name span, .art-genericname span {
    text-align: left !important;
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .art-info, .art-meta, .art-brand-block { padding: 0 18px !important; text-align: left !important; }

  .art-delivery-info {
    font-size: 12px !important; color: var(--mts-text-muted) !important;
    padding: 0 18px !important; margin: 0 0 4px !important;
    text-align: left !important;
  }

  /* Preis — links-buendig mit feinem Trenner darueber.
     Iter 9 Phase B: `margin-top:auto` damit der Preis IMMER auf Card-Bottom
     sitzt — egal ob Single-Size-Badge / Specs-Tags vorhanden sind oder nicht.
     Sicherstellt gleiche Preis-Y-Position in einer Reihe. */
  .art-price-block {
    font-family: var(--mts-font-display) !important;
    padding: 10px 18px 14px !important;
    text-align: left !important;
    margin: 8px 0 0 !important;
    margin-top: auto !important;
    /* Iter 12 Phase A: trennlinie zwischen specs/single-size und preis WEG.
       Nur Whitespace trennt. */
    border-top: 0 !important;
  }
  /* Card-Body (Smartstore: .art-data-block enthaelt info + actions) muss
     ebenfalls als flex-column wachsen damit margin-top:auto greift. */
  .artlist .art .art-data-block {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .artlist .art .art-actions-block {
    margin-top: auto !important;
  }
  .art-price-block .art-price, .art-finalprice, .art-price-value, .price {
    font-family: var(--mts-font-display) !important;
    font-weight: 700 !important;
    color: var(--mts-text) !important;
    font-size: 1.3rem !important;
    letter-spacing: -0.01em;
    text-align: left !important;
    display: block;
  }
  /* Iter 14 Phase C: Grid (NICHT Lines) -> Preis-Block + Rating + Steuer-Hinweis
     ZENTRIERT (User: "ich will bei raster ansicht das dass zentriert noch ist
     ab 3.899,00 €"). Nur fuer Grid-Layout, Lines hat eigene right-aligned-Regel. */
  .artlist:not(.artlist-lines) .art .art-price-block,
  .artlist:not(.artlist-lines) .art .art-price,
  .artlist:not(.artlist-lines) .art .art-finalprice,
  .artlist:not(.artlist-lines) .art .art-price-value,
  .artlist:not(.artlist-lines) .art .art-old-price,
  .artlist:not(.artlist-lines) .art .art-baseprice,
  .artlist:not(.artlist-lines) .art .art-legalinfo,
  .artlist:not(.artlist-lines) .art .art-rating-block,
  .artlist:not(.artlist-lines) .art .art-rating,
  .artlist:not(.artlist-lines) .art .product-rating {
    text-align: center !important;
    justify-content: center !important;
  }
  .artlist:not(.artlist-lines) .art .art-rating-block,
  .artlist:not(.artlist-lines) .art .art-rating {
    display: flex !important;
    align-items: center !important;
  }
  .art-old-price, .price-old, .art-baseprice, s, del {
    color: var(--mts-text-muted) !important;
    text-decoration: line-through;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
  }

  /* CRITICAL: art-drop IMMER sichtbar — kein hover-overlay, fester Footer der Karte.
     Smartstore-Default setzt `z-index: -1` (Drop-Layer hinter der Karte), das
     ueberschreiben wir auf z-index:1 damit die Buttons klickbar bleiben. */
  .art-drop {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    padding: 0 18px 18px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    height: auto !important;
    width: 100% !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }
  /* iPad-Round-2 P10: Karten-Compare-Button (nativ + injiziert) entfernt.
     Button-Grid daher 3 Spalten (Cart + Wunschliste + Beschreibung) statt 4
     -> keine Luecke. Der native Compare-Button ist via display:none raus
     (Regel unten), das Grid zaehlt ihn dann nicht mehr als Spalte. */
  /* C2: Smartstore-Flex Grid-Divider (--art-divider-color #dee2e6) neutralisieren
     -> keine graue Trennlinie zwischen Produkt-Reihen. Nur Grid, Lines bleibt. */
  .artlist:not(.artlist-lines), .artlist-grid {
    --art-divider-color: transparent !important;
  }
  .artlist-grid > .art,
  .category-page .artlist .art,
  .product-list .artlist .art {
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
  }
  .art-drop .art-btn-group, .art-drop .row.no-gutters {
    display: grid !important;
    grid-template-columns: 1fr 44px;
    gap: 6px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  /* P10: nativen Smartstore-Karten-Compare-Button ("Vergleichen") aus dem
     Button-Grid nehmen (Desktop + alle Breakpoints). PDP-Compare bleibt. */
  .art-drop .art-btn-group .add-to-compare-list-button,
  .art-drop .row.no-gutters .add-to-compare-list-button,
  .artlist .art .add-to-compare-list-button {
    display: none !important;
  }
  /* C5: grauen Info-/Beschreibung-Button (fa-info, a.product-details-button)
     aus der Karte nehmen. Cart-Button spannt dann 1fr (freie Spalte). */
  .art-drop .art-btn-group .product-details-button,
  .art-drop .row.no-gutters .product-details-button,
  .artlist .art .product-details-button {
    display: none !important;
  }
  /* Compare-Restore (a2): Overlay-Card-Compare wieder sichtbar (Hide entfernt);
     nativer Smartstore-Card-Compare (.add-to-compare-list-button) bleibt aus. */
  .art-drop .art-btn, .art-drop .btn {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    box-shadow: none !important;
  }
  .art-drop .add-to-cart-button {
    border-radius: 999px !important;
    background: var(--mts-accent) !important;
    border-color: var(--mts-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(255,106,0,0.25) !important;
  }
  .art-drop .add-to-cart-button:hover {
    background: var(--mts-accent-hover) !important;
    border-color: var(--mts-accent-hover) !important;
  }
  .art-drop .btn-secondary {
    background: var(--mts-bg-soft) !important;
    color: var(--mts-text) !important;
    border: 1px solid var(--mts-line) !important;
  }
  .art-drop .btn-secondary:hover {
    background: var(--mts-text) !important;
    color: #fff !important;
  }

  /* Screenreader-Toggle (war 415px tall und blockierte Layout) — visuell weg, fuer SR ok */
  .art .sr-toggle {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0);
    margin: -1px;
    padding: 0;
    border: 0;
    pointer-events: none;
  }

  /* Recently-Viewed Carousel — sieht aus wie die Home-Featured-Carousel:
     full-width Section ohne grauen Block-Background, ohne Border, 4 Karten/View
     mit grossen Pfeilbuttons rechts unten wie Home. */
  /* Section-Container: NUR die recently-viewed-Box (NICHT alle .product-grid /
     .block-boxed sonst breche ich Cart-/Wishlist-/Compare-Widgets). */
  .recently-viewed-product-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Full-bleed-Variante (vom JS gesetzt nachdem das Element an body verschoben wurde) */
  body > .recently-viewed-product-grid.mts-rv-fullbleed,
  .mts-rv-fullbleed {
    width: 100% !important;
    margin: 0 0 0 0 !important;
    padding: 80px 0 96px !important;
    background: var(--mts-bg-soft) !important;
    border-top: 1px solid var(--mts-line) !important;
  }
  .mts-rv-fullbleed .block-title {
    max-width: 1680px !important;
    margin: 0 auto 48px !important;
    padding: 0 40px !important;
    text-align: center !important;
  }
  .mts-rv-fullbleed .block-title h3, .mts-rv-fullbleed h3 {
    font-family: var(--mts-font-display) !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 700 !important;
    color: var(--mts-text) !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
  }
  .mts-rv-fullbleed .block-body {
    max-width: 1680px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
  }
  @media (max-width:700px) {
    .mts-rv-fullbleed { padding: 56px 0 72px !important; }
    .mts-rv-fullbleed .block-title, .mts-rv-fullbleed .block-body { padding: 0 20px !important; }
  }
  .recently-viewed-product-grid .block-body, .product-grid .block-body { padding: 0 !important; background: transparent !important; }
  .recently-viewed-product-grid .block-title, .product-grid .block-title {
    border: 0 !important; background: transparent !important;
    text-align: center !important;
    margin-bottom: 32px !important;
  }
  .recently-viewed-product-grid h3, .product-grid h3 {
    font-family: var(--mts-font-display) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    font-weight: 700 !important;
    color: var(--mts-text) !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
  }

  /* Carousel: Slick laeuft, Slides nehmen 1/4 Breite, kein Border */
  .artlist-carousel { width: 100% !important; position: relative; padding-bottom: 80px !important; }
  .artlist-carousel .slick-list { overflow: hidden !important; padding: 0 !important; margin: 0 -12px !important; }
  .artlist-carousel .slick-track { display: flex !important; align-items: stretch !important; }
  .artlist-carousel .slick-slide {
    padding: 0 12px !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-width: none !important;
  }
  .artlist-carousel .slick-slide > div { height: 100% !important; }
  .artlist-carousel .slick-slide .art {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  }
  .artlist-carousel .slick-slide:only-child { max-width: 360px !important; flex: 0 0 360px !important; }

  /* Custom-Arrows wie Home-Featured: NUR fuer .artlist-carousel + recently-viewed.
     NICHT global auf .product-grid (broke Cart-/Wishlist-Widgets) */
  .artlist-carousel .slick-prev,
  .artlist-carousel .slick-next,
  .recently-viewed-product-grid .slick-prev,
  .recently-viewed-product-grid .slick-next {
    position: absolute !important;
    top: auto !important;
    bottom: 16px !important;
    transform: none !important;
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--mts-text) !important;
    border: 1px solid var(--mts-line) !important;
    box-shadow: var(--mts-shadow-soft) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer;
    font-size: 0;
  }
  .artlist-carousel .slick-prev::before,
  .artlist-carousel .slick-next::before,
  .recently-viewed-product-grid .slick-prev::before,
  .recently-viewed-product-grid .slick-next::before {
    color: var(--mts-text) !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-family: 'slick','FontAwesome', sans-serif !important;
  }
  .artlist-carousel .slick-prev,
  .recently-viewed-product-grid .slick-prev { right: 132px !important; left: auto !important; }
  .artlist-carousel .slick-next,
  .recently-viewed-product-grid .slick-next { right: 72px !important; left: auto !important; }
  .artlist-carousel .slick-prev:hover,
  .artlist-carousel .slick-next:hover,
  .recently-viewed-product-grid .slick-prev:hover,
  .recently-viewed-product-grid .slick-next:hover {
    background: var(--mts-text) !important;
    border-color: var(--mts-text) !important;
  }
  .artlist-carousel .slick-prev:hover::before,
  .artlist-carousel .slick-next:hover::before {
    color: #fff !important;
  }
  /* Slick Carousel Pfeile — sichtbar machen (Smartstore-Default versteckt sie) */
  .artlist-carousel .slick-prev, .artlist-carousel .slick-next,
  .product-grid .slick-prev, .product-grid .slick-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 48px !important; height: 48px !important;
    background: #fff !important;
    border: 1px solid var(--mts-line) !important;
    border-radius: 50% !important;
    color: var(--mts-text) !important;
    box-shadow: var(--mts-shadow-soft) !important;
    align-items: center; justify-content: center;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 5;
    cursor: pointer;
  }
  .artlist-carousel .slick-prev, .product-grid .slick-prev { left: -24px !important; right: auto !important; }
  .artlist-carousel .slick-next, .product-grid .slick-next { right: -24px !important; left: auto !important; }
  .artlist-carousel .slick-prev:hover, .artlist-carousel .slick-next:hover,
  .product-grid .slick-prev:hover, .product-grid .slick-next:hover {
    background: var(--mts-text) !important; color: #fff !important; border-color: var(--mts-text) !important;
  }
  .artlist-carousel .slick-prev::before, .artlist-carousel .slick-next::before,
  .product-grid .slick-prev::before, .product-grid .slick-next::before {
    color: inherit !important; opacity: 1 !important; font-size: 18px !important;
  }
  /* Recently-Viewed-Block-Container ohne Border (NUR recently-viewed,
     andere .product-grid bleiben wie Smartstore sie liefert) */
  .recently-viewed-product-grid,
  .recently-viewed-product-grid .block {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .recently-viewed-product-grid .block-title {
    border: 0 !important; background: transparent !important;
  }

  /* ===== CATEGORY-LISTING GRID — Iter 10 Phase B =====
     User-Feedback Iter 9: "ich moechte das pro reihe nur 4 Produkte sind und
     die Produktekarten groesser bzw die Produktbilder viel groesser".
     Strategie: 4 Spalten ab Mid-Desktop (>=1280px). Damit die Cards trotzdem
     gross wirken, oeffnet die Category-Page den Container weit auf
     `max-width: min(1880px, calc(100vw - 32px))` (siehe Container-Override
     unten). Mobile bleibt 2-Spaltig. Negation `:not(.artlist-lines)` schuetzt
     den Smartstore-List-View ?v=list. */
  .artlist:not(.slick-initialized):not(.artlist-lines) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  @media (min-width: 560px) {
    .artlist:not(.slick-initialized):not(.artlist-lines) { gap: 24px !important; }
  }
  /* iPad-Round-2 P12: ab >=992px GENAU 3 Spalten (iPad-Landscape 1366 +
     Desktop) -> groessere Produktbilder, volle Breite genutzt. Portrait
     768-991 bleibt 2 (Regel oben). Der frueher bei >=1280 erzwungene
     4-Spalten-Block ist bewusst auf 3 reduziert. */
  @media (min-width: 992px) {
    .artlist:not(.slick-initialized):not(.artlist-lines) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 28px !important;
    }
  }
  @media (min-width: 1280px) {
    .artlist:not(.slick-initialized):not(.artlist-lines) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 32px !important;
    }
  }
  /* ITER 10 Phase B — Category-Page Container weit oeffnen, damit 4 Cards
     auch ohne Filter-Collapse spuerbar gross sind. `.category-page` ist Kind
     von `<main>` -> wir treffen den Bootstrap-`.container` ueber den
     `body.lyt-cols-2 + Page hat .category-page` Verbund. Da .category-page
     ein div weit unten im DOM ist, wird der Selektor ueber :has() zugeordnet,
     mit Fallback auf body[data-pagetype="category"] (zur Vorsicht setzen wir
     auch den Body-Marker per JS). */
  body.lyt-cols-2:has(.category-page) > .container,
  body.mts-cat-page > .container,
  body.lyt-cols-2:has(.category-page) .container.menubar-container,
  body.lyt-cols-2:has(.category-page) > div > .container:not(.menubar-container):not(.shopbar-container):not(.megamenu-container):not(.footer-main):not(.footer-bottom):not(.footer-social) {
    max-width: min(1880px, calc(100vw - 32px)) !important;
  }
  /* Bild-Aspect 5:4 auf Listing — mehr Bildflaeche pro Card als 4:3 ohne
     dass die Card zu hoch wird */
  body.lyt-cols-2:has(.category-page) .artlist .art .art-picture-block,
  body.mts-cat-page .artlist .art .art-picture-block {
    aspect-ratio: 5 / 4 !important;
  }
  /* PHASE-1 BUGFIX: a11y skip-link nicht als Grid-Item rendern.
     Smartstore packt einen sichtbar=opacity:0 aber `display:block; width:100%`
     `<div class="skip-content-container">` als ERSTES Kind ins .artlist Grid.
     Damit verbraucht er Slot #1 und die erste Produktkarte landet in Slot #2.
     Loesung: aus dem Grid-Flow nehmen via standard sr-only-Pattern, Fokus
     bleibt erreichbar (clip-path:none on focus). */
  .artlist > .skip-content-container,
  .artlist .skip-content-container,
  .product-list-container > .skip-content-container {
    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;
    /* Aus dem Grid-Flow: span 0 cells */
    display: block !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    pointer-events: none !important;
  }
  /* Auf Tastatur-Fokus wieder sichtbar */
  .artlist > .skip-content-container:focus-within,
  .product-list-container > .skip-content-container:focus-within {
    position: fixed !important;
    top: 80px !important;
    left: 24px !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    margin: 0 !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* Card-Border + Subline auf Category-Page sichtbar machen */
  .artlist .art, .artlist-grid .art {
    border: 0 !important;
    outline: 0 !important;
  }

  /* ITER 10 PHASE A — Specs auf Listing-Cards komplett entfernt
     (User-Feedback: "ich moechte das du das ganz entfernst aus der produktekarte:
     Rahmen / Motor / Schaltung..."). Slot bleibt im DOM (JS-Pipeline braucht die
     Daten weiter fuer Hover-Image + Single-Size), aber visuell unsichtbar. */
  .artlist .art .mts-card-specs,
  .artlist .art .mts-card-specs.is-loading,
  .artlist .art .mts-card-specs.is-empty,
  .artlist.artlist-lines .art .mts-card-specs {
    display: none !important;
  }

  /* ===== Iter 9 Phase D — List-View-Layout (Smartstore ?v=list)
     Markup: <div class="artlist artlist-lines"><div class="art"> mit
       <figure class="art-picture-block"> + <div class="art-data-block">
         (.art-info-block + .art-actions-block)
     Default-Smartstore liefert eigenes Lines-CSS — wir uebersteuern aber
     unbeabsichtigt mit `.artlist .art { flex-direction:column }`. Hier den
     Lines-Mode explizit zuruecksetzen + Apple-Look anwenden. ===== */
  .artlist.artlist-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .artlist.artlist-lines .art {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    /* Iter 14 Phase B: groessere Lines-Cards (User: "voll klein und nicht passend gross")
       gap 24 -> 32, padding 16 -> 24, min-height 220 -> 280.
       flex-wrap: nowrap erzwingt eine einzige Zeile (sonst wraps Data unter Pic). */
    gap: 32px !important;
    background: #fff !important;
    border-radius: var(--mts-radius) !important;
    box-shadow: var(--mts-shadow-soft) !important;
    padding: 24px !important;
    height: auto !important;
    min-height: 280px;
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease !important;
  }
  .artlist.artlist-lines .art:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.12) !important;
  }
  .artlist.artlist-lines .art .art-picture-block {
    /* Iter 14 Phase B: Pic-Block groesser (User: "voll klein").
       width 320 -> 440 (passt ~600 capped via 44% bei 1024 Container)
       max-width 38% -> 44% (mehr visuelles Gewicht fuers Bike-Bild)
       aspect 4/3 bleibt — passt zu Bike-Fotos. */
    flex: 0 0 var(--art-picture-width, 440px) !important;
    width: var(--art-picture-width, 440px) !important;
    max-width: 44% !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    position: relative !important;
  }
  .artlist.artlist-lines .art .art-data-block {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .artlist.artlist-lines .art .art-info-block {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .artlist.artlist-lines .art .art-name { padding: 0 !important; margin: 0 !important; }
  .artlist.artlist-lines .art .art-name-link, .artlist.artlist-lines .art .art-name a {
    /* Iter 14 Phase B: Title prominenter (1.15 -> 1.4rem), bisschen mehr Atemraum */
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    padding: 0 !important;
    display: block;
  }
  .artlist.artlist-lines .art .art-brand { padding: 0 !important; margin: 0 !important; }
  /* Iter 14 Phase B: Brand-Logo in der Lines-View prominenter (Default 24px Hoehe) */
  .artlist.artlist-lines .art .art-brand .mts-brand-img {
    max-height: 38px !important;
    max-width: 130px !important;
    object-fit: contain !important;
  }
  .artlist.artlist-lines .art .art-actions-block {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding-left: 16px !important;
    /* Iter 12 Phase A: vertikale Trennlinie zur Info-Spalte WEG.
       (Iter 9 hatte die als Trenner gesetzt; User will sie weg.) */
    border-left: 0 !important;
    min-width: 220px;
  }
  .artlist.artlist-lines .art .art-price-block {
    border-top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
  }
  .artlist.artlist-lines .art .art-price-block .art-price,
  .artlist.artlist-lines .art .art-price-block .art-finalprice {
    text-align: right !important;
  }
  /* Iter 14 Phase B: Preis prominent rechts in der Lines-View (Apple-Style:
     gross + dunkel, dominantes Element rechts). */
  .artlist.artlist-lines .art .art-price-block .art-price-value,
  .artlist.artlist-lines .art .art-price-block .art-finalprice .art-price-value,
  .artlist.artlist-lines .art .art-price-block .art-finalprice {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: var(--mts-text) !important;
    line-height: 1.2 !important;
  }
  .artlist.artlist-lines .art .art-description {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    color: var(--mts-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .artlist.artlist-lines .art .art-variant-info,
  .artlist.artlist-lines .art .art-more-opts,
  .artlist.artlist-lines .art .art-legalinfo,
  .artlist.artlist-lines .art .art-shortdesc {
    padding: 0 !important;
    margin: 0 !important;
    /* Iter 14 Phase B: dezenter (User: "Variant-Hinweise stilistisch dezenter").
       font-size 12.5 -> 12, opacity senken statt nur color, mehr letter-spacing.
       Auch der "Größe, Farbe"-Link wird entkoppelt vom Default-Link-Look. */
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--mts-text-muted) !important;
    opacity: 0.78;
    letter-spacing: 0.005em;
  }

  /* Iter 15 Phase E — Grid-Listing-Card "Weitere Optionen" zentriert.
     User: "zeige das in der produktkarte auch noch zentriert an: Weitere
     Optionen: Groesse, Farbe ohne das : zentriert schoen".
     Doppelpunkt entfernen wir per JS (siehe stripMoreOptsColon),
     hier das Layout: zentriert, dezent, leicht aufgeluftet. */
  .artlist:not(.artlist-lines) .art .art-more-opts,
  .artlist:not(.artlist-lines) .art .art-variant-info {
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--mts-text-muted) !important;
    opacity: 0.85;
    letter-spacing: 0.005em;
    padding: 4px 8px !important;
    margin: 4px 0 0 !important;
  }
  .artlist:not(.artlist-lines) .art .art-more-opts > span,
  .artlist:not(.artlist-lines) .art .art-variant-info > span {
    display: block !important;
    text-align: center !important;
  }
  .artlist:not(.artlist-lines) .art .art-more-opts a,
  .artlist:not(.artlist-lines) .art .art-variant-info a {
    color: var(--mts-text) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-align: center !important;
  }
  .artlist:not(.artlist-lines) .art .art-more-opts a:hover,
  .artlist:not(.artlist-lines) .art .art-variant-info a:hover {
    text-decoration: underline !important;
  }
  .artlist.artlist-lines .art .art-variant-info a,
  .artlist.artlist-lines .art .art-more-opts a {
    color: var(--mts-text-muted) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px dotted rgba(0,0,0,0.18);
    padding-bottom: 1px;
  }
  .artlist.artlist-lines .art .art-variant-info a:hover,
  .artlist.artlist-lines .art .art-more-opts a:hover {
    color: var(--mts-text) !important;
    border-bottom-color: var(--mts-text);
  }
  .artlist.artlist-lines .art .art-delivery-info {
    padding: 0 !important;
    margin: 0 !important;
  }
  .artlist.artlist-lines .art .add-to-cart-button,
  .artlist.artlist-lines .art .btn-primary {
    width: auto !important;
    min-width: 200px;
  }
  /* List-View: Specs-Slot horizontal (1 Zeile) */
  .artlist.artlist-lines .art .mts-card-specs {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 4px 0 0 !important;
    min-height: 0 !important;
  }
  .artlist.artlist-lines .art .mts-card-specs__tag {
    flex: 0 1 auto !important;
  }
  /* Single-Size-Badge bleibt absolut auf Bild — funktioniert auch in Lines */

  @media (max-width: 768px) {
    .artlist.artlist-lines .art {
      flex-direction: column !important;
      gap: 12px !important;
    }
    .artlist.artlist-lines .art .art-picture-block {
      flex: 1 1 100% !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .artlist.artlist-lines .art .art-actions-block {
      border-left: 0 !important;
      /* Iter 12 Phase A: auch im Mobile-Stack KEINE Trennlinie zwischen
         Bild/Info und Actions. Nur Whitespace separiert. */
      border-top: 0 !important;
      padding: 12px 0 0 !important;
      align-items: stretch !important;
      min-width: 0;
    }
    .artlist.artlist-lines .art .art-price-block,
    .artlist.artlist-lines .art .art-price-block .art-price,
    .artlist.artlist-lines .art .art-price-block .art-finalprice {
      text-align: left !important;
    }
  }
  /* Subline / SubTitle / ShortDescription auf Category-Karten — wurde von
     Smartstore-Default gehidet, jetzt sichtbar */
  .art-shortdesc, .art-genericname, .art-subtitle, .art-description {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    max-height: none !important;
    padding: 4px 18px !important;
    color: var(--mts-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .art-shortdesc { padding-bottom: 8px !important; }

  /* ===== CATEGORY-PAGE ===== */
  .cat-page-title, .category-page h1, .category-page .page-title h1 { font-size: clamp(2rem, 4vw, 3rem) !important; margin: 32px 0 16px !important; letter-spacing: -0.025em; font-weight: 700 !important; }
  .category-page .page-description, .cat-page-desc { color: var(--mts-text-muted) !important; font-size: 1.05rem !important; line-height: 1.55 !important; max-width: 720px; margin-bottom: 32px !important; }
  .breadcrumb { background: transparent !important; padding: 16px 0 !important; font-size: 13px !important; margin: 0 !important; }
  .breadcrumb a { color: var(--mts-text-muted) !important; text-decoration: none !important; }
  .breadcrumb a:hover { color: var(--mts-accent) !important; }
  .breadcrumb-item.active { color: var(--mts-text) !important; font-weight: 500; }
  .breadcrumb-item + .breadcrumb-item::before { color: rgba(0,0,0,0.2) !important; }
  .pagination { gap: 4px; }
  .pagination .page-link { border-radius: 999px !important; border: 0 !important; color: var(--mts-text) !important; margin: 0 4px; min-width: 38px; text-align: center; padding: 8px 12px !important; transition: all 0.18s ease; }
  .pagination .page-link:hover { background: var(--mts-bg-soft) !important; color: var(--mts-accent) !important; }
  .pagination .page-item.active .page-link { background: var(--mts-text) !important; color: #fff !important; }
  /* Listing empty/404 state polish */
  .not-found-content, .error-page-content {
    text-align: center;
    padding: 80px 24px !important;
    max-width: 720px; margin: 0 auto;
  }
  .not-found-content h1, .error-page-content h1 {
    font-family: var(--mts-font-display) !important;
    font-size: clamp(4rem, 12vw, 8rem) !important;
    font-weight: 800 !important;
    color: var(--mts-text-muted) !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 16px !important;
    line-height: 1 !important;
  }
  .not-found-content p, .error-page-content p { font-size: 1.1rem; color: var(--mts-text-muted); margin-bottom: 32px !important; }

  /* Category-Page filters/sort bar — kompakter Look */
  .cat-actions, .listing-actions, .product-list-actions {
    background: var(--mts-bg-soft) !important;
    border-radius: var(--mts-radius) !important;
    padding: 12px 16px !important;
    border: 0 !important;
    margin-bottom: 32px !important;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  }
  .cat-actions select, .listing-actions select, .product-list-actions select {
    border-radius: 999px !important;
    border: 1px solid var(--mts-line) !important;
    background: #fff !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
  /* Per-page-/sort-Buttons in der Category-Toolbar */
  .cat-page .toolbar, .category-page .toolbar { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 24px !important; }

  /* ===== CATEGORY-PAGE — Phase-3 Layout, Hero, Filter, Toolbar =====
     Scope: streng auf .category-page / .product-list bezogen. Keine globalen
     Selektoren, sonst Regression auf PDP/Cart/etc.
  */

  /* Page-Header mehr Atemraum, Title prominenter, optional Pattern-BG */
  .category-page .page-title {
    padding: 8px 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .category-page .page-title h1, .category-page h1.page-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    margin: 32px 0 12px !important;
    line-height: 1.05 !important;
    color: var(--mts-text) !important;
    text-align: center !important;
  }
  .category-page .page-description, .category-page .cat-page-desc {
    color: var(--mts-text-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    max-width: 720px;
    margin: 0 auto 28px !important;
    text-align: center !important;
  }
  /* ITER 8 PHASE E — Apple-Hero Tagline + Trennstrich */
  .category-page .mts-cat-tagline,
  .product-list .mts-cat-tagline {
    text-align: center;
    color: var(--mts-text-muted);
    font: 500 clamp(1rem, 1.6vw, 1.35rem)/1.45 var(--mts-font-display);
    letter-spacing: -0.005em;
    max-width: 720px;
    margin: 0 auto 18px !important;
  }
  .category-page .mts-cat-hero-rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 18px auto 36px;
    background: var(--mts-accent);
    border-radius: 999px;
    opacity: 0.85;
  }
  /* Bootstrap row Gap zwischen Sidebar und Main grosszuegiger */
  .category-page .row, .cat-page .row { margin-left: -16px !important; margin-right: -16px !important; }
  .category-page .row > [class*="col-"], .cat-page .row > [class*="col-"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== Filter-Sidebar (.faceted-search) — modernes Apple-Look-Sticky ===== */
  .faceted-search-block, aside.faceted-search-block, .faceted-search {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 14px;
  }
  /* ITER 10 PHASE D — Filter-Sidebar einklappbar (FIX vs. Iter 9).
     Bug Iter 9: Selektor `.category-page aside#content-left` greift NIE, weil
     `.category-page` ein Kind von `<main>` ist und der `<aside>` ein SIBLING
     im selben `<div id="content-body" class="row">`. Verschachtelung:
       <body class="lyt-cols-2">
         ...
         <div id="content-body" class="row">
           <aside id="content-left" class="col-lg-3 ...">  <-- Sidebar
           <main id="content-center" class="col-lg-9">
             <div class="page category-page">             <-- Marker
     Fix: scopen ueber `body.mts-cat-page` (vom JS auf <body> gesetzt sobald
     wir eine Category-Page erkennen). Damit greifen die Selektoren wirklich.
     Sticky `top:96px`, freies Wachstum (User scrollt mit). */
  @media (min-width: 992px) {
    body.mts-cat-page aside#content-left,
    body.mts-cat-page aside.col-lg-3 {
      position: sticky !important;
      top: 96px !important;
      align-self: flex-start !important;
      max-height: none !important;
      overflow: visible !important;
      padding-right: 0 !important;
    }
    /* Collapse-Toggle Button */
    .mts-filter-toggle {
      display: inline-flex !important;
      align-items: center;
      gap: 6px;
      background: var(--mts-bg-soft);
      border: 0;
      border-radius: 999px;
      padding: 8px 14px 8px 12px;
      font: 600 12px/1 var(--mts-font);
      color: var(--mts-text);
      cursor: pointer;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: background 0.18s ease, color 0.18s ease;
      margin-bottom: 14px;
      width: 100%;
      justify-content: space-between;
    }
    .mts-filter-toggle:hover { background: #ececef; color: var(--mts-accent); }
    .mts-filter-toggle svg {
      width: 14px; height: 14px;
      transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
    }
    .mts-filter-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
    /* Re-open Pill (sichtbar nur wenn collapsed) */
    .mts-filter-reopen {
      display: none;
      align-items: center;
      gap: 6px;
      background: var(--mts-bg-soft);
      border: 0;
      border-radius: 999px;
      padding: 8px 16px;
      font: 600 12px/1 var(--mts-font);
      color: var(--mts-text);
      cursor: pointer;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0 12px 16px 0;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .mts-filter-reopen:hover { background: #ececef; color: var(--mts-accent); }
    .mts-filter-reopen svg { width: 14px; height: 14px; transform: rotate(90deg); }
    /* Collapsed-State: KOMPLETTE Sidebar weg (Kategoriebaum + Facetten),
       Main-Col fully ausfahren. Selektor MUSS auf body.mts-cat-page +
       body.mts-filter-collapsed gescoped sein (nicht auf .category-page) —
       siehe Bug-Erklaerung oben. */
    body.mts-cat-page.mts-filter-collapsed aside#content-left,
    body.mts-cat-page.mts-filter-collapsed aside.col-lg-3 {
      display: none !important;
    }
    body.mts-cat-page.mts-filter-collapsed main#content-center,
    body.mts-cat-page.mts-filter-collapsed main.col-lg-9,
    body.mts-cat-page.mts-filter-collapsed .col-lg-9 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }
    /* Re-Open-Pill: NUR sichtbar wenn collapsed. Toggle-in-Sidebar:
       NUR sichtbar wenn expanded (Sidebar ist ja sonst hidden). Damit haben
       wir IMMER genau einen sichtbaren Filter-Button. */
    body.mts-cat-page.mts-filter-collapsed .mts-filter-reopen { display: inline-flex !important; }
    body.mts-cat-page:not(.mts-filter-collapsed) .mts-filter-reopen { display: none !important; }
    /* Iter 10 Phase D — Container darf bei collapsed Filter NOCH weiter
       auswachsen (vs. Default 1880). Klar messbarer Effekt: ohne Sidebar ~25%
       mehr Card-Breite. */
    body.mts-filter-collapsed.lyt-cols-2 .container:not(.menubar-container):not(.shopbar-container):not(.megamenu-container):not(.footer-main):not(.footer-bottom):not(.footer-social) {
      max-width: min(2240px, calc(100vw - 32px)) !important;
    }
    /* iPad-Round-2 P12: 3 Spalten auch bei eingeklapptem Filter. Die
       freigesetzte Sidebar-Breite vergroessert die 3 Cards zusaetzlich
       (deutlich groessere Produktbilder), volle Breite genutzt. KEINE 4
       Spalten mehr (war Round-1). */
    body.mts-filter-collapsed .artlist:not(.slick-initialized):not(.artlist-lines) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
  /* Mobile: Toggle nicht zeigen — Smartstore-Drawer-Pattern bleibt aktiv */
  @media (max-width: 991px) {
    .mts-filter-toggle, .mts-filter-reopen { display: none !important; }
  }
  /* Each filter group als Card-Look */
  .faceted-search-block .nav-toggler, .faceted-search-block .facet-group,
  .faceted-search-block > .block, .faceted-search > .block,
  .category-navigation, .product-list-categories {
    background: var(--mts-bg-soft) !important;
    border: 0 !important;
    border-radius: var(--mts-radius) !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
  }
  /* Filter-Group Headlines */
  .faceted-search-block .nav-toggler-heading,
  .faceted-search-block .facet-group-title,
  .faceted-search .block-title,
  .faceted-search-block h3, .faceted-search-block h4,
  .product-list-categories .block-title,
  .category-navigation .block-title {
    font-family: var(--mts-font-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--mts-text) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .faceted-search-block label, .faceted-search-block .facet-label,
  .faceted-search a {
    color: var(--mts-text) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    line-height: 1.45;
  }
  .faceted-search-block .form-check, .faceted-search-block .form-checkbox-group {
    padding: 4px 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .faceted-search-block .form-check:hover, .faceted-search-block label:hover {
    color: var(--mts-accent) !important;
  }
  .faceted-search-block input[type="checkbox"], .faceted-search-block input[type="radio"] {
    accent-color: var(--mts-accent) !important;
    width: 16px; height: 16px;
    margin-right: 6px;
  }
  /* Active-Filter Chips */
  .active-facets, .faceted-search-block .active-facets {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
  }
  .active-facets .facet-chip, .active-facets a {
    background: var(--mts-text) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 6px;
  }
  /* Price-Slider/Range modern */
  .faceted-search-block .form-row, .faceted-search-block .input-group {
    gap: 6px !important;
  }
  .faceted-search-block input[type="number"], .faceted-search-block input[type="text"] {
    border: 1px solid var(--mts-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }
  .faceted-search-block .btn, .faceted-search-block button[type="submit"] {
    border-radius: 999px !important;
    background: var(--mts-text) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  .faceted-search-block .btn:hover, .faceted-search-block button[type="submit"]:hover {
    background: var(--mts-accent) !important;
  }

  /* ===== ITER 8 PHASE C — Toolbar professioneller, ohne Borders ===== */
  /* Smartstore Standard-Markup: <div class="artlist-actions artlist-actions--top">
     mit `.artlist-action-group--filtersort` (Sort-Dropdown) und
     `.artlist-action-group--viewmode` (Grid/List-Switch). */
  .category-page .artlist-actions,
  .category-page .artlist-actions--top,
  .category-page .listing-actions,
  .category-page .product-list-actions,
  .category-page .cat-actions,
  .category-page .product-list-toolbar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }
  /* Sort-Pill — Smartstore-Default: .btn-artlist-action.dropdown-toggle */
  .category-page .btn-artlist-action,
  .category-page .listing-actions .dropdown-toggle,
  .category-page .product-list-actions .dropdown-toggle,
  .artlist-action--sort .dropdown-toggle {
    background: var(--mts-bg-soft) !important;
    border: 0 !important;
    color: var(--mts-text) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font: 500 13px/1 var(--mts-font) !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .category-page .btn-artlist-action:hover,
  .category-page .btn-artlist-action[aria-expanded="true"] {
    background: #ececef !important;
    color: var(--mts-text) !important;
    border: 0 !important;
  }
  /* Default-Bootstrap-Caret unter `.dropdown-toggle::after` durch SVG-Chevron ersetzen */
  .category-page .btn-artlist-action.dropdown-toggle::after,
  .artlist-action--sort .dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 4px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 11l-4-4h8z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 11l-4-4h8z'/></svg>") no-repeat center / contain;
    border: 0 !important;
    vertical-align: middle;
    transition: transform 0.2s ease;
  }
  .category-page .btn-artlist-action[aria-expanded="true"]::after { transform: rotate(180deg); }
  /* Dropdown-Menu Apple-Style */
  .category-page .dropdown-menu,
  #dropdown-artlist-action-sort {
    background: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
    min-width: 200px !important;
    margin-top: 8px !important;
  }
  .category-page .dropdown-item,
  #dropdown-artlist-action-sort .dropdown-item {
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font: 500 13.5px/1.3 var(--mts-font) !important;
    color: var(--mts-text) !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }
  .category-page .dropdown-item:hover,
  .category-page .dropdown-item:focus {
    background: var(--mts-bg-soft) !important;
    color: var(--mts-accent) !important;
  }
  .category-page .dropdown-item[aria-selected="true"],
  .category-page .dropdown-item.active {
    background: var(--mts-text) !important;
    color: #fff !important;
  }
  /* View-mode Switcher — segmented Pill, KEINE Border */
  .category-page .view-mode-switcher, .category-page .product-view-switcher,
  .product-list-actions .btn-group,
  .artlist-action--viewmode .btn-group,
  .artlist-action-group--viewmode .btn-group {
    display: inline-flex; gap: 2px;
    background: var(--mts-bg-soft);
    border: 0;
    border-radius: 999px;
    padding: 3px;
  }
  .category-page .view-mode-switcher .btn,
  .category-page .product-view-switcher .btn,
  .product-list-actions .btn-group .btn,
  .artlist-action--viewmode .btn-group .btn,
  .artlist-action-group--viewmode .btn-group .btn {
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mts-text-muted) !important;
    width: 34px; height: 34px;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, color 0.18s ease !important;
  }
  .category-page .view-mode-switcher .btn:hover,
  .artlist-action-group--viewmode .btn-group .btn:hover {
    color: var(--mts-text) !important;
    background: rgba(0,0,0,0.04) !important;
  }
  .category-page .view-mode-switcher .btn.active,
  .category-page .product-view-switcher .btn.active,
  .product-list-actions .btn-group .btn.active,
  .artlist-action--viewmode .btn-group .btn.active,
  .artlist-action-group--viewmode .btn-group .btn.active {
    background: var(--mts-text) !important;
    color: #fff !important;
  }
  /* Total-Count "1-20 von 20" als dezenter Sub-Text */
  .category-page .product-count, .category-page .item-count,
  .category-page .listing-actions small, .category-page .listing-actions .count {
    color: var(--mts-text-muted) !important;
    font-size: 13px !important;
  }

  /* Pagination dezenter */
  .category-page .pagination .page-link, .category-page .pagination-container .page-link {
    background: transparent !important;
    border: 0 !important;
    color: var(--mts-text) !important;
    border-radius: 999px !important;
    min-width: 40px; height: 40px;
    padding: 0 12px !important;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 2px;
  }
  .category-page .pagination .page-item.active .page-link {
    background: var(--mts-text) !important;
    color: #fff !important;
  }
  .category-page .pagination .page-link:hover {
    background: var(--mts-bg-soft) !important;
    color: var(--mts-accent) !important;
  }

  /* ===== ITER 8 PHASE A — Cards groesser, Borders raus, dezenter Hover-Lift =====
     - Keine 1px-Outline-Shadows mehr (User: "graue Borders weg")
     - Aspect 4:3 → 5:4 / 16:11 fuer mehr Bildflaeche bei gleicher Breite
     - Bildpadding von 18/22 auf 8/10 → Bilder fast vollflaechig
     - Hover-Lift weicher, Shadow weiter aber transparenter */
  .category-page .artlist .art, .product-list .artlist .art {
    box-shadow: none !important;
    background: #ffffff !important;
    border: 0 !important;
    outline: 0 !important;
    transition: transform 0.4s cubic-bezier(.22,.61,.36,1),
                box-shadow 0.4s cubic-bezier(.22,.61,.36,1) !important;
  }
  .category-page .artlist .art:hover, .product-list .artlist .art:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 50px -12px rgba(0,0,0,0.14) !important;
  }
  /* Iter 9: 3-Spalten-Default → Cards sind breiter → Image-Aspect 4:3 ergibt
     mehr Bildhoehe als 5:4 / 16:11. Bei collapsed Filter (4 Spalten) bleibt
     4:3 ebenfalls passend. Minimaler Innenrand bleibt. */
  /* C6: groessere Bilddarstellung — Block hoeher (5/4) + Innenrand reduziert. */
  .category-page .art-picture-block,
  .product-list .art-picture-block { aspect-ratio: 5 / 4 !important; }
  .category-page .art-picture img,
  .product-list .art-picture img { padding: 2px 6px !important; }
  /* Auf sehr grossen Screens (4 Spalten) leicht flacher, sonst wirken die
     Cards zu hoch. */
  @media (min-width: 1800px) {
    .category-page .art-picture-block { aspect-ratio: 5 / 4 !important; }
  }
  /* DOPPEL-TITEL killen — `.art-description` direkt nach `.art-name` enthaelt
     denselben Text. Wir verstecken sie, behalten aber ALL anderen
     `.art-description` (z.B. wenn Smartstore irgendwo wirklich eine
     ShortDescription rendert). JS markiert dedup-Faelle mit
     `data-mts-dup-desc="1"` (sehr defensiv, exakter Text-Vergleich). */
  .artlist .art .art-description[data-mts-dup-desc="1"] { display: none !important; }
  /* Defensive Fallback: wenn der text identisch zum h3.art-name ist, hide
     ueber CSS auch ohne JS. Allerdings haben Smartstore-Cards ein Pattern
     wo `.art-description` IMMER == name ist (siehe DOM-Recon Iter 8) →
     daher per Default verstecken auf Listing-Seiten. Sollte ein Shop spaeter
     `ShortDescription` befuellen, kann ueber Topic-Override re-aktiviert werden. */
  .category-page .artlist .art .art-description,
  .product-list .artlist .art .art-description,
  .artlist .art > .art-description {
    display: none !important;
  }

  /* ===== ITER 15 PHASE A — Kategorie-/Listing-Karte: Text ZENTRIERT =====
     User: Titel + Marken-Logo auf der Kategorie-Seite mittig statt links-buendig.
     Nur Grid (`.category-page` / `.product-list`), Lines-View behaelt ihr eigenes
     links/rechts-Layout. Specificity `.category-page .artlist .art ...` (0,4,0)
     schlaegt die globalen `text-align:left !important`-Regeln (0,2,0). */
  .category-page .artlist .art .art-brand,
  .category-page .artlist .art .art-vendor,
  .product-list .artlist .art .art-brand,
  .product-list .artlist .art .art-vendor {
    text-align: center !important;
    /* display:block + text-align:center zentriert auch das inline-block Logo-IMG;
       als Flex-Fallback (falls JS ein Wrapper-Element setzt) zusaetzlich zentrieren. */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Marken-Logo (Bidex-IMG, .mts-brand-img) und Text-Span mittig. */
  .category-page .artlist .art .art-brand img.mts-brand-img,
  .category-page .artlist .art .art-vendor img.mts-brand-img,
  .product-list .artlist .art .art-brand img.mts-brand-img,
  .product-list .artlist .art .art-vendor img.mts-brand-img {
    margin-inline: auto !important;
  }
  .category-page .artlist .art .art-brand > span,
  .product-list .artlist .art .art-brand > span {
    text-align: center !important;
  }
  /* Titel zentriert (Block, Link und der innere Span). */
  .category-page .artlist .art .art-name,
  .category-page .artlist .art .art-name-link,
  .category-page .artlist .art .art-name a,
  .category-page .artlist .art .art-name span,
  .category-page .artlist .art .art-genericname,
  .product-list .artlist .art .art-name,
  .product-list .artlist .art .art-name-link,
  .product-list .artlist .art .art-name a,
  .product-list .artlist .art .art-name span,
  .product-list .artlist .art .art-genericname {
    text-align: center !important;
  }
  /* Lieferinfo (falls vorhanden) ebenfalls mittig — sonst wirkt sie versetzt. */
  .category-page .artlist .art .art-delivery-info,
  .product-list .artlist .art .art-delivery-info {
    text-align: center !important;
  }

  /* ===== ITER 15 PHASE B — Preis NAEHER an den Titel, PRO REIHE gleiche Hoehe =====
     Problem (User): zwischen Titel und Preis war global zu viel Luft, weil der
     Preis-Block per `margin-top:auto` (globale Regel ~512) IMMER an den Card-Boden
     geklebt wurde. Dadurch wirkte jede Karte so, als seien 2 Titelzeilen reserviert.

     Loesung OHNE globalen 2-Zeilen-Reserve:
       1) `margin-top:auto` am Preis-Block fuer die Grid-Ansicht zuruecknehmen
          (Preis sitzt damit direkt unter dem Titel-Block).
       2) Den TITEL-Block `flex:1 1 auto` geben → er fuellt die Rest-Hoehe der Karte.
          `.art` ist Flex-Spalte (~358) und die Flex-Wrap-Reihe streckt via
          `align-items:stretch` (~347) alle Karten auf die hoechste Karte der Reihe.
          => In einer Reihe mit EINEM 2-zeiligen Titel wachsen die 1-zeiligen Titel
             mit und schieben ihre Preise auf dieselbe Y-Linie (Preise reihen-aligned).
          => Reine 1-Zeilen-Reihen haben keinen Slack → Titel waechst nicht → KOMPAKT.
       3) Die Buttons (`.art-drop`) landen automatisch am Card-Boden, weil der Titel
          den gesamten Slack absorbiert (Summe der Kinder == Reihen-Hoehe).
     Hinweis: Slack sitzt bewusst UNTER dem Titel-Text (oben ausgerichtet), nicht
     ueber dem Preis als fixer Reserve — daher kein konstanter 2-Zeilen-Abstand mehr. */
  .category-page .artlist .art .art-name,
  .product-list .artlist .art .art-name {
    flex: 1 1 auto !important;
    min-height: auto !important;
  }
  .category-page .artlist .art .art-price-block,
  .product-list .artlist .art .art-price-block {
    /* margin-top:auto (global ~512) zuruecknehmen: Preis hugged jetzt den Titel. */
    margin-top: 0 !important;
  }

  /* ITER 8 PHASE F — Mobile-Card lesbarer + groessere Bilder
     User-Feedback: 2-spaltig BEIBEHALTEN aber Bilder massiv groesser, Schrift
     besser lesbar. Aspect 5:4 fuer mehr Bildflaeche. */
  @media (max-width: 559px) {
    .category-page .art-picture-block,
    .product-list .art-picture-block { aspect-ratio: 4 / 5 !important; }
    .category-page .art-picture img { padding: 6px 8px !important; }
    .category-page .art-name-link, .category-page .art-name a {
      font-size: 0.95rem !important;
      line-height: 1.3 !important;
      padding: 8px 14px 4px !important;
      font-weight: 600 !important;
    }
    .category-page .art-price-block { padding: 6px 14px 14px !important; }
    .category-page .art-price-block .art-price, .category-page .art-finalprice {
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      color: var(--mts-text) !important;
    }
    .category-page .art-brand, .category-page .art-vendor {
      padding: 12px 14px 0 !important;
      font-size: 10px !important;
      letter-spacing: 0.1em;
    }
    .category-page .art-brand img.mts-brand-img,
    .category-page .art-vendor img.mts-brand-img {
      height: 18px !important;
    }
    .category-page .art-shortdesc, .category-page .art-genericname { padding: 2px 14px !important; font-size: 12px !important; }
    .category-page .art-drop { padding: 0 12px 12px !important; }
    /* Specs-Tags + Single-Size kompakter aber lesbar */
    .artlist .art .mts-card-specs {
      margin: 4px 14px 4px !important;
      gap: 4px !important;
      min-height: 52px !important; /* nur 2 Tags reservieren */
    }
    .artlist .art .mts-card-specs__tag {
      font-size: 10.5px !important;
      padding: 2px 7px !important;
    }
    .artlist .art .mts-card-singlesize {
      padding: 3px 10px 3px 8px !important;
      font-size: 0.65rem !important;
    }
    .artlist .art .mts-card-singlesize-slot { min-height: 26px !important; padding: 4px 14px 0 !important; }
    /* Hero-Tagline auf Mobile kleiner */
    .category-page .mts-cat-tagline { font-size: 1rem !important; padding: 0 16px; }
    .category-page .mts-cat-hero-rule { margin: 12px auto 24px !important; width: 44px !important; }
    /* Filter auf Mobile als Drawer (collapsible) — Smartstore hat oft ein Toggle */
    .category-page .col-lg-3, .category-page .col-md-3 {
      margin-bottom: 16px !important;
    }
  }
  /* Tablet 560-991 → 2 Spalten, etwas groesser */
  @media (min-width: 560px) and (max-width: 991px) {
    .category-page .art-picture-block { aspect-ratio: 5 / 4 !important; }
    .category-page .art-name-link, .category-page .art-name a {
      font-size: 1rem !important;
      padding: 8px 16px 4px !important;
    }
  }

  /* Reveal-Fallback: falls IntersectionObserver mal nichts triggert (z.B. Cookie-
     Modal blockt Viewport beim Init), zeige Karten nach 2.5s zwingend.
     CSS-only Pflicht, JS-Hook ist redundant aber existiert weiter unten. */
  @keyframes mts-reveal-fallback { to { opacity: 1; transform: none; } }
  .artlist .art { animation: mts-reveal-fallback 0.01s linear 2.5s forwards; }
  /* Wenn IO triggert, transition gewinnt visuell und animiert sauber */

  /* ===== PRODUCT DETAIL — full-bleed Container, breiter Image-Bereich,
     großer Gap, schmalere Info-Spalte ===== */
  body.product-details, body.product-page { background: #fff !important; }
  /* Container auf der Produktseite ECHT full-bleed: max 1760px, minimal Padding,
     so dass es wie ein eigener Block au\xdferhalb der normalen Section wirkt */
  body.product-details .container, .product-page .container,
  body.product-details .container.menubar-container,
  .product-page .container.menubar-container {
    max-width: 1760px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    width: 100% !important;
  }
  /* Auf grossen Screens (>1800px) volle Breite ausnutzen */
  @media (min-width: 1800px) {
    body.product-details .container.menubar-container,
    .product-page .container.menubar-container {
      max-width: none !important;
      padding-left: 60px !important;
      padding-right: 60px !important;
    }
  }
  /* Row randlos, damit Thumbnails ganz nach links rutschen koennen */
  .pd-section .row, body.product-details .pd-section.row, .product-page .pd-section.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Bild-Spalte: 60% breit, links 0 padding (Thumbs ganz links), rechts 80px Gap */
  .pd-section .pd-data-col, .pd-section > .col-12:not(.pd-info-col),
  .product-page .pd-section .pd-data-col {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    padding-left: 0 !important;
    padding-right: 80px !important;
    box-sizing: border-box !important;
  }
  /* Info-Spalte: 40% breit, mit grosszuegigem links-Padding statt Bootstrap-Default
     damit das Marken-Logo + Titel von der Bild-Spalte deutlich getrennt sind */
  .pd-section .pd-info-col, .pd-info-col {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  @media (max-width: 1100px) {
    .pd-section .pd-data-col, .pd-section .pd-info-col {
      flex: 0 0 50% !important;
      max-width: 50% !important;
      padding-right: 32px !important;
    }
  }
  @media (max-width: 900px) {
    /* Specificity match (3 classes) damit `.pd-section > .col-12:not(.pd-info-col)` (Desktop) ueberschrieben wird */
    .pd-section > .pd-data-col, .pd-section > .pd-info-col,
    .pd-section > .col-12:not(.pd-foo),
    .pd-section .pd-data-col.pd-data-col, .pd-section .pd-info-col.pd-info-col {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
    }
  }
  /* Thumbnails-Cell ganz nach links — kein Inset im gal-box */
  .pd-data-col .gal-box, .pd-data-col .pd-data-col-inner > * { padding-left: 0 !important; margin-left: 0 !important; }
  .pd-data-col .gal-nav-cell { padding-left: 0 !important; margin-left: 0 !important; }

  /* Titel — kompakter, nicht mehr 48px. Specificity 1,2,0 mit body+.page-title
     damit es die generelle .page-title h1-Regel ueberschreibt. */
  .pd-name, .product-name, .product-page h1, body.product-details h1,
  body.product-details .page-title h1.pd-name,
  .page-title h1.pd-name {
    font-size: clamp(1.5rem, 2.4vw, 2.2rem) !important;
    line-height: 1.2 !important;
    margin: 0 0 14px 0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
  .pd-info, .product-info, .pd-group { padding: 10px 0 !important; }

  /* Thumbnail-Strip + Hauptbild ohne kuenstlichen Box-Look */
  .pd-thumbs, .pd-gallery-thumbs, .gallery-thumbs, .product-thumbnails {
    margin-right: 16px !important;
    gap: 8px !important;
  }
  .pd-image-section, .product-images, .pd-gallery {
    background: transparent !important;
    border-radius: var(--mts-radius) !important;
    padding: 24px !important;
    margin-bottom: 24px;
    margin-right: 16px !important;
  }
  /* Iter 10 Phase G — Thumbnails (Smartstore .gal-nav .gal-item) ohne Border,
     groesser, weiter aussen am Page-Rand.
     Markup: .gal-nav-cell > .gal-nav > .gal-list > .gal-track > .gal-item
              > a.gal-item-viewport > img.gal-item-content
     Default-Smartstore zieht hier border-1 + 3px gap auf 56x56.

     Iter 13 Phase B (Desktop):
     - vertical-align: top → middle auf gal-nav-cell (Smartstore .gal-box ist
       display:table, table-cells respektieren vertical-align)
     - .gal-nav (inner block) bekommt margin-left: -16px → Thumbs visuell
       weiter zum Page-Rand. Margin auf table-cells hat keinen Effekt, daher
       zwingend auf den inneren block.
     - .gal-cell (das rechte table-cell mit dem Hauptbild) bekommt padding-left,
       damit visuell mehr Gap zwischen Thumbs und Hauptbild entsteht.
       Recon Iter 12: thumb-content endete x=95, gal-cell startete x=105 → 10px Gap.
       Mit padding-left:32px auf gal-cell startet Bildinhalt bei x=137, Thumbs
       bei x=1 (-16) und enden bei x=79 → ~58px sichtbarer Gap. */
  body.product-details .pd-data-col .gal-nav-cell,
  .pd-data-col .gal-nav-cell {
    /* Margin auf table-cell ignoriert; vertical-align fuer mittig */
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle !important;
  }
  body.product-details .pd-data-col .gal-nav-cell .gal-nav,
  .pd-data-col .gal-nav-cell .gal-nav {
    /* Iter 14 Phase D: Thumbs nicht abgeschnitten am Page-Rand.
       Iter 13 hatte -16px margin-left; das ergab x=1 firstThumb -> Active-State-
       Ring + Scale-Hover wurde von #content-wrapper{overflow-x:hidden} geclippt.
       -8px Position + 6px linkes Padding (im gal-nav) = sichtbarer Atemraum
       fuer Outline + Hover-Scale. */
    margin-left: -8px !important;
    padding-left: 6px !important;
    overflow: visible !important;
  }
  body.product-details .pd-data-col .gal-box > .gal-cell,
  .pd-data-col .gal-box > .gal-cell {
    /* Push Hauptbild nach rechts → visueller Gap zu den Thumbs */
    padding-left: 32px !important;
  }
  /* Iter 14 Phase D: alle Container ueber gal-nav muessen overflow:visible
     haben sonst clipt der Active-State-Ring. */
  body.product-details .pd-data-col .gal-box,
  body.product-details .pd-data-col .gal-nav-cell,
  body.product-details #pd-gallery,
  body.product-details #pd-gallery-container,
  body.product-details #pd-gallery-container-inner,
  body.product-details .pd-data-col-inner,
  .pd-data-col .gal-box,
  .pd-data-col .gal-nav-cell {
    overflow: visible !important;
  }
  /* Iter 15 Phase B — Thumbnails AUSSERHALB der Produkt-Bild-Section.
     User: "die thumbnails immernoch direkt neben dem produktbild sollte aber
     ausserhalb davon sein leben der produktbild section".

     Recon (Iter 15, viewport 1440):
       body 0..1440, productPage 32..1408, pd-data-col 17..861 (844 breit),
       gal-box 17..781 (764 breit), pd-info-col 861..1423.
     Es gibt KEINE freie linke Margin auf der Page (productPage startet bei x=32).
     Das heisst "ausserhalb der Section" = innerhalb der pd-data-col, aber LINKS
     vom Bild (statt zwischen Bild und Info-Col). Iter 13/14 hatten Thumbs ~95-110
     vom Bildrand, also visuell ZUR Bild-Section gehoerig. Jetzt:
       - gal-box wechselt von display:table zu display:block
       - gal-nav-cell wird position:absolute, links innerhalb der gal-box
         (left:0, top vertikal mittig zur ganzen gal-box-Hoehe)
       - gal-cell (Hauptbild) bekommt padding-left:110px (88 Thumbs + 22 Gap)
         damit es rechts vom Thumbs-Block beginnt.
     Effekt: die Thumbs leben links AUSSEN am Rand der Bild-Section, das Bild
     selbst rueckt nach rechts. Visuell wirkt das wie "Thumbs vor der Section".

     Unter 1281px (Tablet/Mobile/kleine Desktops) bleibt das Original-Verhalten
     der Iter 13/14 (Thumbs inside table-layout). */
  @media (min-width: 1281px) {
    body.product-details .pd-data-col #pd-gallery-container-inner,
    .pd-data-col #pd-gallery-container-inner {
      position: relative !important;
    }
    body.product-details .pd-data-col .gal-box,
    .pd-data-col .gal-box {
      display: block !important;
      position: relative !important;
      min-height: 500px;
    }
    body.product-details .pd-data-col .gal-box > .gal-nav-cell,
    .pd-data-col .gal-box > .gal-nav-cell {
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 88px !important;
      height: auto !important;
      max-height: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      vertical-align: top !important;
      z-index: 2;
    }
    body.product-details .pd-data-col .gal-box > .gal-cell,
    .pd-data-col .gal-box > .gal-cell {
      display: block !important;
      width: 100% !important;
      /* 88px Thumbs + 28px sichtbarer Gap = 116px linker Innenabstand */
      padding-left: 116px !important;
    }
    body.product-details .pd-data-col .gal-nav-cell .gal-nav,
    .pd-data-col .gal-nav-cell .gal-nav {
      margin-left: 0 !important;
      padding-left: 0 !important;
    }
  }

  /* Iter 23 — PDP-Thumbs Conditional Hide.
     Wenn ein Produkt nur EIN Bild hat, soll die Thumbnail-Spalte komplett
     verschwinden und das Hauptbild den freien Slot einnehmen.

     Smartstore selbst markiert die Thumb-Spalte mit
       <div class="gal-nav-cell gal-nav-hidden">
     sobald das Track-Item-Set (.gal-nav .gal-item) nicht mehr als ein
     Element enthaelt. Diese native Klasse haben wir in Iter 13/15 versehent-
     lich mit display:block !important ueberschrieben — hier wird sie wieder
     respektiert.

     Doppelter Trigger fuer Robustheit:
       1) `.gal-nav-cell.gal-nav-hidden`     (Smartstore-nativer Pfad)
       2) `:not(:has(.gal-nav .gal-item:nth-child(2)))` (CSS-only Fallback,
          falls Smartstore die Klasse mal nicht setzt; :has() ab Safari 15.4 /
          Chrome 105 / Firefox 121).

     Bei aktivem Hide laeuft die `.gal-cell` (Hauptbild) wieder mit
     padding-left:0, damit das Bild die volle Breite der Section bekommt
     und kein leerer 116px-Slot uebrig bleibt. Reine CSS-Loesung, kein JS. */
  body.product-details .pd-data-col .gal-nav-cell.gal-nav-hidden,
  .pd-data-col .gal-nav-cell.gal-nav-hidden,
  body.product-details .pd-data-col .gal-box:not(:has(.gal-nav .gal-item:nth-child(2))) .gal-nav-cell,
  .pd-data-col .gal-box:not(:has(.gal-nav .gal-item:nth-child(2))) .gal-nav-cell {
    display: none !important;
  }
  /* Hauptbild: Padding-Reset, sobald Thumbs versteckt sind. Greift sowohl im
     Desktop-Override (padding-left:116px) als auch im Iter 13 Phase B Default
     (padding-left:32px). */
  @media (min-width: 1281px) {
    body.product-details .pd-data-col .gal-box:has(.gal-nav-cell.gal-nav-hidden) > .gal-cell,
    body.product-details .pd-data-col .gal-box:not(:has(.gal-nav .gal-item:nth-child(2))) > .gal-cell,
    .pd-data-col .gal-box:has(.gal-nav-cell.gal-nav-hidden) > .gal-cell,
    .pd-data-col .gal-box:not(:has(.gal-nav .gal-item:nth-child(2))) > .gal-cell {
      padding-left: 0 !important;
    }
  }
  body.product-details .pd-data-col .gal-box:has(.gal-nav-cell.gal-nav-hidden) > .gal-cell,
  body.product-details .pd-data-col .gal-box:not(:has(.gal-nav .gal-item:nth-child(2))) > .gal-cell,
  .pd-data-col .gal-box:has(.gal-nav-cell.gal-nav-hidden) > .gal-cell,
  .pd-data-col .gal-box:not(:has(.gal-nav .gal-item:nth-child(2))) > .gal-cell {
    padding-left: 0 !important;
  }

  body.product-details .pd-data-col .gal-nav .gal-item,
  .pd-data-col .gal-nav .gal-item {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    /* Iter 11 Fix 3 — Container auf 78x78 fixieren, damit innenliegende
       Smartstore-Default-Width von 56-68px nicht durchschlaegt. */
    width: 78px !important;
    height: 78px !important;
    box-sizing: border-box !important;
  }
  body.product-details .pd-data-col .gal-nav .gal-item-viewport,
  .pd-data-col .gal-nav .gal-item-viewport {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    /* Iter 14 Phase D: weiche Apple-Style Transition fuer Hover/Active */
    transition: transform 0.2s cubic-bezier(.22,.61,.36,1), box-shadow 0.2s ease, outline-color 0.2s ease;
    /* Viewport ebenfalls auf volle Item-Groesse */
    width: 78px !important;
    height: 78px !important;
    display: block !important;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  /* Iter 14 Phase D: Hover-State subtil — leichte Soft-Shadow + minimales Scale.
     Inactive-State hat KEINE Border (User: "modernes" + clean) */
  body.product-details .pd-data-col .gal-nav .gal-item:hover .gal-item-viewport,
  body.product-details .pd-data-col .gal-nav .gal-item .gal-item-viewport:hover,
  .pd-data-col .gal-nav .gal-item:hover .gal-item-viewport {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.18);
  }
  /* Iter 14 Phase D: Active-State modern — Outline mit Offset + Scale + Soft-Shadow.
     Iter 11/13 hatte nur 2px box-shadow als Border-Replacement; User wuenscht
     "anders und moderner schoene". Apple-Selected-Look = Ring mit Atemraum + leichtem Lift. */
  body.product-details .pd-data-col .gal-nav .gal-item[aria-selected="true"] .gal-item-viewport,
  body.product-details .pd-data-col .gal-nav .gal-item .gal-item-viewport[aria-selected="true"],
  .pd-data-col .gal-nav a.gal-item-viewport[aria-selected="true"] {
    /* outline + offset = Apple-Ring; box-shadow weg, sonst Doppel-Effekt */
    outline: 2px solid var(--mts-text) !important;
    outline-offset: 3px !important;
    box-shadow: 0 6px 20px -6px rgba(0,0,0,0.22) !important;
    transform: scale(1.04);
  }
  body.product-details .pd-data-col .gal-nav .gal-item-viewport img,
  .pd-data-col .gal-nav .gal-item-viewport img,
  .pd-data-col .gal-nav .gal-item img.gal-item-content {
    width: 78px !important;
    height: 78px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
  }

  /* Pd-Offer + Smartstore-Default-Geschwister: KEIN Hintergrund, KEINE Borders.
     User: "ueber dem preis sind auch zwei komische linien die nicht da sein sollten".
     WICHTIG: NUR Smartstore-Klassen, NICHT meine eigenen .mts-pd-* Bloecke
     (sonst wird ihr Hintergrund/Border auch genullt). */
  .pd-offer, .pd-offer-section, .pd-offer-actions-container,
  .pd-buy-section, .pd-price-box, .pd-price-section,
  .pd-info-col .pd-info, .pd-info-col .pd-info-block,
  .pd-info-col .pd-attrs-container,
  .pd-info-col .pd-attribute-row,
  .pd-info-col .pd-actions-container,
  .pd-info-col .pd-group {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .pd-offer { padding: 8px 0 0 !important; margin: 0 !important; }
  .pd-attrs-container { padding: 0 !important; margin: 0 !important; }
  /* Iter 11 Fix 2 — PDP Title->Preis Gap (war 76px, Ziel 6-8px).
     - leere pd-attrs-container ausblenden (28px Box mit nur Whitespace,
       :empty matcht das NICHT, daher :has(> *) als Fallback + JS-Hide weiter unten)
     - h1.pd-name margin-bottom auf 8px (existierende Regel mit !important
       hatte 4px gesetzt — wir ueberschreiben mit hoeherer Spezifitaet)
     - pd-finalprice kein top-margin
     Body-scoped damit andere Layouts (z. B. Listing) nicht betroffen sind. */
  /* WICHTIG: Smartstore setzt KEINE body.product-details-Klasse!
     Stattdessen liegt der Wrapper-Div .product-details-page.
     Body hat nur lyt-cols-1. */
  .product-details-page .pd-info-col .pd-attrs-container:empty,
  .product-details-page .pd-info-col .pd-attrs-container:not(:has(> *)),
  .product-details-page .pd-info-col .pd-attrs-container[data-mts-empty="1"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .product-details-page .pd-info-col h1.pd-name,
  .product-details-page .pd-info-col .page-title h1.pd-name,
  .product-details-page .pd-info .page-title h1.pd-name {
    margin-bottom: 8px !important;
  }
  .product-details-page .pd-finalprice,
  .product-details-page .pd-offer .pd-finalprice,
  .product-details-page .pd-offer-price .pd-finalprice {
    margin-top: 0 !important;
  }
  .product-details-page .pd-offer { padding-top: 0 !important; }
  /* Iter 11 Fix 2 (Refinement) — pd-group hat global padding:10px 0; im
     pd-offer-Kontext fuegt das 20px ueber den Preis-Block an. Selektiv nullen. */
  .product-details-page .pd-offer .pd-group,
  .product-details-page .pd-offer-price .pd-group,
  .product-details-page .pd-offer-price-container .pd-group {
    padding: 0 !important;
  }
  /* pd-info-col gap auf 0 (war 8px) damit Title-zu-Preis enger.
     Whitespace wird durch h1.mb (8px) und pd-info.mb erzeugt. */
  .product-details-page .pd-info-col {
    gap: 0 !important;
  }
  /* pd-info margin-bottom = 0 — direkter Anschluss zum Preis */
  .product-details-page .pd-info {
    margin-bottom: 0 !important;
  }
  /* h1 margin-bottom auf 6px (war 8px) — finetune Richtung Ziel 6-8px */
  .product-details-page h1.pd-name,
  .product-details-page .page-title h1.pd-name,
  .product-details-page .pd-info .page-title h1.pd-name {
    margin-bottom: 6px !important;
  }
  /* page-title: kein bottom-margin */
  .product-details-page .pd-info .page-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Iter 10 Phase E — pd-info kompakter:
     - margin-bottom 18px -> 6px (Title naeher zum Preis-Block)
     - kein top-padding (User: "anbieterlogo + produkttitel nach oben schieben")
     pd-info-col selbst hat aktuell 16px padding-top im Mobile-Override; Desktop
     hat 0 padding-left. Wir nehmen den Brand-Block-margin-bottom auch runter. */
  .pd-info { padding: 0 !important; margin: 0 0 6px 0 !important; }
  .pd-info-col .pd-info .pd-brand-block { margin: 0 0 6px 0 !important; }
  .pd-info-col .pd-info > * { margin-bottom: 4px !important; }
  /* Title kompakter Bottom-Margin damit Preis enger anschliesst */
  .pd-info .page-title { margin: 0 !important; padding: 0 !important; }
  body.product-details .page-title h1.pd-name,
  .pd-info-col .page-title h1.pd-name,
  .page-title h1.pd-name {
    margin: 0 0 4px 0 !important;
  }
  /* pd-info-col gap reduzieren: war 14px, jetzt 8px */
  .pd-section .pd-info-col, .pd-info-col {
    gap: 8px !important;
  }
  /* zoom-window-container minimieren wenn leer (kein order-Slot blockieren) */
  .pd-info-col .zoom-window-container:empty { display: none !important; height: 0 !important; }

  /* Info-Col als Flex-Column damit wir die Review-Section UNTER die Kauf-Section
     verschieben koennen. Iter 10 Phase E: gap auf 8px (war 14px) damit Brand,
     Title, Preis enger zusammen sitzen (User-Feedback). */
  .pd-info-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pd-info-col .zoom-window-container { order: 0 !important; }
  /* Neue Elemente: Leasing-Anbieter-Link ganz oben */
  .pd-info-col .mts-pd-providers-link { order: 0 !important; }

  /* Iter 13 Phase A — Brand-Logo soll vertikal auf gleicher Hoehe wie der
     "Leasing-Anbieter suchen"-Link starten (User-Feedback Iter 13).
     Vorher: providers-link nahm 32px+8px Gap im flex-flow → brand begann y=314,
     providers y=274 → 40px Differenz.
     Loesung: providers-link aus flex-flow nehmen via position:absolute top-right.
     Damit rueckt brand-block + alles darunter um 40px nach oben.
     Body-class .product-details-page als Scope, plus position:relative auf
     pd-info-col als Anchor. Nur Desktop — Mobile-Override unten setzt
     position:static via order:-1. */
  .product-details-page .pd-info-col {
    position: relative !important;
  }
  .product-details-page .pd-info-col .mts-pd-providers-link {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 2;
  }
  .pd-info-col .pd-info { order: 1 !important; }
  .pd-info-col .pd-attrs-container { order: 2 !important; }
  .pd-info-col .pd-offer { order: 3 !important; }
  /* Neue Elemente nach Cart-Button */
  .pd-info-col .mts-pd-countdown { order: 4 !important; }
  .pd-info-col .mts-pd-cta-row { order: 5 !important; }
  .pd-info-col .mts-pd-jobrad { order: 6 !important; }
  .pd-info-col .pd-review-summary { order: 7 !important; padding-top: 16px !important; }
  /* Review-Summary visuell dezent */
  .pd-review-summary { background: transparent !important; }
  .pd-review-summary .pd-review-link { color: var(--mts-accent) !important; font-weight: 500; }

  /* Brand + Title visuell zusammenfassen ohne Trennstriche */
  .pd-info-col .pd-info > * { margin-bottom: 8px !important; }

  /* Leere Smartstore-Subkomponenten kollabieren (verhindert grosse
     Whitespace-Bloecke zwischen Preis und MwSt.-Zeile auf Mobile) */
  .pd-tierprices:empty, .pd-stock-info-container:empty,
  .pd-variants-container:empty, .pd-attrs-container:empty,
  .pd-group:empty, .pd-tierprices > .pd-group:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pd-offer-price > .pd-group { margin: 0 !important; }
  .pd-price-group { margin-bottom: 4px !important; }
  .pd-legalinfo { font-size: 13px; color: var(--mts-text-muted) !important; margin: 0 !important; }

  /* === NEUE PRODUKTE-SEITEN-BLOECKE (vom JS injiziert) === */

  /* Leasing-Anbieter-suchen Link oben rechts in der Info-Spalte */
  .mts-pd-providers-link {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-end;
    color: var(--mts-text); text-decoration: none;
    font-size: 14px; font-weight: 500;
    padding: 6px 0;
    cursor: pointer;
    transition: color 0.18s ease;
  }
  .mts-pd-providers-link:hover { color: var(--mts-accent); text-decoration: underline; }
  .mts-pd-providers-link svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Bestelle-in-den-naechsten Countdown Block */
  .mts-pd-countdown {
    background: var(--mts-bg-soft);
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    line-height: 1.5;
    margin: 6px 0 0;
  }
  .mts-pd-countdown__label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--mts-text);
    margin-bottom: 4px;
  }
  .mts-pd-countdown__label svg { width: 16px; height: 16px; color: var(--mts-text-muted); }
  .mts-pd-countdown__time { font-weight: 700; color: var(--mts-text); }
  .mts-pd-countdown__delivery {
    color: #15803d;
    font-weight: 600;
    font-size: 14px;
    margin-top: 4px;
  }

  /* CTA-Row: Leasing Anfrage + Bestpreis Anfrage Buttons nebeneinander */
  .mts-pd-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
  }
  .mts-pd-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--mts-line);
    background: #fff;
    color: var(--mts-text);
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .mts-pd-cta-btn:hover { transform: translateY(-1px); box-shadow: var(--mts-shadow-soft); }
  .mts-pd-cta-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .mts-pd-cta-btn--leasing { color: #047857; border-color: rgba(4, 120, 87, 0.3); }
  .mts-pd-cta-btn--leasing:hover { background: rgba(4, 120, 87, 0.06); border-color: #047857; }
  .mts-pd-cta-btn--bestpreis { color: #b91c1c; border-color: rgba(185, 28, 28, 0.3); }
  .mts-pd-cta-btn--bestpreis:hover { background: rgba(185, 28, 28, 0.06); border-color: #b91c1c; }

  /* JobRad-Block (gruener Hervor-Banner) */
  .mts-pd-jobrad {
    background: linear-gradient(135deg, #00A651 0%, #007e3d 100%);
    color: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .mts-pd-jobrad:hover { transform: translateY(-2px); }
  .mts-pd-jobrad__icon {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .mts-pd-jobrad__icon svg { width: 22px; height: 22px; color: #fff; }
  .mts-pd-jobrad__text { flex: 1; }
  .mts-pd-jobrad__title { font-weight: 700; font-size: 15px; line-height: 1.2; }
  .mts-pd-jobrad__sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }

  /* Modal-Overlay fuer Leasing/Bestpreis/Anbieter-Modals */
  .mts-pd-modal-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .mts-pd-modal-backdrop.is-open { opacity: 1; visibility: visible; }
  .mts-pd-modal {
    background: #fff;
    border-radius: var(--mts-radius);
    max-width: 540px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    padding: 32px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s ease;
  }
  .mts-pd-modal-backdrop.is-open .mts-pd-modal { transform: none; }
  .mts-pd-modal h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.02em; }
  .mts-pd-modal p { color: var(--mts-text-muted); margin: 0 0 20px; line-height: 1.5; }
  .mts-pd-modal__close {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: var(--mts-bg-soft); border: 0; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  .mts-pd-modal__form { display: flex; flex-direction: column; gap: 12px; }
  .mts-pd-modal__form input, .mts-pd-modal__form textarea {
    padding: 12px 14px;
    border: 1px solid var(--mts-line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
  }
  .mts-pd-modal__form input:focus, .mts-pd-modal__form textarea:focus {
    outline: 0; border-color: var(--mts-accent);
    box-shadow: 0 0 0 3px rgba(255,106,0,0.18);
  }
  .mts-pd-modal__submit {
    background: var(--mts-accent); color: #fff;
    border: 0; border-radius: 12px;
    padding: 14px 20px;
    font-weight: 600; cursor: pointer;
    margin-top: 4px;
  }
  .mts-pd-modal__submit:hover { background: var(--mts-accent-hover); }

  /* TASK-119: Filial-Verfuegbarkeits-/Reserve-Liste im Modal */
  .mts-fil-list { display: grid; gap: 10px; margin: 16px 0 0; }
  .mts-fil-loading, .mts-fil-empty, .mts-fil-error {
    color: var(--mts-text-muted); font-size: 14px; margin: 8px 0;
  }
  .mts-fil-error { color: #b91c1c; }
  .mts-fil-card {
    border: 1px solid var(--mts-line); border-radius: 14px;
    padding: 14px 16px; background: #fff;
  }
  .mts-fil-card.is-current { border-color: var(--mts-accent); box-shadow: 0 0 0 2px rgba(255,106,0,0.14); }
  .mts-fil-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .mts-fil-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #1f2937; }
  .mts-fil-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex: 0 0 auto; }
  .mts-fil-card--in .mts-fil-dot { background: #16a34a; }
  .mts-fil-card--low .mts-fil-dot { background: #d97706; }
  .mts-fil-card--out .mts-fil-dot { background: #dc2626; }
  .mts-fil-card--unknown .mts-fil-dot { background: #9ca3af; }
  .mts-fil-qty { font-weight: 500; color: var(--mts-text-muted); margin-left: 4px; }
  .mts-fil-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
  .mts-fil-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
  .mts-fil-badge--current { background: rgba(255,106,0,0.12); color: var(--mts-accent); }
  .mts-fil-badge--primary { background: #eef2ff; color: #4338ca; }
  .mts-fil-name { font-size: 15px; font-weight: 700; margin: 10px 0 2px; letter-spacing: -0.01em; }
  .mts-fil-addr { font-size: 13px; color: var(--mts-text-muted); margin: 0 0 10px; }
  .mts-fil-actions { display: flex; flex-direction: column; gap: 6px; }
  .mts-fil-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; border: 0; border-radius: 10px;
    padding: 11px 16px; cursor: pointer; text-decoration: none;
  }
  .mts-fil-btn--primary { background: var(--mts-accent); color: #fff; }
  .mts-fil-btn--primary:hover { background: var(--mts-accent-hover); }
  .mts-fil-btn--primary:disabled { opacity: 0.6; cursor: default; }
  .mts-fil-btn--ghost { background: #f3f4f6; color: #1f2937; }
  .mts-fil-btn--static { cursor: default; }
  .mts-fil-btn--disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
  .mts-fil-err { font-size: 13px; color: #b91c1c; margin-top: 4px; }
  .mts-fil-success { text-align: center; padding: 4px 0; color: #065f46; }
  .mts-fil-success svg { color: #16a34a; }
  .mts-fil-success h5 { font-size: 15px; font-weight: 700; margin: 6px 0 4px; }
  .mts-fil-success p { font-size: 13px; color: #1f2937; margin: 0 0 4px; }
  .mts-fil-success__sub { color: var(--mts-text-muted) !important; }

  /* Anbieter-Modal-Liste */
  .mts-pd-providers-list {
    display: grid; gap: 8px;
    margin: 16px 0 0;
  }
  .mts-pd-provider-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mts-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--mts-text);
    transition: all 0.18s ease;
  }
  .mts-pd-provider-item:hover { border-color: var(--mts-accent); background: rgba(255,106,0,0.04); }
  .mts-pd-provider-item__name { font-weight: 600; }
  .mts-pd-provider-item__sub { font-size: 12px; color: var(--mts-text-muted); margin-top: 2px; }
  .pd-image-section img, .product-images img, .pd-gallery img { border-radius: var(--mts-radius) !important; object-fit: contain !important; }
  .pd-finalprice, .pd-finalprice-amount, .pd-offer-price, .product-price, .product-page .price {
    font-family: var(--mts-font-display) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    font-weight: 700 !important; color: var(--mts-text) !important;
    letter-spacing: -0.02em;
  }
  .pd-attrs, .pd-attribute, .product-attribute-row, .pd-attrs-container { padding: 14px 0 !important; border-bottom: 1px solid var(--mts-line); }
  .pd-tabs .nav-link, .nav-tabs .nav-link { font-weight: 600 !important; color: var(--mts-text-muted) !important; border: 0 !important; padding: 14px 22px !important; border-radius: 999px !important; background: transparent !important; }
  .pd-tabs .nav-link.active, .nav-tabs .nav-link.active { background: var(--mts-text) !important; color: #fff !important; }
  .pd-tabs, .nav-tabs { border-bottom: 0 !important; gap: 8px; }
  #pd-add-to-cart, .add-to-cart-button, .pd-buy-section .btn-primary, .pd-offer-actions-container .btn-primary { padding: 16px 36px !important; font-size: 16px !important; }
  .pd-actions-container .pd-action-link { color: var(--mts-text-muted) !important; }
  .pd-actions-container .pd-action-link:hover { color: var(--mts-accent) !important; }
  /* Compare-Restore (b1): nativer Smartstore-PDP-Compare-Link bleibt sichtbar
     in der .pd-actions-Row (neben "merken" / "fragen?"), mit nativem SVG.
     Die P13-Hides wurden entfernt. */
  .pd-rating-box, .pd-review-link { font-size: 13px; color: var(--mts-text-muted) !important; }

  /* Stock universal */
  .stock-availability, .availability-text {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px !important; font-weight: 500 !important;
    padding: 6px 12px; border-radius: 999px; background: rgba(21,128,61,0.1); color: #15803d !important;
  }
  .stock-availability.out-of-stock, .availability-text.unavailable { background: rgba(156,163,175,0.15); color: #6b7280 !important; }

  /* ===== CART ===== */
  .cart-list, .order-summary { background: #fff !important; border-radius: var(--mts-radius-lg) !important; border: 0 !important; padding: 24px !important; box-shadow: var(--mts-shadow-soft); }
  .cart-row { border-bottom: 1px solid var(--mts-line) !important; padding: 24px 0 !important; }
  .cart-row:last-child { border-bottom: 0 !important; }
  .order-summary-content, .cart-summary, .totals { background: var(--mts-bg-soft) !important; border-radius: var(--mts-radius-lg) !important; padding: 28px !important; }
  .quantity-input, input[type='number'] { border-radius: 12px !important; border: 1px solid var(--mts-line) !important; padding: 8px 12px !important; }

  /* ===== HOMEPAGE-WIDGETS ===== */
  .home > * { background: transparent !important; }
  .home .heading-title { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; }
  .home .product-grid-home-page, .home .product-grid { padding: 80px 0 !important; }
  .home .manufacturer-grid { display: none !important; }
  /* Smartstore-Default-Page-Title ('Willkommen bei Move To Shop') auf Home unsichtbar */
  .home-page .topic-html-content > .block-title, .home-page .block-title { display: none !important; }
  .home-page .topic-html-content { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* iPad-Round-2 P9: kein weisses Bottom-Padding der Homepage-Content-Wrapper
     bis zum Footer -> nahtloser Uebergang von der dunklen CTA-Sektion. */
  body.home .page.home-page,
  body.home .home-page > .page-body,
  body.home .home-page .page-body,
  body.home .home-page .more-less,
  body.home .home-page .more-block,
  body.home .home-page .mts-store,
  body.home .home-page .topic-html-content,
  body.home .home-page .topic-html-content-body,
  body.home .page-main .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Default 'Top-Warengruppen'-Heading auf Home (CategoryHomePageBlock) ausblenden */
  .home .artlist-homepage-categories, .home .product-grid-home-page > .heading { display: none !important; }
  /* Listing/Category Page-Header background grau weg */
  .page-header, .cat-page > .page-header, .category-page > .page-header { background: #fff !important; padding: 16px 0 !important; }
  /* Theme-Selector im Footer hide (CSS-Backup zur Setting) */
  footer .theme-selector, footer #theme-selector, footer .footer-block-theme, footer .theme-block { display: none !important; }
  footer h5:has(+ * .theme-selector), footer h4:has(+ * .theme-selector) { display: none !important; }
  /* Konkret bei Smartstore Flex Theme: Themes-Heading & Dropdown */
  footer .footer-services > div:has(.theme-selector), footer-newsletter ~ * + * { }
  /* GDPR-Hinweis-Text in Newsletter sollte sichtbar sein (war weiss auf weiss) */
  footer .footer-newsletter .newsletter-disclaimer, footer .footer-newsletter label { color: rgba(255,255,255,0.7) !important; }

  /* Recently viewed bigger */
  .product-grid-recently-viewed-products, .recently-viewed-block { padding: 80px 0 !important; }
  .product-grid-recently-viewed-products .heading-title, .recently-viewed-block .heading-title { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; margin-bottom: 40px !important; }

  /* ===== FORMS ===== */
  .form-control, input[type='text'], input[type='email'], input[type='tel'], input[type='password'], textarea, select {
    border-radius: 14px !important;
    border: 1px solid var(--mts-line) !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    transition: all 0.18s ease;
    background: #fff !important;
  }
  .form-control:focus, input:focus, textarea:focus, select:focus {
    outline: 0 !important;
    border-color: var(--mts-accent) !important;
    box-shadow: 0 0 0 3px rgba(255,106,0,0.18) !important;
  }
  .form-label, label { font-weight: 500 !important; font-size: 14px !important; color: var(--mts-text) !important; margin-bottom: 8px; }

  /* ===== PAGE WRAPPERS ===== */
  .product-page, .category-page, .topic-page, .cms-page-content { padding: 32px 0 80px !important; }

  /* ===== CARDS ===== */
  .card, .panel { border: 0 !important; border-radius: var(--mts-radius-lg) !important; box-shadow: var(--mts-shadow-soft) !important; }

  /* ===== BG CLEANUP ===== */
  .bg-light, .bg-secondary { background: #fff !important; }

  /* ===== OFFCANVAS-PANELS (Cart, Wishlist, Compare, Mobile-Menu) =====
     Smartstore-Default-Hintergrund war durch unsere Bg-Resets verloren gegangen,
     dadurch schienen die Header-Icons durch die Panels durch (User: "kommt
     zweimal was, eine neue section ueber der von Smartstore"). */
  .offcanvas, #offcanvas-cart, #offcanvas-menu, #offcanvas-search,
  .offcanvas .offcanvas-content,
  .offcanvas-cart-content,
  .offcanvas-menu-content {
    background: #ffffff !important;
  }
  /* Backdrop hinter dem Offcanvas — abgedunkelt damit Page klar wegtritt */
  .offcanvas-backdrop, .modal-backdrop {
    background: rgba(0,0,0,0.5) !important;
    opacity: 1 !important;
  }
  /* Tabs-Header hat eigene Border unten */
  .offcanvas-cart-header { background: #ffffff !important; border-bottom: 1px solid var(--mts-line) !important; }

  /* ===== iPad-Round-3 P15 (korrigiert): NUR "Vergleichen" raus =====
     Wunschliste BLEIBT im Header + Offcanvas (User-Korrektur 2026-06-20).
     Nur der Compare-/Vergleichen-Eintrag wird ausgeblendet. */
  /* (a) Header-Shopbar: nur Vergleichen ausblenden; Warenkorb + Wunschliste bleiben. */
  #shopbar-compare,
  a.shopbar-button[href="/compareproducts/"] {
    display: none !important;
  }
  /* (b) Offcanvas-Cart-Tab-Header: nur Vergleichen-Tab ausblenden;
     Warenkorb- + Wunschliste-Tab bleiben. */
  #offcanvas-cart .offcanvas-cart-header .nav-item:has(> #compare-tab),
  .offcanvas-cart-header .nav-item:has(> a[href="#occ-compare"]) {
    display: none !important;
  }
  /* Fallback ohne :has(): den Compare-Tab-Link selbst ausblenden. */
  #offcanvas-cart #compare-tab {
    display: none !important;
  }
  /* (c) CMS-Linklist-Menue (nav-collapse / Offcanvas-Seitenleiste): den
     "Vergleichen"-Eintrag (/compareproducts/) ausblenden (2026-06-20). */
  .cms-menu-linklist li:has(> a.menu-link[href="/compareproducts/"]),
  .cms-menu-linklist a.menu-link[href="/compareproducts/"] {
    display: none !important;
  }
  /* Warenkorb- + Wunschliste-Tab teilen sich die Breite (Vergleichen ist raus). */
  #offcanvas-cart .offcanvas-cart-header .nav-item:has(> #cart-tab),
  #offcanvas-cart .offcanvas-cart-header .nav-item:has(> #wishlist-tab) {
    flex: 1 1 50% !important;
  }

  /* ===== iPad-Round-2 P16: Offcanvas-Cart restyle (weiss + schwarz) ===== */
  /* Aktiver "Warenkorb"-Tab: KEIN schwarzer Button-Hintergrund mehr.
     Stattdessen weiss + schwarze Schrift + Akzent-Unterstrich. Ueberstimmt
     die generische `.nav-tabs .nav-link.active { background:#1d1d1f }`-Regel
     via hoeherer Spezifitaet (#offcanvas-cart). */
  #offcanvas-cart .offcanvas-cart-header .nav-link,
  .offcanvas-cart-header .nav-link {
    color: var(--mts-text-muted) !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
  }
  #offcanvas-cart .offcanvas-cart-header .nav-link.active,
  #offcanvas-cart .nav-tabs .nav-link.active,
  .offcanvas-cart-header .nav-link.active {
    color: var(--mts-text) !important;
    background: #ffffff !important;
    border-bottom: 2px solid var(--mts-accent) !important;
  }

  /* Offcanvas-Cart-Footer: schwarz-auf-weiss. Zwischensumme schwarz,
     "zum Warenkorb" + "zur Kasse" schwarze Buttons mit weisser Schrift. */
  #offcanvas-cart .offcanvas-cart-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--mts-line) !important;
  }
  #offcanvas-cart .offcanvas-cart-footer .sub-total-caption {
    color: var(--mts-text-muted) !important;
  }
  #offcanvas-cart .offcanvas-cart-footer .sub-total,
  #offcanvas-cart .offcanvas-cart-footer .sub-total.price {
    color: var(--mts-text) !important;
    font-weight: 700 !important;
  }
  #offcanvas-cart .offcanvas-cart-footer .btn,
  #offcanvas-cart .offcanvas-cart-footer .btn-action,
  #offcanvas-cart .offcanvas-cart-footer .btn-success,
  #offcanvas-cart .offcanvas-cart-footer .btn-clear {
    background: var(--mts-text) !important;
    border: 1px solid var(--mts-text) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
  }
  #offcanvas-cart .offcanvas-cart-footer .btn:hover,
  #offcanvas-cart .offcanvas-cart-footer .btn-action:hover,
  #offcanvas-cart .offcanvas-cart-footer .btn-success:hover,
  #offcanvas-cart .offcanvas-cart-footer .btn-clear:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
  }
  #offcanvas-cart .offcanvas-cart-footer .btn i,
  #offcanvas-cart .offcanvas-cart-footer .btn span {
    color: #ffffff !important;
  }

  /* Mengen-Stepper im Offcanvas OHNE Border (nur Buttons + Zahl, clean). */
  #offcanvas-cart .qty-input,
  #offcanvas-cart .qty-input .numberinput-group,
  #offcanvas-cart .qty-input .input-group,
  #offcanvas-cart .qty-input .form-control,
  #offcanvas-cart .qty-input .numberinput,
  #offcanvas-cart .numberinput-stepper {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #offcanvas-cart .qty-input .form-control,
  #offcanvas-cart .qty-input .numberinput {
    background: var(--mts-bg-soft) !important;
    border-radius: 10px !important;
  }
  #offcanvas-cart .numberinput-stepper {
    color: var(--mts-text-muted) !important;
  }
  #offcanvas-cart .numberinput-stepper:hover {
    color: var(--mts-accent) !important;
  }

  /* ===== GLOBAL REVEAL CLASSES (for any Smartstore-rendered list) ===== */
  .mtsg-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); will-change: transform, opacity; }
  .mtsg-reveal.is-visible { opacity: 1; transform: none; }
  /* Apply to artlist children */
  .artlist .art { opacity: 0; transform: translateY(36px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
  .artlist .art.is-visible { opacity: 1; transform: none; }

  /* ===== ACTIVE-TAB ORANGE-UNDERLINE entfernen =====
     Smartstore .nav-tabs-line / .nav-tabs-line-dense rendert ein ::before
     mit `background: rgb(238,155,0); height: 2px; bottom: 0` als Active-Indicator.
     Bei schwarzem Active-Tab (bg:#1d1d1f, color:#fff) reicht das visuell aus,
     der orangene Strich ist redundant und vom User explizit nicht gewollt.
     Killt Underline auf ALL Tabs/Pill-Buttons mit aktivem State. */
  .pd-tabs .nav-link::before, .pd-tabs .nav-link::after,
  .nav-tabs .nav-link::before, .nav-tabs .nav-link::after,
  .nav-tabs-line .nav-link::before, .nav-tabs-line .nav-link::after,
  .nav-tabs-line-dense .nav-link::before, .nav-tabs-line-dense .nav-link::after,
  .nav-tabs .nav-tabs-indicator,
  .pd-tabs .nav-tabs-indicator {
    display: none !important;
    content: none !important;
    background: transparent !important;
    height: 0 !important;
  }
  /* Falls Active-Tab als .btn-secondary (schwarz) auf Mobile mit Border-Bottom
     orange angezeigt wird (Smartstore Default-Skin). */
  .btn-secondary, .btn.btn-secondary,
  #pd-add-to-cart, .add-to-cart-button,
  .pd-buy-section .btn-primary, .pd-offer-actions-container .btn-primary {
    border-bottom-color: transparent !important;
  }

  /* ===== Doppelter Titel — pd-description versteckt sobald sie ein Echo
     von h1.pd-name ist. Smartstore liefert oft beide identisch. JS setzt
     `data-mts-dup-title="1"` (siehe Boot-Code). CSS regelt den Default-Hide
     wenn JS nicht angekommen ist. */
  .pd-info .pd-description[data-mts-dup-title="1"] { display: none !important; }

  /* Iter 10 Phase G — Quantity-Label "Menge:" KOMPLETT verstecken.
     User-Feedback: "entferne noch das : bei Menge:1 damit dort direkt steht 1
     bzw einfach direkt die zahl". Smartstore-Markup:
       <span class="fwn text-truncate">Menge:</span>
       <span data-bind="value">1</span>
     Wir hiden das Label, der Wert (data-bind=value) bleibt sichtbar. */
  .pd-offer-action-qty .btn-secondary .fwn.text-truncate,
  .pd-offer-action-qty .btn-secondary > span.fwn {
    display: none !important;
  }
  /* Wert-Span bleibt sichtbar und zentriert */
  .pd-offer-action-qty .btn-secondary [data-bind="value"] {
    display: inline-block !important;
    font-weight: 600 !important;
    margin-right: 6px;
  }
  .pd-offer-action-qty .btn-secondary {
    min-width: 90px !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  /* ===== Countdown — grauer Hintergrund weg, dezenter Inline-Look.
     Iter 15 Phase A: Trennlinien (border-top/bottom) entfernt — User: "entferne
     noch die trennlinien ueber und unter Bestelle in den naechsten 14 Std...".
     Stattdessen reicht etwas vertikales Padding fuer Atemraum. ===== */
  .mts-pd-countdown {
    background: transparent !important;
    padding: 12px 0 !important;
    text-align: left !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    margin: 14px 0 0 !important;
    border-radius: 0 !important;
  }
  .mts-pd-countdown__label { display: flex; gap: 8px; align-items: flex-start; }
  .mts-pd-countdown__delivery { margin-top: 2px !important; padding-left: 24px; }
  /* Iter 10 Phase G — Variant: above-CTA (durch JS-Move in .pd-offer-actions-container).
     Zentriert, kompakter Padding, oberhalb des Add-to-Cart-Buttons. */
  .pd-offer-actions-container .mts-pd-countdown,
  .mts-pd-countdown--above-cta {
    text-align: center !important;
    padding: 10px 0 !important;
    margin: 0 0 12px 0 !important;
  }
  .pd-offer-actions-container .mts-pd-countdown .mts-pd-countdown__label,
  .mts-pd-countdown--above-cta .mts-pd-countdown__label {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
  }
  .pd-offer-actions-container .mts-pd-countdown .mts-pd-countdown__delivery,
  .mts-pd-countdown--above-cta .mts-pd-countdown__delivery {
    padding-left: 0 !important;
    text-align: center;
  }

  /* ===== Brand-Block (PDP) layout — `inline-flex` lässt Logo NEBEN Titel
     stehen. Block-Display erzwingen, damit Reihenfolge (Brand → Titel → Preis)
     auf Mobile UND Desktop sauber gestackt ist. */
  .pd-info .pd-brand-block, .pd-info-col .pd-brand-block {
    display: block !important;
    margin: 0 0 12px 0 !important;
  }
  .pd-info .pd-brand-block .pd-brand,
  .pd-info-col .pd-brand-block .pd-brand {
    display: inline-flex;
    align-items: center;
  }
  /* Logo Größe (PDP) — auf Mobile etwas kleiner, Desktop wie bisher */
  .pd-info .pd-brand-picture, .pd-info-col .pd-brand-picture {
    max-height: 56px !important;
    max-width: 180px !important;
  }

  /* ===== Slick Carousel Arrows: Pfeil-Icon als Inline-SVG =====
     Iter 16 Bugfix: Vorher stand hier `content: "\\2190"` (CSS-Unicode-Escape).
     Problem: Das HTML-Template wird durch escSql() in die DB geschrieben, dabei
     wird `\` zu `\\` (SQL-Escape). Nach SQL-Parse landet `\\2190` in der DB.
     Browser sieht das CSS als `content: "\\2190"` → CSS-Parser interpretiert
     `\\` als literalen Backslash, der Rest `2190` ist Text. Im 48px-Button
     wird davon nur "190" / "21" sichtbar → User-Report "Zahlen statt Pfeile".

     Fix: SVG-Pfeil als background-image (data-URI). Encoding-robust, kein
     Font-Faff, perfekt skalierbar, passt zum Apple-Look. Smartstore-Default-
     FA-Icon im Button-Inneren bleibt durch `font-size: 0` ausgeblendet
     (siehe Zeile ~737), damit kein doppeltes Glyph rendert. */
  .recently-viewed-product-grid .slick-prev,
  .recently-viewed-product-grid .slick-next,
  .product-grid .slick-prev,
  .product-grid .slick-next,
  .artlist-carousel .slick-prev,
  .artlist-carousel .slick-next {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }
  .recently-viewed-product-grid .slick-prev,
  .product-grid .slick-prev,
  .artlist-carousel .slick-prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
  }
  .recently-viewed-product-grid .slick-next,
  .product-grid .slick-next,
  .artlist-carousel .slick-next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
  }
  .recently-viewed-product-grid .slick-prev:hover,
  .product-grid .slick-prev:hover,
  .artlist-carousel .slick-prev:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
  }
  .recently-viewed-product-grid .slick-next:hover,
  .product-grid .slick-next:hover,
  .artlist-carousel .slick-next:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
  }
  /* Pseudoelement-Reste entschaerfen (alte CSS-Cached-Builds zeigen sonst
     immer noch "190"/"21"). content: none ueberschreibt sowohl Slick-Defaults
     (Slick-Font \\2190) als auch unsere alte Variante. */
  .recently-viewed-product-grid .slick-prev::before,
  .recently-viewed-product-grid .slick-next::before,
  .product-grid .slick-prev::before,
  .product-grid .slick-next::before,
  .artlist-carousel .slick-prev::before,
  .artlist-carousel .slick-next::before {
    content: "" !important;
    display: none !important;
  }
  /* Smartstore-Default FA-Chevron im Button-Inneren wegblenden — wir nutzen
     das SVG-Background. Sonst doppelte Glyphe sichtbar, sobald andere CSS
     `font-size: 0` aufhebt. */
  .recently-viewed-product-grid .slick-prev > i,
  .recently-viewed-product-grid .slick-next > i,
  .product-grid .slick-prev > i,
  .product-grid .slick-next > i,
  .artlist-carousel .slick-prev > i,
  .artlist-carousel .slick-next > i {
    display: none !important;
  }

  /* ===== Recently-Viewed: 4 Karten pro Slide + groessere Cards =====
     Iter 16: User-Feedback "max 4 Karten pro Block, groesser darstellen".
     Smartstore liefert Slick-Init mit slidesToShow=6 (Default), Responsive
     reduziert auf 5/4/3/2 unterhalb von 960/780/640/440. Wir wollen aber
     auf Desktop genau 4. Loesung: Slick-Re-Init via JS (siehe unten im
     Boot-Script). CSS hier ergaenzt visuelles Sizing & Spacing.

     Iter 17: User-Feedback "weisser Hintergrund statt grauer + Bild groesser".
     Quelle des grauen Tones war diese Section selbst: `.art-picture-block`
     mit `background: #fafafa` (Z. 2649 alt) hat das globale `#ffffff`
     (Z. 364) gewonnen wegen hoeherer Selektor-Spezifitaet. Fix: BG auf
     reines Weiss. Fuer "Bild groesser" gleich zwei Hebel kombiniert:
     - aspect-ratio 4/3 → 1/1: Produktbilder sind im Smartstore-MediaService
       quadratisch (600x600). Im 4/3-Slot blieb seitlich BG-Rand sichtbar
       (Bild 323x323 in 447x335-Slot). 1/1 macht das Bild zum Slot-Fueller.
     - inset 12px → 6px: noch ein paar Pixel mehr fuer das Bild, aber die
       Karte sieht trotzdem nicht "ueberlaufend" aus (Apple-Look).
     - min-height auf der Card ENTFERNT: Card-Hoehe ergibt sich aus
       Slot (~440px @ 1:1, Card-Breite ~440-460px Desktop) + Textblock
       (~150px Brand/Titel/Preis/Stock) = ~590-610px. Card-Hoehen sind
       auch ohne min-height konsistent, weil alle Karten denselben Slot
       und denselben Textblock-Aufbau haben. Smartstore-grid stretcht
       via `align-items: stretch` ohnehin alle Karten in einer Reihe.
     - Responsive: 1/1 bleibt auf allen Breakpoints; nur die explizite
       min-height-Cascade (440/400/360) wird obsolet → entfernt. */
  .recently-viewed-product-grid .artlist-carousel .slick-slide {
    padding: 0 14px !important;
  }
  .recently-viewed-product-grid .artlist-carousel .slick-list {
    margin: 0 -14px !important;
  }
  /* Cards groesser, mehr Bild-Anteil, mehr Atemraum.
     Iter 17: min-height entfernt (Bild-Slot 1:1 bestimmt jetzt die Hoehe). */
  .recently-viewed-product-grid .art {
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important; /* Iter 17: Card explizit weiss (Konsistenz zu Apple-Look) */
    transition: transform 0.32s cubic-bezier(.22,.61,.36,1), box-shadow 0.32s cubic-bezier(.22,.61,.36,1) !important;
  }
  .recently-viewed-product-grid .art:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.10) !important;
    background: #ffffff !important; /* Iter 17: Hover-State darf nicht grau werden */
  }
  /* Iter 17: BG #fafafa → #ffffff, aspect-ratio 4/3 → 1/1
     (Produktbilder sind quadratisch, Slot wird voll genutzt). */
  .recently-viewed-product-grid .art-picture-block {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  /* Iter 17: inset 12px → 6px (mehr Bild-Flaeche). */
  .recently-viewed-product-grid .art-picture-block img,
  .recently-viewed-product-grid .art-picture-block picture {
    position: absolute !important;
    inset: 6px !important;
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    background: #ffffff !important; /* Iter 17: Bild-Layer auch weiss (transparente PNGs) */
  }
  /* Auch die anchor/picture-Wrapper im Bild-Slot weiss halten, damit kein
     Smartstore-Default-Grau durchkommt. */
  .recently-viewed-product-grid .art-picture-block .art-picture,
  .recently-viewed-product-grid .art-picture-block > a {
    background: #ffffff !important;
  }
  .recently-viewed-product-grid .art-info,
  .recently-viewed-product-grid .art-body {
    padding: 18px 16px 18px !important;
    background: #ffffff !important; /* Iter 17: Textblock-BG explizit weiss */
  }
  /* Slick-Dots: kompakter Abstand, dezenter Look */
  .recently-viewed-product-grid .slick-dots {
    margin-top: 24px !important;
    padding: 0 !important;
  }
  .recently-viewed-product-grid .slick-dots li button {
    width: 8px !important; height: 8px !important;
    background: rgba(29,29,31,0.20) !important;
    border-radius: 50% !important;
    transition: all 0.25s ease;
  }
  .recently-viewed-product-grid .slick-dots li.slick-active button {
    background: var(--mts-text, #1d1d1f) !important;
    transform: scale(1.25);
  }
  /* Iter 17: Responsive min-height-Cascade entfernt — Hoehe ergibt sich
     jetzt aus dem 1:1-Slot, Cards skalieren automatisch konsistent. */

  /* ===== Variant-Picker als Pills (statt <select>) — JS rendert
     `.mts-variant-pills` neben/anstelle der <select>. Styles hier.
     Iter 10 Phase F: mittig zentriert (User-Feedback).
     Iter 15 Phase C: 2-Spalten-Grid statt Flex-Wrap (User: "zeige die groessen
     Optionen im 2 grid an nicht in 1 gr und alles untereinander"). Pills
     fuellen jeweils ihre Spalte (width:auto, kein full-stretch sodass Apple-
     Pill-Look erhalten bleibt — gleichmaessige Spalten via grid-template-columns).
     Swatch-Variante (Farb-Kreise) bleibt Flex (Kreise sollen nicht 50%-breit). */
  .mts-variant-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 6px 0 0;
    justify-items: center;
    /* Begrenzen auf max ~340px Gesamtbreite, damit Pills nicht Riesen werden
       wenn Container 562px breit ist und nur 2 Werte vorhanden sind. */
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .mts-variant-pills--swatch {
    /* Farb-Swatches bleiben in einem Flex-Row (Kreise dichter, kompakt). */
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none !important;
  }
  .mts-variant-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 56px;
    width: 100%;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--mts-line);
    background: #fff;
    color: var(--mts-text);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
  }
  .mts-variant-pill:hover {
    border-color: var(--mts-text);
  }
  .mts-variant-pill.is-active {
    background: var(--mts-text);
    color: #fff;
    border-color: var(--mts-text);
  }
  .mts-variant-pills--swatch .mts-variant-pill {
    width: 44px !important;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
  .mts-variant-pills--swatch .mts-variant-pill.is-active {
    box-shadow: 0 0 0 2px var(--mts-text);
    border-color: #fff;
  }
  /* Iter 10 Phase F — Original Smartstore <select> IMMER unsichtbar in
     Variant-Sektion (User: "das dropdown kann eigentlich weg"). Wir behalten
     ihn im DOM (Smartstore-Update-Logik braucht .value), aber rendern ihn
     unsichtbar als sr-only.
     Iter 14 Phase E: select2-Plugin (Smartstore CE laedt select2.js und rendert
     <span class="select2 select2-container ..."> als visuelles Dropdown-Replacement
     direkt nach dem <select>). DAS ist das sichtbare Dropdown! select-Element ist
     bereits clip-versteckt, aber select2-Wrapper nicht. Wir verstecken beide. */
  .pd-variants .form-group.choice select.form-control,
  .pd-variants .form-group.choice .choice-control select.form-control,
  .pd-attrs-container .form-group.choice select.form-control,
  .pd-variants .form-group.choice .select2,
  .pd-variants .form-group.choice .select2-container,
  .pd-variants .form-group.choice .choice-control .select2,
  .pd-variants .form-group.choice .choice-control .select2-container,
  .pd-attrs-container .form-group.choice .select2,
  .pd-attrs-container .form-group.choice .select2-container,
  .pd-attrs-container .form-group.choice .choice-control .select2,
  .pd-attrs-container .form-group.choice .choice-control .select2-container {
    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;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  /* Schliesse zudem das ggf. offene select2-Dropdown (im Body angehaengt) komplett aus */
  body > .select2-container--open,
  body > .select2-container.select2-container--open {
    display: none !important;
  }
  /* Choice-Label kompakter, mittig (passend zu Pills) */
  .pd-variants .choice-label,
  .pd-attrs-container .choice-label {
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--mts-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px !important;
    text-align: center !important;
    display: block !important;
  }
  .pd-variants .choice-label.required::after,
  .pd-attrs-container .choice-label.required::after { content: " *"; color: var(--mts-accent); }
  .pd-variants .form-group.choice,
  .pd-attrs-container .form-group.choice { margin-bottom: 18px !important; }

  /* Iter 15 Phase A — Padding zwischen Variants-Container und naechstem Block
     (Preis/Quantity/Cart). User: "kleines bisschen padding zu den optionen vom
     produkt das es nicht zu nah ist". Vorher: ~4-6px Default-Gap. Jetzt: 14px
     bottom-padding auf den Container, plus etwas top-margin. */
  .pd-info-col .pd-variants,
  .pd-info-col .pd-variants-container,
  .pd-info-col .pd-attrs-container {
    margin-top: 6px !important;
    padding-bottom: 14px !important;
  }

  /* Iter 14 Phase E: Variants-Container = Flex-Row auf Desktop (User: "Optionen
     nebeneinander, nicht untereinander"). Mehrere Choices (Groesse + Farbe) liegen
     nebeneinander, jede Choice mit eigenem Label + Pills-Reihe darunter.
     pd-info-col ist nur 562px breit (col-lg-5). Mit gap 36 + 2 Choices muss jede
     Choice ~263px sein. min-width:0 + flex:1 1 0 erzwingt gleichmaessige Verteilung
     statt Wrap. Pills wrappen dann INNERHALB der Choice falls noetig.
     Auf Mobile wieder Stack via Media-Query weiter unten. */
  @media (min-width: 768px) {
    .pd-variants,
    .pd-variants-container,
    .pd-attrs-container {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      gap: 28px !important;
      align-items: flex-start !important;
      justify-content: center !important;
    }
    .pd-variants .form-group.choice,
    .pd-variants-container .form-group.choice,
    .pd-attrs-container .form-group.choice {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      margin-bottom: 0 !important;
    }
    /* Pills im Choice duerfen wrappen, bleiben aber zentriert */
    .pd-variants .form-group.choice .mts-variant-pills,
    .pd-attrs-container .form-group.choice .mts-variant-pills {
      justify-content: center !important;
    }
  }
  /* Mobile: Choices wieder uebereinander stacken (passt zu schmaler Single-Col) */
  @media (max-width: 767px) {
    .pd-variants,
    .pd-variants-container,
    .pd-attrs-container {
      display: block !important;
    }
    .pd-variants .form-group.choice,
    .pd-variants-container .form-group.choice,
    .pd-attrs-container .form-group.choice {
      width: 100% !important;
      margin-bottom: 18px !important;
    }
    /* Iter 15 Phase C: auch auf Mobile 2-Spalten-Grid (User-Wunsch). Kompakter
       max-width damit Pills auf schmalem Screen nicht zu breit werden. */
    .pd-variants .form-group.choice .mts-variant-pills,
    .pd-attrs-container .form-group.choice .mts-variant-pills {
      max-width: 100% !important;
      gap: 6px !important;
    }
  }

  /* ===== PHASE 5.1 — Mobile Filter (Apple-Style)
     Smartstore CE hat bereits einen eigenen Off-Canvas-Mechanismus auf Mobile:
     #filter-widget (offcanvas-bottom) plus einen Default-Trigger-Button mit
     [data-target="#filter-widget"] und Text "Filtern & Sortieren". Smartstore-JS
     verschiebt die catmenu + faceted-search ins #filter-widget — jeder
     Eigen-Drawer wuerde diesen Mechanismus brechen. Wir verbessern hier nur das
     Look-and-Feel: Trigger als pill-foermige Filter-Bar, Off-Canvas mit
     Apple-Header, Backdrop-Blur, weiche Bottom-Slide-In-Animation. ===== */
  /* 1) Default-Trigger ("Filtern & Sortieren") — Smartstore liefert ihn als
     btn.btn-primary, also muessen wir spezifischer sein als .btn-primary.
     Wir nehmen den Look einer dunklen Pill (Apple-Primary) statt des Orangen
     Defaults — das wirkt zurueckhaltender und passt zu unseren Pages. */
  button[aria-controls="filter-widget"],
  button[data-target="#filter-widget"],
  a[aria-controls="filter-widget"],
  a[data-target="#filter-widget"],
  .btn[aria-controls="filter-widget"],
  .btn[data-target="#filter-widget"] {
    background: var(--mts-text) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--mts-text) !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font: 600 14px var(--mts-font) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    letter-spacing: 0.01em;
  }
  button[aria-controls="filter-widget"]:hover,
  .btn[aria-controls="filter-widget"]:hover,
  a[aria-controls="filter-widget"]:hover {
    background: #000 !important;
    transform: translateY(-1px);
  }
  button[aria-controls="filter-widget"]:active,
  .btn[aria-controls="filter-widget"]:active { transform: scale(0.97) !important; }
  button[aria-controls="filter-widget"] .badge,
  .btn[aria-controls="filter-widget"] .badge {
    background: var(--mts-accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-weight: 700 !important;
    margin-left: 6px;
  }
  /* Mobile: Trigger nimmt mehr Platz ein damit er klar als Aktion sichtbar ist */
  @media (max-width: 991.98px) {
    button[aria-controls="filter-widget"],
    .btn[aria-controls="filter-widget"] {
      padding: 14px 28px !important;
      font-size: 15px !important;
    }
  }

  /* 2) Off-Canvas selbst */
  #filter-widget.offcanvas {
    background: #fff !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    box-shadow: 0 -16px 50px rgba(0,0,0,0.18) !important;
    border: 0 !important;
  }
  #filter-widget .offcanvas-header,
  #filter-widget.offcanvas-header {
    border-bottom: 1px solid var(--mts-line) !important;
    padding: 18px 22px !important;
    font: 700 18px var(--mts-font-display) !important;
    letter-spacing: -0.01em;
  }
  #filter-widget .offcanvas-content,
  #filter-widget .offcanvas-scrollable {
    padding: 18px 22px 28px !important;
  }
  #filter-widget .btn-close,
  #filter-widget .offcanvas-close {
    border-radius: 999px !important;
    width: 32px !important; height: 32px !important;
    background: rgba(0,0,0,0.05) !important;
    transition: background 0.15s ease;
  }
  #filter-widget .btn-close:hover,
  #filter-widget .offcanvas-close:hover { background: rgba(0,0,0,0.1) !important; }
  /* Backdrop dahinter: Apple-Blur. Smartstore rendert .offcanvas-backdrop ohne
     immer .show — wir stylen alle Varianten. */
  .offcanvas-backdrop,
  .offcanvas-backdrop.show,
  body > .offcanvas-backdrop {
    background-color: rgba(0,0,0,0.42) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }
  #filter-widget.offcanvas-bottom {
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    max-height: 92vh !important;
  }
  /* Facet-Group Headers */
  #filter-widget .facet-group {
    border-bottom: 1px solid var(--mts-line) !important;
    padding: 14px 0 !important;
  }
  #filter-widget .facet-group-header {
    font: 700 15px var(--mts-font-display) !important;
    color: var(--mts-text) !important;
    padding: 6px 0 !important;
  }
  #filter-widget .facet-control {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: background 0.15s ease;
  }
  #filter-widget .facet-control:hover { background: rgba(0,0,0,0.04) !important; }
  #filter-widget .facet-control.selected,
  #filter-widget .facet-toggle.selected {
    background: var(--mts-text) !important;
    color: #fff !important;
  }
  #filter-widget .filter-actions,
  #filter-widget .offcanvas-footer {
    border-top: 1px solid var(--mts-line) !important;
    padding: 14px 18px !important;
    background: #fff !important;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.04) !important;
  }
  #filter-widget .filter-actions .btn,
  #filter-widget .offcanvas-footer .btn {
    border-radius: 999px !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
  }

  /* 3) Mobile-Toolbar — Filter-Button bekommt eigenen Platz */
  @media (max-width: 991.98px) {
    .artlist-actions, .toolbar {
      flex-wrap: wrap !important;
      gap: 10px !important;
      padding: 12px 0 !important;
    }
  }

  /* ===== PHASE 5.2 — Hover Image Switch on Listing Cards
     Strategie: aus dem Default-Image (z.B. -1.jpg) wird per Naming-Convention
     ein -2.jpg geprobt. Nur wenn das 200 zurueckgibt, blenden wir es als
     zweites <img> in den Picture-Block und crossfaden bei Hover. ===== */
  .artlist .art .art-picture-block { position: relative; }
  .artlist .art .mts-card-img-hover {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    /* Padding wie das Original-Image — wird in JS aus Smartstore-CSS uebernommen */
    padding: 18px 22px;
    z-index: 2;
  }
  .artlist .art:hover .mts-card-img-hover[data-mts-loaded="1"] { opacity: 1; }
  .artlist .art:hover .art-picture img:not(.mts-card-img-hover) { opacity: 0.0; transition: opacity 0.45s ease; }
  /* Fallback ohne 2. Bild — leichter Zoom */
  .artlist .art[data-mts-hover-img="none"]:hover .art-picture img { transform: scale(1.06); }

  /* ===== Iter 9 Phase C — Specs als kompakte Icon+Text-Liste =====
     User-Feedback Iter 8: "Pills sehr schlecht bis garnicht lesbar".
     Neuer Ansatz: jede Spec auf eigener Zeile mit Inline-SVG-Icon links und
     Wert in lesbarer Schrift (13px) rechts. Label (Rahmen / Motor / …)
     wird als Caption in Muted-Color, Wert in Volltext.
     Layout-Shift-Schutz via min-height (3 Zeilen reservieren). */
  .artlist .art .mts-card-specs {
    display: flex; flex-direction: column;
    gap: 4px;
    margin: 8px 18px 10px;
    padding: 0;
    min-height: 78px;
  }
  .artlist .art .mts-card-specs__tag {
    display: flex !important; align-items: center;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    padding: 2px 0 !important;
    font: 500 12.5px/1.35 var(--mts-font) !important;
    color: var(--mts-text) !important;
    letter-spacing: 0 !important;
    max-width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .artlist .art .mts-card-specs__tag::before {
    content: '';
    flex: 0 0 14px;
    width: 14px; height: 14px;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  /* Icon: Frame (Rahmen) */
  .artlist .art .mts-card-specs__tag--rahmen::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='17.5' r='3.5'/><circle cx='18.5' cy='17.5' r='3.5'/><path d='M15 17.5l-3-7m-7 7l5-7h6m-1-5h-3m6 0h-1l-2 5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='17.5' r='3.5'/><circle cx='18.5' cy='17.5' r='3.5'/><path d='M15 17.5l-3-7m-7 7l5-7h6m-1-5h-3m6 0h-1l-2 5'/></svg>");
  }
  /* Icon: Motor (Lightning Bolt) */
  .artlist .art .mts-card-specs__tag--motor::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2L4 14h7l-2 8 9-12h-7l2-8z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2L4 14h7l-2 8 9-12h-7l2-8z'/></svg>");
  }
  /* Icon: Schaltung (Settings/Gears) */
  .artlist .art .mts-card-specs__tag--schaltung::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
  }
  /* Icon: Gewicht (Scale) */
  .artlist .art .mts-card-specs__tag--gewicht::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h14a2 2 0 0 1 2 2L18 20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L3 6a2 2 0 0 1 2-2z'/><circle cx='12' cy='10' r='2'/><path d='M9 14h6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h14a2 2 0 0 1 2 2L18 20a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L3 6a2 2 0 0 1 2-2z'/><circle cx='12' cy='10' r='2'/><path d='M9 14h6'/></svg>");
  }
  .artlist .art .mts-card-specs__tag .mts-card-specs__label {
    color: var(--mts-text-muted);
    font-weight: 500;
    margin-right: 6px;
    flex: 0 0 auto;
  }
  .artlist .art .mts-card-specs__tag .mts-card-specs__value {
    color: var(--mts-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Motor-Akzent in Apple-Orange behalten — aber feiner. */
  .artlist .art .mts-card-specs__tag--motor::before { color: var(--mts-accent); opacity: 0.85; }
  .artlist .art .mts-card-specs__tag--motor .mts-card-specs__value { color: #c0511a; }
  .artlist .art .mts-card-specs.is-empty { display: none; }
  /* Iter 10 Phase C — Single-Size-Badge ZENTRIERT im Card-Body, UEBER dem Preis
     (User-Feedback Iter 9: "wo nur eine Groesse verfuegbar ist sollte das ueber
     den preis zentrerit nur die Groesse alleine angezeigt werden mit gruenen
     punkt nicht ueber dem artikel").
     Card-Hoehe stabil: Slot wird IMMER als Wrapper-Element angelegt
     (.mts-card-singlesize-slot), Preis-Block bleibt durch margin-top:auto am
     Card-Bottom — Y-Position des Preises ist damit identisch egal ob Badge
     vorhanden oder nicht. */
  .artlist .art .mts-card-singlesize-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Iter 11 Fix 1 — min-height von 30 auf 31, Slot wird IMMER vom JS angelegt
       (auch leer), damit Card-Hoehe row-uebergreifend stabil ist. Reihe 3 hatte
       bisher 475px statt 506px weil keine Cube-Bikes mit Single-Size in dieser
       Range waren. */
    min-height: 31px;
    padding: 6px 18px 0;
    margin: 0 !important;
  }
  .artlist .art .mts-card-singlesize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 14px 5px 12px;
    background: rgba(34,197,94,0.08);
    border-radius: 999px;
    border: 1px solid rgba(34,197,94,0.18);
    font: 600 0.72rem/1.1 var(--mts-font);
    color: #15803d;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .artlist .art .mts-card-singlesize__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
    flex: 0 0 auto;
  }
  .artlist .art .mts-card-singlesize__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Skeleton waehrend Lade-Vorgang — verhindert Layout-Shift.
     Iter 9: Skeleton ist jetzt eine schmale Linie pro Spec (statt Pill). */
  .artlist .art .mts-card-specs.is-loading .mts-card-specs__tag {
    background: linear-gradient(90deg, #f0f0f0 0%, #f7f7f7 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: mtsCardSpecPulse 1.4s ease-in-out infinite;
    color: transparent;
    border-radius: 4px;
    height: 14px;
    width: 70%;
  }
  .artlist .art .mts-card-specs.is-loading .mts-card-specs__tag::before { display: none; }
  @keyframes mtsCardSpecPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ===== MOBILE =====
     Smartstore CE setzt KEIN body.product-details / .product-page (Body class
     ist nur "lyt-cols-1"). Selektor-Anker daher: .pd-section (existiert nur
     auf Produktseiten). */
  @media (max-width: 900px) {
    /* PDP: Bild-Spalte voll, Info-Spalte voll, Stack-Order erzwingen.
       Specificity erhoeht (Class doppelt) damit Desktop-Override greift. */
    .pd-section { display: flex !important; flex-direction: column !important; }
    .pd-section.pd-section .pd-data-col.pd-data-col,
    .pd-section.pd-section .pd-info-col.pd-info-col,
    .pd-section.pd-section > .col-12 {
      flex: 1 1 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
    }
    .pd-section.pd-section .pd-data-col.pd-data-col { order: 0; margin-bottom: 24px !important; }
    .pd-section.pd-section .pd-info-col.pd-info-col { order: 1; }

    /* Bild GROSS — keine Padding-Käfige, volle Viewport-Breite.
       Iter 13 Phase B Mobile-Reset: Desktop-Rule setzt .gal-cell padding-left:32px
       (fuer Thumb-Image-Gap). Auf Mobile ohne Thumbs daneben: zurueckdrehen. */
    .pd-image-section, .product-images, .pd-gallery, .gal-box, .gal-image,
    .pd-data-col .gal-box > .gal-cell {
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
    }
    .pd-data-col .gal-box, .pd-data-col .pd-data-col-inner > * {
      padding: 0 !important; margin: 0 !important;
    }
    .gal-image, .gal-image-cell, .pd-data-col img.file-img,
    .pd-data-col .gal-box img, .pd-data-col picture img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
      display: block !important;
      margin: 0 auto !important;
    }
    /* Thumbnails-Strip darunter horizontal scrollbar, kompakt.
       Iter 13 Phase B Mobile-Reset: Desktop-Rule setzt vertical-align:middle
       und padding-right:32px — beides hier explizit zurueckdrehen. */
    .pd-data-col .gal-nav-cell, .pd-data-col .pd-thumbs, .product-thumbnails {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      gap: 8px !important;
      padding: 8px 0 !important;
      margin: 0 !important;
      width: 100% !important;
      vertical-align: top !important;
      -webkit-overflow-scrolling: touch;
    }
    .pd-data-col .gal-nav-item, .pd-data-col .pd-thumbs > * {
      flex: 0 0 auto !important;
      width: 64px !important;
      height: 64px !important;
    }
    /* Slider-Dots dezent */
    .pd-data-col .slick-dots { padding: 8px 0 0 !important; }

    /* Info-Col Padding zurück geben (vorher genullt) — high specificity */
    .pd-section.pd-section .pd-info-col.pd-info-col {
      padding: 16px 16px 24px !important;
    }

    /* Stack-Order: Brand-Logo → Titel → Review → Preis → Variants → Cart-Buttons → Countdown → CTA → JobRad */
    .pd-info-col { gap: 10px !important; }
    .pd-info-col .pd-info { order: 1 !important; }
    .pd-info-col .pd-info .pd-brand-block { order: 0 !important; margin-bottom: 8px !important; }
    .pd-info-col .pd-info .page-title { order: 1 !important; }
    .pd-info-col .pd-info .pd-description { order: 2 !important; display: none !important; }
    .pd-info-col .pd-review-summary { order: 2 !important; padding: 0 !important; margin: 4px 0 8px !important; }
    .pd-info-col .pd-attrs-container { order: 3 !important; }
    .pd-info-col .pd-offer { order: 4 !important; }
    .pd-info-col .mts-pd-countdown { order: 5 !important; }
    .pd-info-col .mts-pd-cta-row { order: 6 !important; }
    .pd-info-col .mts-pd-jobrad { order: 7 !important; }
    .pd-info-col .mts-pd-providers-link { order: -1 !important; align-self: flex-start !important; }
    /* Iter 13 Phase A Mobile-Reset: Desktop-Override macht providers-link
       position:absolute. Auf Mobile soll es wieder im flow stacken. */
    .product-details-page .pd-info-col {
      position: static !important;
    }
    .product-details-page .pd-info-col .mts-pd-providers-link {
      position: static !important;
      top: auto !important;
      right: auto !important;
    }

    /* Titel kompakt aber lesbar */
    .pd-name, h1.pd-name, body.product-details .page-title h1.pd-name {
      font-size: 1.6rem !important;
      line-height: 1.2 !important;
      margin: 6px 0 4px !important;
    }
    /* Preis groß, Mobile-friendly */
    .pd-finalprice, .pd-finalprice-amount {
      font-size: 1.8rem !important;
    }

    /* Quantity + Cart-Button auf Mobile: Cart full-width darunter, qty kleiner */
    .pd-offer-actions, .pd-offer-actions-container .row {
      flex-wrap: wrap !important;
      gap: 10px !important;
    }
    .pd-offer-action-qty {
      flex: 0 0 auto !important;
      max-width: 50% !important;
    }
    .pd-offer-actions > .col {
      flex: 1 1 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    /* Add-to-Cart Button breit + griffig */
    #pd-add-to-cart, .add-to-cart-button {
      width: 100% !important;
      padding: 18px 24px !important;
      font-size: 16px !important;
    }

    /* CTA-Row: 1 Spalte auf Mobile */
    .mts-pd-cta-row { grid-template-columns: 1fr !important; }

    /* Tabs bleiben horizontal scrollbar */
    .pd-tabs, .nav-tabs {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      gap: 6px !important;
    }
    .pd-tabs .nav-link, .nav-tabs .nav-link {
      padding: 10px 16px !important;
      font-size: 14px !important;
      white-space: nowrap !important;
      flex: 0 0 auto !important;
    }

    header#header { position: static; }
    .menubar-section { padding: 4px 0 !important; }
    .shopbar { padding: 8px 0 !important; }
  }
  @media (max-width: 700px) {
    .container, .pd-info-col, .pd-data-col { padding-left: 14px !important; padding-right: 14px !important; }
    body.product-details .pd-data-col { padding: 0 !important; }
  }

  /* =====================================================================
     ITER 12 — User-Feedback (2026-04-27)
     A) List-View weisser Bild-BG, keine Trennlinien (oben implementiert)
     B) Kategorie-Hero Banner mit dunklem Bild + weisser Schrift
     C) Mobile Listing-Card komplett zentriert + grosser Cart-Button
     D) Mobile PDP komplett zentriert
     ===================================================================== */

  /* ---------- B) Kategorie-Hero Banner ---------- */
  /* Wrapper wird vom JS (initCategoryHero) erzeugt: <div class="mts-cat-hero-banner">.
     Title h1 + .mts-cat-tagline + .mts-cat-hero-rule wandern hinein.
     Banner ist edge-to-edge im main-Content-Bereich, dunkel (Bild + Overlay),
     weisse Typo, kompakt. Cube-Bilder via slug->media-id Mapping (data-bg-id) */
  /* C1: gehoisted (Banner sitzt jetzt vor der Breadcrumb in section#content). */
  body.mts-hero-hoisted .mts-cat-hero-banner { margin-top: 8px !important; }
  body.mts-cat-page .mts-cat-hero-banner {
    position: relative;
    margin: 16px 0 28px !important;
    /* Iter 14 Phase A: hoeher (180 -> 230), bisschen mehr vertikales Padding.
       Iter 15 Phase D: 230 -> 280 Desktop, mehr vertikales Padding (User:
       "die hoehe besser machen von den banner"). Mehr "Editorial"-Look. */
    padding: 64px 32px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #1d1d1f;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  /* Cube-Produktbild als Hintergrund (cover, leicht verschoben damit das
     Rad nicht exakt zentriert hinter dem Text liegt). Wird pro Slug per
     data-bg-id auf eine bestimmte Smartstore-Media-Id gesetzt. */
  body.mts-cat-page .mts-cat-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    background-color: #1d1d1f;
    background-image: var(--mts-hero-bg, none);
    /* Iter 14 Phase A: weniger Brightness-Daempfung damit das Bike-Bild klarer
       sichtbar ist (User: "weniger deckkraft aber nur bisschen"). 0.55 -> 0.7 */
    filter: brightness(0.7) saturate(0.95);
    z-index: -2;
  }
  /* Dunkler Overlay-Gradient ueber dem Bild — weisser Text immer lesbar.
     Diagonal von dunkel-links zu mittel-rechts erzeugt Apple-Editorial-Look. */
  body.mts-cat-page .mts-cat-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Iter 14 Phase A: Overlay reduziert (0.58/0.32/0.55 -> 0.42/0.18/0.42).
       Bild bleibt klar erkennbar, weisser Text bleibt durch Text-Shadow + Helligkeitsmix lesbar. */
    background:
      linear-gradient(135deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.42) 100%);
    z-index: -1;
  }
  /* Title + Tagline + Rule innerhalb des Banners — weiss. Nutzt höhere
     Spezifität als die generischen .category-page-Regeln, damit color #fff
     und centered greifen. */
  body.mts-cat-page .mts-cat-hero-banner h1,
  body.mts-cat-page .mts-cat-hero-banner h1.page-title,
  body.mts-cat-page .mts-cat-hero-banner .page-title h1 {
    color: #ffffff !important;
    font-size: clamp(1.75rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    margin: 0 0 8px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }
  body.mts-cat-page .mts-cat-hero-banner .mts-cat-tagline {
    color: rgba(255,255,255,0.92) !important;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem) !important;
    margin: 0 auto !important;
    font-weight: 500;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    max-width: 640px;
  }
  body.mts-cat-page .mts-cat-hero-banner .mts-cat-hero-rule {
    background: var(--mts-accent) !important;
    margin: 16px auto 0 !important;
    width: 48px !important;
    height: 3px !important;
    opacity: 1;
    box-shadow: 0 1px 6px rgba(255,106,0,0.5);
  }
  /* Page-description / cat-page-desc bleibt UNTER dem Banner und sichtbar */
  body.mts-cat-page .mts-cat-hero-banner + .page-description,
  body.mts-cat-page .mts-cat-hero-banner ~ .page-description {
    text-align: center !important;
    color: var(--mts-text-muted) !important;
    margin: 0 auto 28px !important;
    max-width: 720px;
  }
  /* Mobile: kompakter Banner, Schrift kleiner aber kraftvoll */
  @media (max-width: 700px) {
    body.mts-cat-page .mts-cat-hero-banner {
      margin: 8px 0 20px !important;
      /* Iter 14 Phase A: mobile leicht hoeher (140 -> 170, padding 28 -> 36).
         Iter 15 Phase D: weiter rauf 170 -> 200 (User: "Hoehe besser machen"). */
      padding: 44px 20px !important;
      min-height: 200px;
      border-radius: 14px !important;
    }
    body.mts-cat-page .mts-cat-hero-banner h1 {
      font-size: 1.6rem !important;
    }
    body.mts-cat-page .mts-cat-hero-banner .mts-cat-tagline {
      font-size: 0.95rem !important;
    }
    body.mts-cat-page .mts-cat-hero-banner .mts-cat-hero-rule {
      margin-top: 12px !important;
      width: 38px !important;
    }
  }

  /* ---------- C) Mobile Listing-Card zentriert + grosser Cart-Button ---------- */
  @media (max-width: 559px) {
    /* Card-Inhalt komplett zentriert */
    .artlist:not(.artlist-lines) .art {
      text-align: center !important;
    }
    .artlist:not(.artlist-lines) .art .art-brand,
    .artlist:not(.artlist-lines) .art .art-vendor,
    .artlist:not(.artlist-lines) .art .art-name,
    .artlist:not(.artlist-lines) .art .art-name-link,
    .artlist:not(.artlist-lines) .art .art-name a,
    .artlist:not(.artlist-lines) .art .art-info,
    .artlist:not(.artlist-lines) .art .art-meta,
    .artlist:not(.artlist-lines) .art .art-shortdesc,
    .artlist:not(.artlist-lines) .art .art-genericname,
    .artlist:not(.artlist-lines) .art .art-price-block,
    .artlist:not(.artlist-lines) .art .art-price-block .art-price,
    .artlist:not(.artlist-lines) .art .art-price-block .art-finalprice,
    .artlist:not(.artlist-lines) .art .art-delivery-info {
      text-align: center !important;
    }
    /* Brand-Image: Block-zentriert (Default war inline-block links) */
    .artlist:not(.artlist-lines) .art .art-brand img.mts-brand-img,
    .artlist:not(.artlist-lines) .art .art-vendor img.mts-brand-img {
      display: block !important;
      margin: 0 auto !important;
    }
    /* Specs-Liste zentriert */
    .artlist:not(.artlist-lines) .art .mts-card-specs {
      align-items: center !important;
      text-align: center !important;
    }
    .artlist:not(.artlist-lines) .art .mts-card-specs__tag {
      justify-content: center !important;
    }
    /* Single-Size-Slot zentriert */
    .artlist:not(.artlist-lines) .art .mts-card-singlesize-slot {
      text-align: center !important;
      display: flex !important;
      justify-content: center !important;
    }
    /* Cart-Button: full-width und gross. Smartstore rendert in .art-drop ein
       Grid (Cart + Wishlist + Compare + Info). Wir splitten optisch:
       Cart-Button nimmt eigene erste Zeile, breit + 52px hoch + weiss-auf-schwarz
       (wir nutzen weiterhin Accent-Orange wie auf Desktop fuer Konsistenz, aber
       prominent). Wishlist/Compare/Info bleiben darunter als 3-Spalten. */
    .artlist:not(.artlist-lines) .art .art-drop {
      padding: 0 14px 16px !important;
    }
    /* C5: Info-Button (Beschreibung) entfernt -> Zeile 2 hat nur noch die
       Wunschliste. Eine Spalte fuellt die Zeile lueckenlos. Cart spannt via
       grid-column:1/-1 weiterhin die volle Breite in Zeile 1. */
    .artlist:not(.artlist-lines) .art .art-drop .art-btn-group,
    .artlist:not(.artlist-lines) .art .art-drop .row.no-gutters {
      grid-template-columns: 1fr !important;
      grid-auto-flow: row !important;
      gap: 8px !important;
    }
    /* Add-to-Cart auf 1. Zeile, full-width (3 Spalten breit) */
    .artlist:not(.artlist-lines) .art .art-drop .add-to-cart-button,
    .artlist:not(.artlist-lines) .art .art-drop .ajax-cart-link.btn-primary,
    .artlist:not(.artlist-lines) .art .art-drop .btn-primary {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      min-height: 52px !important;
      height: 52px !important;
      padding: 0 18px !important;
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.01em !important;
      box-shadow: 0 8px 20px rgba(255,106,0,0.32) !important;
    }
    /* Wishlist + Compare + Info: jeweils 1 Spalte, gleiche Hoehe, kompakt */
    .artlist:not(.artlist-lines) .art .art-drop .art-btn-group > .btn:not(.add-to-cart-button):not(.btn-primary),
    .artlist:not(.artlist-lines) .art .art-drop .art-btn-group > .art-btn:not(.add-to-cart-button),
    .artlist:not(.artlist-lines) .art .art-drop .row.no-gutters > .btn:not(.add-to-cart-button):not(.btn-primary) {
      grid-column: span 1 !important;
      height: 40px !important;
      min-height: 40px !important;
      width: 100% !important;
    }
    /* Falls Wishlist/Compare/Info nicht in Reihe stehen — wir bauen
       ein dezidiertes Sub-Layout per Container :nth-child via display:grid
       on parent. Die obigen Regeln genuegen i.d.R. weil grid-auto-flow:row
       die uebrigen Children automatisch in Reihe 2 packt. */
  }

  /* ---------- D) Mobile PDP komplett zentriert ---------- */
  @media (max-width: 768px) {
    /* Info-Col komplett auf Mitte gepolt */
    .product-details-page .pd-info-col,
    .product-page .pd-info-col {
      text-align: center !important;
    }
    /* Brand-Logo zentriert (war inline-flex links) */
    .product-details-page .pd-info-col .pd-brand-block,
    .product-details-page .pd-info-col .pd-brand,
    .product-page .pd-info-col .pd-brand-block,
    .product-page .pd-info-col .pd-brand {
      display: flex !important;
      justify-content: center !important;
      margin: 0 auto 8px !important;
    }
    .product-details-page .pd-info-col .pd-brand-picture,
    .product-details-page .pd-info-col .pd-brand img,
    .product-page .pd-info-col .pd-brand-picture,
    .product-page .pd-info-col .pd-brand img {
      margin: 0 auto !important;
    }
    /* Title zentriert */
    .product-details-page .pd-info-col .pd-name,
    .product-details-page .pd-info-col h1.pd-name,
    .product-details-page .pd-info-col .page-title h1.pd-name,
    .product-page .pd-info-col h1.pd-name {
      text-align: center !important;
    }
    /* SKU / Subtitle / Short-Description / Tags */
    .product-details-page .pd-info-col .pd-sku,
    .product-details-page .pd-info-col .pd-shortdesc,
    .product-details-page .pd-info-col .pd-tag-list,
    .product-details-page .pd-info-col .pd-shipping-info,
    .product-details-page .pd-info-col .pd-stock-info,
    .product-details-page .pd-info-col .pd-delivery-info {
      text-align: center !important;
      justify-content: center !important;
    }
    /* Variant-Pills + Attribute-Rows zentriert */
    .product-details-page .pd-info-col .pd-attrs-container,
    .product-details-page .pd-info-col .pd-attribute-row,
    .product-details-page .pd-info-col .pd-attribute-options,
    .product-details-page .pd-info-col .pd-attribute-options-list,
    .product-details-page .pd-info-col .pd-variants {
      text-align: center !important;
      justify-content: center !important;
    }
    .product-details-page .pd-info-col .pd-attribute-options,
    .product-details-page .pd-info-col .pd-attribute-options-list,
    .product-details-page .pd-info-col .pd-variants,
    .product-details-page .pd-info-col .pd-attribute-controls {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 8px !important;
    }
    /* Variant-Labels (vor den Pills, "Größe", "Farbe") zentriert */
    .product-details-page .pd-info-col .pd-attribute-label,
    .product-details-page .pd-info-col .pd-attribute-name,
    .product-details-page .pd-info-col .pd-attribute-row > label {
      text-align: center !important;
      display: block !important;
      width: 100% !important;
    }
    /* Preis-Block zentriert */
    .product-details-page .pd-info-col .pd-offer,
    .product-details-page .pd-info-col .pd-offer-price,
    .product-details-page .pd-info-col .pd-offer-price-container,
    .product-details-page .pd-info-col .pd-finalprice,
    .product-details-page .pd-info-col .pd-baseprice,
    .product-details-page .pd-info-col .pd-old-price,
    .product-details-page .pd-info-col .pd-price-section {
      text-align: center !important;
      justify-content: center !important;
    }
    .product-details-page .pd-info-col .pd-offer-price-container,
    .product-details-page .pd-info-col .pd-finalprice {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
    /* Quantity-Block zentriert */
    .product-details-page .pd-info-col .pd-qty,
    .product-details-page .pd-info-col .pd-quantity,
    .product-details-page .pd-info-col .pd-qty-section,
    .product-details-page .pd-info-col .qty-input,
    .product-details-page .pd-info-col .input-group.qty,
    .product-details-page .pd-info-col .qty-spinner,
    .product-details-page .pd-info-col .pd-offer-actions,
    .product-details-page .pd-info-col .pd-actions-container,
    .product-details-page .pd-info-col .pd-buy-section {
      justify-content: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    .product-details-page .pd-info-col .qty-input,
    .product-details-page .pd-info-col .input-group.qty {
      display: flex !important;
      justify-content: center !important;
      max-width: 160px !important;
      margin: 0 auto 12px !important;
    }
    /* Add-to-Cart-Button zentriert + breit */
    .product-details-page .pd-info-col #pd-add-to-cart,
    .product-details-page .pd-info-col .add-to-cart-button {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 480px !important;
    }
    /* Countdown-Block zentriert */
    .product-details-page .pd-info-col .mts-pd-countdown {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* CTA-Row + JobRad + Provider-Link zentriert */
    .product-details-page .pd-info-col .mts-pd-cta-row,
    .product-details-page .pd-info-col .mts-pd-jobrad,
    .product-details-page .pd-info-col .mts-pd-providers-link {
      text-align: center !important;
    }
    /* Review-Summary zentriert */
    .product-details-page .pd-info-col .pd-review-summary {
      text-align: center !important;
      justify-content: center !important;
    }
  }

  /* ==============================================================
     ===== ITER 18 — PDP Preis-/Angebots-Sektion zentriert (Desktop) =
     User: "die Preis-/Angebots-Sektion soll horizontal mittig statt
     linksbuendig dargestellt werden".
     Scope: NUR die Preis-/Offer-Subklassen innerhalb der PDP-Info-Col
     (.product-details-page .pd-info-col ...). Trifft bewusst NICHT:
       - Listing-/Kachel-Preise (.art-* — anderer Container)
       - Produkt-Varianten (.pd-variants* — User arbeitet parallel)
       - Menge/Warenkorb-Button (.pd-offer-actions* — bleibt wie gehabt)
     Die Mobile-Query oben (max-width:768px) zentriert bereits alles;
     dieser Block ergaenzt die Zentrierung NUR fuer den Preis-Block auch
     auf Desktop und deckt die Smartstore-CE-UVP/Ersparnis-Struktur ab
     (.pd-promoprice-group / .pd-promoprice-line / .pd-promosaving).
     Struktur (CE 6.3 Price-Partial):
       .pd-offer-price-container > .pd-offer-price
         > .pd-group > .pd-price-group
            > .pd-finalprice (.pd-finalprice-offer) [Verkaufspreis]
            > .pd-promoprice-group
                > .pd-promoprice-line  "Unverb. Preisempf.:" + UVP + Tip
                > .pd-promoprice-line  "Sie sparen:" + Betrag + Badge
                    > .pd-promosaving.d-flex  (Flex: Betrag + Badge)
         > .pd-group > .pd-legalinfo  "inkl. MwSt. Versandkostenfrei"
       .pd-stock-info-container > .pd-stock-info > .pd-stock  "Vorraetig"
     ============================================================== */
  /* Block-Level-Zentrierung der Container (text-align vererbt auf
     alle inline/Text-Kinder: Preis, UVP-Zeile, Erklaerung, Legalinfo). */
  .product-details-page .pd-info-col .pd-offer-price-container,
  .product-details-page .pd-info-col .pd-offer-price,
  .product-details-page .pd-info-col .pd-offer-price > .pd-group,
  .product-details-page .pd-info-col .pd-price-group,
  .product-details-page .pd-info-col .pd-finalprice,
  .product-details-page .pd-info-col .pd-promoprice-group,
  .product-details-page .pd-info-col .pd-promoprice-line,
  .product-details-page .pd-info-col .pd-legalinfo,
  .product-details-page .pd-info-col .pd-stock-info-container,
  .product-details-page .pd-info-col .pd-stock-info,
  .product-details-page .pd-info-col .pd-stock {
    text-align: center !important;
  }
  /* Flex-Container im Preisblock: text-align zentriert Flex-ITEMS nicht.
     Live gemessen (getComputedStyle): .pd-finalprice (Hauptpreis-Wrapper) und
     .pd-promoprice-line ("Unverb. Preisempf." + "Sie sparen" Zeilen) sind
     display:flex; justify-content:normal -> ihre Kinder (Preis-Amount, Label +
     UVP/Sparbetrag) bleiben sonst linksbuendig trotz text-align:center.
     Daher justify-content:center fuer alle Flex-Container der Preis-Sektion.
     .pd-promosaving (.d-flex, "Sie sparen" Betrag + Badge) ebenso. */
  .product-details-page .pd-info-col .pd-finalprice,
  .product-details-page .pd-info-col .pd-promoprice-line,
  .product-details-page .pd-info-col .pd-promosaving.d-flex,
  .product-details-page .pd-info-col .pd-promosaving {
    justify-content: center !important;
  }
  /* .pd-stock-info ist .pd-group (kann flex sein) -> ebenfalls mittig. */
  .product-details-page .pd-info-col .pd-stock-info {
    justify-content: center !important;
  }

  /* ==============================================================
     ===== ITER 16 — Phase A: PDP Header weiter rauf  ==============
     User: "ich moechte das alles weiter nach oben rutscht bei der
     produktseite ... weil ueber leasing anbieter und marken logo
     noch viel platz zum header ist".
     Recon: Header bottom y=170, Brand+ProvidersLink y=274 → 104px Gap.
     Davon: Breadcrumb y=194..244 (Hoehe 50, padding-top 16), dann
     Whitespace 30px bis pd-section y=274.
     Ziel: Brand y ~210-220 (rund 60px hochziehen).
     Mechanik: body.mts-pdp (vom JS gesetzt) als Scope. Breadcrumb
     enger ziehen (padding 16->4 top, height ~50->28). Ausserdem
     pd-section margin-top negativ ziehen, um die generische
     content-Body Top-Whitespace zu schliessen.
     ============================================================== */
  body.mts-pdp .breadcrumb-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body.mts-pdp .breadcrumb-container .breadcrumb,
  body.mts-pdp .breadcrumb {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  /* Inhalts-Bereich in Smartstore ist <section.container#content> mit
     Smartstore-Default-Padding/Margin. Wir ziehen die pd-section eng an
     den Breadcrumb. */
  body.mts-pdp section#content,
  body.mts-pdp .container#content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.mts-pdp .pd-section {
    margin-top: -8px !important;
    padding-top: 0 !important;
  }
  /* Auf der gesamten PDP keine zusaetzlichen Top-Margins auf den ersten
     Block in der Info-Col und Data-Col. */
  body.mts-pdp .pd-section .pd-info-col,
  body.mts-pdp .pd-section .pd-data-col {
    padding-top: 0 !important;
  }
  /* Brand-Block: vorher hatte er ggf. mt durch Smartstore-Default; nullen. */
  body.mts-pdp .pd-info-col .pd-info .pd-brand-block {
    margin-top: 0 !important;
  }
  /* Mobile: Breadcrumb noch kompakter, pd-section dichter an Header */
  @media (max-width: 767px) {
    body.mts-pdp .breadcrumb-container .breadcrumb,
    body.mts-pdp .breadcrumb {
      padding-top: 2px !important;
      padding-bottom: 2px !important;
      font-size: 11px !important;
    }
    body.mts-pdp .pd-section {
      margin-top: -4px !important;
    }
  }

  /* ==============================================================
     ===== ITER 16 — Phase B: Variant-Pills Auto-Width + Single  ===
     User: "die groessen jetzt nicht mehr lesen weil die button
     breite nicht angepasst ist an den text der option".
     User: "wenn nur eine groesse verfuegbar ist dann sollte 1 gr
     angezeigt werden nichtmehr 2 grid".
     Loesung: grid-template-columns auf auto-fit/minmax(140px, 1fr)
     -- Pills nehmen mind. 140px Breite, koennen breiter werden bei
     langen Werten (Diamant 22"/29/XL etc.). Bei nur einem Pill
     setzen wir per JS die Klasse `.mts-variant-pills--single`, die
     auf 1-Spalte umschaltet (voll-breit). Color-Swatches bleiben
     Flex (Phase B referenziert sie nicht).
     ============================================================== */
  /* Override Iter 15-Grid: jetzt auto-fit. Hoehere Spezifitaet via Body. */
  body .mts-variant-pills:not(.mts-variant-pills--swatch) {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    max-width: 420px !important;
  }
  /* Single-Pill: 1-Spalte voll-breit (gut sichtbar als "nur eine Groesse"). */
  body .mts-variant-pills.mts-variant-pills--single:not(.mts-variant-pills--swatch) {
    grid-template-columns: 1fr !important;
    max-width: 280px !important;
  }
  /* Pills duerfen jetzt breiter als 56px sein, Text wird komplett gezeigt.
     Falls extrem lang, wird er ueber padding/whitespace nowrap kontrolliert.
     Wir lassen white-space:nowrap (Iter 10 Default), aber erlauben weiches
     Wrapping bei sehr langem Text via overflow-wrap. */
  body .mts-variant-pills:not(.mts-variant-pills--swatch) .mts-variant-pill {
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
    padding: 8px 14px !important;
    min-height: 44px !important;
  }
  @media (max-width: 767px) {
    body .mts-variant-pills:not(.mts-variant-pills--swatch) {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
      max-width: 100% !important;
    }
  }

  /* ==============================================================
     ===== ITER 16 — Phase C: Hero-Banner Hoehe + OnlineShopBilder ==
     User: "die hoehe besser machen ... etwas groesser ... als das
     aktuelle". Aktuell 280/200 -> jetzt 340 Desktop / 240 Mobile.
     Bilder kommen aus /mtsbilder/* (kuratierte Cube-Lifestyle-
     Aufnahmen, keine Catalog-Cutouts mehr fuer Hero).
     ============================================================== */
  body.mts-cat-page .mts-cat-hero-banner {
    min-height: 340px !important;
    padding: 76px 32px !important;
    margin: 16px 0 28px !important;
  }
  /* Lifestyle-Bilder sind nicht zentriert auf Bike sondern echtes
     Editorial — backgroundPosition auf center center, brightness
     etwas mehr (Bilder sind dunkler als Catalog-Cutouts). */
  body.mts-cat-page.mts-hero-lifestyle .mts-cat-hero-banner::before {
    background-position: center center !important;
    background-size: cover !important;
    filter: brightness(0.78) saturate(1.05) !important;
  }
  body.mts-cat-page.mts-hero-lifestyle .mts-cat-hero-banner::after {
    background:
      linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.55) 100%) !important;
  }
  @media (max-width: 700px) {
    body.mts-cat-page .mts-cat-hero-banner {
      min-height: 240px !important;
      padding: 56px 22px !important;
    }
  }

  /* ==============================================================
     ===== ITER 16 — Phase D: Manufacturer-Page = Category-Page  ===
     User: "die marken kategorie seite ganz anders aussieht wie die
     anderen kategorien seite ... mache das die marken seite wie
     die kategorien seite ... zeige das logo von dem anbieter an".
     DOM-Recon: .manufacturer-page hat exakt die gleiche Struktur
     wie .category-page (.page-title h1, .page-body, product-list-
     container, artlist), aber Smartstore-CSS scoped vieles auf
     .category-page. Hier extenden wir ALLE relevanten Selectoren
     mit `.manufacturer-page`.
     JS extension: isCategoryPage() schliesst Manufacturer ein,
     initCategoryHero erkennt Manufacturer und nutzt Bidex-Logo
     im Banner statt Tagline.
     ============================================================== */
  /* Container-Layout-Fixes: Manufacturer-Page genauso wie Category-Page. */
  body.lyt-cols-2:has(.manufacturer-page) > .container,
  body.lyt-cols-2:has(.manufacturer-page) .container.menubar-container,
  body.lyt-cols-2:has(.manufacturer-page) > div > .container:not(.menubar-container):not(.shopbar-container):not(.megamenu-container):not(.footer-main):not(.footer-bottom):not(.footer-social) {
    /* selber Trick wie .category-page-Layout */
  }
  /* Listing-Card-Bilder, Hero, Filter-Sidebar — alle via .mts-cat-page Body-
     Class scopen, die JS jetzt auch auf Manufacturer-Pages setzt. */

  /* Generic page-title / description Klone fuer Manufacturer */
  .manufacturer-page h1,
  .manufacturer-page .page-title h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    margin: 32px 0 16px !important;
    letter-spacing: -0.025em;
    font-weight: 700 !important;
  }
  .manufacturer-page .manufacturer-description,
  .manufacturer-page .page-description {
    color: var(--mts-text-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    max-width: 720px;
    margin-bottom: 32px !important;
  }
  /* Toolbar/Pagination/Cards in Manufacturer-Page wie Category-Page */
  .manufacturer-page .toolbar { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 24px !important; }

  /* Brand-Logo im Hero-Banner (vom JS injiziert: .mts-cat-hero-brandlogo)
     Iter 17 Phase A: User-Feedback "transparent sodass man direkt das logo
     sieht ohne hintergrund". Daher kein Box-BG/Padding/Border-Radius mehr.
     Stattdessen kraftvoller drop-shadow als Tiefe + leichte glow gegen
     dunkle Bildbereiche. Bidex-Logos sind auf weissem Hintergrund 250x185
     – mix-blend-mode:multiply blendet das Weiss aus, ohne dass das Logo
     leidet (Bidex-Logos sind farbig auf neutralem Weiss gedruckt). */
  body.mts-cat-page .mts-cat-hero-banner .mts-cat-hero-brandlogo {
    display: block;
    max-width: 240px;
    max-height: 110px;
    width: auto;
    height: auto;
    margin: 0 auto 14px;
    object-fit: contain;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  }
  @media (max-width: 700px) {
    body.mts-cat-page .mts-cat-hero-banner .mts-cat-hero-brandlogo {
      max-width: 170px;
      max-height: 78px;
      margin-bottom: 10px;
    }
  }

  /* ==============================================================
     ===== ITER 17 Phase C — Sub-Kategorie-Tile ohne Bild =========
     User: "soll das erste produktbild angezeigt werden was dahinter
     ist als kategorie bild ohne hintergrund etc."
     JS setzt .mts-cat-tile-fixed auf .art sobald das echte Produkt-
     bild geladen ist. Bis dahin bleibt der default-image-Look.
     Der Card-Wrapper soll transparent sein und das Produktbild
     direkt zeigen (kein grauer BG, kein Padding-Frame).
     ============================================================== */
  .artlist .art.mts-cat-tile-fixed .art-picture-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .artlist .art.mts-cat-tile-fixed .art-picture img,
  .artlist .art.mts-cat-tile-fixed .art-picture-block img {
    background: transparent !important;
    padding: 4px !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
  }
  /* Card-Hover bleibt aktiv, aber dezenter Schatten statt flaeche */
  .artlist .art.mts-cat-tile-fixed:hover .art-picture-block {
    box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
  }


/* ===== Iter-21-MM — Header-Megamenu-Hover-Sustain (no-flicker switch) ===== */
header#header .megamenu-dropdown-container {
  /* Container-Background IMMER weiß setzen — selbst im height:0-Zustand
     blitzt dann nichts mehr durch falls JS-Sustain einen Frame zu spät kommt. */
  background: #fff !important;
  transition: none !important;
}
/* Sustain-Klasse vom JS gesetzt — hält Container offen für 180ms nach Verlassen,
   überbrückt das Smartstore-Unmount-vor-Mount-Flackern beim Trigger-Switch. */
header#header .megamenu-dropdown-container.mts-mm-sustain {
  height: auto !important;
  overflow: visible !important;
  padding: 24px !important;
  background: #fff !important;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.18) !important;
  border-radius: var(--mts-radius) !important;
  pointer-events: auto !important;
}
/* Inhalt während Sustain trotzdem nur dann sichtbar wenn ein .show child da ist —
   sustain-only-state zeigt leeren weißen Container, kein altes Inhalt-Echo. */
header#header .megamenu-dropdown-container.mts-mm-sustain:not(:has(.dropdown-menu.show)):not(:has(> div.show)) > div {
  visibility: hidden !important;
}
/* ===== /Iter-21-MM ====================================================== */

/* ===== Iter-21-CTA — PDP-CTA-Buttons border weg, Pill-Style mit Tint ====== */
.mts-pdp-extras--iter20 .mts-pdp-cta-btn,
.mts-pdp-extras .mts-pdp-cta-btn {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
.mts-pdp-extras--iter20 .mts-pdp-cta-btn--filiale {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}
.mts-pdp-extras--iter20 .mts-pdp-cta-btn--filiale:hover {
  background: #e5e7eb !important;
  transform: translateY(-1px);
}
.mts-pdp-extras--iter20 .mts-pdp-cta-btn--leasing {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
.mts-pdp-extras--iter20 .mts-pdp-cta-btn--leasing:hover {
  background: #a7f3d0 !important;
  transform: translateY(-1px);
}
.mts-pdp-extras--iter20 .mts-pdp-cta-btn--bestpreis {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
.mts-pdp-extras--iter20 .mts-pdp-cta-btn--bestpreis:hover {
  background: #fecaca !important;
  transform: translateY(-1px);
}
/* ===== /Iter-21-CTA ===================================================== */



/* ===== Iter-22-MM — Header-Megamenu Outer-Container TRANSPARENT ============
   Iter-19 + Iter-21 setzten Background/Padding/Shadow am OUTER Container,
   der ueber komplette 1440px Headerbreite spannt -> sichtbar als weisse
   Leiste rechts vom eigentlich schmalen Dropdown.
   Iter-22: Outer wird komplett unsichtbar, alle visuellen Eigenschaften
   liegen am inneren .dropdown-menu (Smartstore-Default, bereits korrekt).
   ========================================================================== */
header#header .megamenu-dropdown-container.simple,
header#header .megamenu-dropdown-container.simple.mts-mm-sustain,
header#header .megamenu-dropdown-container.simple:has(> div.show),
header#header .megamenu-dropdown-container.simple:has(.dropdown-menu.show) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Container muss im Show/Sustain-Zustand "offen" sein, damit das absolut
   positionierte innere .dropdown-menu nicht durch Container-overflow:hidden
   geclippt wird. height:0 ist ok solange overflow:visible -> Inner ragt raus. */
header#header .megamenu-dropdown-container.simple:has(> div.show),
header#header .megamenu-dropdown-container.simple:has(.dropdown-menu.show),
header#header .megamenu-dropdown-container.simple.mts-mm-sustain {
  overflow: visible !important;
  pointer-events: auto !important;
}
/* Sustain im Leer-Zustand: keine pointer-events brauchen wir nicht zu
   suppressen — Container ist transparent, hat keine visuelle Praesenz mehr. */

/* Inner .dropdown-menu hat bereits alle visuellen Eigenschaften (Smartstore-
   Default). Hier minimal anheben fuer Apple-Look-Konsistenz: groesserer
   border-radius + leicht weicherer Schatten. */
header#header .megamenu-dropdown-container.simple .dropdown-menu {
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.18), 0 8px 24px -8px rgba(0,0,0,0.12) !important;
  border: 0 !important;
  padding: 10px !important;
}
/* ===== /Iter-22-MM ======================================================== */



/* ===== Iter-22-PHASE2-FONT — Bidex Webfont (woff2 inline) =================
   Quelle: ShopifyApp/BikeShopDesignDede/assets/bidex.woff2 + bidex-icons.css
   1:1 wie zweirad-dede.de, kein Asset-Upload noetig.
   ========================================================================== */
/* Bidex Icon Font - V. 001.00 */
@font-face {
	font-family: 'bidex';
	src: url('data:font/woff2;base64,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') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}	
.bidex {
	display: inline-block;
	font: normal normal normal 14px/1 bidex;
	font-family: 'bidex';
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size:28px;
}
.bidex-sm {
	font-size: 1.2em;
}
.bidex-2x {font-size: 2em;}
.bidex-3x {font-size: 3em;}
.bidex-4x {font-size: 4em;}
.bidex-5x {font-size: 5em;}
.bidex-6x {font-size: 6em;}
.bidex-7x {font-size: 7em;}
.bidex-8x {font-size: 8em;}
.bidex-9x {font-size: 9em;}
.bidex-10x {font-size: 10em;}


.bidex-bidex:before{
	content: "\f000";
}
/* Damen */
.bidex-ft10:before{	
	content: "\f001";
}
/* Trapez */
.bidex-ft11:before{	
	content: "\f002";
}
/* Mixte */
.bidex-ft12:before{	
	content: "\f003";
}
/* Wave */
.bidex-ft13:before{	
	content: "\f004";
}
/* Tiefeinsteiger */
.bidex-ft14:before{	
	content: "\f005";
}
/* Schwanenhals */
.bidex-ft15:before{	
	content: "\f006";
}
/* Curve */
.bidex-ft16:before{	
	content: "\f007";
}
/* Herren */
.bidex-ft20:before{	
	content: "\f008";
}
/* Diamant */
.bidex-ft21:before{	
	content: "\f009";
}
/* Pedersen */
.bidex-ft22:before{	
	content: "\f00a";
}
/* Unisex */
.bidex-ft30:before{	
	content: "\f00b";
}
/* Y-Rahmen */
.bidex-ft31:before{	
	content: "\f00c";
}
/* Compact */
.bidex-ft32:before{	
	content: "\f00d";
}
/* Faltrahmen */
.bidex-ft33:before{	
	content: "\f00e";
}
/* Liegeradrahmen */
.bidex-ft40:before{	
	content: "\f00f";
}
/* Transportrad */
.bidex-ft50:before{	
	content: "\f010";
}
/* Long-John */
.bidex-ft51:before{	
	content: "\f011";
}
/* Backpacker */
.bidex-ft52:before{	
	content: "\f012";
}
/* Bäckerrad */
.bidex-ft53:before{	
	content: "\f013";
}
/* Transport-Dreirad */
.bidex-ft55:before{	
	content: "\f014";
}



/* Spezifikationen */

/* Jahr */
.bidex-year:before{	
	content: "\f100";
}
/* Rahmen */
.bidex-frame:before{	
	content: "\f101";
}
/* Rahmen-Farbe */
.bidex-framecolor:before{	
	content: "\f102";
}
/* Rahmen-Farben */
.bidex-bidex-fc:before{	
	content: "\f103";
}
/* Rahmen-Material */
.bidex-bidex-fm:before{	
	content: "\f104";
}
/* Rahmen-Form */
.bidex-bidex-ft:before{	
	content: "\f105";
}
/* Gabel */
.bidex-fork:before{	
	content: "\f106";
}
/* Gabel Federweg */
.bidex-fork-suspension-travel:before{	
	content: "\f107";
}
/* Dämpfer */
.bidex-rear-shock:before{	
	content: "\f108";
}
/* Dämpfer Federweg */
.bidex-rear-shock-suspension-travel:before{	
	content: "\f109";
}
/* Schaltung */
.bidex-derailleur:before{	
	content: "\f10a";
}
/* Schalthebel */
.bidex-shift-levers:before{	
	content: "\f10b";
}
/* Schalthebel */
.bidex-front-derailleur:before{	
	content: "\f10c";
}
/* Schaltungstyp */
.bidex-bidex-gs:before{	
	content: "\f10d";
}
/* Bremse */
.bidex-brakes:before{	
	content: "\f10e";
}
/* Bremshebel */
.bidex-brake-levers:before{	
	content: "\f10f";
}
/* Bremsscheiben */
.bidex-brake-disc:before{	
	content: "\f110";
}
/* Laufradsatz */
.bidex-wheelset:before{	
	content: "\f111";
}
/* Felgen */
.bidex-rims:before{	
	content: "\f112";
}
/* Naben */
.bidex-hubs:before{	
	content: "\f113";
}
/* Reifen */
.bidex-tires:before{	
	content: "\f114";
}
/* Speichen	*/
.bidex-spokes:before{	
	content: "\f115";
}
/* Lenker */
.bidex-handlebar:before{	
	content: "\f116";
}
/* Vorbau */
.bidex-stem:before{	
	content: "\f117";
}
/* Steuersatz */
.bidex-headset:before{	
	content: "\f118";
}
/* Griffe */
.bidex-grips:before{	
	content: "\f119";
}
/* Lenkeraufsatz */
.bidex-aerobar:before{	
	content: "\f11a";
}
/* Lenkerband */
.bidex-handlebar-tape:before{	
	content: "\f11b";
}
/* Sattel */
.bidex-saddle:before{	
	content: "\f11c";
}
/* Sattelklemme	*/
.bidex-seat-clamp:before{	
	content: "\f11d";
}
/* Sattelstütze	*/
.bidex-seat-post:before{	
	content: "\f11e";
}
/* Kurbelsatz */
.bidex-crankset:before{	
	content: "\f11f";
}
/* Innenlager */
.bidex-bottom-bracket:before{	
	content: "\f120";
}
/* Kette */
.bidex-chain:before{	
	content: "\f121";
}
/* Kettenschutz */
.bidex-chainguard:before{	
	content: "\f122";
}
/* Zahnkranz */
.bidex-sprocket:before{	
	content: "\f123";
}
/* Frontleuchte */
.bidex-front-light:before{	
	content: "\f124";
}
/* Rückleuchte */
.bidex-rear-light:before{	
	content: "\f125";
}
/* Dynamo */
.bidex-dynamo:before{	
	content: "\f126";
}
/* Gepäckträger */
.bidex-rack:before{	
	content: "\f127";
}
/* Gepäckträger vorne */
.bidex-front-rack:before{	
	content: "\f128";
}
/* Schutzbleche */
.bidex-mudguards:before{	
	content: "\f129";
}
/* Schloss */
.bidex-lock:before{	
	content: "\f12a";
}
/* Ständer */
.bidex-stand:before{	
	content: "\f12b";
}
/* Pedale */
.bidex-pedals:before{	
	content: "\f12c";
}
/* Motor */
.bidex-motor:before{	
	content: "\f12d";
}
/* Akku */
.bidex-battery:before{	
	content: "\f12e";
}
/* Akku-Kapazität (wH) */
.bidex-battery-capacity:before{	
	content: "\f12f";
}
/* Display */
.bidex-display:before{	
	content: "\f130";
}
/* Reichweite */
.bidex-range:before{	
	content: "\f131";
}
/* Gewicht */
.bidex-weight:before{	
	content: "\f132";
}
/* Zulässiges Gesamtgewicht */
.bidex-permissible-total-weight:before{	
	content: "\f133";
}
/* Strassenzulassung */
.bidex-bidex-st:before{	
	content: "\f134";
}
/* Sport-Lenker */
.bidex-hb10:before{	
	content: "\f200";
}
.bidex-hb11:before{	
	content: "\f201";
}
.bidex-hb12:before{	
	content: "\f202";
}
.bidex-hb20:before{	
	content: "\f203";
}
.bidex-hb21:before{	
	content: "\f204";
}
.bidex-hb22:before{	
	content: "\f205";
}
.bidex-hb23:before{	
	content: "\f206";
}
.bidex-hb24:before{	
	content: "\f207";
}
.bidex-hb30:before{	
	content: "\f208";
}
.bidex-hb31:before{	
	content: "\f209";
}
.bidex-hb32:before{	
	content: "\f20A";
}
.bidex-hb33:before{	
	content: "\f20B";
}
.bidex-hb34:before{	
	content: "\f20C";
}
.bidex-hb35:before{	
	content: "\f20D";
}
.bidex-hb36:before{	
	content: "\f20E";
}
/*  Sattelstützen  */
.bidex-sp10:before{	
	content: "\f300";
}
.bidex-sp20:before{	
	content: "\f301";
}
.bidex-sp30:before{	
	content: "\f302";
}
.bidex-sp31:before{	
	content: "\f303";
}
.bidex-sp32:before{	
	content: "\f304";
}
.bidex-sp40:before{	
	content: "\f305";
}
.bidex-sp41:before{	
	content: "\f306";
}
.bidex-sp42:before{	
	content: "\f307";
}
.bidex-sp43:before{	
	content: "\f308";
}
.bidex-sp60:before{	
	content: "\f309";
}
.bidex-sp61:before{	
	content: "\f30A";
}

/* Rahmen-Hauptfarbe Icons */
.bidex-fc10:before{	/* gelb */
	content: "\f400";
}
.bidex-fc20:before{	/* orange */
	content: "\f401";
}
.bidex-fc30:before{	/* rot */
	content: "\f402";
}
.bidex-fc40:before{	/* violett */
	content: "\f403";
}
.bidex-fc50:before{	/* blau */
	content: "\f404";
}
.bidex-fc60:before{	/* grün */
	content: "\f405";
}
.bidex-fc70:before{	/* grau */
	content: "\f406";
}
.bidex-fc80:before{	/* braun */
	content: "\f407";
}
.bidex-fc90:before{	/* weiß */
	content: "\f408";
}
.bidex-fc95:before{	/* schwarz */
	content: "\f409";
}
.bidex-fc96:before{	/* silber */
	content: "\f40A";
}

/* Rahmenhöhe Icons */
.bidex-fh43:before{	/* 43 cm */
	content: "\f500";
}
.bidex-fh48:before{	/* 48 cm */
	content: "\f501";
}
.bidex-fh53:before{	/* 53 cm */
	content: "\f502";
}
.bidex-fh58:before{	/* 58 cm */
	content: "\f503";
}
.bidex-fh82:before{	/* S */
	content: "\f504";
}
.bidex-fh83:before{	/* M */
	content: "\f505";
}
.bidex-fh84:before{	/* L */
	content: "\f506";
}
.bidex-fh85:before{	/* XL */
	content: "\f507";
}

/* Schaltungstyp Icons */
.bidex-gs10:before{	/* Kettenschaltung */
	content: "\f600";
}
.bidex-gs20:before{	/* Nabenschaltung */
	content: "\f601";
}
.bidex-gs30:before{	/* Tretlagergetriebe */
	content: "\f602";
}

/* Laufradgröße Icons */
.bidex-ws24:before{	/* 24"/507mm */
	content: "\f700";
}
.bidex-ws27:before{	/* 27"/630mm */
	content: "\f701";
}
.bidex-ws28:before{	/* 28"/622mm */
	content: "\f702";
}
.bidex-ws29:before{	/* 29"/622mm */
	content: "\f703";
}
.bidex-ws50:before{	/* 27.5"/584mm */
	content: "\f704";
}

/* Antriebsträger Icons */
.bidex-dt10:before{	/* Kette */
	content: "\f800";
}
.bidex-dt20:before{	/* Riemen */
	content: "\f801";
}

/* Motor-Marke Icons */
.bidex-mo12:before{	/* Bosch */
	content: "\f900";
}
.bidex-mo60:before{	/* Panasonic */
	content: "\f901";
}
.bidex-mo61:before{	/* Pinion */
	content: "\f902";
}
.bidex-mo70:before{	/* Shimano */
	content: "\f903";
}
.bidex-mo72:before{	/* TQ */
	content: "\f904";
}
/* Rahmengröße Icon */
.bidex-frame-size:before{	
	content: "\f338";
}


/* ===== /Iter-22-PHASE2-FONT ============================================== */



/* ===== Iter-22-PHASE2-RENDER — DEDE-1:1 Spec-Block-Styles ===============
   Quelle: zweirad-dede.de PDP-CSS, gespiegelt fuer Smartstore-PDP unter #pd-tabs-1.
   Iter-21-Polish-Block (Iter-21-PDP-TABS in MtsStufeBStyle) wird durch
   diese Regeln ueberschrieben (hoehere CSS-Cascade-Position, !important).
   ========================================================================= */
#pd-tabs-1 .bidex-product-accordion {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#pd-tabs-1 .bidex-technical-data-header {
  width: 100% !important;
  background-color: #ffffff !important;
  padding: 2rem !important;
  text-align: center !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
}
#pd-tabs-1 .bidex-technical-data-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#pd-tabs-1 .bidex-technical-data-icon svg {
  width: 64px !important;
  height: 64px !important;
  color: #000 !important;
}
#pd-tabs-1 .bidex-technical-data-title {
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  color: #000 !important;
}
#pd-tabs-1 .bidex-attribute-groups-wrapper {
  width: 100% !important;
  background-color: #ffffff !important;
  padding: 2rem !important;
  border: none !important;
}
#pd-tabs-1 .bidex-attribute-groups {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-top: 0 !important;
}
#pd-tabs-1 .bidex-attribute-groups--black-headers .bidex-attribute-group-header { color: #000 !important; }
#pd-tabs-1 .bidex-attribute-groups--black-headers .bidex-attribute-group-header .bidex { color: #000 !important; }
#pd-tabs-1 .bidex-attribute-group {
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
#pd-tabs-1 .bidex-attribute-group-header {
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 1.82rem !important;
  margin: 0 !important;
}
#pd-tabs-1 .bidex-attribute-group-header .bidex,
#pd-tabs-1 .bidex-attribute-group-header i.bidex {
  font-size: 2.86em !important;
  color: #000 !important;
  display: inline-block !important;
  line-height: 1 !important;
}
#pd-tabs-1 .bidex-attribute-group-content {
  padding: 0.5rem !important;
  display: block !important;
}
#pd-tabs-1 .bidex-attribute-item {
  padding: 0.5rem 1rem !important;
  display: block !important;
  border: none !important;
}
#pd-tabs-1 .bidex-attribute-name {
  font-weight: bold !important;
  margin-right: 0.5rem !important;
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
}
#pd-tabs-1 .bidex-attribute-value {
  color: #2c3e50 !important;
  display: inline !important;
  font-size: inherit !important;
  font-weight: normal !important;
}
@media (max-width: 768px) {
  #pd-tabs-1 .bidex-technical-data-icon svg { width: 52px !important; height: 52px !important; }
  #pd-tabs-1 .bidex-technical-data-title { font-size: 2.4rem !important; }
  #pd-tabs-1 .bidex-attribute-groups-wrapper,
  #pd-tabs-1 .bidex-technical-data-header { padding: 1.5rem !important; }
  #pd-tabs-1 .bidex-attribute-groups { grid-template-columns: 1fr !important; }
}
/* Hide Smartstore-default specs table when DEDE-Akkordeon present */
#pd-tabs-1:has(.bidex-product-accordion[data-iter22]) .pd-specs,
#pd-tabs-1:has(.bidex-product-accordion[data-iter22]) .pd-specs-table { display: none !important; }
/* ===== /Iter-22-PHASE2-RENDER =========================================== */



/* ===== Iter-22-PHASE2-CLEANUP — V2-Akkordeon dauerhaft ausblenden =========
   V3 ist Single-Source-of-Truth fuer Spec-Akkordeon. Alle anderen
   .bidex-product-accordion-Instanzen in #pd-tabs-1 verstecken.
   ========================================================================= */
#pd-tabs-1 .bidex-product-accordion[data-iter21],
#pd-tabs-1 .bidex-product-accordion:not([data-iter22]) {
  display: none !important;
}
/* ===== /Iter-22-PHASE2-CLEANUP =========================================== */



/* ===== Iter-22-PHASE2-PX — DEDE-1:1 in fixen px-Werten =================
   Override fuer Iter-22-PHASE2-RENDER (rem/em -> px). Smartstore-rem-base
   ist 16px, DEDE-rem-base 10px (62.5% convention). Mit fixen px-Werten
   werden die Akkordeon-Headers, Icons und Items optisch identisch.
   ========================================================================= */
#pd-tabs-1 .bidex-product-accordion {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
#pd-tabs-1 .bidex-technical-data-header {
  padding: 18px !important;
  gap: 12px !important;
}
#pd-tabs-1 .bidex-technical-data-icon svg {
  width: 48px !important;
  height: 48px !important;
}
#pd-tabs-1 .bidex-technical-data-title {
  font-size: 28px !important;
  line-height: 1.2 !important;
}
#pd-tabs-1 .bidex-attribute-groups-wrapper {
  padding: 16px !important;
}
#pd-tabs-1 .bidex-attribute-groups {
  gap: 16px !important;
}
#pd-tabs-1 .bidex-attribute-group {
  border-radius: 0 !important;
  background: transparent !important;
}
#pd-tabs-1 .bidex-attribute-group-header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  width: 100% !important;
}
#pd-tabs-1 .bidex-attribute-group-header i.bidex,
#pd-tabs-1 .bidex-attribute-group-header .bidex {
  font-size: 48px !important;
  line-height: 1 !important;
  color: #000 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
}
#pd-tabs-1 .bidex-attribute-group-header .bidex-attribute-group-name {
  display: inline-block !important;
  flex: 1 1 auto !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
#pd-tabs-1 .bidex-attribute-group-content {
  padding: 4px 0 !important;
}
#pd-tabs-1 .bidex-attribute-item {
  padding: 4px 10px !important;
  display: block !important;
  line-height: 1.5 !important;
}
#pd-tabs-1 .bidex-attribute-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  display: inline !important;
  margin-right: 6px !important;
}
#pd-tabs-1 .bidex-attribute-name::after { content: ":"; }
#pd-tabs-1 .bidex-attribute-value {
  font-size: 14px !important;
  color: #2c3e50 !important;
  font-weight: 400 !important;
  display: inline !important;
}
@media (max-width: 768px) {
  #pd-tabs-1 .bidex-technical-data-icon svg { width: 36px !important; height: 36px !important; }
  #pd-tabs-1 .bidex-technical-data-title { font-size: 22px !important; }
  #pd-tabs-1 .bidex-attribute-group-header { font-size: 16px !important; }
  #pd-tabs-1 .bidex-attribute-group-header .bidex-attribute-group-name { font-size: 16px !important; }
  #pd-tabs-1 .bidex-attribute-group-header i.bidex { font-size: 36px !important; }
}
/* ===== /Iter-22-PHASE2-PX ============================================== */



/* ===== Iter-22-PHASE2-FINAL — Item-Layout 2-zeilig wie DEDE ============ */
#pd-tabs-1 .bidex-attribute-name::after { content: '' !important; }
#pd-tabs-1 .bidex-attribute-name {
  display: block !important;
  margin-right: 0 !important;
  margin-bottom: 2px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.3 !important;
}
#pd-tabs-1 .bidex-attribute-value {
  display: block !important;
  font-size: 14px !important;
  color: #2c3e50 !important;
  line-height: 1.4 !important;
}
#pd-tabs-1 .bidex-attribute-item {
  padding: 6px 10px !important;
  display: block !important;
}
/* ===== /Iter-22-PHASE2-FINAL =========================================== */



/* ===== Bidex-Spec-Strip-V4 — 4er-Grid in PDP-Beschreibung =================
   Mini-Spec-Strip am Ende des Beschreibungs-Tabs: 8 Tiles in 4-Spalten-Grid
   (Desktop) bzw. 2-Spalten (Mobile). 1:1 Optik wie Iter-22-PHASE2 V3
   (Bidex-Webfont-Glyph schwarz, kein Border, zentriert). Loest die alten
   FA-Tile-Renderings (Iter-20-Ära) ab.
   Gerendert von buildBidexSpecStripV4() in MtsStufeBScripts (apple-style.js).
   ========================================================================= */
.bidex-spec-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px 16px !important;
  margin: 32px 0 8px !important;
  padding: 24px 8px !important;
  background: transparent !important;
  border: none !important;
  justify-items: center !important;
  align-items: start !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.bidex-spec-strip__tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 220px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 8px !important;
}
.bidex-spec-strip__tile > i.bidex {
  font-size: 40px !important;
  color: #000 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bidex-spec-strip__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.bidex-spec-strip__value {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #2c3e50 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
}
@media (max-width: 992px) {
  .bidex-spec-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 12px !important; }
  .bidex-spec-strip__tile > i.bidex { font-size: 34px !important; }
}
/* Legacy FA-Spec-Grid aus Bestandsprodukten (vor 2026-05-02 importiert)
   verstecken, falls der Backfill noch nicht durchgelaufen ist. */
#pd-tabs-0 .bidex-spec-grid,
#pd-tabs-0 .bidex-spec-grid-heading,
.pd-full-description .bidex-spec-grid,
.pd-full-description .bidex-spec-grid-heading {
  display: none !important;
}
/* ===== /Bidex-Spec-Strip-V4 ============================================== */

/* ===== Iter 24 — PDP Hauptbild groesser ====================================
   User-Feedback (2026-05-04): Hauptbild auf der Produktdetailseite wirkt zu
   klein, wenn die Thumbnail-Spalte daneben angezeigt wird. Iter 15 Phase B
   gibt der Bild-Spalte 60% und der Info-Spalte 40%, die gal-box hat
   min-height:500px und das Hauptbild bekommt links 116px Inset (88px Thumbs
   + 28px Gap). Effektive Bildbreite bei Viewport 1440px war damit ca.
   ~600-650px – fuer ein Premium-Bike-Bild zu wenig.

   Diese Iter:
   - Spalten-Verhaeltnis: 60/40 -> 66/34 (Bild dominiert klar)
   - Right-Padding der Bild-Spalte: 80px -> 48px (mehr Platz fuer Bild)
   - .pd-image-section innen-Padding: 24px -> 8px
   - gal-box min-height: 500px -> 640px (Desktop) bzw. 720px (>=1600px)
   - Hauptbild max-height absichtlich nicht gesetzt (Smartstore haelt
     aspect-ratio bei) – stattdessen ueber gal-cell min-height steuern.
   - Tablet (1100..900): 50/50 unveraendert, aber Padding kleiner.
   - Mobile (<900): unveraendert (image schon full-width).

   Wichtig: Lightbox/Hover-Zoom (.gal-cell img) funktioniert weiter, weil
   wir nur Container-Dimensionen anfassen, nicht das img selbst. */
@media (min-width: 1101px) {
  body.product-details .pd-section .pd-data-col,
  body.product-details .pd-section > .col-12:not(.pd-info-col),
  .product-page .pd-section .pd-data-col {
    flex: 0 0 66% !important;
    max-width: 66% !important;
    padding-right: 48px !important;
  }
  body.product-details .pd-section .pd-info-col,
  body.product-details .pd-info-col,
  .product-page .pd-info-col {
    flex: 0 0 34% !important;
    max-width: 34% !important;
  }
  body.product-details .pd-image-section,
  body.product-details .product-images,
  body.product-details .pd-gallery {
    padding: 8px !important;
  }
}
@media (min-width: 1281px) {
  body.product-details .pd-data-col .gal-box,
  .pd-data-col .gal-box {
    min-height: 640px !important;
  }
  /* Hauptbild-Cell: feste min-height plus aspect-ratio-Hint, damit Smartstore
     das img mit object-fit:contain auf die volle Hoehe zieht. Nicht max-width
     setzen – die gal-cell-Breite ergibt sich automatisch aus der Spalte. */
  body.product-details .pd-data-col .gal-box > .gal-cell,
  .pd-data-col .gal-box > .gal-cell {
    min-height: 640px !important;
  }
  body.product-details .pd-data-col .gal-cell .gal-image-cell,
  body.product-details .pd-data-col .gal-cell img,
  .pd-data-col .gal-cell .gal-image-cell,
  .pd-data-col .gal-cell img {
    max-height: none !important;
  }
}
@media (min-width: 1600px) {
  body.product-details .pd-data-col .gal-box,
  .pd-data-col .gal-box {
    min-height: 720px !important;
  }
  body.product-details .pd-data-col .gal-box > .gal-cell,
  .pd-data-col .gal-box > .gal-cell {
    min-height: 720px !important;
  }
}
/* Tablet (901..1100px): Spalten bleiben bei 50/50 (bestehender Override),
   aber Bild-Section-Padding und gal-box-min-height etwas hochziehen. */
@media (min-width: 901px) and (max-width: 1100px) {
  body.product-details .pd-image-section,
  body.product-details .product-images,
  body.product-details .pd-gallery {
    padding: 8px !important;
  }
  body.product-details .pd-data-col .gal-box,
  .pd-data-col .gal-box {
    min-height: 520px !important;
  }
}
/* ===== /Iter 24 — PDP Hauptbild groesser ================================== */

/* ===== Iter 25 — Bug-Triple Fix (CSS-Teil) =================================
   User-Feedback (2026-05-04):
   1) Kategorie-Hero zeigt nur Slogan, der Kategoriename fehlt ueber dem Bild.
   2) Color-Swatches in der Listing-Card sind eckig (sollen rund sein).
   3) Color-Swatches in der Listing-Card zeigen oft die FALSCHE Farbe
      (zweiter Teil eines `'n'`-Doppelnamens, statt der Hauptfarbe).

   Diagnose:
   - Bug 1: Iter 16 Phase D wollte den Brand-Namen unter dem Logo auf
            der Manufacturer-Page verstecken. Der Selector
            `body .mts-cat-hero-banner h1.h3` ist aber zu breit, weil
            Smartstore das Kategorie-h1 ebenfalls mit class="h3" rendert.
            Folge: Auf JEDER Kategorie wird der Name versteckt.
            Fix hier: Hide auf .manufacturer-page einschraenken
            (body.mts-cat-hero-lifestyle reicht nicht, weil Lifestyle-
            Hero auch fuer Kategorien greift). Ueberschreibt das alte
            Iter-16-Hide via groesserer Specificity + nicht-Manufacturer.
   - Bug 2: Smartstore rendert <a class="art-color-opt"> mit Inline-
            background-color — das ist ein Quadrat. Wir machen ihn rund.
   - Bug 3: Daten-Bug stammt aus dem Bidex-Importer-Mapping (zwei-
            farbige Namen wie `mistygreen'n'black` werden auf den
            ZWEITEN Token gemappt → Schwarz statt Mistygreen).
            Vollstaendiger Fix gehoert in den Bidex-Importer
            (`smartstore/bidex-sync/src/services/bidexImporter.js`).
            Hier: Frontend-Quickfix per JS-Patch (siehe Iter-25-JS-
            Block weiter unten) — mappt Token → Hex und ueberschreibt
            den Inline-Style. */

/* Bug 1: Kategorie-h1 im Hero-Banner wieder sichtbar machen.
   Specificity 0,3,1 — schlaegt das alte Iter-16-Hide (0,2,1)
   ueberall ausser auf Manufacturer-Pages. */
body:not(.mts-manufacturer-page) .mts-cat-hero-banner h1.h3,
body:not(.mts-manufacturer-page) .mts-cat-hero-banner > h1 {
  display: block !important;
}
/* Manufacturer-Page-Marker setzt das JS bereits via .manufacturer-page
   im DOM; wir spiegeln das auf body, damit der Selektor oben greift.
   Falls das DOM-Element fehlt, ist body:not(.mts-manufacturer-page) true
   und der Title bleibt sichtbar — sicherer Default. */

/* Bug 2: Color-Swatches in der Listing-Card rund.
   Smartstore rendert `<a class="art-color-opt" style="background-color:#xxx">`.
   Hat 14x14 als Default — wir machen 16x16, rund, mit Hover-Lift. */
.art-color-opts .art-color-opt,
.artlist .art .art-color-opt,
.artlist .art-color-opts a.art-color-opt {
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  border: 1.5px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 2px #fff !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  vertical-align: middle !important;
}
.art-color-opts .art-color-opt:hover,
.artlist .art .art-color-opt:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 0 0 2px #fff !important;
}
.art-color-opts .art-color-opt[aria-selected="true"],
.artlist .art .art-color-opt[aria-selected="true"] {
  box-shadow: 0 0 0 2px var(--mts-accent), inset 0 0 0 2px #fff !important;
}

/* Bug 3 (CSS-Teil — visueller Hint dass JS-Patch greift):
   Wenn der JS-Patch eine Farbe korrigiert hat, setzt er
   data-mts-color-fixed="1" — das ist nur ein Marker fuer Recon. */

/* ===== /Iter 25 — Bug-Triple Fix (CSS-Teil) ================================ */

/* Iter 26 - Hover swap fallback ============================================
   Bug 4: Listing-Card wurde beim Hover weiss, wenn das Produkt kein zweites
   Bild hat. Ursache: Line 2927 (.artlist .art:hover .art-picture
   img:not(.mts-card-img-hover) { opacity: 0 }) feuert unconditional. Der
   bestehende [data-mts-hover-img="none"]-Override (Line 2929) reset nur
   transform, nicht opacity, und hat geringere Specificity.

   Strategie A: CSS-only Override mit hoeherer Specificity. Greift in zwei
   Faellen:
     1) JS hat applyPdpDataToCard schon ausgefuehrt und kein 2. Bild
        gefunden -> data-mts-hover-img="none".
     2) JS noch nicht durch (PDP-Fetch laeuft) ODER Spec-Queue blockiert
        -> Card hat ueberhaupt kein .mts-card-img-hover-Element. Decken
        wir per :not(:has(...)) ab. :has() ist in allen evergreen Browsern
        (Chrome 105+, Safari 15.4+, FF 121+) supported - bei Smartstore
        CE 6.3 Storefront-Zielgruppe ausreichend.

   Plus JS-Marker-Sicherheitsnetz: setzt data-mts-hover-img="none" sofort
   beim Card-Mount, falls applyPdpDataToCard verzoegert/skipped.
   ============================================================================ */
.artlist .art[data-mts-hover-img="none"]:hover .art-picture img,
.artlist .art[data-mts-hover-img="none"]:hover .art-picture-block img,
.artlist .art:not(:has(.mts-card-img-hover[data-mts-loaded="1"])):hover .art-picture img:not(.mts-card-img-hover),
.artlist .art:not(:has(.mts-card-img-hover[data-mts-loaded="1"])):hover .art-picture-block img:not(.mts-card-img-hover) {
  opacity: 1 !important;
}
/* Defensive: falls die Hover-Img-Datei doch eingehaengt ist, aber noch
   nicht geladen (data-mts-loaded != "1"), zeigen wir das Original-Bild. */
.artlist .art:has(.mts-card-img-hover:not([data-mts-loaded="1"])):hover .art-picture img:not(.mts-card-img-hover),
.artlist .art:has(.mts-card-img-hover:not([data-mts-loaded="1"])):hover .art-picture-block img:not(.mts-card-img-hover) {
  opacity: 1 !important;
}
/* ===== /Iter 26 — Hover swap fallback ===================================== */

/* ===== Iter 27 — Card-Compactness + PDP-Bild + PDP-Swatch + Tab-Flicker =====
   User-Feedback (2026-05-04, 6 Punkte):
     1) Card zu viel Whitespace — Padding/Gap reduzieren (Title<->Preis).
     2) Title in Card deutlich groesser (~17px, weight 700).
     3) Manufacturer-Logo in Card groesser (height 30-32px, max-width 110px).
     4) Color-Swatch INLINE neben "Weitere Option Groesse" (gleiche Zeile).
     5) Swatch groesser (22-24px) + KEIN Border (kein inset 2px white).
     6) Single-Size-Badge UNTER Preis (statt darueber).
     7) PDP-Hauptbild noch groesser (Iter 24 reicht nicht): 70/30 Spalten,
        min-height 800/880 statt 640/720, padding-right 32 statt 48.
     8) PDP-Color-Pill zeigt nur 1 Hex bei zweifarbigen Lacken — gleicher
        Tokenizer wie Iter-25 auf .mts-variant-pills--swatch .mts-variant-pill.
     9) Beschreibung-Tab flackert beim Reload (Smartstore tabs-autoselect lädt
        per AJAX `setselectedtab` State -> kurzer Sprung auf Merkmale und
        zurueck). Fix: tabs-autoselect-Klasse + data-tabselector-href so
        frueh wie moeglich entfernen, ersten Tab einrasten. */

/* P1+P2: Card-Compactness — Padding/Gaps zwischen Brand, Title, Description,
   Price reduzieren. Specificity matched die bestehenden Iter-1..26-Regeln
   (dieselben Selektoren). !important toggelt korrekt mangels Cascade-Dop. */
body .artlist:not(.artlist-lines) .art .art-brand,
body .artlist:not(.artlist-lines) .art .art-vendor {
  padding: 8px 16px 0 !important;
  margin: 0 !important;
}
body .artlist:not(.artlist-lines) .art .art-name {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;        /* C3: Produkttitel zentriert (Desktop+Mobile) */
}
body .artlist:not(.artlist-lines) .art .art-name-link,
body .artlist:not(.artlist-lines) .art .art-name a {
  padding: 2px 16px 2px !important;
  font-size: 1.075rem !important;       /* P2: Titel ~17px */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;        /* C3: Titel-Text mittig im display:block-Link */
}
body .artlist:not(.artlist-lines) .art .art-description {
  padding: 0 16px !important;
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
body .artlist:not(.artlist-lines) .art .art-delivery-info {
  padding: 0 16px !important;
  margin: 0 !important;
  font-size: 11px !important;
}
body .artlist:not(.artlist-lines) .art .art-price-block {
  padding: 4px 16px 8px !important;
  margin: 2px 0 0 !important;
}
body .artlist:not(.artlist-lines) .art .art-drop {
  padding: 0 16px 14px !important;
}
/* mts-card-specs zwischen Titel und Preis — tighter Gap */
body .artlist:not(.artlist-lines) .art .mts-card-specs {
  margin: 4px 0 0 !important;
  padding: 0 16px !important;
}

/* P3: Manufacturer-Logo groesser. Specificity ueber `body` schlaegt
   die alte Iter-1-Regel (.art-brand img.mts-brand-img). */
body .artlist:not(.artlist-lines) .art .art-brand img.mts-brand-img,
body .artlist:not(.artlist-lines) .art .art-vendor img.mts-brand-img {
  height: 30px !important;
  max-width: 110px !important;
  width: auto !important;
}
/* Wenn der Brand noch als Text (kein Logo gemappt) gerendert wird,
   ihn etwas groesser/markanter zeigen — hilft Hierarchie. */
body .artlist:not(.artlist-lines) .art .art-brand:not(:has(img.mts-brand-img)) > span,
body .artlist:not(.artlist-lines) .art .art-vendor:not(:has(img.mts-brand-img)) > span {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* P4: Color-Swatch + "Weitere Option Groesse" inline.
   .art-variant-info enthaelt .art-color-opts (nav) UND .art-more-opts (div).
   Default: blockig untereinander. Wir setzen flex-row, gap, wrap.
   Iter-25 setzt .art-variant-info > span (display:block) — span ist
   *Kind* der .art-more-opts (Hinweis-Text "Weitere Option:"). Das bleibt. */
body .artlist:not(.artlist-lines) .art .art-variant-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  text-align: center !important;
  padding: 2px 8px !important;
  margin: 2px 0 0 !important;
}
body .artlist:not(.artlist-lines) .art .art-variant-info > .art-color-opts {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .artlist:not(.artlist-lines) .art .art-variant-info > .art-more-opts {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
/* Hinweis-Span ("Weitere Option:") inline statt block, damit Größe-Link
   direkt daneben steht. */
body .artlist:not(.artlist-lines) .art .art-variant-info > .art-more-opts > span,
body .artlist:not(.artlist-lines) .art .art-variant-info > .art-more-opts > .bidi-embed {
  display: inline !important;
  text-align: center !important;
}

/* P5: Swatch groesser + ohne Border. Specificity ueber `body` schlaegt
   die Iter-25-Regel (.art-color-opts .art-color-opt). User: "keinen border". */
body .art-color-opts .art-color-opt,
body .artlist .art .art-color-opt,
body .artlist .art-color-opts a.art-color-opt {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  /* Iter 25 hatte border:1.5px + box-shadow inset 0 0 0 2px #fff. Beides weg.
     Stattdessen sehr feiner Outer-Shadow fuer Tiefenwahrnehmung. Kein
     inset-Ring -> der Swatch ist eine einfarbige Pille. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}
body .art-color-opts .art-color-opt:hover,
body .artlist .art .art-color-opt:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  transform: scale(1.12) !important;
}
body .art-color-opts .art-color-opt[aria-selected="true"],
body .artlist .art .art-color-opt[aria-selected="true"] {
  box-shadow: 0 0 0 2px var(--mts-accent) !important;
}

/* P6: Single-Size-Slot UNTER Preis statt darueber. Iter-27-JS setzt
   `data-mts-iter27=1` auf den Slot und positioniert ihn nach dem
   Price-Block. Hier nur eine konsistente Margin/Padding-Definition,
   damit der Slot unter dem Preis Luft hat. */
body .artlist:not(.artlist-lines) .art .mts-card-singlesize-slot[data-mts-iter27="1"] {
  margin-top: 4px !important;
  padding: 0 16px !important;
}

/* P7: PDP Hauptbild groesser — 70/30 Spalten, min-height hochziehen.
   Schlaegt die Iter-24-Regeln (66/34, 640/720) per spaeterer Cascade. */
@media (min-width: 1101px) {
  body.product-details .pd-section .pd-data-col,
  body.product-details .pd-section > .col-12:not(.pd-info-col),
  .product-page .pd-section .pd-data-col {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    padding-right: 32px !important;
  }
  body.product-details .pd-section .pd-info-col,
  body.product-details .pd-info-col,
  .product-page .pd-info-col {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }
}
@media (min-width: 1281px) {
  body.product-details .pd-data-col .gal-box,
  .pd-data-col .gal-box {
    min-height: 800px !important;
  }
  body.product-details .pd-data-col .gal-box > .gal-cell,
  .pd-data-col .gal-box > .gal-cell {
    min-height: 800px !important;
  }
}
@media (min-width: 1600px) {
  body.product-details .pd-data-col .gal-box,
  .pd-data-col .gal-box {
    min-height: 880px !important;
  }
  body.product-details .pd-data-col .gal-box > .gal-cell,
  .pd-data-col .gal-box > .gal-cell {
    min-height: 880px !important;
  }
}

/* P9: Tab-Flicker — Smartstore aktiviert die Tabs visuell sofort. Wir
   hidemen alle nicht-active tab-panes, damit selbst wenn der Server-Default
   kurz auf einen anderen Tab springt, kein Inhalt-Flicker stattfindet
   (User: "kurzer Sprung auf Merkmale"). */
body #pd-tabs.mts-iter27-tabs-locked .tab-pane:not(.active) {
  visibility: hidden !important;
}
body #pd-tabs.mts-iter27-tabs-locked .tab-pane.active {
  visibility: visible !important;
}
/* ===== /Iter 27 — Card + PDP + Tab-Flicker ================================ */

/* =========================================================================
   Iter 28 — Listing-Card-Footer-Alignment (Bug 10)
   -------------------------------------------------------------------------
   Symptom: Add-to-Cart-Button rutscht zwischen Cards in derselben Grid-Reihe
   hoch/runter, je nachdem ob der Produkttitel 1 oder 2 Zeilen ist. Der Button
   sitzt nicht auf gleicher Hoehe.

   Diagnose der Card-Struktur (curl /e-bikes-2/, Card data-id=2712):
     .art (display:flex column, set in Iter-1 zeile 333)
       figure.art-picture-block      (4:3 aspect, fix)
       .art-brand                    (~24px, fix)
       h3.art-name > .art-name-link  (1 oder 2 Zeilen — VARIABEL)
       .art-description              (Wiederholung Title, oft 1 Zeile)
       .art-delivery-info            (oft leer, 0px)
       .art-price-block              (fix)
       button.sr-toggle              (sr-only, 0px)
       .art-drop                     (Button-Reihe — bottom-most)

   Iter-1 hat `.art { display:flex; flex-direction:column }` schon gesetzt,
   und Iter-1 hat `.art-name-link` explizit auf "kein clamp, height:auto"
   gestellt (Zeile 456-470). Also: 2-Zeilen-Titel waechst die Card-Hoehe und
   schiebt alles drunter runter. Bei Cards mit 1-Zeilen-Titel bleibt der
   Footer hoeher.

   Loesung in zwei Teilen:

   1) Title-Slot reservieren: min-height fuer 2 Zeilen, damit alle Cards
      bei gleicher Title-Hoehe starten — egal ob der Text 1 oder 2 Zeilen
      braucht. line-height ist Iter-1=1.35, font-size=1rem -> 2 Zeilen ~
      2.7em. Wir bleiben bei "kein clamp" (User-Wunsch Iter-1: 2. Zeile
      sichtbar) — der Slot ist nur eine Untergrenze, lange Titel duerfen
      weiterhin wachsen. Bei 3-Zeilen-Titeln waechst diese Card halt mehr.
      Dafuer braucht es Punkt 2.

   2) `.art-drop` als Footer ans Karten-Ende kleben: `margin-top:auto`
      pusht den Block ans flex-Ende. Smartstore-Defaultraster `.artlist`
      ist Grid mit `align-items:stretch` (Iter-1 zeile 332) — alle Cards
      einer Reihe haben dieselbe Hoehe. Damit landet der Button-Block
      exakt auf gleicher Hoehe in allen Cards der Reihe, auch wenn eine
      Card einen 3-Zeilen-Titel hat (die anderen bekommen halt mehr
      Whitespace zwischen Preis und Button — akzeptabel).

   Specificity: `.artlist .art ...` matcht aktuelles Smartstore-Markup,
   inklusive Iter-1/26-Selektoren. Recently-Viewed-Carousel
   (`.artlist-carousel .slick-slide .art`) bleibt von dieser Regel
   unberuehrt, weil dort Cards einzeln in Slides leben — kein Reihen-
   Vergleich noetig. List-View (`.artlist.artlist-lines`) wird durch
   `:not(.artlist-lines)` explizit ausgenommen, dort gilt der eigene
   Iter-9-Lines-Block.
   =========================================================================*/
.artlist:not(.artlist-lines) .art .art-name {
  /* Slot fuer mind. 2 Zeilen reservieren. Iter-1 line-height=1.35,
     font-size=1rem -> 2 * 1.35em = 2.7em. Plus Iter-1-padding 6px+4px = 10px. */
  min-height: calc(2 * 1.35em + 10px) !important;
}
.artlist:not(.artlist-lines) .art .art-name-link,
.artlist:not(.artlist-lines) .art .art-name a {
  /* Selbe Untergrenze auch direkt am Link, falls .art-name-Container weg ist. */
  min-height: calc(2 * 1.35em) !important;
}
.artlist:not(.artlist-lines) .art .art-drop {
  /* Footer ans Karten-Ende kleben. Iter-1 hatte `position:static` schon
     gesetzt und z-index:1 — wir aendern nur die Vertikal-Position. */
  margin-top: auto !important;
}
/* Sicherheits-Override: falls Smartstore in einer Variante die Card
   nicht als flex-column rendert, erzwingen wir es nochmal explizit.
   (Iter-1 setzt es schon fuer .artlist-grid .art / .artlist .art —
   diese Regel ist Idempotenz-Anker.) */
.artlist:not(.artlist-lines) .art {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
/* ===== /Iter 28 — Listing-Card-Footer-Alignment ============================ */

/* ===== Iter 29 + 30 — rolled back 2026-05-04: both attempts broke PDP image (Iter 29 zentrierte ohne stretch -> Bild klein, Iter 30 fix unzureichend). Zurueck auf Iter-28-Endzustand. ===== */

/* === CART PAGE STYLES (managed by cart-agent) ============================ */
/* Scope: nur /cart-Seite. Keine Selektoren beruehren PDP/Listing/Header.
   Ziele:
   - Produkt-Item (.cart-row) weisser Hintergrund, keine Border
   - Bestellsummen-Tabelle (.cart-summary) weisser Hintergrund, kein soft-grey
   - Cube-Brand-Logo: default-image.png ausblenden (Bidex-JS ersetzt es ggf.)
   - Doppelter Titel: .cart-item-desc verstecken (Workaround, kein DOM-Edit)
*/
body.shopping-cart-page .cart,
body.shopping-cart-page .cart-body,
body.shopping-cart-page .cart-row,
.shopping-cart .cart,
.shopping-cart .cart-body,
.shopping-cart .cart-row,
form .cart,
form .cart-body,
form .cart-row,
.cart-content .cart,
.cart-content .cart-body,
.cart-content .cart-row {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Cart-Row: keine Trennlinie nach unten, kein Border, weiss */
.cart-body .cart-row,
.cart .cart-row,
#cart-items .cart-row {
  border: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  background: #ffffff !important;
  padding: 20px !important;
  border-radius: var(--mts-radius-lg, 14px) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.cart-body .cart-row:last-child,
.cart .cart-row:last-child {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* Order-Summary-Box (rechte Seite): weisser Hintergrund, kein soft-grey */
.cart-content,
.order-summary-content,
.order-summary-content.cart-content,
.cart-collaterals,
.cart-collaterals .cart-summary,
.cart-summary {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Cart-Summary-Tabelle: weisser Hintergrund, klare Trennlinien */
table.cart-summary,
table.cart-summary > tbody,
table.cart-summary > tbody > tr,
table.cart-summary > tbody > tr > td {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
table.cart-summary > tbody > tr {
  border-bottom: 1px solid var(--mts-line, #e5e5ea) !important;
}
table.cart-summary > tbody > tr.cart-summary-total {
  border-top: 1px solid var(--mts-text, #1d1d1f) !important;
  border-bottom: 0 !important;
}
table.cart-summary > tbody > tr > td {
  padding: 12px 0 !important;
}

/* Cart-Item-Brand: default-image.png (kein Logo hinterlegt) ausblenden.
   Falls Bidex-JS das img mit Bidex-Logo ersetzt, bleibt es sichtbar. */
.cart-item-brand img.cart-item-brand-image[src*="default-image"] {
  display: none !important;
}
.cart-item-brand img.cart-item-brand-image:not([src*="default-image"]) {
  max-height: 28px !important;
  width: auto !important;
  max-width: 100px !important;
  object-fit: contain !important;
}
.cart-item-brand a:has(img[src*="default-image"]) {
  display: none !important;
}

/* Doppelter Titel-Workaround: .cart-item-desc enthaelt den Titel ein zweites
   Mal als sub-heading (Smartstore Default-Behavior). Wird nur visuell
   versteckt — DOM bleibt redundant, Screenreader liest beides. Echter Fix
   nur via Razor-Override moeglich (smartstore-frontend nicht erlaubt). */
.cart-item-data .cart-item-desc {
  display: none !important;
}

/* Cart-Item-Title: leicht prominenter, da Sub-Heading weg */
.cart-item-data .cart-item-title {
  margin-bottom: 4px !important;
}
.cart-item-data .cart-item-title .cart-item-link {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--mts-text, #1d1d1f) !important;
  text-decoration: none !important;
}

/* Cart-Layout: linke und rechte Spalte konsistent abrunden, weisser BG.
   Wrapper-Container .cart-container hat in Smartstore-Default oft soft-grey. */
.shopping-cart-page .page-body,
.shopping-cart-page main,
.shopping-cart-page .cart-container {
  background: transparent !important;
}

/* Mobile: Item-Row vertikal stapeln, weiss bleibt weiss */
@media (max-width: 768px) {
  .cart-body .cart-row,
  .cart .cart-row {
    padding: 16px !important;
  }
}

/* === CART V2 ADDITIONS (managed by cart-agent) ============================
   User-Bericht: Restlicher grauer Hintergrund bei "Rabattcode", "Gutschein",
   "Zahlungsinformations"-Section, generelle Toolbar/Footer-Bereiche.
   Root-Cause: Smartstore Flex-Theme hat
     --cart-footer-bg: #f7f7f9
     --cart-child-row-bg: #fafafb
   und .cart-footer hat zusaetzlich border:1px solid var(--cart-border-color)
   sowie padding:1.25rem (umrandet die ganze rechte Spalte mit grauer Box).
   Loesung: globale CSS-Var auf weiss + selektiver Border-Reset.
   Scope strikt nur shopping-cart-page + order-summary-page (Cart + Mini-Cart-
   Variante). Kein Impact auf PDP/Listing/Header/Footer.
   ========================================================================== */
:root {
  --cart-footer-bg: #ffffff !important;
  --cart-child-row-bg: #ffffff !important;
}

/* Cart-Footer (rechte Spalte mit Coupon/Gift/Reward/Estimate + Totals) */
body.shopping-cart-page .cart-footer,
body.order-summary-page .cart-footer,
.shopping-cart-page #cart-summary-container,
.order-summary-page #cart-summary-container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--mts-radius-lg, 14px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 20px !important;
}

/* Trennlinie zwischen Footer-Groups: weicher grauer Strich statt 0.08-Black */
body.shopping-cart-page .cart-footer-group + .cart-footer-group:before,
body.order-summary-page .cart-footer-group + .cart-footer-group:before {
  background-color: var(--mts-line, #e5e5ea) !important;
}

/* Cart-Action-Boxen (Rabattcode, Gutschein, Bonuspunkte, Versandschaetzung) */
body.shopping-cart-page .cart-action,
body.shopping-cart-page .cart-action-coupon,
body.shopping-cart-page .cart-action-giftcard,
body.shopping-cart-page .cart-action-rewardpoints,
body.shopping-cart-page .cart-action-shipping,
body.shopping-cart-page .cart-action-body,
body.order-summary-page .cart-action,
body.order-summary-page .cart-action-coupon,
body.order-summary-page .cart-action-giftcard,
body.order-summary-page .cart-action-rewardpoints,
body.order-summary-page .cart-action-shipping,
body.order-summary-page .cart-action-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Reward-Points alert-info Block (Standardmaessig hellblau) auf weiss */
body.shopping-cart-page .cart-action-rewardpoints .alert.alert-info,
body.shopping-cart-page .cart-action-rewardpoints .reward-points,
body.order-summary-page .cart-action-rewardpoints .alert.alert-info,
body.order-summary-page .cart-action-rewardpoints .reward-points {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--mts-line, #e5e5ea) !important;
  color: var(--mts-text, #1d1d1f) !important;
}

/* Estimate-Shipping alert-info Default-Hint auf weiss */
body.shopping-cart-page .cart-action-shipping .alert.alert-info,
body.order-summary-page .cart-action-shipping .alert.alert-info {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--mts-line, #e5e5ea) !important;
  color: var(--mts-text-muted, #6e6e73) !important;
}

/* Checkout-Attributes-Wrapper (Bestellanmerkungen / Versandzeit-Auswahl) */
body.shopping-cart-page .cart-checkout-attributes,
body.order-summary-page .cart-checkout-attributes {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mts-line, #e5e5ea) !important;
}

/* Selected-Checkout-Attributes Container (oberhalb Checkout-Buttons) */
body.shopping-cart-page .selected-checkout-attributes,
body.order-summary-page .selected-checkout-attributes {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Cart-Footer-Actions (Toolbar mit Continue-Shopping / Update / Checkout) */
body.shopping-cart-page .cart-footer-actions,
body.shopping-cart-page .cart-buttons,
body.shopping-cart-page .checkout-buttons,
body.order-summary-page .cart-footer-actions,
body.order-summary-page .cart-buttons,
body.order-summary-page .checkout-buttons {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Page-Body / Layout-Wrapper, falls Smartstore-Master-Layout grauen BG vererbt */
body.shopping-cart-page,
body.order-summary-page,
body.shopping-cart-page .page-body,
body.order-summary-page .page-body,
body.shopping-cart-page .order-summary-content,
body.order-summary-page .order-summary-content,
body.shopping-cart-page main,
body.order-summary-page main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Fieldsets der Aktion-Boxen (Smartstore wickelt jede Box in <fieldset>) */
body.shopping-cart-page .cart-footer fieldset,
body.order-summary-page .cart-footer fieldset {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Cart-Action-Title (Klapp-Header): leichte Sub-Heading-Optik, kein BG */
body.shopping-cart-page .cart-action-title,
body.order-summary-page .cart-action-title {
  background: transparent !important;
  font-weight: 600 !important;
  color: var(--mts-text, #1d1d1f) !important;
}
/* === END CART V2 ADDITIONS ============================================== */
/* === END CART PAGE STYLES ================================================ */

/* === CHECKOUT CONFIRM STYLES (managed by checkout-agent) ================
   Scope: nur /checkout/confirm und allgemein checkout-page Body-Class.
   Ziele:
   - Comment-Box ("Moechten Sie uns etwas mitteilen") transparent statt grau
   - Order-Summary-Box (rechts) + bottom-order-total-container transparent
   - Terms-of-Service-Consent-Box transparent
   - Cart-Item-Brand fuer Confirm gleich behandeln wie Cart (Bidex-Logo via JS)
   ========================================================================== */
body.checkout-page .order-summary-content,
body.checkout-page .checkout-data,
body.checkout-page .page.checkout-confirm-page,
body.checkout-page .page.checkout-confirm-page > .page-body {
  background: transparent !important;
  background-color: transparent !important;
}

/* Comment-Box (graue Card mit Header "Moechten Sie uns etwas mitteilen") */
body.checkout-page .comment-box.card,
body.checkout-confirm-page .comment-box.card {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.checkout-page .comment-box .card-header,
body.checkout-confirm-page .comment-box .card-header {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-weight: 600 !important;
  color: var(--mts-text, #1d1d1f) !important;
}
body.checkout-page .comment-box .card-body,
body.checkout-confirm-page .comment-box .card-body {
  background: transparent !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.checkout-page .comment-box textarea,
body.checkout-confirm-page .comment-box textarea {
  background: #ffffff !important;
  border: 1px solid var(--mts-line, #e5e5ea) !important;
  border-radius: var(--mts-radius-lg, 12px) !important;
  padding: 12px 14px !important;
  width: 100% !important;
  min-height: 96px !important;
  box-shadow: none !important;
}

/* Terms-of-Service-Consent-Box (Newsletter/Datenuebertragung-Card) */
body.checkout-page #terms-of-service-consent-box.card,
body.checkout-confirm-page #terms-of-service-consent-box.card {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.checkout-page #terms-of-service-consent-box .card-body,
body.checkout-confirm-page #terms-of-service-consent-box .card-body {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bottom-Order-Total-Container (untere Buy-Button-Box mit ToS + Total) */
body.checkout-page .bottom-order-total-container.card,
body.checkout-confirm-page .bottom-order-total-container.card,
body.checkout-page .bottom-order-total-container.card.card-body,
body.checkout-confirm-page .bottom-order-total-container.card.card-body {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 18px 0 !important;
}

/* Order-Totals (rechte Spalte CheckoutOrderTotals -> .cart-footer)
   Auf Confirm explizit weiss + dezente Card-Optik (statt Default-grey).  */
body.checkout-page .cart-footer,
body.checkout-confirm-page .cart-footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--mts-radius-lg, 14px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 22px !important;
}
body.checkout-page .cart-footer #order-totals,
body.checkout-confirm-page .cart-footer #order-totals,
body.checkout-page .cart-footer .selected-checkout-attributes,
body.checkout-confirm-page .cart-footer .selected-checkout-attributes,
body.checkout-page .cart-footer .cart-footer-actions,
body.checkout-confirm-page .cart-footer .cart-footer-actions {
  background: transparent !important;
}
body.checkout-page .cart-footer .terms-of-service,
body.checkout-confirm-page .cart-footer .terms-of-service,
body.checkout-page .bottom-order-total-container .terms-of-service,
body.checkout-confirm-page .bottom-order-total-container .terms-of-service {
  background: transparent !important;
  font-size: 13px !important;
  color: var(--mts-text-muted, #6e6e73) !important;
  margin-bottom: 12px !important;
}

/* Confirm-Page Cart-Items: gleiche Optik wie /cart (weisse Cards) */
body.checkout-confirm-page #cart-items.cart,
body.checkout-confirm-page .cart-body,
body.checkout-confirm-page .cart-row {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.checkout-confirm-page .cart-body .cart-row {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: var(--mts-radius-lg, 14px) !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
body.checkout-confirm-page .cart-body .cart-row:last-child {
  margin-bottom: 0 !important;
}

/* Brand-Logo (Bidex) ueber Produkttitel im Cart + Confirm.
   Im Default-Smartstore-Render ist .cart-item-brand entweder ein <a><img>
   (mit Manufacturer-MediaFile) ODER nur ein <span> mit dem Brand-Namen
   (Fallback wenn kein MediaFile gesetzt). Unser JS macht aus dem Span
   einen <img> mit Bidex-Logo. CSS sorgt fuer kompakte Darstellung. */
body.shopping-cart-page .cart-item-brand,
body.checkout-confirm-page .cart-item-brand,
body.order-summary-page .cart-item-brand {
  margin-bottom: 6px !important;
  min-height: 22px !important;
  line-height: 1 !important;
}
body.shopping-cart-page .cart-item-brand img.mts-brand-img,
body.checkout-confirm-page .cart-item-brand img.mts-brand-img,
body.order-summary-page .cart-item-brand img.mts-brand-img {
  max-height: 28px !important;
  max-width: 110px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
}
/* Brand-Text-Fallback (kein Bidex-Treffer): dezenter Caption-Look */
body.shopping-cart-page .cart-item-brand > span:not(.mts-brand-img),
body.checkout-confirm-page .cart-item-brand > span:not(.mts-brand-img),
body.order-summary-page .cart-item-brand > span:not(.mts-brand-img) {
  font-size: 12px !important;
  color: var(--mts-text-muted, #6e6e73) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
}
/* === END CHECKOUT CONFIRM STYLES ======================================== */

/* =========================================================================
   TASK-126 — Wunschlisten-Herz auf Listing-Card (.artlist .art)
   -------------------------------------------------------------------------
   Architektur-Entscheidung (dokumentiert, AC#2): NATIVE Smartstore-Wishlist,
   account-persistent, i18n-faehig. KEIN localStorage-Nachbau.
   PDP-Herz, Header-Counter (data-bind-to="WishlistItemsCount") und die
   /wishlist-Uebersichtsseite sind bereits nativ vorhanden + MTS-gestylt.
   Echter Gap = Herz-Toggle AUF der Listing-Card.

   Mechanik: Der Card-Walker (initCardHearts) haengt pro Card ein Herz-Overlay
   oben rechts auf .art-picture-block. Der Klick triggert programmatisch den
   bereits nativ gerenderten Wishlist-Button der Card
   (button.ajax-cart-link.add-to-wishlist-button[data-href=".../?shoppingCartTypeId=2"]).
   Damit laeuft Smartstores eigener AJAX-Flow inkl. Header-Counter-Update —
   wir bauen NICHTS am Persistenz-Layer nach. Der native (sekundaere) Button
   in .art-drop wird optisch ausgeblendet, das Herz ersetzt ihn prominent.
   ========================================================================= */
.artlist .art .art-picture-block { position: relative !important; }
.mts-card-heart {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 6 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px) !important;
  backdrop-filter: saturate(180%) blur(10px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
  color: #6e6e73 !important;
  cursor: pointer !important;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, background 0.18s ease !important;
  line-height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Herz auf Touch-Geraeten immer sichtbar (kein Hover), auf Desktop bei
   Card-Hover oder wenn aktiv (in Wunschliste). */
.artlist .art:hover .mts-card-heart,
.mts-card-heart:focus-visible,
.mts-card-heart.is-active,
.mts-card-heart.is-busy { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .mts-card-heart { opacity: 1; transform: none; }
}
.mts-card-heart svg {
  width: 20px !important;
  height: 20px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
}
.mts-card-heart:hover { color: #e11d48 !important; background: #fff !important; }
.mts-card-heart.is-active { color: #e11d48 !important; }
.mts-card-heart.is-active svg { fill: #e11d48 !important; stroke: #e11d48 !important; }
.mts-card-heart.is-active:not(.is-busy) { animation: mts-heart-pop 0.32s ease; }
.mts-card-heart.is-busy { pointer-events: none; opacity: 1 !important; }
.mts-card-heart.is-busy svg { animation: mts-heart-spin 0.7s linear infinite; }
@keyframes mts-heart-pop { 0% { transform: scale(1); } 50% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes mts-heart-spin { to { transform: rotate(360deg); } }
/* Den nativen, sekundaeren Wishlist-Button in der Card-Button-Reihe
   ausblenden — das prominente Herz oben rechts ersetzt ihn. Wir lassen das
   Markup im DOM (es ist unsere Trigger-Quelle), verstecken es nur visuell. */
.artlist .art .art-drop .add-to-wishlist-button {
  display: none !important;
}

/* =========================================================================
   TASK-124 — Bike-Vergleich (Compare-Button + Bar + Drawer, max 3 Bikes)
   -------------------------------------------------------------------------
   Persistenz-Entscheidung (dokumentiert, AC#3): LOKALER localStorage-Layer
   (KEY 'mts-compare-v2', max 3), 1:1 analog zum Shopify-Lead-Theme
   (BikeShopDesignDede/assets/bike-compare.js). KEIN MtsStorage — das existiert
   in der Smartstore-Storefront NICHT; der Helper ist inline nachgebaut.
   Begruendung: Vergleich ist eine fluechtige, anonyme UI-Auswahl (kein
   account-relevanter Zustand wie Wunschliste/Warenkorb); localStorage haelt
   die Auswahl pro Browser ueber Navigationen ohne Server-Roundtrip.

   Spec-Werte gibt es NICHT als data-Attribute auf den Cards — sie werden
   lazy per PDP-HTML-Fetch geholt (Wiederverwendung von pickPdpDataFromHtml /
   sessionStorage-Cache) und ueber eine 16-Achsen-Label-Whitelist auf die
   nativen SpecificationAttributes (.pd-specs-table) gemappt.
   ========================================================================= */
/* Compare-Restore (a3): Overlay-Parent muss den absoluten Button clippen. */
.artlist .art .art-picture-block {
  position: relative !important;
  overflow: hidden !important;
}
.mts-compare-btn {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 6 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px) !important;
  backdrop-filter: saturate(180%) blur(10px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
  color: #6e6e73 !important;
  cursor: pointer !important;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, background 0.18s ease !important;
  line-height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.artlist .art:hover .mts-compare-btn,
.mts-compare-btn:focus-visible,
.mts-compare-btn.is-active { opacity: 1; transform: translateY(0); }
@media (hover: none) { .mts-compare-btn { opacity: 1; transform: none; } }
.mts-compare-btn svg { width: 19px !important; height: 19px !important; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
.mts-compare-btn:hover { color: var(--mts-accent) !important; background: #fff !important; }
.mts-compare-btn.is-active { color: var(--mts-accent) !important; background: #fff !important; }
.mts-compare-btn.is-active svg { stroke: var(--mts-accent) !important; }
/* PDP-Variante des Buttons: inline neben den Brand/Title, nicht absolut. */
.mts-compare-btn--pdp {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: var(--mts-radius, 18px) !important;
  background: var(--mts-bg-soft, #fafafa) !important;
  box-shadow: none !important;
  color: var(--mts-text, #1d1d1f) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.mts-compare-btn--pdp.is-active { background: var(--mts-accent, #ff6a00) !important; color: #fff !important; }
.mts-compare-btn--pdp.is-active svg { stroke: #fff !important; }
.mts-compare-btn--pdp svg { width: 18px !important; height: 18px !important; }

/* Floating Compare-Bar unten */
.mts-compare-bar {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 1055;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.10);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mts-compare-bar.is-visible { transform: translateY(0); }
.mts-compare-bar__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mts-compare-bar__items { display: flex; gap: 10px; flex: 1; min-width: 0; min-height: 56px; align-items: center; }
.mts-compare-bar__item { display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.mts-compare-bar__item img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; flex-shrink: 0; background: #fff; }
.mts-compare-bar__item-title { line-height: 1.3; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mts-compare-bar__item-remove { background: none; border: 0; cursor: pointer; padding: 2px; color: rgba(0,0,0,0.4); font-size: 18px; line-height: 1; }
.mts-compare-bar__item-remove:hover { color: var(--mts-accent, #ff6a00); }
.mts-compare-bar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mts-compare-bar__count { font-size: 12px; color: var(--mts-text-muted, #6e6e73); white-space: nowrap; }
.mts-compare-bar__btn {
  border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 9px 18px; line-height: 1; -webkit-appearance: none; appearance: none;
}
.mts-compare-bar__btn--clear { background: var(--mts-bg-soft, #fafafa); color: var(--mts-text, #1d1d1f); }
.mts-compare-bar__btn--clear:hover { background: #f0f0f0; }
.mts-compare-bar__btn--open { background: var(--mts-accent, #ff6a00); color: #fff; }
.mts-compare-bar__btn--open:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 749px) {
  .mts-compare-bar__inner { flex-direction: column; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mts-compare-bar__items { width: 100%; justify-content: center; min-height: 0; }
  .mts-compare-bar__item-title { display: none; }
  .mts-compare-bar__item img { width: 44px; height: 44px; }
  .mts-compare-bar__actions { width: 100%; justify-content: center; flex-wrap: wrap; }
  .mts-compare-bar__count { width: 100%; text-align: center; }
}

/* Compare-Drawer (Overlay + Spec-Tabelle) */
.mts-compare-drawer {
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease;
}
.mts-compare-drawer.is-open { opacity: 1; visibility: visible; }
.mts-compare-drawer__panel {
  background: #fff; width: 100%; max-width: 1100px;
  max-height: 92vh; border-radius: var(--mts-radius-lg, 24px) var(--mts-radius-lg, 24px) 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(24px); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mts-compare-drawer.is-open .mts-compare-drawer__panel { transform: translateY(0); }
.mts-compare-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.mts-compare-drawer__title { margin: 0; font-size: 20px; font-weight: 700; color: var(--mts-text, #1d1d1f); }
.mts-compare-drawer__close {
  background: none; border: 0; cursor: pointer; padding: 8px; color: var(--mts-text, #1d1d1f);
  border-radius: 999px; line-height: 0; transition: background 0.2s;
}
.mts-compare-drawer__close:hover { background: rgba(0, 0, 0, 0.06); }
.mts-compare-drawer__body { padding: 20px 24px calc(28px + env(safe-area-inset-bottom, 0px)); overflow: auto; -webkit-overflow-scrolling: touch; }
.mts-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.mts-compare-table th, .mts-compare-table td { vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; }
.mts-compare-table .mts-compare-row--label th {
  text-align: center; padding: 16px 12px 5px; font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--mts-text-muted, #6e6e73);
  border-top: 1px solid rgba(0, 0, 0, 0.07); white-space: normal;
}
.mts-compare-table .mts-compare-row--value td { padding: 0 12px 12px; text-align: center; color: var(--mts-text, #1d1d1f); }
.mts-compare-table .mts-compare-row--product td { padding: 0 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.mts-compare-table .mts-compare-row--product + .mts-compare-row--label th { border-top: none; padding-top: 16px; }
.mts-compare-table .mts-compare-row--remove td { padding: 14px 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); text-align: center; }
.mts-compare-prod-img { width: 100%; height: 180px; object-fit: contain; border-radius: 10px; display: block; background: #fff; }
.mts-compare-prod-title { display: block; margin-top: 8px; font-weight: 600; font-size: 13px; color: var(--mts-text, #1d1d1f); text-decoration: none; }
.mts-compare-prod-title:hover { text-decoration: underline; }
.mts-compare-price { font-size: 16px; font-weight: 700; color: var(--mts-text, #1d1d1f); }
.mts-compare-brand-logo { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; display: inline-block; }
.mts-compare-remove-btn {
  background: none; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--mts-text-muted, #6e6e73); transition: border-color 0.2s;
}
.mts-compare-remove-btn:hover { border-color: var(--mts-accent, #ff6a00); color: var(--mts-accent, #ff6a00); }
.mts-compare-loading { text-align: center; padding: 28px 12px; color: var(--mts-text-muted, #6e6e73); font-size: 14px; }
body.mts-compare-drawer-open .mts-compare-bar { display: none !important; }
@media (max-width: 749px) {
  .mts-compare-drawer__panel { max-height: 100vh; border-radius: 0; }
  .mts-compare-table { font-size: 12.5px; }
  .mts-compare-prod-img { height: 130px; }
  .mts-compare-table .mts-compare-row--label th { padding: 12px 6px 4px; font-size: 12px; }
  .mts-compare-table .mts-compare-row--value td { padding: 0 6px 9px; }
}