/* ============================================================
   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;
    grid-template-columns: var(--cdv2-gallery-ratio, 60%) 1fr;
    gap: 0 48px;
    align-items: start;
    margin-bottom: 48px;
}

.customdesign-pdp-v2 #product-head .product.media {
    grid-column: 1;
    grid-row: 1 / 20;
    position: sticky;
    top: 20px;
}

.customdesign-pdp-v2 #product-head .product.media .gallery-placeholder {
    border-radius: var(--bs-radius-img, 12px);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,68,106,.06);
}

.customdesign-pdp-v2 #product-head .product.media .fotorama__stage {
    border-radius: var(--bs-radius-img, 12px);
}

/* Gallery thumbnails – larger, rounded, better spacing */
.customdesign-pdp-v2 .fotorama__nav--thumbs .fotorama__nav__frame {
    padding: 4px !important;
}

.customdesign-pdp-v2 .fotorama__nav--thumbs .fotorama__thumb {
    border-radius: var(--bs-radius-img, 12px);
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

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

.customdesign-pdp-v2 .fotorama__nav--thumbs {
    height: auto !important;
}

/* Surface color swatches – styled with hint text */
.customdesign-pdp-v2 #surface-color {
    border: 1px solid var(--bs-blue-light, #f0f6fa);
    border-radius: var(--bs-radius-container, 12px);
    padding: 12px 16px;
    margin: 16px 0;
    color: var(--bs-blue-gray, #4a6886);
    line-height: 33px;
    cursor: pointer;
    background: var(--bs-blue-light, #f0f6fa);
    transition: border-color 0.2s ease;
    position: relative;
}

.customdesign-pdp-v2 #surface-color:hover {
    border-color: var(--bs-blue-gray, #4a6886);
}

.customdesign-pdp-v2 #surface-color::after {
    content: 'Individuell konfigurierbar – weitere Farben & Fronten verfügbar';
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-blue-gray, #4a6886);
    margin-top: 6px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.customdesign-pdp-v2 #surface-color .obfl {
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.customdesign-pdp-v2 #surface-color .obfl:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,68,106,.15);
}

/* Product-name area */
.customdesign-pdp-v2 #product-head .product-name {
    grid-column: 2;
    margin-bottom: 12px;
}

.customdesign-pdp-v2 #product-head .product-name h1 {
    font-size: var(--bs-font-size-h2, 26px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--bs-blue, #00446a);
}

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

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

.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);
}

.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: var(--bs-radius-btn, 8px);
    background: var(--bs-accent-color, #E8740C);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(232,116,12,.25);
}

