/* ============================================================
   Solutioo_CustomDesign – Product Detail Page V2
   Scoped under body.customdesign-pdp-v2

   Uses CSS variables from design-tokens.phtml (admin-configurable):
   --bs-blue:       Standard-Blau   (default: #00446a)
   --bs-blue-gray:  Grau-Blau       (default: #4a6886)
   --bs-blue-light: Hell-Blau       (default: #f0f6fa)
   ============================================================ */

/* ----- ZONE 1: Hero – Two-column layout ----- */

.customdesign-pdp-v2 #product-head {
    display: grid !important;
    /* Galerie/Info fest 60/40 (nicht mehr per Shop-Konfiguration) */
    grid-template-columns: 60% 1fr !important;
    grid-template-rows: min-content auto !important;
    grid-template-areas: none !important;
    gap: 0 48px !important;
    align-items: start;
    margin-bottom: 0;
}

.customdesign-pdp-v2 #product-head .product.media {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    position: sticky;
    top: 20px;
    align-self: start;
    min-width: 0;
    max-width: 100%;
}

.customdesign-pdp-v2 #product-head .product.media .gallery-placeholder {
    border-radius: 0;
    /* sichtbar: Pfeile sitzen per left/right: negativ bündig NEBEN der Bühne (siehe .fotorama__arr) */
    overflow: visible;
    box-shadow: none;
    max-width: 100%;
}

/* overflow: visible damit Pfeile links/rechts 10px außerhalb der Stage sichtbar sind (kein Clipping) */
.customdesign-pdp-v2 #product-head .product.media {
    overflow: visible !important;
}
.customdesign-pdp-v2 #product-head .product.media .fotorama__wrap {
    max-width: 100% !important;
    overflow: visible !important;
}

.customdesign-pdp-v2 #product-head .product.media .fotorama__stage {
    border-radius: 0;
    max-width: calc(100% - 93px) !important;
    /* Kein hidden: Pfeile mit right/left negativ relativ zur Bühne – sonst rechter Pfeil abgeschnitten */
    overflow: visible !important;
}

/* Gallery thumbnails – single blue border, no double frame, scrollable vertical nav */
.customdesign-pdp-v2 .fotorama__thumb-border {
    display: none !important;
}