.customdesign-pdp-v2 .product-info-price .box-tocart .action.tocart.primary:hover {
    background: var(--bs-accent-color-hover, #C96000);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232,116,12,.3);
}

.customdesign-pdp-v2 .product-info-price .product-addto-links {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}

.customdesign-pdp-v2 .product-info-price .product-addto-links a {
    font-size: 14px;
    color: var(--bs-blue, #00446a);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    transition: color 0.15s ease;
}

.customdesign-pdp-v2 .product-info-price .product-addto-links a:hover {
    color: var(--bs-accent-color, #E8740C);
}

/* ----- USP Badges – card style ----- */

.cdv2-usp-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--bs-blue-light, #f0f6fa);
    border-radius: var(--bs-radius-container, 12px);
    background: var(--bs-blue-light, #f0f6fa);
}

.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, #E8740C);
}

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

/* ----- ZONE 2: Details (Tabs/Accordion) ----- */

.customdesign-pdp-v2 .product.info.detailed {
    margin: 48px 0;
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: var(--bs-radius-container, 12px);
    padding: 4px 24px;
    border: none;
}

.customdesign-pdp-v2 .product.info.detailed .product.data.items {
    border: none;
}

.customdesign-pdp-v2 .product.data.items > .item.title {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.7);
}

.customdesign-pdp-v2 .product.data.items > .item.title:last-of-type {
    border-bottom: none;
}

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

.customdesign-pdp-v2 .product.data.items > .item.title > .switch:hover {
    color: var(--bs-accent-color, #E8740C);
}

.customdesign-pdp-v2 .product.data.items > .item.title.active > .switch {
    color: var(--bs-accent-color, #E8740C);
}

.customdesign-pdp-v2 .product.data.items > .item.content {
    border: none;
    padding: 20px 0;
    background: transparent;
}

/* ----- 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;
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-item-name a:hover {
    color: var(--bs-accent-color, #E8740C);
}

.customdesign-pdp-v2 #crp-ajax-placeholder .product-item .product-image-container {
    border-radius: var(--bs-radius-img, 12px) var(--bs-radius-img, 12px) 0 0;
    overflow: hidden;
}

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

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

.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;
    background: var(--bs-blue, #00446a);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 4px;
}

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

.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: var(--bs-radius-container, 12px);
    border: 1px solid var(--bs-blue-light, #f0f6fa);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0 !important;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,68,106,.04);
}

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

.customdesign-pdp-v2 .cdv2-option.required_option {
    border-color: #e74c3c;
    box-shadow: 0 0 0 1px #e74c3c;
}

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

.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, #E8740C);
}

.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;
    flex: 1;
}

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

.customdesign-pdp-v2 .cdv2-option-label::after,
.customdesign-pdp-v2 .prod_option label.optionlist.cdv2-option-label::after {
    content: '' !important;
    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;
    transition: transform 0.2s ease !important;
    background: none !important;
    position: static !important;
}

.customdesign-pdp-v2 .cdv2-option.expanded .cdv2-option-label::after,
.customdesign-pdp-v2 .prod_option.expanded label.optionlist.cdv2-option-label::after {
    transform: rotate(-135deg) !important;
}

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

.customdesign-pdp-v2 .cdv2-input-box {
    padding: 0 20px 16px;
    margin: 0 !important;
}

.customdesign-pdp-v2 .prod_option.reduced .cdv2-input-box {
    height: 40px;
    overflow: hidden;
}

.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 var(--bs-blue-light, #f0f6fa);
    border-radius: var(--bs-radius-container, 12px);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    background: #fff;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

.cdv2-option-card:hover,
.customdesign-pdp-v2 .options-list li.cdv2-option-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,68,106,.08);
}

.customdesign-pdp-v2 .prod_option.expanded .options-list li.cdv2-option-card {
    display: block !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 {
    display: flex !important;
    border: none;
    width: auto;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-card-inner {
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-option-img {
    width: 60px;
    height: 60px;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-card-label {
    text-align: left;
    align-items: flex-start;
}

.customdesign-pdp-v2 .prod_option.selected.reduced .cdv2-option-card.active .cdv2-check-indicator {
    display: none;
}

.cdv2-option-card:hover {
    border-color: var(--bs-blue-gray, #4a6886);
}

.cdv2-option-card.active {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 0 0 1px var(--bs-blue, #00446a);
}

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

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

.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;
}

.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, #E8740C);
}

.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 {
    display: flex;
}

/* Options bottom / reset */

.cdv2-options-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-blue-light, #f0f6fa);
    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: var(--bs-radius-btn, 4px);
    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);
}

/* ----- 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);
    border-radius: var(--bs-radius-container, 12px);
    padding: 28px 32px;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(0,68,106,.04);
}

.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: var(--bs-radius-btn, 8px);
    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;
}

/* ----- ZONE 5: Recommendations (Epoq) ----- */

.customdesign-pdp-v2 .product-upsell.main-block {
    margin: 48px 0;
}

.customdesign-pdp-v2 .product-upsell.main-block .epoqWidget {
    margin-bottom: 32px;
}

.customdesign-pdp-v2 .product-upsell.main-block .epoqWidget > strong {
    display: block;
    font-size: var(--bs-font-size-h3, 22px);
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    margin-bottom: 16px;
}

/* ----- 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-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: var(--bs-radius-btn, 8px);
    background: var(--bs-accent-color, #E8740C);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
    box-shadow: 0 2px 8px rgba(232,116,12,.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: var(--bs-radius-btn, 4px);
    cursor: pointer;
    transition: background 0.2s ease;
}

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

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

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

.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: var(--bs-radius-btn, 4px);
    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: 1023px) {
    .customdesign-pdp-v2 #product-head {
        grid-template-columns: 55% 1fr;
        gap: 0 24px;
    }
}

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

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

    .customdesign-pdp-v2 #product-head .product.media {
        position: relative;
        top: auto;
        margin-bottom: 20px;
    }

    .customdesign-pdp-v2 #product-head .product-name h1 {
        font-size: 22px;
    }

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

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

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

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

    .cdv2-usp-badges {
        padding: 14px;
    }

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

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

    .customdesign-pdp-v2 #surface-color::after {
        font-size: 11px;
    }

    .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;
    }

    .cdv2-config-help-inner {
        padding: 20px;
        border-radius: var(--bs-radius-container, 12px);
    }

    .cdv2-config-help-link {
        border-radius: var(--bs-radius-btn, 8px);
    }
}

@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, #E8740C);
}

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

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

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

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

.customdesign-pdp-v2 .product-info-main .zahlungsarten {
    border-radius: var(--bs-radius-img, 12px);
}

.customdesign-pdp-v2 .product-labels .product-label {
    border-radius: var(--bs-radius-container, 12px) 0 var(--bs-radius-container, 12px) 0;
}