.customdesign-pdp-v2 .fotorama__nav--thumbs .fotorama__thumb {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid var(--bs-blue-light, #f0f6fa) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.customdesign-pdp-v2 .fotorama__nav--thumbs .fotorama__thumb img {
    object-fit: contain;
    border-radius: 6px;
    width: 100%;
    height: 100%;
}

.customdesign-pdp-v2 .fotorama__nav--thumbs .fotorama__active .fotorama__thumb {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: none !important;
}

.customdesign-pdp-v2 .fotorama__nav-wrap {
    margin-top: 0;
}

.customdesign-pdp-v2 .fotorama__nav-wrap--vertical .fotorama__nav--thumbs {
    overflow: hidden !important;
    padding: 0 4px 0 0 !important;
    position: relative !important;
    /* Bis sticky-gallery-init.phtml adjustHeight() zum ersten Mal erfolgreich die
     * geclippte Hoehe berechnet hat, bleibt die Nav unsichtbar - verhindert den
     * kurzen (~400ms) Erst-Flash aller Thumbnails in Fotoramas eigener, ungeclippter
     * Standardhoehe direkt nach dem Rendern. JS setzt visibility wieder auf 'visible'
     * (inline, ohne !important hier, damit das Inline-Style greift); Fallback-Timer
     * in JS deckt den Fall ab, dass die Berechnung nie erfolgreich abschliesst. */
    visibility: hidden;
}

.customdesign-pdp-v2 .fotorama__nav-wrap--vertical {
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-right: 4px !important;
}

.customdesign-pdp-v2 .fotorama__nav-wrap--vertical .fotorama__nav__shaft {
    transition: transform 0.35s ease !important;
}

/* --- Fotorama gallery arrows: blue chevrons, no background --- */

/* Force arrows always visible — Fotorama hides them on touch via translate3d off-screen.
   Must beat: .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev:not(:focus) */
.customdesign-pdp-v2 .fotorama__arr,
.customdesign-pdp-v2 .fotorama__arr--prev,
.customdesign-pdp-v2 .fotorama__arr--next,
.customdesign-pdp-v2 .fotorama__wrap--toggle-arrows .fotorama__arr,
.customdesign-pdp-v2 .fotorama__wrap--no-controls .fotorama__arr,
.customdesign-pdp-v2 .fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr,
.customdesign-pdp-v2 .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev,
.customdesign-pdp-v2 .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--next,
.customdesign-pdp-v2 .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev:not(:focus),
.customdesign-pdp-v2 .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--next:not(:focus) {
    opacity: 1 !important;
    display: block !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
}
/* Old tab layout: hide the fullscreen "+" icon, but keep it in fullscreen mode for close */
.customdesign-pdp-v2:not(.customdesign-desc-sections) .fotorama:not(.fotorama--fullscreen) .fotorama__fullscreen-icon {
    display: none !important;
}
.customdesign-pdp-v2.customdesign-desc-sections .fotorama__fullscreen-icon,
.customdesign-pdp-v2.customdesign-desc-sections .fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.customdesign-pdp-v2.customdesign-desc-sections .fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.customdesign-pdp-v2.customdesign-desc-sections .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.customdesign-pdp-v2.customdesign-desc-sections .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon:not(:focus) {
    opacity: 1 !important;
    display: inline-block !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
}

/* Main image: Pfeile 10px außerhalb der sichtbaren Bühne (nicht übers Foto) — 44px Klickfläche */
.customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr {
    background: none !important;
    width: 44px !important;
    opacity: 1 !important;
    --cd-fotorama-arrow-w: 44px;
    --cd-fotorama-arrow-gap: 10px;
}
/* Pfeile sitzen INNERHALB der Bühne (.fotorama__stage), aber im weissen Rand neben
   dem Foto (Foto ist via object-fit:contain mittig). Negative Werte = ausserhalb der
   Bühne -> links durch die vertikale Thumb-Spalte verdeckt, rechts ausserhalb der
   Seite. Positive Werte mit kleiner gap halten beide Pfeile sicher sichtbar. */
.customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr--prev {
    left: var(--cd-fotorama-arrow-gap) !important;
    right: auto !important;
    z-index: 5;
}
.customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr--next {
    right: var(--cd-fotorama-arrow-gap) !important;
    left: auto !important;
    z-index: 5;
}
.customdesign-pdp-v2 .fotorama__arr .fotorama__arr__arr {
    background: none !important;
    background-image: none !important;
    width: 22px !important;
    height: 22px !important;
    border: solid var(--bs-blue, #00446a) !important;
    border-width: 0 3px 3px 0 !important;
    display: inline-block !important;
    padding: 0 !important;
}
.customdesign-pdp-v2 .fotorama__arr--prev .fotorama__arr__arr {
    transform: translate(-50%, -50%) rotate(135deg) !important;
}
.customdesign-pdp-v2 .fotorama__arr--next .fotorama__arr__arr {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.customdesign-pdp-v2 .fotorama__arr:hover .fotorama__arr__arr {
    border-color: var(--bs-blue-gray, #4a6886) !important;
}
/* Am Anfang/Ende der Galerie: Pfeil sichtbar, hellblau, nicht klickbar (wie .bs-thumb-arr.is-disabled) */
.customdesign-pdp-v2 .fotorama__arr.fotorama__arr--disabled,
.customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr.fotorama__arr--disabled {
    cursor: default !important;
    pointer-events: none !important;
    opacity: 1 !important;
}
.customdesign-pdp-v2 .fotorama__arr.fotorama__arr--disabled .fotorama__arr__arr,
.customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr.fotorama__arr--disabled .fotorama__arr__arr {
    border-color: #b8d4e8 !important;
}
.customdesign-pdp-v2 .fotorama__arr.fotorama__arr--disabled:hover .fotorama__arr__arr,
.customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr.fotorama__arr--disabled:hover .fotorama__arr__arr {
    border-color: #b8d4e8 !important;
}

/* Fullscreen: Pfeile am Viewport ausrichten — vermeidet Clip durch .fotorama__wrap / Stage und
   zu niedrigen z-index. Wichtig: OHNE `.customdesign-pdp-v2`-Vorfahren — Fotorama hängt die
   Vollbild-Instanz per JS an `body` (nicht unter `#html-body`), dort sitzt aber `customdesign-pdp-v2`.
   Mit `.customdesign-pdp-v2 .fotorama--fullscreen` würden diese Regeln nie matchen; dann gewinnt
   `gallery.less` (u. a. translate3d für `.fotorama__arr--next` / `.fotorama__fullscreen-icon`). */
.fotorama--fullscreen .fotorama__arr {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    width: 60px !important;
    height: 100px !important;
    margin-top: -50px !important;
    background: none !important;
    z-index: 10056 !important;
    pointer-events: auto !important;
}
.fotorama--fullscreen .fotorama__arr--prev,
.fotorama--fullscreen .fotorama__wrap .fotorama__arr--prev,
.fotorama--fullscreen .fotorama__wrap:has(.fotorama__nav-wrap--vertical) .fotorama__arr--prev {
    left: max(16px, env(safe-area-inset-left)) !important;
    right: auto !important;
}
.fotorama--fullscreen .fotorama__arr--next,
.fotorama--fullscreen .fotorama__wrap .fotorama__arr--next {
    right: max(16px, env(safe-area-inset-right)) !important;
    left: auto !important;
}
.fotorama--fullscreen .fotorama__arr .fotorama__arr__arr {
    background: none !important;
    width: 26px !important;
    height: 26px !important;
    border: solid var(--bs-blue, #00446a) !important;
    border-width: 0 3px 3px 0 !important;
    display: inline-block !important;
    padding: 0 !important;
}
.fotorama--fullscreen .fotorama__arr--prev .fotorama__arr__arr {
    transform: translate(-50%, -50%) rotate(135deg) !important;
}
.fotorama--fullscreen .fotorama__arr--next .fotorama__arr__arr {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.fotorama--fullscreen .fotorama__arr.fotorama__arr--disabled {
    cursor: default !important;
    pointer-events: none !important;
    opacity: 1 !important;
}
.fotorama--fullscreen .fotorama__arr.fotorama__arr--disabled .fotorama__arr__arr,
.fotorama--fullscreen .fotorama__arr.fotorama__arr--disabled:hover .fotorama__arr__arr {
    border-color: #b8d4e8 !important;
}

/* Fullscreen: Close (X) — fixed, oberhalb Header/Nav-Stack
 * X NUR auf ::before (Gradient). ::after bleibt frei — Fotorama nutzt :focus::after als Ring,
 * das war die Ursache für Doppel-Kontur + kaputtes X. Maus: kein Focus-Sticky via mousedown (JS). */
.fotorama--fullscreen .fotorama__fullscreen-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    top: max(20px, env(safe-area-inset-top)) !important;
    right: max(20px, env(safe-area-inset-right)) !important;
    position: fixed !important;
    left: auto !important;
    bottom: auto !important;
    background: #fff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    z-index: 10060 !important;
    transform: none !important;
    opacity: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fotorama--fullscreen .fotorama__fullscreen-icon::before {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -10px !important;
    margin-top: -10px !important;
    background: transparent !important;
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% + 1.25px), transparent calc(50% + 1.25px)),
        linear-gradient(-45deg, transparent calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% + 1.25px), transparent calc(50% + 1.25px)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.fotorama--fullscreen .fotorama__fullscreen-icon::after,
.fotorama--fullscreen .fotorama__fullscreen-icon:focus::after,
.fotorama--fullscreen .fotorama__fullscreen-icon:focus-visible::after,
.fotorama--fullscreen .fotorama__fullscreen-icon:hover::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

.fotorama--fullscreen .fotorama__fullscreen-icon:hover {
    background-color: var(--bs-blue, #00446a) !important;
    background-image: none !important;
    border-color: var(--bs-blue, #00446a) !important;
    outline: none !important;
    box-shadow: none !important;
}

.fotorama--fullscreen .fotorama__fullscreen-icon:hover::before {
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1.25px), #fff calc(50% - 1.25px), #fff calc(50% + 1.25px), transparent calc(50% + 1.25px)),
        linear-gradient(-45deg, transparent calc(50% - 1.25px), #fff calc(50% - 1.25px), #fff calc(50% + 1.25px), transparent calc(50% + 1.25px)) !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus-visible,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus:hover,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus-visible:hover {
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus:not(:focus-visible),
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus:not(:focus-visible):hover {
    border-width: 2px !important;
    background-color: #fff !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon:focus:not(:focus-visible)::before {
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% + 1.25px), transparent calc(50% + 1.25px)),
        linear-gradient(-45deg, transparent calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% - 1.25px), var(--bs-blue, #00446a) calc(50% + 1.25px), transparent calc(50% + 1.25px)) !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon.bs-fs-close-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 3px solid var(--bs-blue, #00446a) !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon.bs-fs-close-btn:focus-visible:hover {
    background-color: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__fullscreen-icon.bs-fs-close-btn:focus-visible:hover::before {
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1.25px), #fff calc(50% - 1.25px), #fff calc(50% + 1.25px), transparent calc(50% + 1.25px)),
        linear-gradient(-45deg, transparent calc(50% - 1.25px), #fff calc(50% - 1.25px), #fff calc(50% + 1.25px), transparent calc(50% + 1.25px)) !important;
}

/* Fullscreen-Galerie — Tastatur-Fokus: nur blaue Border (kein Fotorama-::after-Ring, kein shopweiter Doppel-Ring) */
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__arr:focus,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__arr:focus-visible,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus-visible {
    box-shadow: none !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__arr:focus::after,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__arr:focus-visible::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus-visible {
    outline: none !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus .fotorama__thumb::after,
html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus-visible .fotorama__thumb::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    border: none !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__arr:focus-visible {
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

html body.customdesign-pdp-v2 .fotorama--fullscreen .fotorama__nav__frame--thumb:focus-visible .fotorama__thumb {
    border: 2px solid var(--bs-blue, #00446a) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Fullscreen: force controls visible — must beat css3+no-controls+slide+toggle-arrows */
.fotorama--fullscreen .fotorama__fullscreen-icon,
.fotorama--fullscreen .fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.fotorama--fullscreen .fotorama__wrap--no-controls .fotorama__fullscreen-icon,
.fotorama--fullscreen .fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.fotorama--fullscreen .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.fotorama--fullscreen .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon:not(:focus) {
    opacity: 1 !important;
    display: flex !important;
    position: fixed !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
}

/* Nach Lightbox-Schließen: kurz Klicks blocken (Ghost-Click auf Aktionsbanner unter dem X) */
#bs-fs-ghost-shield {
    position: fixed;
    inset: 0;
    z-index: 10040;
    pointer-events: auto;
    opacity: 0;
    background: transparent;
    touch-action: none;
}
body.bs-fs-suppress-ghost-click .bs-top-banner,
body.bs-fs-suppress-ghost-click a.bs-top-banner {
    pointer-events: none !important;
}

/* Neutralisiert Theme gallery.css: `.fotorama-gpu,.fotorama--fullscreen,{transform:translateZ(0)}`.
   Sonst ist `.fotorama--fullscreen` eine Transform-Containing-Block — `position:fixed` auf Pfeilen und
   Schließen-Icon bezieht sich darauf statt aufs Viewport; rechts/oben wirken Controls weg bzw. geclippt. */
.fotorama.fotorama--fullscreen {
    overflow: visible !important;
    z-index: 10050 !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    will-change: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: -webkit-fill-available !important;
}
.fotorama--fullscreen {
    background: #fff !important;
}
/* Wrap = direkter Container. Fotorama-JS setzt bei `nav: vertical` inline
   `left: <thumbWidth>px` und `width: calc(100% - <thumbWidth>px)` auf Wrap/Stage,
   damit die Thumbnail-Spalte links Platz hat. Im Fullscreen sitzen die Thumbs
   bei uns am unteren Rand (siehe Block unten) — der Inline-Left muss neutralisiert,
   die Breite auf das volle Viewport gezogen werden. */
.fotorama--fullscreen .fotorama__wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
}
/* Stage = Sichtfenster für `__shaft` (Filmstreifen, per translateX bewegt).
   `overflow: hidden` ist Fotorama-Default und MUSS so bleiben — sonst gucken die
   Nachbar-Frames links/rechts heraus (auf Tablet besonders sichtbar, weil das
   Viewport schmaler ist als der Frame-Abstand im Shaft). Pfeile + Close-Icon sind
   `position: fixed` und beziehen sich aufs Viewport, weil `.fotorama.fotorama--fullscreen`
   oben mit `transform: none` neutralisiert wurde — kein Clipping durch die Stage.
   `left/margin-left: 0` überstimmt das Inline-`left` aus Fotorama-JS (siehe Wrap). */
.fotorama--fullscreen .fotorama__stage {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    margin-left: 0 !important;
    height: calc(100vh - 110px - env(safe-area-inset-bottom, 0px) - var(--cd-fs-bottom-gap, 0px)) !important;
    height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px) - var(--cd-fs-bottom-gap, 0px)) !important;
    background: #fff !important;
    overflow: hidden !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    filter: none !important;
}
.fotorama--fullscreen .fotorama__stage__shaft {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    margin-left: 0 !important;
}
.fotorama--fullscreen .fotorama__stage__frame .fotorama__img {
    max-width: 90vw !important;
    max-height: calc(100vh - 130px - env(safe-area-inset-bottom, 0px) - var(--cd-fs-bottom-gap, 0px)) !important;
    max-height: calc(100dvh - 130px - env(safe-area-inset-bottom, 0px) - var(--cd-fs-bottom-gap, 0px)) !important;
    object-fit: contain !important;
}
.fotorama--fullscreen .fotorama__nav-wrap,
.fotorama--fullscreen .fotorama__nav-wrap--vertical,
.fotorama--fullscreen .fotorama__nav-wrap--vertical.fotorama__nav-wrap {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 50 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 10px max(48px, calc(12px + env(safe-area-inset-right, 0px))) calc(16px + env(safe-area-inset-bottom, 0px) + var(--cd-fs-bottom-gap, 0px)) max(48px, calc(12px + env(safe-area-inset-left, 0px))) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.fotorama--fullscreen .fotorama__nav__shaft,
.fotorama--fullscreen .fotorama__nav-wrap--vertical .fotorama__nav__shaft {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    height: auto !important;
    min-height: 72px !important;
    transform: none !important;
    position: static !important;
    overflow: visible !important;
}
.fotorama--fullscreen .fotorama__nav,
.fotorama--fullscreen .fotorama__nav--thumbs {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 72px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    justify-content: center !important;
    scrollbar-width: none !important;
    padding: 6px 4px 8px !important;
    box-sizing: border-box !important;
}
.fotorama--fullscreen .fotorama__nav::-webkit-scrollbar,
.fotorama--fullscreen .fotorama__nav--thumbs::-webkit-scrollbar {
    display: none !important;
}
.fotorama--fullscreen .fotorama__nav__frame {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    float: none !important;
    display: inline-block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.fotorama--fullscreen .fotorama__thumb-border {
    display: none !important;
}
.fotorama--fullscreen .fotorama__thumb__arr {
    display: none !important;
}

/* Fullscreen: custom horizontal thumb arrows */
.fotorama--fullscreen .bs-fs-thumb-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 68, 106, 0.12);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.fotorama--fullscreen .bs-fs-thumb-arr:hover {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 68, 106, 0.18);
}
.fotorama--fullscreen .bs-fs-thumb-arr--left {
    left: 4px;
}
.fotorama--fullscreen .bs-fs-thumb-arr--right {
    right: 4px;
}
.fotorama--fullscreen .bs-fs-thumb-arr__icon {
    width: 10px;
    height: 10px;
    border: solid var(--bs-blue, #00446a);
    border-width: 0 0 2.5px 2.5px;
    display: inline-block;
}
.fotorama--fullscreen .bs-fs-thumb-arr--left .bs-fs-thumb-arr__icon {
    transform: rotate(45deg);
    margin-left: 3px;
}
.fotorama--fullscreen .bs-fs-thumb-arr--right .bs-fs-thumb-arr__icon {
    transform: rotate(-135deg);
    margin-right: 3px;
}
.fotorama--fullscreen .bs-fs-thumb-arr:hover .bs-fs-thumb-arr__icon {
    border-color: var(--bs-blue-gray, #4a6886);
}
.fotorama--fullscreen .bs-fs-thumb-arr.is-disabled {
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}
.fotorama--fullscreen .bs-fs-thumb-arr.is-disabled .bs-fs-thumb-arr__icon {
    border-color: var(--bs-blue-light, #b8d4e8);
}

/* Hide vertical custom arrows in fullscreen */
.fotorama--fullscreen .bs-thumb-arr {
    display: none !important;
}

.fotorama--fullscreen .fotorama__thumb {
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
.fotorama--fullscreen .fotorama__active .fotorama__thumb {
    border-color: var(--bs-blue, #00446a) !important;
}
.fotorama--fullscreen .fotorama__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Fullscreen arrows: force visible — must beat css3+no-controls+slide+toggle-arrows (siehe Kommentar oben: kein .customdesign-pdp-v2-Vorfahren) */
.fotorama--fullscreen .fotorama__arr,
.fotorama--fullscreen .fotorama__arr--prev,
.fotorama--fullscreen .fotorama__arr--next,
.fotorama--fullscreen .fotorama__wrap--toggle-arrows .fotorama__arr,
.fotorama--fullscreen .fotorama__wrap--no-controls .fotorama__arr,
.fotorama--fullscreen .fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr,
.fotorama--fullscreen .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev,
.fotorama--fullscreen .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--next,
.fotorama--fullscreen .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev:not(:focus),
.fotorama--fullscreen .fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--next:not(:focus) {
    opacity: 1 !important;
    display: block !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
}

/* Mobil Lightbox: Thumbnail-Leiste über Browser-Chrome / Home-Indicator (Fotorama setzt sonst volle $WINDOW.height() inline) */
@media (max-width: 767px) {
    .fotorama--fullscreen .fotorama__nav,
    .fotorama--fullscreen .fotorama__nav--thumbs {
        height: auto !important;
        max-height: 88px !important;
        min-height: 0 !important;
    }
    .fotorama--fullscreen .fotorama__nav__shaft,
    .fotorama--fullscreen .fotorama__nav-wrap--vertical .fotorama__nav__shaft {
        min-height: 0 !important;
    }
}

/* Fotorama native thumb arrows — hidden, replaced by .bs-thumb-arr */
.customdesign-pdp-v2 .fotorama__thumb__arr,
.customdesign-pdp-v2 .fotorama__thumb__arr.fotorama__arr--disabled {
    display: none !important;
    /* Old rules kept below for specificity override */
    background: none !important;
    z-index: 10 !important;
    cursor: pointer !important;
    position: absolute !important;
    left: 0 !important;
    right: 4px !important;
    height: 36px !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr--left {
    top: 0 !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr--right {
    bottom: 0 !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr .fotorama__thumb--icon {
    background: none !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: solid var(--bs-blue, #00446a) !important;
    border-width: 0 3px 3px 0 !important;
    display: inline-block !important;
    font-size: 0 !important;
    transform: none !important;
    transition: border-color 0.2s ease !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr--left .fotorama__thumb--icon {
    transform: rotate(-135deg) !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr--right .fotorama__thumb--icon {
    transform: rotate(45deg) !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr:hover .fotorama__thumb--icon {
    border-color: var(--bs-blue-gray, #4a6886) !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr.bs-thumb-disabled {
    cursor: default !important;
    pointer-events: none !important;
}
.customdesign-pdp-v2 .fotorama__thumb__arr.bs-thumb-disabled .fotorama__thumb--icon {
    border-color: var(--bs-blue-light, #b8d4e8) !important;
}

/* Custom vertical thumb arrows (PDP normal view) */
.customdesign-pdp-v2 .bs-thumb-arr {
    position: absolute;
    left: 0;
    right: 4px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    background: #fff;
}
.customdesign-pdp-v2 .bs-thumb-arr--up {
    top: 0;
}
.customdesign-pdp-v2 .bs-thumb-arr--down {
    bottom: 0;
}
.customdesign-pdp-v2 .bs-thumb-arr__icon {
    width: 14px;
    height: 14px;
    border: solid var(--bs-blue, #00446a);
    border-width: 0 0 2.5px 2.5px;
    display: inline-block;
}
.customdesign-pdp-v2 .bs-thumb-arr--up .bs-thumb-arr__icon {
    transform: rotate(135deg);
    margin-top: 4px;
}
.customdesign-pdp-v2 .bs-thumb-arr--down .bs-thumb-arr__icon {
    transform: rotate(-45deg);
    margin-bottom: 4px;
}
.customdesign-pdp-v2 .bs-thumb-arr:hover .bs-thumb-arr__icon {
    border-color: var(--bs-blue-gray, #4a6886);
}
.customdesign-pdp-v2 .bs-thumb-arr.is-disabled {
    cursor: default;
    pointer-events: none;
}
.customdesign-pdp-v2 .bs-thumb-arr.is-disabled .bs-thumb-arr__icon {
    border-color: #b8d4e8;
}
.customdesign-pdp-v2 .fotorama__nav.fotorama__shadows--bottom::after,
.customdesign-pdp-v2 .fotorama__nav.fotorama__shadows--top::before,
.customdesign-pdp-v2 .fotorama__nav.fotorama__shadows--left::before,
.customdesign-pdp-v2 .fotorama__nav.fotorama__shadows--right::after {
    display: none !important;
}

/* Surface color swatches – below gallery image */
.customdesign-pdp-v2 #surface-color {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    color: var(--bs-blue-gray, #4a6886);
    line-height: 33px !important;
    cursor: pointer;
}

.customdesign-pdp-v2 #surface-color::before {
    content: 'Weitere Farben und Fronten verfügbar';
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-blue-gray, #4a6886);
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    order: -1;
}

.customdesign-pdp-v2 #surface-color::after {
    display: none !important;
}

/* .obfl-frame = sichtbarer, beschnittener Kreis (Groesse/Rand/Hover wie zuvor auf .obfl).
   .obfl selbst sitzt jetzt INNERHALB des Frames und wird ueberskaliert + MITTIG verankert
   (siehe .obfl-frame img.obfl unten) — Quellbilder tragen haeufig eine kleine
   Dekor-/Artikelnummer unten rechts (z.B. "185", "171") ODER ein Logo/Text oben eingedruckt
   (z.B. Hersteller-Materialbranding mit Blatt-Icon); eine zentrierte Vergroesserung
   schneidet gleichmaessig von allen vier Seiten weg statt nur unten/rechts, damit beide
   Dekor-Varianten ausserhalb des sichtbaren Kreises landen. */
.customdesign-pdp-v2 #surface-color .obfl-frame {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid var(--bs-blue-light, #f0f6fa) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    margin: 3px !important;
    vertical-align: middle;
}

.customdesign-pdp-v2 #surface-color .obfl-frame img.obfl {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 180%: enger als 148% (FEEL-nature Top-Logo), damit auch breitere Top-Logos (z.B. FEEL nature) komplett wegfallen */
    width: 180% !important;
    height: 180% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.customdesign-pdp-v2 #surface-color .obfl-frame:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,68,106,.15);
    border-color: var(--bs-blue, #00446a) !important;
}

/* "+N" Rest-Zähler, wenn mehr Frontfarben vorhanden sind als angezeigt werden (Cap).
   Klickbar: klappt die restlichen Swatches darunter auf (siehe surface-colors.js). */
.customdesign-pdp-v2 #surface-color .obfl-more {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bs-blue, #00446a);
    background: #fff;
    color: var(--bs-blue, #00446a);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    margin: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer;
}

.customdesign-pdp-v2 #surface-color .obfl-more:hover {
    background: var(--bs-blue, #00446a);
    color: #fff;
}

/* Product-name area */
.customdesign-pdp-v2 #product-head .product-name {
    grid-area: auto !important;
    grid-column: 2 !important;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.customdesign-pdp-v2 #product-head .product-name .topseller {
    order: 0;
    margin-bottom: 0;
}

.customdesign-pdp-v2 #product-head .product-name > a,
.customdesign-pdp-v2 #product-head .product-name > img.herstellerlogo {
    order: 1;
    margin-left: auto;
}

.customdesign-pdp-v2 #product-head .product-name .herstellerlogo {
    display: block;
    /* Desktop: feste Hoehe 50 px (SVG-Logos ohne intrinsische Dim brauchen definite
     * height — `height: auto` allein kollabiert zu 0×0, siehe Mobile-Kommentar Z. 4457).
     * max-width 150 px begrenzt breite Wortmarken (Geberit etc.); object-fit: contain
     * skaliert proportional innerhalb der 150×50-Box. User-Anfrage 26.05.2026. */
    height: 50px;
    max-height: 50px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
}

/* V2: Produktname — gleiche Groesse wie klassisches PDP (2.2rem / ~28px) */
body.customdesign-pdp-v2 #product-head .product-name h1[itemprop="name"],
body.customdesign-pdp-v2 #product-head .product-name h1 {
    margin: 0;
    color: var(--bs-blue, #00446a);
    order: 2;
    flex-basis: 100%;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
body.customdesign-pdp-v2 #product-head .product-name h1 .pdp-sku {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--bs-blue-gray, #4a6886) !important;
    letter-spacing: 0.02em;
}

.customdesign-pdp-v2 #product-head .product-info-price {
    grid-area: auto !important;
    grid-column: 2 !important;
}

.customdesign-pdp-v2 .product-info-price .price-box {
    margin-bottom: 8px;
}

.customdesign-pdp-v2 .product-info-price .price-container .price {
    font-size: 30px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
}

.customdesign-pdp-v2 .product-info-price .old-price .price {
    font-size: 18px;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--bs-blue-gray, #4a6886);
}

/* Aktueller Preis / „ab …“ — Montserrat; Streichpreis (.old-price) bleibt Theme-Schrift */
.customdesign-pdp-v2 .product-info-price .price-wrapper[data-price-type='finalPrice'] .price,
.customdesign-pdp-v2 .product-info-price .minimal-price-link .price-wrapper .price {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

/* Price card area — light-blue instead of grey */
.customdesign-pdp-v2 .product-info-main .pricebox,
.customdesign-pdp-v2 .product-info-price .pricebox,
.customdesign-pdp-v2 #product-head .pricebox {
    background: var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: none !important;
    position: relative;
    overflow: visible !important;
}

.customdesign-pdp-v2 .product-info-price {
    background: transparent;
    border-radius: 16px;
    position: relative;
}

/*
 * Kurztext-/Produktdaten-Listen: 13px auf allen Viewports (Tablet/Desktop inkl.).
 * Vorher nur in @media (max-width: 767px) — dort griff 13px auf Tablet nicht;
 * CMS-Inline (z. B. 10px auf ul/li) braucht !important.
 */
body.customdesign-pdp-v2.catalog-product-view .additional-attributes,
body.customdesign-pdp-v2.catalog-product-view .additional-attributes .artikel_attr,
body.customdesign-pdp-v2.catalog-product-view .additional-attributes .artikel_attr_value,
body.customdesign-pdp-v2.catalog-product-view .additional-attributes .artikel_attr_value ul,
body.customdesign-pdp-v2.catalog-product-view .additional-attributes .artikel_attr_value ol,
body.customdesign-pdp-v2.catalog-product-view .additional-attributes .artikel_attr_value li,
body.customdesign-pdp-v2.catalog-product-view .additional-attributes .artikel_attr_value p,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes .artikel_attr,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes .artikel_attr,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes .artikel_attr_value,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes .artikel_attr_value,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes .artikel_attr_value ul,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes .artikel_attr_value ul,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes .artikel_attr_value ol,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes .artikel_attr_value ol,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes .artikel_attr_value li,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes .artikel_attr_value li,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes .artikel_attr_value p,
body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes .artikel_attr_value p {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Icon-Leiste (#product-head): Lieferzeit-Tooltip — wie Produktdaten / .additional-attributes (16px), nicht 10px aus _product.less */
body.customdesign-pdp-v2.catalog-product-view .hinweis-overlay {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* „i“ Lieferzeit/Garantie: Tap setzt :focus — ohne :focus-visible kein Overlay auf vielen Touch-Browsern */
body.catalog-product-view .lieferzeit .pdp-hint-trigger:focus + .hinweis-overlay.lieferzeithinweis,
body.catalog-product-view .garantie .pdp-hint-trigger:focus + .hinweis-overlay.garantiehinweis {
    display: block !important;
}

body.catalog-product-view .lieferzeit .pdp-hint-trigger.pdp-hint--show + .hinweis-overlay.lieferzeithinweis,
body.catalog-product-view .garantie .pdp-hint-trigger.pdp-hint--show + .hinweis-overlay.garantiehinweis {
    display: block !important;
}

body.customdesign-pdp-v2 .additional-attributes .artikel_attr_value .data-overlay {
    color: var(--bs-blue, #00446a);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
body.customdesign-pdp-v2 .additional-attributes .artikel_attr_value .data-overlay:hover {
    color: var(--bs-blue-gray, #4a6886);
}

body.customdesign-pdp-v2 #product-head .product-name ul,
body.customdesign-pdp-v2 #product-head .product-name ol,
body.customdesign-pdp-v2 #product-head .product-name li,
body.customdesign-pdp-v2 #product-head .product-info-price ul,
body.customdesign-pdp-v2 #product-head .product-info-price ol,
body.customdesign-pdp-v2 #product-head .product-info-price li {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.customdesign-pdp-v2 #options-pricebox #option-details,
body.customdesign-pdp-v2 #options-pricebox #option-details ul,
body.customdesign-pdp-v2 #options-pricebox #option-details ol,
body.customdesign-pdp-v2 #options-pricebox #option-details li,
body.customdesign-pdp-v2 #options-pricebox #option-details .option,
body.customdesign-pdp-v2 #options-pricebox #option-details .aufpreis {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* -24% discount badge — circle inside pricebox
 * Groessen-Skala (User-Anfrage 21.05.2026 14:26 „PDP Desktop 80x80, mobile/tablet
 * auch jeweils etwas groesser, Schrift drinnen ebenfalls groesser"):
 *   Mobile  (<768px)   : 64x64, font 16px
 *   Tablet  (768-1199) : 80x80, font 22px
 *   Desktop (>=1200)   : 80x80, font 22px
 *
 * Mobile-Right-Offset (User-Anfrage 21.05.2026 15:36 „Auf mobil den orangen Kreis
 * bissi nach links rutschen, damit er nicht am Rand vom Bildschirm klebt"):
 * von -18px auf -4px reduziert — Bubble haengt jetzt nur noch 4px ueber die
 * Pricebox-Kante hinaus statt 18px; bei 390px-Viewport (iPhone 12 Pro) kommt
 * die Bubble damit ~14px weiter weg vom rechten Bildschirmrand. Tablet/Desktop
 * ueberschreiben right ohnehin (Z. 901-907 / 922-928), wirkt also nur Mobile. */
.customdesign-pdp-v2 .pricebox .rabatt.labelpfeil,
.customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil {
    position: absolute !important;
    top: -18px !important;
    right: -4px !important;
    left: auto !important;
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5;
}

.customdesign-pdp-v2 .pricebox .rabatt.labelpfeil::before,
.customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil::before {
    display: none !important;
}

.customdesign-pdp-v2 .pricebox .rabatt.labelpfeil .arrow,
.customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil .arrow {
    display: none !important;
}

.customdesign-pdp-v2 .pricebox .rabatt.labelpfeil .sparen.labelcontent,
.customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil .sparen.labelcontent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    padding: 0 4px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8,.3);
    box-sizing: border-box !important;
}

/* Tablet: 80x80, gleiche Prominenz wie Desktop (User-Anfrage 26.05.2026) */
@media (min-width: 768px) and (max-width: 1199px) {
    .customdesign-pdp-v2 .pricebox .rabatt.labelpfeil,
    .customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil {
        width: 80px !important;
        height: 80px !important;
        top: -20px !important;
        right: -20px !important;
    }

    .customdesign-pdp-v2 .pricebox .rabatt.labelpfeil .sparen.labelcontent,
    .customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil .sparen.labelcontent {
        width: 80px !important;
        height: 80px !important;
        font-size: 22px !important;
        line-height: 1.15 !important;
        padding: 0 6px !important;
        box-shadow: 0 3px 11px rgba(236, 102, 8, 0.34);
    }
}

/* Desktop: 80x80, prominenter Text */
@media (min-width: 1200px) {
    .customdesign-pdp-v2 .pricebox .rabatt.labelpfeil,
    .customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil {
        width: 80px !important;
        height: 80px !important;
        top: -20px !important;
        right: -20px !important;
    }

    .customdesign-pdp-v2 .pricebox .rabatt.labelpfeil .sparen.labelcontent,
    .customdesign-pdp-v2 .product-info-price .rabatt.labelpfeil .sparen.labelcontent {
        width: 80px !important;
        height: 80px !important;
        font-size: 22px !important;
        line-height: 1.15 !important;
        padding: 0 6px !important;
        box-shadow: 0 3px 11px rgba(236, 102, 8, 0.34);
    }
}

/* Quantity selector — pill: minus | input | plus (keine Overlay-Symbole, Tastatur-tauglich) */
.customdesign-pdp-v2 .productqty-qty {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
}

.customdesign-pdp-v2 .productqty-qty .moreless {
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    width: 106px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-clip: padding-box !important;
    isolation: isolate !important;
}

.customdesign-pdp-v2 .productqty-qty .productqty_btn {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.customdesign-pdp-v2 .productqty-qty .productqty_btn.qtyminus.is-inactive,
.customdesign-pdp-v2 .productqty-qty .productqty_btn.qtyminus:disabled {
    color: #b0cfe0 !important;
    cursor: default !important;
}

.customdesign-pdp-v2 .productqty-qty .productqty_btn:focus,
.customdesign-pdp-v2 .productqty-qty .productqty_btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.customdesign-pdp-v2 .productqty-qty .productqty_btn:focus-visible,
.customdesign-pdp-v2 .productqty-qty .clone-qty:focus-visible,
.customdesign-pdp-v2 .productqty-qty .switcher-qty-display:focus-visible {
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    z-index: 2 !important;
    position: relative !important;
}

.customdesign-pdp-v2 .productqty-qty .clone-qty,
.customdesign-pdp-v2 .productqty-qty .switcher-qty-display {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 100% !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--bs-blue, #00446a) !important;
    background: transparent !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.customdesign-pdp-v2 .productqty-qty .clone-qty:focus,
.customdesign-pdp-v2 .productqty-qty .switcher-qty-display:focus {
    outline: none !important;
    box-shadow: none !important;
}

.customdesign-pdp-v2 .product-info-price .box-tocart {
    margin: 20px 0;
}

.customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary {
    width: 100%;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    border-radius: 999px;
    background: var(--bs-accent-color, #ec6608);
    border: none;
    color: #fff !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(236, 102, 8,.25);
    height: auto !important;
    overflow: visible !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Configure button — same pill style */
.customdesign-pdp-v2 .product-info-price .configure-button,
.customdesign-pdp-v2 .box-tocart .configure-button {
    width: 100%;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    border-radius: 999px;
    background: var(--bs-accent-color, #ec6608);
    border: none;
    color: #fff !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(236, 102, 8,.25);
    height: auto !important;
    overflow: visible !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.customdesign-pdp-v2 .action.tocart .add-to-icons,
.customdesign-pdp-v2 .configure-button .add-to-icons,
.customdesign-pdp-v2 #options-pricebox .box-tocart .add-to-icons,
body.customdesign-pdp-v2 #options-pricebox .add-to-icons {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

.customdesign-pdp-v2 .product-info-price .configure-button:hover,
.customdesign-pdp-v2 .box-tocart .configure-button:hover {
    background: var(--bs-accent-color-hover, #C96000);
    transform: none;
    box-shadow: 0 2px 8px rgba(236, 102, 8, .25);
}

.customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary:hover {
    background: var(--bs-accent-color-hover, #C96000);
    transform: none;
    box-shadow: 0 2px 8px rgba(236, 102, 8, .25);
}

/*
 * Konfigurations-Spalte: Preisbox (#options-pricebox) — Theme LESS setzt .product_price_box auf #eee.
 * V2: eine Karte wie Zubehör / pricebox (hellblau, Radien, kein grauer Klotz); Warenkorb-Button pill.
 */
body.customdesign-pdp-v2 #options-pricebox #innerbox {
    background: var(--bs-blue-light, #f0f6fa);
    border: 1px solid rgba(0, 68, 106, 0.12);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.05);
    /* unten: nach Icons kein künstlich grosser weisser Kasten */
    padding: 20px 20px 12px;
    box-sizing: border-box;
}

/* „Weitere Artikel der Serie“: Abstand zur Preiskarte */
body.customdesign-pdp-v2 #options-pricebox #options-sidebar-sticky > .weitereart {
    margin-top: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.customdesign-pdp-v2 #options-pricebox .product_price_box.price-box {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
}

body.customdesign-pdp-v2 #options-pricebox .product_price_box .price {
    text-shadow: none !important;
    color: var(--bs-blue, #00446a);
}

body.customdesign-pdp-v2 #options-pricebox .product_price_box .price.base_price {
    font-size: 1.35rem !important;
    font-weight: 600;
    color: rgba(0, 68, 106, 0.72);
}

body.customdesign-pdp-v2 #options-pricebox .product_price_box .price.total_price {
    font-size: 1.75rem !important;
    font-weight: 700;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

body.customdesign-pdp-v2 #options-pricebox .preislabel {
    color: var(--bs-blue, #00446a);
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

body.customdesign-pdp-v2 #options-pricebox #option-details {
    border-top: 1px solid rgba(0, 68, 106, 0.1);
    border-bottom: 1px solid rgba(0, 68, 106, 0.1);
    margin: 12px 0;
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bs-blue-gray, #4a6886);
}

body.customdesign-pdp-v2 #options-pricebox .tax-details {
    display: block;
    margin-top: 14px;
    margin-bottom: 10px;
    padding-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--bs-blue-gray, #4a6886);
}

body.customdesign-pdp-v2 #options-pricebox .tax-details .versandfrei,
body.customdesign-pdp-v2 #options-pricebox .tax-details .orange {
    color: var(--bs-accent-color, #ec6608);
    font-weight: 700;
}

/* Zusatzrabatt-/Aktionshinweis („10% extra → gültig bis …“) — mehr Luft + Radien */
body.customdesign-pdp-v2 #options-pricebox .box-orange,
body.customdesign-pdp-v2 .product-info-main .box-orange,
body.customdesign-pdp-v2 .box-orange {
    display: inline-block;
    padding: 10px 14px;
    margin: 8px 0;
    border-radius: 8px;
    line-height: 1.35;
    box-sizing: border-box;
}

/* „Servicepauschale (…) in D." ist der klickbare .data-overlay-Trigger und bekam
   ueber das Theme-LESS die hellere Link-Farbe @blue80 (rgba(0,68,106,.8)).
   Auf Wunsch: exakt gleiche Farbe wie die Zeile „Entfaellt ab …" darunter
   (.versand_zusatz erbt die Pricebox-Textfarbe, computed rgb(27,58,75)). Statt eine
   Farbe fest zu verdrahten, erbt der Link jetzt die Farbe der Elternzeile .versandinfo
   (=selbe Farbe wie .versand_zusatz) und wird unterstrichen, damit die Klickbarkeit
   sichtbar bleibt. */
body.customdesign-pdp-v2 .tax-details .versandinfo .data-overlay {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.customdesign-pdp-v2 .tax-details .versandinfo .data-overlay:hover {
    color: var(--bs-accent-color, #ec6608);
}

body.customdesign-pdp-v2 #options-pricebox .productqty-qty {
    margin-top: 26px;
    margin-bottom: 0 !important;
}

/*
 * Pricebox-Stack-Abstand: Mengenauswahl → "In den Warenkorb" = 12 px,
 * identisch zu "In den Warenkorb" → "Artikel merken" (.bs-pricebox-wishlist hat
 * `margin: 12px 0 0`). Vorher kein expliziter `.box-tocart` margin-top in der
 * `#options-pricebox`-Sektion → inkonsistenter, zu grosser Abstand.
 */
body.customdesign-pdp-v2 #options-pricebox .box-tocart {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

/*
 * Vollständig konfiguriert: echte Schaltfläche in #options-pricebox .box-tocart bleibt sichtbar
 * (rechte Preisbox). Doppel-CTA oben in .product-info-price verhindert PDP V2 über
 * check_all_options() (kein legacy-.add-to-cart-Klon), nicht durch Ausblenden der Preisbox.
 * Vor Vollendung: gleiche .box-tocart, Button optisch ausgegraut (Regeln unten).
 */
/* Not yet fully configured: faded orange button */
body.customdesign-pdp-v2 #options-pricebox:not(.cdv2-pricebox-configured) .box-tocart .action.primary.tocart,
body.customdesign-pdp-v2 #options-pricebox:not(.cdv2-pricebox-configured) .box-tocart .action.tocart.primary {
    background: #f0b87a !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
body.customdesign-pdp-v2 #options-pricebox:not(.cdv2-pricebox-configured) .box-tocart .action.primary.tocart:hover,
body.customdesign-pdp-v2 #options-pricebox:not(.cdv2-pricebox-configured) .box-tocart .action.tocart.primary:hover {
    background: #f0b87a !important;
    transform: none !important;
}

body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart,
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.tocart.primary {
    width: 100%;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    text-transform: none;
    border-radius: 999px !important;
    background: var(--bs-accent-color, #ec6608);
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background 0.2s ease, transform 0.15s ease;
    height: auto !important;
    overflow: visible !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart:hover:not(:disabled),
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.tocart.primary:hover:not(:disabled) {
    background: var(--bs-accent-color-hover, #c96000);
    transform: none;
    box-shadow: none !important;
}

body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Pricebox "Artikel merken" button */
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin: 12px 0 0 !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    border: 1.5px solid #dce3ea !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist svg {
    flex-shrink: 0 !important;
    color: var(--bs-blue, #00446a) !important;
    pointer-events: none !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist svg * {
    pointer-events: none !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist:hover {
    border-color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
}

/*
 * Merkliste-Sperre bis vollstaendige Konfiguration
 * ------------------------------------------------
 * Ein noch nicht fertig konfiguriertes Produkt darf nicht gemerkt werden.
 * Beide „Artikel merken"-Buttons (obere Pricebox .action.towishlist + Konfigurator-
 * Sidebar .bs-pricebox-wishlist) werden ausgegraut und sind nicht klickbar, solange
 * NICHT alle Optionen gewaehlt sind. Steuerung ueber Body-Klasse cdv2-config-complete
 * (cdv2-options-progress.js) → Default ohne Klasse = gesperrt, also flicker-frei.
 * `pointer-events: none` unterbindet zusaetzlich den globalen Wishlist-Klick-Handler.
 * Greift NUR bei konfigurierbaren Produkten (Body-Klasse cdv2-has-options, serverseitig
 * via BodyClassInjector), damit nicht-konfigurierbare Produkte (z. B. vorkonfigurierte
 * Sets ohne Optionen) jederzeit merkbar bleiben.
 */
body.customdesign-pdp-v2.cdv2-has-options:not(.cdv2-config-complete) .product-info-price .action.towishlist,
body.customdesign-pdp-v2.cdv2-has-options:not(.cdv2-config-complete) #options-pricebox .bs-pricebox-wishlist {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Spezifität inkl. #product-head (Theme: .product-info-main #product-head .product-info-price .product-addto-links > button) + nach globalem CSS laden (layout order 960) */
body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links,
.customdesign-pdp-v2 .product-info-price .product-addto-links,
.customdesign-pdp-v2 .product-addto-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    height: auto !important;
}

/* Wie Konto-Einschub .cs-btn--secondary: #dce3ea Rand; Hover: weiß, blaue Kontur/Schrift — Icons gleiche Filterfarbe (kein Hover-Invert) */
body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links > a,
body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links > button,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links > a,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links > button,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links > a,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links > button,
.customdesign-pdp-v2 .product-info-price .product-addto-links > a,
.customdesign-pdp-v2 .product-info-price .product-addto-links > button,
.customdesign-pdp-v2 .product-addto-links > a,
.customdesign-pdp-v2 .product-addto-links > button,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-social-links a,
.customdesign-pdp-v2 .product-info-main .product-social-links a,
.customdesign-pdp-v2 .product-social-links a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    -webkit-text-fill-color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    width: 100% !important;
    padding: 14px 12px !important;
    border: 2px solid #dce3ea !important;
    border-radius: 999px !important;
    background: #fff !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links .add-to-icons,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links .add-to-icons,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links .add-to-icons,
.customdesign-pdp-v2 .product-addto-links .add-to-icons,
.customdesign-pdp-v2 .product-info-price .product-addto-links .add-to-icons {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin: 0 !important;
    /* Eine feste Shop-Blau-Färbung; identisch im :hover, damit kein „Invert“-Wechsel */
    filter: brightness(0) saturate(100%) invert(17%) sepia(52%) saturate(2043%) hue-rotate(178deg) brightness(97%) contrast(107%) !important;
}

body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links > a:hover,
body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links > button:hover,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links > a:hover,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links > button:hover,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links > a:hover,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links > button:hover,
.customdesign-pdp-v2 .product-info-price .product-addto-links > a:hover,
.customdesign-pdp-v2 .product-info-price .product-addto-links > button:hover,
.customdesign-pdp-v2 .product-addto-links > a:hover,
.customdesign-pdp-v2 .product-addto-links > button:hover,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-social-links a:hover,
.customdesign-pdp-v2 .product-info-main .product-social-links a:hover,
.customdesign-pdp-v2 .product-social-links a:hover {
    color: var(--bs-blue, #00446a) !important;
    -webkit-text-fill-color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: none !important;
}

body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links > a:focus-visible,
body.customdesign-pdp-v2.catalog-product-view .product-info-main #product-head .product-info-price .product-addto-links > button:focus-visible,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links > a:focus-visible,
body.customdesign-pdp-v2.catalog-product-view .product-info-main .product-info-price .product-addto-links > button:focus-visible,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links > a:focus-visible,
.customdesign-pdp-v2 .product-info-main #product-head .product-info-price .product-addto-links > button:focus-visible,
.customdesign-pdp-v2 .product-info-price .product-addto-links > a:focus-visible,
.customdesign-pdp-v2 .product-info-price .product-addto-links > button:focus-visible,
.customdesign-pdp-v2 .product-addto-links > a:focus-visible,
.customdesign-pdp-v2 .product-addto-links > button:focus-visible {
    outline: none !important;
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 0 0 2px rgba(0, 68, 106, 0.22) !important;
}

/* ----- "Weitere Artikel der Serie" – card-style link ----- */
.customdesign-pdp-v2 .weitereart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px !important;
    margin: 16px 0 0 0 !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    border: 1.5px solid var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 12px !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    line-height: 1.4 !important;
}

.customdesign-pdp-v2 .weitereart:hover {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 2px 8px rgba(0,68,106,.1) !important;
}

.customdesign-pdp-v2 .weitereart.pfeile::before {
    content: '' !important;
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300446a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 20px 20px !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Mit Kategoriebild: Raster-Icon entfernen (Thumbnail reicht) */
.customdesign-pdp-v2 .weitereart.badshop-series-link--has-thumb.pfeile::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.customdesign-pdp-v2 .weitereart .badshop-series-link__series-name {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.customdesign-pdp-v2 .weitereart.pfeile::after {
    content: '' !important;
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300446a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 18px 18px !important;
}

/* ----- Social/Share links – hidden (duplicated by USPs) ----- */
.customdesign-pdp-v2 .product-social-links {
    display: none !important;
}

/* ----- Head Icons – spacing & color ----- */
.customdesign-pdp-v2 .icons.grid {
    margin: 24px 0 !important;
    padding: 20px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    color: var(--bs-blue, #00446a) !important;
}
/* In der blauen #options-pricebox: weniger Leerraum unter den Icons (vormals margin+padding 24+20 u.) */
body.customdesign-pdp-v2 #options-pricebox .icons.grid {
    margin: 12px 0 0 !important;
    padding: 10px 0 0 !important;
}

.customdesign-pdp-v2 .icons.grid .producticon {
    color: var(--bs-blue, #00446a) !important;
}

.customdesign-pdp-v2 .icons.grid .producticon img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(52%) saturate(2043%) hue-rotate(178deg) brightness(97%) contrast(107%);
}

/* ----- USP Badges (Produktinfo; Tabs- + Sektionen-Layout) ----- */

.cdv2-usp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    box-sizing: border-box;
}

.cdv2-usp-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-radius: calc(var(--bs-radius-container, 12px) - 4px);
    transition: box-shadow 0.2s ease;
}

.cdv2-usp-badge:hover {
    box-shadow: 0 2px 8px rgba(0,68,106,.08);
}

.cdv2-usp-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--bs-accent-color, #ec6608);
}

.cdv2-usp-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    line-height: 1.3;
}

/* ----- ZONE 2: Details (Tabs/Accordion) -----
   V2: äußere Kontur mobil; Desktop: inaktive Reiter schlicht; Produktdaten-Tab + Karte + rechte Boxen Shop-Blau ohne Rand, helle Typo. */

.customdesign-pdp-v2 .product.info.detailed {
    margin: 16px 0 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    position: relative;
    z-index: 1;
}

/*
 * PDP-Produkttabs: Tastatur-Fokus — inset-Outline, weil overflow auf Tablist
 * den shopweiten a:focus-visible-Ring (outline-offset) sonst abschneidet.
 */
html body.customdesign-pdp-v2.catalog-product-view .product.data.items .cdv2-pdp-tablist > .item.title > .switch:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .product.data.items .cdv2-pdp-tablist > .item.title.switch:focus-visible,
html body.customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title > .switch:focus-visible,
html body.customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.switch:focus-visible {
    color: var(--bs-blue, #00446a) !important;
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

/* Mobil / schmal: äußere Kontur; Kopfzeilen ohne Shop-Blau (wie #fff-Kartenfläche) */
@media (max-width: 767px) {
    .customdesign-pdp-v2 .product.info.detailed .product.data.items {
        border: 2px solid #94a3b8;
        border-radius: 8px;
        overflow: hidden;
        box-sizing: border-box;
        background: #fff;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title {
        border: none;
        border-bottom: 1px solid #cbd5e1;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title:last-child {
        border-bottom: none;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title > .switch,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.switch {
        font-size: 15px;
        font-weight: 600;
        color: var(--bs-blue, #00446a);
        padding: 14px 16px;
        border: none;
        background: #fff !important;
        background-color: #fff !important;
        text-transform: none;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title > .switch:hover,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.switch:hover {
        background: #f8fafc !important;
        background-color: #f8fafc !important;
        color: var(--bs-blue, #00446a);
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.active.switch {
        background: #fff !important;
        background-color: #fff !important;
        color: var(--bs-blue, #00446a);
        font-weight: 700;
        box-shadow: none;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content {
        border: none;
        border-top: 1px solid #cbd5e1;
        padding: 16px;
        background: #fff;
    }

    /* Produktdaten (#additional) mobil: aktiver Reiter ohne hellblaue Kachel */
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active.switch {
        background: #fff !important;
        color: var(--bs-blue, #00446a) !important;
        box-shadow: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active.switch:hover {
        background: #f8fafc !important;
        color: var(--bs-blue, #00446a) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#additional {
        background: transparent !important;
        padding-top: 12px;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#additional .tabdata {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 16px !important;
        box-sizing: border-box;
    }

    /* Produktdaten (1. Tab): oben links ohne Radius — nahtloser Übergang vom aktiven Reiter */
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) > .item.content#additional .tabdata {
        border-top-left-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .data-heading {
        color: var(--bs-blue, #00446a) !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .additional-attributes .artikel_attr {
        color: var(--bs-blue, #00446a);
    }

    .customdesign-pdp-v2 .product.data.items #additional .additional-attributes .artikel_attr_value {
        color: rgba(0, 68, 106, 0.78);
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata a {
        color: var(--bs-blue, #00446a) !important;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata .pdp-hint-trigger__icon {
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata .pdp-hint-trigger:focus-visible .pdp-hint-trigger__icon {
        outline: 2px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px rgba(0, 68, 106, 0.45) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px;
        color: rgba(0, 68, 106, 0.85);
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .downloads > strong,
    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .right-box.downloads > strong {
        color: var(--bs-blue, #00446a) !important;
        border-bottom-color: rgba(0, 68, 106, 0.15) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .prod_download {
        color: var(--bs-blue, #00446a) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.topseller-badge {
        background: var(--bs-accent-color, #ec6608) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.topseller-badge span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.garantie-badge {
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.garantie-badge span {
        border: none !important;
        border-radius: 50% !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        box-sizing: border-box !important;
    }

    /* Produktbeschreibung + Herstellerinformation: gleiches Layout wie Produktdaten (transparent, Content-Box + Sidebar getrennt) */
    .customdesign-pdp-v2 .product.data.items > .item.content#description,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        padding-top: 12px !important;
        border-radius: 0;
        color: var(--bs-blue, #00446a);
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description > .product.attribute.description > .value {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 16px !important;
        box-sizing: border-box;
        color: var(--bs-blue, #00446a);
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr > .gpsr-tab-grid > .gpsr-tab-content {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 16px !important;
        box-sizing: border-box;
        color: var(--bs-blue, #00446a);
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr > .gpsr-tab-grid > .gpsr-tab-content hr {
        display: none !important;
    }
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active.switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active.switch {
        background: #fff !important;
        color: var(--bs-blue, #00446a) !important;
        box-shadow: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active.switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active.switch:hover {
        background: #f8fafc !important;
        color: var(--bs-blue, #00446a) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

/* Tablet/Desktop: Produktdaten-Karte Shop-Blau ohne Rand; schlichte inaktive Reiter */
@media (min-width: 768px) {
    /*
     * Tabs: Inhalte bleiben direkte Kinder von .product.data.items (Magento-Float).
     * Nur die Reiterzeile liegt in .cdv2-pdp-tablist (flex, nowrap, overflow-x auto).
     */
    .customdesign-pdp-v2 .product.info.detailed .product.data.items {
        border: none;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
        margin-bottom: 40px;
        box-sizing: border-box;
        padding: 0 0 4px;
        position: relative;
        z-index: 1;
    }

    .customdesign-pdp-v2 .product.data.items::after {
        content: '';
        display: table;
        clear: both;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content {
        float: right;
        margin-left: -100%;
        width: 100%;
        max-width: 100%;
        clear: none !important;
        box-sizing: border-box;
        margin-top: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title {
        flex: 0 0 auto;
        float: none;
        margin: 0 6px 0 0 !important;
        box-sizing: border-box;
        border: none !important;
        border-bottom: none !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title:last-child {
        border-bottom: none !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title > .switch,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.switch {
        min-height: 44px;
        height: auto !important;
        line-height: 1.35;
        padding: 16px 16px !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.75) !important;
        color: var(--bs-blue, #00446a) !important;
        font-weight: 600;
        font-size: 14px;
        margin: 0 !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none !important;
        text-transform: none;
        cursor: pointer !important;
        transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
        white-space: nowrap;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title:not(.disabled) > .switch:hover,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title:not(.disabled).switch:hover {
        background: rgba(255, 255, 255, 0.75) !important;
        color: var(--bs-blue, #00446a) !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.active.switch {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        font-weight: 700;
        position: relative;
        z-index: 1;
        border: none !important;
        border-bottom: none !important;
        border-top: none !important;
        padding-bottom: 16px !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active.switch {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        border: none !important;
        border-bottom: none !important;
        border-top: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist > .item.title.active.switch:hover {
        color: var(--bs-blue, #00446a) !important;
        background: var(--bs-blue-light, #f0f6fa) !important;
    }

    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) .cdv2-pdp-tablist > .item.title.active.switch:hover {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist #tab-label-product-info-related {
        border: none !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.75) !important;
        color: var(--bs-blue, #00446a) !important;
    }

    .customdesign-pdp-v2 .product.data.items .cdv2-pdp-tablist #tab-label-product-info-related.active {
        background: rgba(255, 255, 255, 0.75) !important;
        color: var(--bs-blue, #00446a) !important;
        border: none !important;
        margin-bottom: 0 !important;
        z-index: 1;
        position: relative;
        border-radius: 8px !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content:not(#additional) {
        border: 1px solid #d0d7de !important;
        padding: 22px 26px 30px !important;
        background: #fff;
        border-radius: 8px;
    }

    /*
     * Produktdaten (#additional): linke Karte + rechte Boxen (Badges, Downloads) — einheitlich Shop-Blau, ohne Rand; Schrift hell.
     */
    .customdesign-pdp-v2 .product.data.items > .item.content#additional {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#additional .additional-attributes-wrapper.data-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px 22px;
        align-items: start;
        /* Mehr Luft zum darunterliegenden Konfig-Block (`#options`) */
        margin-bottom: 60px !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#additional .tabdata {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 22px 24px 28px !important;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Produktdaten (1. Tab): oben links ohne Radius — nahtloser Übergang vom aktiven Reiter */
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-additional.active) > .item.content#additional .tabdata {
        border-top-left-radius: 0 !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .data-heading {
        color: var(--bs-blue, #00446a) !important;
        font-weight: 700 !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .additional-attributes .artikel_attr {
        color: var(--bs-blue, #00446a);
        font-weight: 700;
    }

    .customdesign-pdp-v2 .product.data.items #additional .additional-attributes .artikel_attr_value {
        color: rgba(0, 68, 106, 0.78);
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata a {
        color: var(--bs-blue, #00446a) !important;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata a:hover {
        color: rgba(0, 68, 106, 0.7) !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata .pdp-hint-trigger__icon {
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    .customdesign-pdp-v2 .product.data.items #additional .tabdata .pdp-hint-trigger:focus-visible .pdp-hint-trigger__icon {
        outline: 2px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px rgba(0, 68, 106, 0.45) !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#additional .data-grid__aside {
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px;
        padding: 20px 18px;
        margin: 0 0 12px;
        box-sizing: border-box;
        color: rgba(0, 68, 106, 0.85);
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox:last-child {
        margin-bottom: 0;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .downloads,
    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .right-box.downloads {
        color: rgba(0, 68, 106, 0.85) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .downloads > strong,
    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .right-box.downloads > strong {
        color: var(--bs-blue, #00446a) !important;
        border-bottom-color: rgba(0, 68, 106, 0.15) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .downloads .download-section strong {
        color: var(--bs-blue, #00446a) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .prod_download {
        color: var(--bs-blue, #00446a) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .prod_download:hover {
        color: rgba(0, 68, 106, 0.7) !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .prod_download div {
        color: inherit;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.topseller-badge {
        background: var(--bs-accent-color, #ec6608) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.topseller-badge span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.garantie-badge {
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    .customdesign-pdp-v2 .product.data.items .data-grid__aside .rightbox .badge.garantie-badge span {
        border: none !important;
        border-radius: 50% !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        box-sizing: border-box !important;
    }

    /* Produktbeschreibung + Herstellerinformation: gleiches Layout wie Produktdaten (transparent, Grid mit Sidebar) */
    .customdesign-pdp-v2 .product.data.items > .item.content#description,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0;
        color: var(--bs-blue, #00446a);
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#description > .product.attribute.description {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 20px 22px !important;
        align-items: start !important;
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description > .product.attribute.description > .value {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 22px 24px 28px !important;
        box-sizing: border-box;
        color: var(--bs-blue, #00446a);
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr > .gpsr-tab-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 20px 22px !important;
        align-items: start !important;
    }
    /* Old tab layout (no sections): GPSR tab = two columns with sidebar, like Produktdaten */
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr > .gpsr-tab-grid > .gpsr-tab-content {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 22px 24px 28px !important;
        box-sizing: border-box;
        color: var(--bs-blue, #00446a);
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr > .gpsr-tab-grid > .gpsr-tab-content hr {
        display: none !important;
    }

    /* Sidebar (.rightboxes) in Produktbeschreibung + Herstellerinformation: gleiche Optik wie .data-grid__aside */
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes {
        background: transparent;
        padding: 0;
        margin: 0;
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px;
        padding: 20px 18px;
        margin: 0 0 12px;
        box-sizing: border-box;
        color: rgba(0, 68, 106, 0.85);
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox:last-child,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox:last-child {
        margin-bottom: 0;
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .downloads > strong,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .downloads > strong {
        color: var(--bs-blue, #00446a) !important;
        border-bottom-color: rgba(0, 68, 106, 0.15) !important;
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .prod_download,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .prod_download {
        color: var(--bs-blue, #00446a) !important;
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .prod_download:hover,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .prod_download:hover {
        color: rgba(0, 68, 106, 0.7) !important;
    }
    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .badge.topseller-badge,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .badge.topseller-badge {
        background: var(--bs-accent-color, #ec6608) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .badge.topseller-badge span,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .badge.topseller-badge span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .badge.garantie-badge,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .badge.garantie-badge {
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    .customdesign-pdp-v2 .product.data.items > .item.content#description .rightboxes .rightbox .badge.garantie-badge span,
    .customdesign-pdp-v2 .product.data.items > .item.content#product-gpsr .rightboxes .rightbox .badge.garantie-badge span {
        border: none !important;
        border-radius: 50% !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        box-sizing: border-box !important;
    }

    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active.switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active > .switch,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active.switch {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        border: none !important;
        border-bottom: none !important;
        border-top: none !important;
        font-weight: 700;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-description.active) .cdv2-pdp-tablist > .item.title.active.switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active > .switch:hover,
    .customdesign-pdp-v2 .product.data.items:has(#tab-label-product-gpsr.active) .cdv2-pdp-tablist > .item.title.active.switch:hover {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

/* ----- ZONE 3: Passt perfekt ----- */

.cdv2-passt-perfekt-heading {
    margin: 48px 0 20px;
}

.cdv2-section-title {
    font-size: var(--bs-font-size-h2, 26px);
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    margin: 0 0 8px;
}

.cdv2-section-subtitle {
    font-size: 15px;
    color: var(--bs-blue-gray, #4a6886);
    margin: 0;
}

.customdesign-pdp-v2 #crp-ajax-placeholder {
    margin-bottom: 48px;
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-item {
    border: 1px solid var(--bs-blue-light, #f0f6fa);
    border-radius: var(--bs-radius-container, 12px);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    background: #fff;
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-item:hover {
    box-shadow: 0 8px 24px rgba(0,68,106,.08);
    transform: translateY(-3px);
    border-color: var(--bs-blue-gray, #4a6886);
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-item-info {
    padding: 16px;
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-item-name a {
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-blue, #00446a);
    text-decoration: none;
    transition: color 0.15s ease;
}

/* CRP + Epoq-Slider-Styles: ausgelagert nach Solutioo_CustomDesign::css/customdesign-pdp-recommendations.css (gilt auf allen Katalog-PDP, V1 + V2) */

/* ----- ZONE 4: Configuration ----- */

.cdv2-config-zone {
    background: transparent;
    border-radius: var(--bs-radius-container, 12px);
    padding: 0;
    margin: 0 0 24px;
    grid-area: optionsbox;
}

/*
 * Theme `Solutioo_Optionsmodul/_product.less` setzt `#options { padding: 0 0 30px }` — auf PDP V2
 * wirkt das wie viel Leerraum zwischen Konfig-Box und nachfolgender Empfehlungssektion.
 */
body.customdesign-pdp-v2 #options {
    padding-bottom: 8px !important;
}

/*
 * #options ist 2-Spalten-Grid: align-items:start — linke Spalte nur so hoch wie Inhalt.
 * #options-pricebox align-self:stretch — gleiche Zeilenhöhe wie Konfiguration, scrollableSidebar bleibt aktiv.
 */
@media (min-width: 768px) {
    body.customdesign-pdp-v2 #options {
        align-items: start;
    }

    /*
     * scrollableSidebar: bei "bottom" ist #options-sidebar-sticky position:absolute; bottom:0
     * relativ zu #options-pricebox. Ohne Stretch ist die Preis-Spalte nur so hoch wie der Inhalt —
     * die Box scrollt mit nach oben und Preis + Serien-Link verschwinden. Stretch = Zeilenhöhe
     * wie #cdv2-config-zone (inkl. Hilfe-Banner „Überfordert mit der Konfiguration?“).
     */
    body.customdesign-pdp-v2 #options #options-pricebox {
        align-self: stretch;
    }

    /*
     * Unter dem Hilfe-Kasten wirkte der Zone-Abstand wie „Padding“ und verschob die optische Unterkante.
     * Abstand zur nächsten Sektion kommt von Blöcken darunter (z. B. Upsell).
     * margin-top: 0 — sonst 48px aus .cdv2-config-zone: Überschrift startet unterhalb der Preiskarte.
     */
    body.customdesign-pdp-v2 #options .cdv2-config-zone {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.cdv2-config-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.cdv2-config-steps-info {
    font-size: 14px;
    color: var(--bs-blue-gray, #4a6886);
    margin: 0;
}

.cdv2-steps-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--bs-blue, #00446a);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding: 6px 10px 5px;
    border-radius: 20px;
    margin-right: 4px;
    min-height: 28px;
    box-sizing: border-box;
}

.cdv2-steps-counter [data-role="cdv2-completed-steps"],
.cdv2-steps-counter .cdv2-steps-counter-sep {
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.cdv2-options-box {
    position: relative;
}

/* Options list + vertical progress rail (rail height = option cards only; reset row below) */
.cdv2-options-with-progress {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cdv2-options-body {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.cdv2-options-main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cdv2-progress-rail {
    flex: 0 0 12px;
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.cdv2-progress-track {
    width: 6px;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 120px;
    border-radius: 999px;
    background: #e2e8ee;
    overflow: hidden;
    position: relative;
}

.cdv2-progress-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: 100%;
    border-radius: 999px;
    background: var(--bs-blue, #00446a);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.35s ease;
    will-change: transform;
}

.customdesign-pdp-v2 #product-options-wrapper {
    background: transparent !important;
    padding: 0 !important;
}

.customdesign-pdp-v2 #options-box {
    margin-right: 0 !important;
    width: 100% !important;
}

.cdv2-options-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual option group */

.customdesign-pdp-v2 .cdv2-option,
.customdesign-pdp-v2 .prod_option.cdv2-option {
    background: #fff;
    border-radius: max(12px, var(--bs-radius-container, 0px));
    border: 1px solid #dde4ea;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0 !important;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 68, 106, 0.07), 0 1px 3px rgba(0, 68, 106, 0.04);
}

.customdesign-pdp-v2 .cdv2-option.selected {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 0 0 1px var(--bs-blue, #00446a), 0 4px 14px rgba(0, 68, 106, 0.1);
}

.customdesign-pdp-v2 .cdv2-option.required_option {
    border-color: #e74c3c;
    box-shadow: 0 0 0 1px #e74c3c, 0 4px 14px rgba(231, 76, 60, 0.12);
}

/* Nach Konflikt-Auflösung: Hinweis sichtbar + rot (wie klassischer Konfigurator) */
.customdesign-pdp-v2 .prod_option.required_option .cdv2-choose-hint,
.customdesign-pdp-v2 .prod_option.required_option .choose_option {
    display: block !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
}

.cdv2-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
}

.cdv2-option-header-toggle {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    outline: none;
    box-shadow: none;
}

/* Theme styles-m: globales button:hover (Rand + blauer Hintergrund) am Accordion-Kopf aus */
.customdesign-pdp-v2 .cdv2-option-header-toggle:hover,
.customdesign-pdp-v2 .cdv2-option-header-toggle:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Tastatur-Fokus: ein Ring am ganzen Kopf — kein shopweiter Inset, keine Kind-Outlines */
html body.customdesign-pdp-v2.catalog-product-view .cdv2-option-header-toggle:focus-visible {
    outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: max(10px, var(--bs-radius-container, 0px));
}

.customdesign-pdp-v2 .cdv2-option-header-toggle:focus:not(:focus-visible),
.customdesign-pdp-v2 .cdv2-option-header-toggle *:focus,
.customdesign-pdp-v2 .cdv2-option-header-toggle *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.cdv2-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-blue, #00446a);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.customdesign-pdp-v2 .cdv2-option.selected .cdv2-step-number {
    background: var(--bs-accent-color, #ec6608);
}

.customdesign-pdp-v2 .cdv2-option-label-wrap,
.customdesign-pdp-v2 .cdv2-option-label,
.customdesign-pdp-v2 .prod_option label.optionlist.cdv2-option-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    min-width: 0;
    position: relative;
}

.customdesign-pdp-v2 .cdv2-option-label-text {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1.4;
}

.customdesign-pdp-v2 .cdv2-option-label-wrap::before,
.customdesign-pdp-v2 .cdv2-option-label::before,
.customdesign-pdp-v2 .prod_option label.optionlist.cdv2-option-label::before {
    display: none !important;
}

/* Aufklapp-Pfeil: eigenes Flex-Geschwister der Kopfzeile (nicht mehr im Toggle-Button/Label
   verschachtelt), damit sich das Hilfe-Icon zwischen Titel und Pfeil einreihen kann und der
   Pfeil trotzdem ganz am rechten Zeilenrand bleibt. */
.customdesign-pdp-v2 .cdv2-option-chevron {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid var(--bs-blue-gray, #4a6886) !important;
    border-bottom: 2px solid var(--bs-blue-gray, #4a6886) !important;
    transform: rotate(45deg) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
    background: none !important;
}

.customdesign-pdp-v2 .cdv2-option.expanded .cdv2-option-chevron {
    transform: rotate(-135deg) !important;
}

.customdesign-pdp-v2 .prod_option.selected .cdv2-option-chevron {
    border-right: 2px solid var(--bs-blue, #00446a) !important;
    border-bottom: 2px solid var(--bs-blue, #00446a) !important;
}

/* Konfigurator-Option: Hilfe-Tooltip (i) neben Titel — Klick toggelt nicht das Accordion (button in customoptions.js ausgenommen) */
.customdesign-pdp-v2 .cdv2-option-help-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.customdesign-pdp-v2 .cdv2-option-help {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(74, 104, 134, 0.35);
    border-radius: 50%;
    background: var(--bs-blue-light, #f0f6fa);
    color: var(--bs-blue, #00446a);
    /* wie .pdp-hint-trigger__icon (Lieferzeit/Garantie) in _product.less / customdesign-sections.css */
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Hover/Open: nur Invert-Fill — Fokus getrennt (sonst Doppelrand mit Shop-Ring). */
.customdesign-pdp-v2 .cdv2-option-help:hover,
.customdesign-pdp-v2 .cdv2-option-help.cdv2-option-help--open {
    background: var(--bs-blue, #00446a);
    border-color: var(--bs-blue, #00446a);
    color: #fff;
    outline: none;
}

/* Tastatur-Fokus: Shop-Standard-Ring (outline + Offset + weisser Inset) stapelt sich mit
 * der Kreis-Border zu Doppelkontur. Opt-out via bs-kb-focus-none + weicher Schein. */
html body.customdesign-pdp-v2 .cdv2-option-help:focus-visible {
    background: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.18) !important;
}

html body.customdesign-pdp-v2 .cdv2-option-help:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.customdesign-pdp-v2 .cdv2-option-help-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: 30;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid rgba(74, 104, 134, 0.2);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 68, 106, 0.12);
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-blue-gray, #4a6886);
    text-align: left;
    white-space: normal;
}

.customdesign-pdp-v2 .cdv2-option-help-popover[hidden] {
    display: none !important;
}

/* Overflow der Karte waehrend geoeffnetem Popover aufheben (Karte hat sonst overflow:hidden fuer
   die abgerundeten Ecken, siehe .customdesign-pdp-v2 .cdv2-option oben) — Klasse wird von
   cdv2-option-help.js beim Oeffnen/Schliessen auf .cdv2-option gesetzt/entfernt. */
.customdesign-pdp-v2 .cdv2-option.cdv2-option-help-open {
    overflow: visible;
}

.customdesign-pdp-v2 .cdv2-input-box {
    padding: 0 20px 16px;
    margin: 0 !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    transition: padding-bottom 0.26s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Zugeklappt: keine feste 40px-Höhe (schneidet Swatches ab); Liste ohne Auswahl per max-height/opacity weich */
.customdesign-pdp-v2 .prod_option.reduced .cdv2-input-box {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
}

.customdesign-pdp-v2 .prod_option.reduced:not(.selected) .cdv2-input-box .options-list {
    display: grid !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.28s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.2s ease, margin 0.2s ease, gap 0.2s ease !important;
}

.customdesign-pdp-v2 .prod_option.expanded .cdv2-input-box .options-list {
    max-height: 3200px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: max-height 0.32s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.22s ease 0.03s !important;
}

@media (prefers-reduced-motion: reduce) {
    .customdesign-pdp-v2 .cdv2-input-box,
    .customdesign-pdp-v2 .prod_option.reduced:not(.selected) .cdv2-input-box .options-list,
    .customdesign-pdp-v2 .prod_option.expanded .cdv2-input-box .options-list {
        transition-duration: 0.01ms !important;
    }
}

.customdesign-pdp-v2 .prod_option.reduced:not(.selected) .cdv2-choose-hint {
    margin-bottom: 0;
}

.customdesign-pdp-v2 .prod_option.reduced:not(.selected) .cdv2-input-box {
    padding-bottom: 14px;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-choose-hint {
    display: none !important;
}

.customdesign-pdp-v2 .prod_option.expanded .cdv2-input-box {
    height: auto !important;
    overflow: visible !important;
}

.cdv2-choose-hint {
    font-size: 13px;
    color: var(--bs-blue-gray, #4a6886);
    display: block;
    margin-bottom: 12px;
}

/* Option cards grid */

.cdv2-options-grid,
.customdesign-pdp-v2 .options-list.grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cdv2-option-card,
.customdesign-pdp-v2 .options-list li.cdv2-option-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: max(12px, var(--bs-radius-container, 0px));
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #e8f4fc;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/* Fokus: weicher Schein statt Outline+Offset+Inset (sonst Doppelrand mit Karten-Border). */
html body.customdesign-pdp-v2 .cdv2-option-card:focus-visible,
html body.customdesign-pdp-v2 .options-list li.cdv2-option-card:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.18) !important;
}

html body.customdesign-pdp-v2 .cdv2-option-card:focus:not(:focus-visible),
html body.customdesign-pdp-v2 .options-list li.cdv2-option-card:focus:not(:focus-visible) {
    outline: none !important;
}

.customdesign-pdp-v2 .prod_option.expanded .options-list li.cdv2-option-card {
    display: block !important;
}

/* Zugeklappt + Auswahl: eine Zeile, volle Breite, kein Kartenrahmen, Text nicht abschneiden */
.customdesign-pdp-v2 .prod_option.selected.reduced {
    overflow: visible !important;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-input-box .options-list {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .options-list li.cdv2-option-card {
    display: none;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .options-list li.cdv2-option-card.active,
.customdesign-pdp-v2 .prod_option.selected.reduced .options-list li.cdv2-option-card:has(> input.radio:checked) {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-card-inner,
.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card:has(> input.radio:checked) .cdv2-card-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 4px 0 8px;
    box-sizing: border-box;
    overflow: visible;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-option-img,
.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card:has(> input.radio:checked) .cdv2-option-img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin-bottom: 0;
    object-fit: contain;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-card-label,
.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card:has(> input.radio:checked) .cdv2-card-label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
    align-self: center;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-card-label label,
.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card:has(> input.radio:checked) .cdv2-card-label label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    cursor: default;
    max-width: 100%;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-card-price,
.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card:has(> input.radio:checked) .cdv2-card-price {
    font-size: 12px;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-check-indicator,
.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card:has(> input.radio:checked) .cdv2-check-indicator {
    display: none;
}

/* Nur Border — zusaetzliches box-shadow:0 0 0 1px erzeugte Doppelkontur mit border:2px. */
.cdv2-option-card.active,
.cdv2-option-card:has(> input.radio:checked) {
    border-color: var(--bs-blue, #00446a);
    box-shadow: none;
}

html body.customdesign-pdp-v2 .cdv2-option-card.active:focus-visible,
html body.customdesign-pdp-v2 .options-list li.cdv2-option-card.active:focus-visible,
html body.customdesign-pdp-v2 .cdv2-option-card:has(> input.radio:checked):focus-visible,
html body.customdesign-pdp-v2 .options-list li.cdv2-option-card:has(> input.radio:checked):focus-visible {
    border-color: var(--bs-blue, #00446a) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.18) !important;
}

.cdv2-option-card.ausschluss {
    opacity: 0.35;
    pointer-events: auto;
}

.cdv2-option-card.ausschluss .cdv2-option-img {
    filter: grayscale(100%);
}

/* Inkompatibel-Hinweis in der Karte: Desktop = Hover-Tooltip; Touch/Tablet = dauerhaft im Bildplatz */
.cdv2-ausschluss-hint {
    display: none;
}

@media (max-width: 1199px), (hover: none) {
    /* Hover-Tooltip kurz „blinkt“ auf Touch — ausblenden, Kartenhinweis nutzen */
    body.customdesign-pdp-v2 .faux-select-tooltip.error {
        display: none !important;
    }

    body.customdesign-pdp-v2 .cdv2-option-card.ausschluss {
        opacity: 1;
        background: #fdf2f2;
        border-color: #eed3d7;
    }

    body.customdesign-pdp-v2 .cdv2-option-card.ausschluss .cdv2-option-img {
        display: none !important;
    }

    body.customdesign-pdp-v2 .cdv2-option-card.ausschluss .cdv2-ausschluss-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 80px;
        margin-bottom: 8px;
        padding: 8px 6px;
        box-sizing: border-box;
        text-align: center;
        font-size: 11px;
        line-height: 1.35;
        font-weight: 600;
        color: #b94a48;
        background: #f2dede;
        border-radius: 3px;
    }

    body.customdesign-pdp-v2 .cdv2-option-card.ausschluss .cdv2-card-label {
        opacity: 0.9;
    }

    body.customdesign-pdp-v2 .prod_option.required_option .cdv2-choose-hint,
    body.customdesign-pdp-v2 .prod_option.required_option .choose_option {
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600 !important;
    }
}

@media (max-width: 767px) {
    body.customdesign-pdp-v2 .cdv2-option-card.ausschluss .cdv2-ausschluss-hint {
        min-height: 64px;
        font-size: 10px;
        padding: 6px 4px;
    }
}

.cdv2-option-card input.radio,
.customdesign-pdp-v2 .options-list li.cdv2-option-card input.radio {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.cdv2-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    position: relative;
}

.cdv2-option-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
    border-radius: 3px;
}

/*
 * Hover-Cursor auf dem Options-Vorschaubild.
 * Standard ist die Lupe (zoom-in, aus dem Theme-LESS _product.less:
 * `.option_img:hover { cursor: zoom-in }`). Ist im Custom-Design-Modul unter
 * „Produktseite (PDP) → Cursor auf Options-Vorschaubild: Finger statt Lupe"
 * der Schalter aktiv, setzt der BodyClassInjector die Klasse
 * `cdv2-opt-cursor-pointer` und der Cursor wird zum Finger (pointer).
 */
body.cdv2-opt-cursor-pointer .prod_option .option_img:hover,
body.cdv2-opt-cursor-pointer .prod_option .cdv2-option-img:hover,
body.cdv2-opt-cursor-pointer .prod_option .optImg:hover {
    cursor: pointer !important;
}

.customdesign-pdp-v2 .prod_option.expanded .cdv2-option-img,
.customdesign-pdp-v2 .options-list li.cdv2-option-card .cdv2-option-img {
    border-radius: 3px;
}

.cdv2-card-label {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cdv2-card-label label {
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-blue, #00446a);
    line-height: 1.3;
    cursor: pointer;
}

.cdv2-card-price {
    font-size: 11px;
    font-weight: 600;
    color: var(--bs-accent-color, #ec6608);
}

.cdv2-check-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bs-blue, #00446a);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.cdv2-option-card.active .cdv2-check-indicator,
.cdv2-option-card:has(> input.radio:checked) .cdv2-check-indicator {
    display: flex;
}

/* Options bottom / reset */

.cdv2-options-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: none;
    text-align: center;
    background: transparent !important;
}

.cdv2-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    border: 1px solid var(--bs-blue-light, #f0f6fa);
    border-radius: 999px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    background: #fff;
}

.cdv2-reset-btn:hover {
    border-color: var(--bs-blue, #00446a);
    color: var(--bs-blue, #00446a);
    background: var(--bs-blue-light, #f0f6fa);
}

/* focus-visible: shopweiter Override weiter unten (PDP Primary CTAs) — kein doppelter Ring */

/* Bottom ATC button (appears when fully configured) */
.cdv2-bottom-atc {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--bs-accent-color, #ec6608) !important;
    /* Theme button:hover setzt border:1px — ohne Reserve springt das Layout */
    border: 1px solid transparent !important;
    border-radius: 999px;
    padding: 14px 36px !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: background-color 0.2s ease, filter 0.2s ease;
    line-height: 1.3 !important;
    white-space: nowrap;
    box-shadow: none !important;
}
.cdv2-bottom-atc svg,
.cdv2-bottom-atc img.add-to-icons {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: #fff;
    filter: brightness(0) invert(1);
}
.cdv2-bottom-atc:hover,
.cdv2-bottom-atc:focus,
.cdv2-bottom-atc:focus-visible,
.cdv2-bottom-atc:active {
    background: #C96000 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    padding: 14px 36px !important;
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(0.96);
}

.cdv2-options-bottom--configured {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    flex-wrap: wrap;
}
.cdv2-options-bottom--configured .cdv2-bottom-atc {
    display: inline-flex;
}

/* PDP Warenkorb-Buttons: kein Wachsen/Verschieben auf Hover (Layout unter dem Button bleibt stabil) */
body.customdesign-pdp-v2 .cdv2-bottom-atc,
body.customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary,
body.customdesign-pdp-v2 .product-info-price .configure-button,
body.customdesign-pdp-v2 .box-tocart .configure-button,
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart,
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.tocart.primary {
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
body.customdesign-pdp-v2 .cdv2-bottom-atc,
body.customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary,
body.customdesign-pdp-v2 .product-info-price .configure-button,
body.customdesign-pdp-v2 .box-tocart .configure-button,
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart,
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.tocart.primary {
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
}
body.customdesign-pdp-v2 .cdv2-bottom-atc:hover,
body.customdesign-pdp-v2 .cdv2-bottom-atc:focus,
body.customdesign-pdp-v2 .cdv2-bottom-atc:focus-visible,
body.customdesign-pdp-v2 .cdv2-bottom-atc:active,
body.customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary:hover,
body.customdesign-pdp-v2 .product-info-price .configure-button:hover,
body.customdesign-pdp-v2 .box-tocart .configure-button:hover,
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart:hover:not(:disabled),
body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.tocart.primary:hover:not(:disabled) {
    transform: none !important;
    -webkit-transform: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/*
 * PDP Primary CTAs — Tastatur-Fokus ohne doppelten Ring
 * (shopweiter Default in customdesign.css: outline + inset-weiß auf button:focus-visible)
 */
html body.customdesign-pdp-v2.catalog-product-view .product-info-price .configure-button:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .product-info-price .box-tocart .action.tocart.primary:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .box-tocart .configure-button:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view #options-pricebox .box-tocart .action.primary.tocart:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view #options-pricebox .box-tocart .action.tocart.primary:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .cdv2-bottom-atc:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .cdv2-reset-btn:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .optionen-reset.cdv2-reset-btn:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .cdv2-config-help-link:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view #options-pricebox .bs-pdf-export:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view #options-pricebox .bs-pricebox-wishlist:focus-visible {
    outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}

html body.customdesign-pdp-v2.catalog-product-view .cdv2-reset-btn:focus-visible,
html body.customdesign-pdp-v2.catalog-product-view .optionen-reset.cdv2-reset-btn:focus-visible {
    border: 1px solid transparent !important;
}

html body.customdesign-pdp-v2.catalog-product-view .cdv2-config-help-link:focus-visible {
    border-color: var(--bs-blue, #00446a) !important;
}

.customdesign-pdp-v2 .cdv2-reset-btn svg,
.customdesign-pdp-v2 .cdv2-reset-btn svg *,
.customdesign-pdp-v2 .cdv2-config-help-link svg,
.customdesign-pdp-v2 .cdv2-config-help-link svg *,
.customdesign-pdp-v2 .cdv2-bottom-atc svg,
.customdesign-pdp-v2 .cdv2-bottom-atc svg *,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export svg,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export svg *,
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist svg,
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist svg * {
    pointer-events: none !important;
}

/* ----- Config Help Box ----- */

.cdv2-config-help {
    margin-top: 32px;
}

.cdv2-config-help-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--bs-blue-light, #f0f6fa);
    border: 1px solid var(--bs-blue-light, #f0f6fa);
    /* min. 12px Rundung: --bs-radius-container kann im Admin 0 sein (Fallback 12px greift dann nicht) */
    border-radius: max(12px, var(--bs-radius-container, 0px));
    overflow: hidden;
    padding: 28px 32px;
    flex-wrap: wrap;
    box-shadow: none;
}

.cdv2-config-help-text strong {
    display: block;
    font-size: 16px;
    color: var(--bs-blue, #00446a);
    margin-bottom: 4px;
}

.cdv2-config-help-text p {
    font-size: 14px;
    color: var(--bs-blue-gray, #4a6886);
    margin: 0;
}

.cdv2-config-help-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cdv2-config-help-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    text-decoration: none;
    padding: 12px 20px;
    border: 1.5px solid var(--bs-blue, #00446a);
    border-radius: 999px;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: #fff;
}

.cdv2-config-help-link:hover {
    background: var(--bs-blue, #00446a);
    color: #fff;
    border-color: var(--bs-blue, #00446a);
}

.cdv2-config-help-link svg {
    flex-shrink: 0;
}

.cdv2-config-help-link:hover svg {
    stroke: #fff;
}


/* ----- Sticky Add-to-Cart (Mobile) ----- */

.cdv2-sticky-addtocart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 -2px 12px var(--bs-blue-light, #f0f6fa);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cdv2-sticky-addtocart.visible {
    transform: translateY(0);
}

.cdv2-sticky-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
}

.cdv2-sticky-price {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    white-space: nowrap;
}

.cdv2-sticky-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    border-radius: 999px;
    background: var(--bs-accent-color, #ec6608);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
    box-shadow: 0 2px 8px rgba(236, 102, 8,.25);
}

.cdv2-sticky-btn:hover {
    background: var(--bs-accent-color-hover, #C96000);
}

/* ----- Option Warning Popup V2 ----- */

.customdesign-pdp-v2 #option-warning-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,68,106,.5);
    z-index: 200;
}

.customdesign-pdp-v2 #option-warning-wrapper[style*="display: block"],
.customdesign-pdp-v2 #option-warning-wrapper[style*="display:block"],
.customdesign-pdp-v2 #option-warning-wrapper.visible {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.customdesign-pdp-v2 #option-warning {
    background: #fff;
    border-radius: var(--bs-radius-container, 12px);
    padding: 36px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,68,106,.15);
}

.customdesign-pdp-v2 #option-warning p {
    font-size: 16px;
    color: var(--bs-blue, #00446a);
    margin-bottom: 20px;
}

.customdesign-pdp-v2 #close-option-warning {
    display: inline-block;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 700;
    background: var(--bs-blue, #00446a);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.customdesign-pdp-v2 #close-option-warning:hover {
    background: var(--bs-blue-gray, #4a6886);
}

.customdesign-pdp-v2 #close-option-warning:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ----- Option Detail Image Popup V2 ----- */

.customdesign-pdp-v2 #option-detail-img {
    position: fixed;
    z-index: 150;
    background: #fff;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,68,106,.15);
    padding: 24px;
    max-width: 420px;
}

/* Hover-Vorschau (nur Bild, ohne Aktionsleiste) */
.customdesign-pdp-v2 #option-detail-img.cdv2-option-detail-hover {
    pointer-events: none;
    padding: 14px 16px;
    max-width: min(320px, calc(100vw - 32px));
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0, 68, 106, 0.14) !important;
    transform: translate(-50%, -50%);
}

.customdesign-pdp-v2 #option-detail-img.cdv2-option-detail-hover img {
    display: block;
    max-width: 260px;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.customdesign-pdp-v2 #option-detail-img.cdv2-option-detail-hover .cdv2-option-detail-caption {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bs-blue, #00446a);
    max-width: 260px;
}

.customdesign-pdp-v2 #option-detail-img img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-radius-img, 0);
}

.customdesign-pdp-v2 #option-detail-img .option-detail-links {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.customdesign-pdp-v2 #option-detail-img .selectoption,
.customdesign-pdp-v2 #option-detail-img .closeoption {
    flex: 1;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.customdesign-pdp-v2 #option-detail-img .selectoption {
    background: var(--bs-blue, #00446a);
    color: #fff;
    border: 1px solid var(--bs-blue, #00446a);
}

.customdesign-pdp-v2 #option-detail-img .closeoption {
    background: #fff;
    color: var(--bs-blue, #00446a);
    border: 1px solid var(--bs-blue-light, #f0f6fa);
}

.customdesign-pdp-v2 #option-detail-img .icon img {
    width: 14px;
    height: 14px;
}

/* ----- Responsive: Tablet ----- */

@media (max-width: 1199px) {
    .customdesign-pdp-v2 #product-head {
        display: block !important;
    }

    .customdesign-pdp-v2 #product-head .product.media {
        position: relative !important;
        top: auto !important;
        align-self: auto !important;
        margin-bottom: 24px;
    }

    .customdesign-pdp-v2 #product-head .product-name {
        grid-column: auto !important;
    }

    .customdesign-pdp-v2 #product-head .product-info-price {
        grid-column: auto !important;
    }

    .customdesign-pdp-v2 #product-head .product.media .gallery-placeholder {
        max-width: 100%;
        border-radius: 0;
    }

    .customdesign-pdp-v2 #product-head .product.media .fotorama__wrap {
        max-width: 100% !important;
    }

    body.customdesign-pdp-v2 #product-head .product-name h1[itemprop="name"],
    body.customdesign-pdp-v2 #product-head .product-name h1 {
        font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
        max-width: none !important;
    }

    .customdesign-pdp-v2 #product-head .product-name {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .customdesign-pdp-v2 #product-head .product-info-price {
        max-width: none !important;
        margin: 0 !important;
    }

    /* Sections-PDP + V2: Produktdaten auf Tablet sichtbar halten (Grid umbrechen, kein Clip) */
    body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data {
        display: block;
        visibility: visible;
        overflow: visible;
    }

    body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata,
    body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .additional-attributes-wrapper {
        overflow: visible;
        min-width: 0;
    }

    body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .additional-attributes {
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    }

    body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .artikel_attr {
        white-space: normal;
    }

    body.customdesign-pdp-v2.customdesign-desc-sections .desc-sections-data .tabdata .artikel_attr_value {
        min-width: 0;
        overflow: visible;
    }
}

/* ----- Responsive: Tablet-only ----- */

@media (min-width: 768px) and (max-width: 1199px) {
    .customdesign-pdp-v2 #surface-color .obfl-frame {
        width: 46px !important;
        height: 46px !important;
    }

    .customdesign-pdp-v2 #surface-color .obfl-more {
        width: 46px;
        height: 46px;
    }

    .customdesign-pdp-v2 #surface-color::before {
        font-size: 14px !important;
    }

    .customdesign-pdp-v2 #product-head .product-name .herstellerlogo {
        height: 58px !important;
        max-width: 140px !important;
    }

    .customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary,
    .customdesign-pdp-v2 .product-info-price .configure-button,
    .customdesign-pdp-v2 .box-tocart .configure-button,
    body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.primary.tocart,
    body.customdesign-pdp-v2 #options-pricebox .box-tocart .action.tocart.primary {
        height: auto !important;
        overflow: visible !important;
        line-height: 1.3 !important;
        color: #fff !important;
        font-size: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .customdesign-pdp-v2 .box-tocart .add-to-icons,
    .customdesign-pdp-v2 .product-info-price .box-tocart .add-to-icons {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    /*
     * Stage-Chevrons neben dem Foto (User 26.05.2026, iPad 820px):
     * Negative left/right (-54px) clippt/hinter Thumbs — Pfeile unsichtbar.
     * Stattdessen Bild schmaler + Pfeile in den 44px-Rand links/rechts der Bühne.
     */
    .customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__stage__frame .fotorama__img {
        max-width: calc(100% - 88px) !important;
    }

    .customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr--prev {
        left: 0 !important;
        z-index: 6;
    }
    .customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__arr--next {
        right: 0 !important;
        z-index: 6;
    }
}

/* ----- Responsive: Mobile ----- */

@media (max-width: 767px) {
    body.customdesign-pdp-v2 .breadcrumbs {
        display: block !important;
        font-size: 12px !important;
        padding: 8px 15px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    body.customdesign-pdp-v2 .breadcrumbs .items {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* === MOBILE FOTORAMA: horizontal thumbnail slider below main image === */

    /* Convert vertical nav-wrap to horizontal below the stage */
    .customdesign-pdp-v2 .fotorama__nav-wrap--vertical,
    .customdesign-pdp-v2 .fotorama__nav-wrap,
    .customdesign-pdp-v2 .fotorama__nav-wrap--horizontal {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Hide thumb up/down arrows on mobile */
    .customdesign-pdp-v2 .fotorama__thumb__arr {
        display: none !important;
    }

    /* Nav container: horizontal scrollable row */
    .customdesign-pdp-v2 .fotorama__nav,
    .customdesign-pdp-v2 .fotorama__nav--thumbs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        gap: 6px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 4px 4px !important;
    }
    .customdesign-pdp-v2 .fotorama__nav::-webkit-scrollbar,
    .customdesign-pdp-v2 .fotorama__nav--thumbs::-webkit-scrollbar {
        display: none !important;
    }

    /* Nav shaft: horizontal flex row */
    .customdesign-pdp-v2 .fotorama__nav__shaft {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        position: static !important;
        width: auto !important;
        gap: 6px !important;
    }

    /* Each nav frame: small thumbnail */
    .customdesign-pdp-v2 .fotorama__nav__frame,
    .customdesign-pdp-v2 .fotorama__nav__frame--thumb {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        flex-shrink: 0 !important;
    }

    /* Remove dot pseudo-elements (no dots, only thumbnails) */
    .customdesign-pdp-v2 .fotorama__nav__frame--thumb::after {
        display: none !important;
    }

    /* Show thumbnails and images */
    .customdesign-pdp-v2 .fotorama__thumb,
    .customdesign-pdp-v2 .fotorama__nav--thumbs .fotorama__thumb,
    .customdesign-pdp-v2 .fotorama__nav__frame--thumb .fotorama__thumb {
        display: block !important;
        visibility: visible !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        border: 2px solid var(--bs-blue-light, #f0f6fa) !important;
        transition: border-color 0.2s ease !important;
    }
    .customdesign-pdp-v2 .fotorama__thumb img,
    .customdesign-pdp-v2 .fotorama__nav--thumbs img {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 4px !important;
    }

    /* Active thumbnail: blue border */
    .customdesign-pdp-v2 .fotorama__active .fotorama__thumb,
    .customdesign-pdp-v2 .fotorama__nav__frame.fotorama__active .fotorama__thumb {
        border-color: var(--bs-blue, #00446a) !important;
    }

    /* Stage: full width (horizontal thumbs below). Spezifität wie Desktop-Stage, sonst gewinnt calc(100% - 93px). */
    .customdesign-pdp-v2 #product-head .product.media .fotorama__stage {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobil: Stage-Chevrons aus — Galerie per Wischen; Lightbox behält Pfeile */
    .customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__stage .fotorama__arr--prev,
    .customdesign-pdp-v2 #product-head .fotorama:not(.fotorama--fullscreen) .fotorama__stage .fotorama__arr--next {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .customdesign-pdp-v2 #product-head .product-name {
        gap: 6px !important;
        margin-bottom: 4px !important;
    }

    /*
     * Mobil: Pills (.product-head-badges) allein in Zeile 1; danach TOPSELLER + Herstellerlogo
     * gemeinsam in Zeile 2 (Theme-float auf dem Logo würde sonst umbrechen).
     * Logo: max. 35 % Breite wie zuvor, Höhe proportional (max. Zeilenhöhe neben Pill).
     */
    .customdesign-pdp-v2 #product-head .product-name .product-head-badges {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .customdesign-pdp-v2 #product-head .product-name .topseller {
        flex: 0 1 auto;
        min-width: 0;
        align-self: center;
    }

    .customdesign-pdp-v2 #product-head .product-name > a,
    .customdesign-pdp-v2 #product-head .product-name > img.herstellerlogo {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 35% !important;
        margin-left: auto !important;
        align-self: center;
    }

    .customdesign-pdp-v2 #product-head .product-name > a .herstellerlogo {
        max-width: 100% !important;
    }

    .customdesign-pdp-v2 .product-info-price .price-container .price {
        font-size: 24px;
    }

    .customdesign-pdp-v2 .product-info-price .price-wrapper[data-price-type='finalPrice'] .price,
    .customdesign-pdp-v2 .product-info-price .minimal-price-link .price-wrapper .price {
        font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    }

    .cdv2-usp-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 14px;
    }

    .cdv2-usp-label {
        font-size: 12px;
    }

    .cdv2-config-zone {
        margin: 28px 0;
    }

    .cdv2-progress-rail {
        display: none;
    }

    .cdv2-options-with-progress {
        gap: 0;
    }

    .cdv2-usp-badge {
        padding: 6px 8px;
    }

    .customdesign-pdp-v2 .product.info.detailed {
        padding: 0;
        margin: 12px 0 0;
    }

    .customdesign-pdp-v2 #surface-color::before {
        font-size: 12px;
    }

    .customdesign-pdp-v2 #surface-color .obfl-frame {
        width: 36px;
        height: 36px;
    }

    /* Bestehende .obfl-frame-Regel oben ohne !important, wird von der Desktop-Regel (40px !important)
       ueberstimmt und bleibt real 40px (vorbestehendes Verhalten, hier bewusst nicht angefasst) —
       .obfl-more folgt deshalb der tatsaechlich gerenderten 40px-Groesse, nicht der hier deklarierten. */
    .customdesign-pdp-v2 #surface-color .obfl-more {
        width: 40px;
        height: 40px;
    }

    .cdv2-options-grid,
    .customdesign-pdp-v2 .options-list.grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
        gap: 8px !important;
    }

    .cdv2-option-img {
        width: 60px;
        height: 60px;
    }

    .cdv2-card-label label {
        font-size: 11px;
    }

    .cdv2-config-help-inner {
        flex-direction: column;
        text-align: center;
    }

    .cdv2-config-help-actions {
        flex-direction: column;
        width: 100%;
    }

    .cdv2-config-help-link {
        justify-content: center;
        width: 100%;
    }

    .cdv2-passt-perfekt-heading {
        margin: 28px 0 12px;
    }

    .cdv2-section-title {
        font-size: 22px;
    }

    .cdv2-sticky-addtocart {
        display: block;
    }

    .customdesign-pdp-v2 #product-head .product-name .herstellerlogo {
        float: none !important;
        display: block;
        height: auto !important;
        max-height: 56px !important;
        width: auto !important;
        max-width: 35% !important;
        object-fit: contain;
    }

    .cdv2-config-help {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cdv2-config-help-inner {
        padding: 20px;
        border-radius: max(12px, var(--bs-radius-container, 0px));
        overflow: visible !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cdv2-config-help-link {
        border-radius: 999px;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 380px) {
    .cdv2-options-grid,
    .customdesign-pdp-v2 .options-list.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .cdv2-option-img {
        width: 50px;
        height: 50px;
    }
    .cdv2-card-label label {
        font-size: 10px;
    }
}

/* Desktop: hide sticky addtocart by default */
@media (min-width: 768px) {
    .cdv2-sticky-addtocart {
        display: none !important;
    }
}

/* ----- Steps counter update (JS-driven) ----- */

.customdesign-pdp-v2 .prod_option.selected .cdv2-step-number {
    background: var(--bs-accent-color, #ec6608);
}

/* ----- GPSR tab hidden only on sections layout (content moved to sidebar rightboxes) ----- */

.customdesign-pdp-v2.customdesign-desc-sections .product.data.items > .item.title#tab-label-product-gpsr {
    display: none !important;
}

.customdesign-pdp-v2.customdesign-desc-sections .product.data.items > .item.content#product-gpsr {
    display: none !important;
}

/* ----- Footnotes refinement ----- */

.customdesign-pdp-v2 .footnotes {
    margin-top: 48px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    color: var(--bs-blue-gray, #4a6886);
    border: none;
}

@media (max-width: 767px) {
    .customdesign-pdp-v2 .footnotes {
        margin-top: 20px;
    }
}

/* Breadcrumbs: shop-wide in customdesign.css (body:not(.checkout-index-index) .page-wrapper .breadcrumbs) */

/* ----- Global PDP refinements ----- */

.customdesign-pdp-v2 .column.main {
    padding-bottom: 48px;
}

/* Zahlungsarten-Logos sichtbar lassen */

/* Product badges — pill design matching category listing */
.customdesign-pdp-v2 .product-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    pointer-events: none;
}

.customdesign-pdp-v2 .product-labels .product-label {
    border-radius: 999px !important;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
    pointer-events: auto;
    border: none !important;
    background: var(--bs-blue, #00446a);
    color: #fff;
}

.customdesign-pdp-v2 .product-labels .product-label[class*="sale"],
.customdesign-pdp-v2 .product-labels .product-label[class*="aktion"],
.customdesign-pdp-v2 .product-labels .product-label[class*="special"],
.customdesign-pdp-v2 .product-labels .product-label[class*="rabatt"],
.customdesign-pdp-v2 .product-labels .product-label[class*="price"] {
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
}

/* Topseller badge — pill style, inline with logo */
.customdesign-pdp-v2 #product-head .topseller {
    display: inline-block;
    border-radius: 999px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--bs-blue, #00446a);
    color: #fff !important;
    border: none !important;
    text-align: center;
    margin-bottom: 0;
}

/*
 * NEU-Label im Produktkopf: Pill-Form wie .topseller, jedoch in Akzent-Orange
 * (kontrastiert zum dunkelblauen "TOPSELLER" und nutzt die Marken-Akzentfarbe).
 * Der ursprüngliche <img class="label" alt="Neu"> wird ausgeblendet,
 * der Text "NEU" kommt aus dem ::before des .productlabel-Wrappers.
 * Andere bw_versandlabel-Werte (z. B. Aktion) bleiben unberührt.
 */
.customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Neu" i]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.customdesign-pdp-v2 #product-head .product-head-badges .productlabel img.label[alt="Neu" i] {
    display: none !important;
}
.customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Neu" i])::before {
    content: 'NEU';
    display: inline-block;
    border-radius: 999px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
    border: none;
    line-height: 1;
    text-align: center;
}

/* Pills im Produktkopf nebeneinander mit Abstand (Desktop-Basis; Tablet/Mobile haben eigene Regeln weiter unten) */
.customdesign-pdp-v2 #product-head .product-head-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/*
 * EXPRESS im Produktkopf: Icon BEHALTEN und Text „EXPRESS“ dahinter (User-Wunsch: Icon allein wird nicht verstanden).
 * Pill-Optik (weiß, Rand) wie das EXPRESS-Pill auf der Kategorieseite, Icon bleibt links sichtbar.
 */
.customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Express" i]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 6px 18px 6px 12px;
    background: #fff;
    border: 1.5px solid rgba(0, 68, 106, 0.3);
    line-height: 1;
}
.customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Express" i]) img.label[alt="Express" i] {
    display: block;
    height: 18px;
    width: auto;
}
.customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Express" i])::after {
    content: 'EXPRESS';
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--bs-blue, #00446a);
    line-height: 1;
}

/* Mobil + Tablet: EXPRESS-Pill ohne LKW-Icon (nur Text) — auf kleinen Screens sonst zu viel */
@media (max-width: 1199px) {
    .customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Express" i]) img.label[alt="Express" i] {
        display: none;
    }
    .customdesign-pdp-v2 #product-head .product-head-badges .productlabel:has(img.label[alt="Express" i]) {
        gap: 0;
        padding: 6px 16px;
    }
}

/* „Vorkonfiguriert“-Pill im Produktkopf — dunkelblau wie auf der Kategorieseite; order:5 → hinter EXPRESS (Reihenfolge wie PLP) */
.customdesign-pdp-v2 #product-head .product-head-badges .cdv2-head-pill--vorkonfiguriert {
    order: 5;
    display: inline-block;
    border-radius: 999px;
    padding: 8px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--bs-blue, #00446a);
    color: #fff;
    border: none;
    line-height: 1;
    text-align: center;
}

/* PayPal Express button on PDP — ensure no clipping */
.customdesign-pdp-v2 #solutioo-paypal-express-container {
    margin-top: 12px;
    overflow: visible !important;
}

/* Special-price label in gallery — pill style */
.customdesign-pdp-v2 .gallery-placeholder .specialpricelabel {
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.3px;
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
    border: none;
}

/* ---- PDF-Export Button ---- */
.customdesign-pdp-v2 .bs-pdf-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    background: var(--bs-blue-light, #f0f6fa);
    border: 1px solid var(--bs-blue-light, #b8d4e8);
    border-radius: var(--bs-radius-buttons, 8px);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    line-height: 1.4;
}
/* Blaue Preisbox: identisch zu „Artikel merken" (.bs-pricebox-wishlist) – weisser Pill mit blauer Schrift/Icon */
body.customdesign-pdp-v2 #options-pricebox a.bs-pdf-export,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin: 12px 0 0 !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    border: 1.5px solid #dce3ea !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1.3 !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export svg {
    flex-shrink: 0 !important;
    color: var(--bs-blue, #00446a) !important;
    stroke: var(--bs-blue, #00446a) !important;
    pointer-events: none !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export svg * {
    pointer-events: none !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export *:focus,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export *:focus-visible,
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist *:focus,
body.customdesign-pdp-v2 #options-pricebox .bs-pricebox-wishlist *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export:hover {
    border-color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
}
.customdesign-pdp-v2 .bs-pdf-export:hover {
    background: #e0eef6;
    border-color: var(--bs-blue, #00446a);
    color: var(--bs-blue, #00446a);
    text-decoration: none;
}
.customdesign-pdp-v2 .bs-pdf-export svg {
    flex-shrink: 0;
}

/* Disabled-Zustand: Solange das konfigurierbare Produkt nicht vollständig
   konfiguriert ist (alle Super-Attribute gewählt), ist der Button ausgegraut
   und ignoriert Klicks. Das JS hängt nach Auswahl die richtige Variant-ID an
   die URL und entfernt diese Klasse. */
.customdesign-pdp-v2 .bs-pdf-export.is-disabled,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: auto;
    background: #eef2f5 !important;
    border-color: #d4dbe2 !important;
    color: #7a8a96 !important;
}
.customdesign-pdp-v2 .bs-pdf-export.is-disabled:hover,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export.is-disabled:hover {
    background: #eef2f5 !important;
    border-color: #d4dbe2 !important;
    color: #7a8a96 !important;
    text-decoration: none !important;
}
.customdesign-pdp-v2 .bs-pdf-export.is-disabled svg,
body.customdesign-pdp-v2 #options-pricebox .bs-pdf-export.is-disabled svg {
    color: #7a8a96 !important;
    stroke: #7a8a96 !important;
}

/* ---- Herstellerinfo / Rabatthinweis-Balken: Pill-Shape + Spacing ---- */
.customdesign-pdp-v2 .hint-orange-framed {
    border-radius: 9999px !important;
    margin: 16px 0 !important;
    padding: 12px 24px !important;
}

body.customdesign-pdp-v2 .zahlungsarten-overlay {
    display: none !important;
}

/* =====================================================
   Entwurf speichern & Rabatt sichern – Draft Save
   ===================================================== */

/* --- Section Container --- */
.cdv2-draft-section {
    margin: 24px 0 16px;
}

/* --- Discount Tiers Box --- */
.cdv2-discount-tiers-box {
    border: 2px solid var(--bs-blue-gray, #4a6886);
    border-radius: var(--bs-border-radius-containers, 12px);
    padding: 20px 24px;
    margin-bottom: 16px;
    background: #fff;
}

.cdv2-tiers-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cdv2-tiers-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.35;
    color: var(--bs-blue, #00446a);
}

.cdv2-tiers-title strong {
    font-weight: 700;
    font-size: 17px;
}

.cdv2-action-name {
    color: var(--bs-accent-color, #ec6608);
    font-weight: 600;
    font-size: 15px;
}

/* --- Countdown --- */
.cdv2-countdown {
    display: flex;
    gap: 6px;
}

.cdv2-countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
}

.cdv2-countdown-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--bs-blue, #00446a);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    border-radius: 6px;
}

.cdv2-countdown-label {
    font-size: 11px;
    color: var(--bs-blue-gray, #4a6886);
    margin-top: 3px;
    text-transform: capitalize;
}

/* --- Tier Rows --- */
.cdv2-tiers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cdv2-tier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--bs-blue-gray, #4a6886);
    transition: all 0.2s ease;
}

.cdv2-tier-row.cdv2-tier-active {
    color: var(--bs-blue, #00446a);
    font-weight: 600;
    background: rgba(0, 68, 106, 0.04);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 -10px;
}

.cdv2-tier-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--bs-blue-gray, #4a6886);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.cdv2-tier-radio.cdv2-tier-radio-active {
    border-color: var(--bs-accent-color, #ec6608);
}

.cdv2-tier-radio.cdv2-tier-radio-active::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    background: var(--bs-accent-color, #ec6608);
    border-radius: 50%;
}

.cdv2-tier-label {
    flex: 0 0 auto;
    min-width: 100px;
}

.cdv2-tier-discount {
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    font-family: 'Montserrat', sans-serif;
}

.cdv2-tier-active .cdv2-tier-discount {
    color: var(--bs-accent-color, #ec6608);
}

.cdv2-tier-badge {
    display: inline-block;
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: auto;
    white-space: nowrap;
}

/* --- Urgency Box --- */
.cdv2-urgency-box {
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 16px;
}

.cdv2-urgency-text {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--bs-blue, #00446a);
}

.cdv2-urgency-subtext {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--bs-blue-gray, #4a6886);
    line-height: 1.5;
}

.cdv2-draft-trigger-link {
    color: var(--bs-accent-color, #ec6608) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 600;
}

.cdv2-draft-trigger-link:hover {
    color: var(--bs-accent-color-hover, #c96000) !important;
}

.cdv2-urgency-info-link {
    color: var(--bs-accent-color, #ec6608) !important;
    font-size: 13px;
    text-decoration: none;
}

.cdv2-urgency-info-link:hover {
    text-decoration: underline;
}

/* --- Save Draft Button --- */
.cdv2-draft-save-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: #fff;
    color: var(--bs-blue, #00446a);
    border: 2px solid var(--bs-blue, #00446a);
    border-radius: var(--bs-border-radius-buttons, 8px);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.cdv2-draft-save-btn:hover {
    background: var(--bs-blue-light, #f0f6fa);
}

/* --- Share Row --- */
.cdv2-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--bs-blue-gray, #4a6886);
}

.cdv2-share-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.cdv2-share-whatsapp:hover {
    background: #f5f5f5;
}

/* =====================================================
   Draft Modal
   ===================================================== */
.cdv2-draft-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cdv2-draft-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    padding: 32px 28px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.cdv2-draft-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--bs-blue-gray, #4a6886);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.cdv2-draft-modal-close:hover {
    color: var(--bs-blue, #00446a);
}

.cdv2-draft-modal-text {
    font-size: 15px;
    color: var(--bs-blue, #00446a);
    line-height: 1.5;
    margin: 0 0 20px;
    text-align: center;
}

.cdv2-draft-input-wrap {
    margin-bottom: 16px;
}

.cdv2-draft-email-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Quicksand', sans-serif;
    color: var(--bs-blue, #00446a);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.cdv2-draft-email-input:focus {
    border-color: var(--bs-accent-color, #ec6608);
}

.cdv2-draft-email-input.cdv2-input-error {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

.cdv2-draft-email-input::placeholder {
    color: #a0aec0;
}

.cdv2-draft-submit-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.cdv2-draft-submit-btn:hover {
    background: var(--bs-accent-color-hover, #c96000);
}

.cdv2-draft-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cdv2-draft-or-divider {
    text-align: center;
    margin: 16px 0;
    color: var(--bs-blue-gray, #4a6886);
    font-size: 13px;
}

.cdv2-draft-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    cursor: pointer;
    transition: background 0.2s;
}

.cdv2-draft-whatsapp-btn:hover {
    background: #f0faf0;
    border-color: #25D366;
}

.cdv2-draft-privacy {
    text-align: center;
    font-size: 12px;
    color: var(--bs-blue-gray, #4a6886);
    margin: 16px 0 0;
    line-height: 1.5;
}

.cdv2-draft-privacy a {
    color: var(--bs-blue-gray, #4a6886);
    text-decoration: underline;
}

/* --- Success View --- */
.cdv2-draft-modal-success {
    text-align: center;
}

.cdv2-draft-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cdv2-draft-modal-success h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    margin: 0 0 8px;
}

.cdv2-draft-modal-success p {
    font-size: 14px;
    color: var(--bs-blue-gray, #4a6886);
    margin: 0 0 16px;
    line-height: 1.5;
}

.cdv2-draft-success-coupon {
    display: inline-block;
    padding: 12px 28px;
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.cdv2-draft-success-expires {
    font-size: 13px;
    color: var(--bs-blue-gray, #4a6886);
}

.cdv2-draft-modal-done {
    display: inline-block;
    padding: 12px 32px;
    background: var(--bs-blue, #00446a);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.cdv2-draft-modal-done:hover {
    background: #003355;
}

/* body scroll lock when modal is open */
body.cdv2-modal-open {
    overflow: hidden !important;
}

/* --- Responsive (mobile) --- */
@media (max-width: 767px) {
    .cdv2-discount-tiers-box {
        padding: 16px;
    }

    .cdv2-tiers-header {
        flex-direction: column;
        gap: 12px;
    }

    .cdv2-countdown {
        align-self: flex-start;
    }

    .cdv2-tier-row {
        font-size: 13px;
        gap: 8px;
    }

    .cdv2-tier-label {
        min-width: 80px;
    }

    .cdv2-draft-modal {
        padding: 24px 20px;
    }

    .cdv2-share-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Downloads-Kopf: kein Tab-Zeilen-Padding — pdp.css lädt nach responsive; #producttabs#producttabs erhöht Spezifität gegen Tab-Fallback !important */
@media (max-width: 1199px) {
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .downloads > .cd-downloads-toggle,
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .right-box.downloads > .cd-downloads-toggle,
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .rightbox .downloads > .cd-downloads-toggle,
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .rightbox .right-box.downloads > .cd-downloads-toggle {
        padding: 0 !important;
        min-height: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PDP V2 — Markenlogo (.herstellerlogo) auf Mobile/Tablet
   User-Wish 2026-05-19 16:57: Mobil war Logo „weg", Tablet hatte Logo in eigener
   Zeile über dem H1. Fixes/Verhalten:

   Mobil (≤767px):
   ────────────
   Ursache des fehlenden Logos waren ZWEI Effekte, die zusammen 0×0 ergaben:
   (1) Markup ist <a><img class="herstellerlogo" .../></a> (Helper:Productdata::getLogoHtml
       wrappt in <a>, sobald Hersteller-URL gepflegt — z. B. Pelipal → /pelipal-badmoebel).
       Die Mobil-Regel `.product-name > a` hatte `max-width: 35 %` (≈125 px bei 358 px-
       Spaltenbreite), die Regel `.product-name > a .herstellerlogo` setzte für das
       innere img `max-width: 100 %` — Prozent eines Containers, dessen Breite selbst
       wieder aus Content-Größe abgeleitet wird → verschachtelte %-Berechnung, in der
       Praxis collabiert.
   (2) Bei SVG-Logos OHNE intrinsische Breite/Höhe (nur viewBox; Pelipal.svg, Burgbad.svg
       etc.) ergibt CSS `width: auto !important; height: auto !important` ein leeres
       intrinsisches Format (Chrome rendert 300×150, Safari/iOS oft 0×0). Die HTML-
       Attribute `width="120" height="50"` werden vom CSS-`auto` überschrieben.

   Fix: das Logo bekommt eine EXPLIZITE Pixel-Höhe (50 px) und feste max-Breite
   (140 px) statt `height: auto` + `max-width: 35 %` — keine verschachtelte
   %-Berechnung mehr, und der SVG-Renderer hat eine definite Dimension.

   Tablet (768–1199px):
   ─────────────────
   Vorher hatte das H1 vom Desktop-Block `order: 2; flex-basis: 100 %` (Z. 703-713)
   geerbt und die Mobil-`.product-name > a`-Regel hatte nur `order: 1; margin-left:auto`
   → Logo landete in einer eigenen Zeile RECHTS, H1 darunter über volle Breite.
   User-Wish: Logo + H1 in EINER Zeile, H1 nimmt Restplatz und bricht um falls nötig.

   Fix: H1 auf Tablet → `order: 1; flex: 1 1 0; flex-basis: 0; word-break: break-word`
   (Restplatz, darf umbrechen). Logo (Link/Img) → `order: 2; flex: 0 0 auto; margin-
   left: auto; align-self: flex-start` (rechts oben neben H1-Erstzeile). Logo-Höhe
   58 px (Bestand aus Z. 3294-3297).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile: Logo sichtbar machen (explizite Pixel-Dim statt auto + verschachteltem %) */
@media (max-width: 767px) {
    /* Logo-Wrapper (<a>): feste max-Breite 100 px statt 35 %; kein flex-shrink.
       User-Wunsch 19.05.2026 17:17: „mach das markenlogo auf mobil kleiner. 100px breite reicht" — Wert von 140 auf 100 reduziert.
       19.05.2026 17:24: zusätzlich rechtes Margin, damit das Logo nicht visuell bis an den 20-px-Padding-Innenrand der .page-main stößt (User: „das markenlogo reicht auf mobil ins padding rechts"). margin-left:auto pusht weiter komplett nach rechts, margin-right: 8px reserviert konstante Luft zur Padding-Kante. */
    body.customdesign-pdp-v2 #product-head .product-name > a,
    body.customdesign-pdp-v2 #product-head .product-name > img.herstellerlogo {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100px !important;
        margin-left: auto !important;
        margin-right: 8px !important;
        align-self: center !important;
    }

    body.customdesign-pdp-v2 #product-head .product-name > a {
        display: inline-block !important;
        line-height: 0 !important;
    }

    /* Logo-Bild: feste Höhe 50 px (SVG ohne intrinsische Dim braucht definite height);
       max-width 100 px (User-Wunsch); object-fit: contain sorgt für proportionales
       Skalieren innerhalb des 100×50-Box (kein Verzerren bei abweichender Aspect-Ratio). */
    body.customdesign-pdp-v2 #product-head .product-name > a .herstellerlogo,
    body.customdesign-pdp-v2 #product-head .product-name > img.herstellerlogo,
    body.customdesign-pdp-v2 #product-head .product-name .herstellerlogo {
        float: none !important;
        display: block !important;
        height: 50px !important;
        max-height: 50px !important;
        width: auto !important;
        max-width: 100px !important;
        object-fit: contain !important;
    }
}

/* Tablet: Pills (TOPSELLER, .product-head-badges) ueber Produktnamen + Logo neben H1
 * User-Anfrage 20.05.2026 (vor Datei-Loeschung 21.05.2026 rekonstruiert 21.05.2026 16:45
 * mit iPad-Air-Screenshot 820x1180): „Auf Tablet, die pills wie Topseller UEBER den
 * produktnamen (NUR AUF TABLET). Produktname in einer Zeile mit Hertsellerlogo. Im
 * Zweifel wenn Produktname zu lang, in zwei Zeilen umbrechen. Und mehr Abstand zwischen
 * Herstellerlogo und dem orangenen Kreis mit Rabatt".
 *
 * DOM-Reihenfolge in `.product-name` (head_name.phtml Z. 25-28):
 *   1. <div class="product-head-badges"> (z. B. -39%, "Neu", Promo-Labels)
 *   2. <div class="topseller">Topseller</div> (nur wenn is_topseller())
 *   3. <a href="..."> mit <img class="herstellerlogo">
 *   4. <h1 itemprop="name">
 *
 * Layout-Strategie via Flex `order` + `flex: 1 0 100%`:
 *   - Pills + Topseller: order 0, eigene 100%-Zeile (oberhalb), Default-DOM-Reihenfolge.
 *   - H1: order 1, `flex: 1 1 0` (Restplatz, darf umbrechen).
 *   - Logo: order 2, `flex: 0 0 auto`, `margin-left: auto` (rechts neben H1-Erstzeile).
 * Mehr `margin-bottom` an `.product-name` → mehr Vertikal-Abstand zur darunter
 * platzierten `.product-info-price` (mit der Discount-Bubble `.rabatt.labelpfeil`,
 * die `position: absolute; top: -18px; right` haengt — Default-margin 12px war zu wenig). */
@media (min-width: 768px) and (max-width: 1199px) {
    /* CSS Grid loest das Pill-Wrap-Problem sauber: Flex `flex: 1 0 100%` zusammen
     * mit `max-width: max-content` (notwendig damit die Pille nicht auf 100% Breite
     * gestretcht wird und nur als kleine Pille gerendert wird) clasht — die Pille
     * bleibt schmal UND erzwingt keinen Wrap. Mit Grid bekommt die `pills`-Zone eine
     * eigene Zeile, `.topseller`/`.product-head-badges` bleiben innerhalb dieser Zone
     * intrinsisch klein (links angeordnet via `justify-self: start`). */
    body.customdesign-pdp-v2 #product-head .product-name {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "pills pills"
            "title logo" !important;
        column-gap: 16px !important;
        row-gap: 8px !important;
        align-items: start !important;
        margin-bottom: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* User-Anfrage 26.05.2026: Logo darf nicht in .page-main-Padding ragen (wie Mobil margin-right: 8px). */
        padding-right: 8px !important;
    }

    body.customdesign-pdp-v2 #product-head .product-name .product-head-badges {
        grid-area: pills !important;
        justify-self: start !important;
        align-self: start !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body.customdesign-pdp-v2 #product-head .product-name .topseller {
        grid-area: pills !important;
        justify-self: start !important;
        align-self: start !important;
        width: auto !important;
        max-width: max-content !important;
        margin: 0 !important;
    }

    /* Falls BEIDE (Pills-Container + Topseller) vorhanden sind, sollen sie
     * nebeneinander in derselben Pills-Zeile sitzen — Grid `grid-area: pills`
     * auf beiden uebereinander stapelt sie. Loesung: `.product-head-badges` mit
     * `grid-column: 1 / 2`, `.topseller` mit `grid-column: 2 / 3`. Aktuell ist
     * meist nur eines aktiv (Topseller ODER Pills-Labels), daher reicht auch
     * `grid-area: pills` fuer beide; falls beide auftauchen, ueberlagern sie sich,
     * was unschoen ist — kann bei Bedarf nachjustiert werden. */

    body.customdesign-pdp-v2 #product-head .product-name h1[itemprop="name"],
    body.customdesign-pdp-v2 #product-head .product-name h1 {
        grid-area: title !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    body.customdesign-pdp-v2 #product-head .product-name > a,
    body.customdesign-pdp-v2 #product-head .product-name > img.herstellerlogo {
        grid-area: logo !important;
        justify-self: end !important;
        align-self: start !important;
        margin: 0 !important;
        max-width: min(140px, 100%) !important;
        min-width: 0 !important;
    }

    body.customdesign-pdp-v2 #product-head .product-name > a {
        display: inline-block !important;
        line-height: 0 !important;
    }

    /* Logo-Bild: feste Höhe 58 px (Bestand), max-width 140 px (Bestand); SVG ohne
       intrinsische Dim braucht definite height. */
    body.customdesign-pdp-v2 #product-head .product-name > a .herstellerlogo,
    body.customdesign-pdp-v2 #product-head .product-name > img.herstellerlogo,
    body.customdesign-pdp-v2 #product-head .product-name .herstellerlogo {
        display: block !important;
        height: 58px !important;
        max-height: 58px !important;
        width: auto !important;
        max-width: 140px !important;
        object-fit: contain !important;
        float: none !important;
    }
}

/* Merklisten-Preis-Lock — PDP-Hinweis in der Options-Preisbox */
.cd-wishlist-lock-hint-pdp {
    margin: 12px 0 0;
}

body.customdesign-pdp-v2 #options-pricebox .cd-wishlist-lock-hint-pdp {
    margin-top: 14px;
}

.cd-wishlist-lock-hint-pdp.cd-wishlist-lock-hint-pdp--eligible .cd-wishlist-lock-price__hint {
    margin-bottom: 6px;
}

/* Legacy-Klasse (falls noch referenziert) */
.cd-wishlist-lock-hint {
    margin: 10px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #1b3a4b;
    background: #eef5fa;
    border: 1px solid #dce8f0;
    border-radius: 6px;
}

/* Einfache Artikel: Hinweis unter „Artikel merken“ / „Frage zum Produkt“ (volle Breite der Preisbox) */
.catalog-product-view .product-info-price > .cd-wishlist-lock-hint {
    clear: both;
    width: 100%;
    box-sizing: border-box;
}