/* ================================================
   Product Detail V7 — V2 Layout + V4 Tabbed Content
   ================================================ */

:root {
    --primary-color: #1C2A4B;
    --secondary-color: #FF8C42;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --gray: #6c757d;
    --light-gray: #e9ecef;
    --border: #dee2e6;
    --transition: all 0.3s ease;
    --v4-star: #FFB800;
    --v4-green: #16a34a;
    --v4-green-bg: #f0fdf4;
    --v4-gray-bg: #f5f5f5;
    --v4-border: #e5e7eb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Breadcrumb ── */
.breadcrumb {
    padding: 1.25rem 0 0.75rem;
    color: var(--gray);
    font-size: 0.85rem;
    background: var(--white);
    position: relative;
    z-index: 1;
}

.breadcrumb a {
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--secondary-color);
}

.breadcrumb span {
    color: var(--primary-color);
}

/* ================================================
   HERO IMAGE SECTION — Full width
   ================================================ */
.v2-hero-section {
    margin-bottom: 2.5rem;
}

.main-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    background: #f5f5f5;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8f8f8;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.main-image:hover img {
    transform: scale(1.02);
}

/* Thumbnails — bigger, horizontal strip */
.image-thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.image-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.image-thumbnails::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.thumbnail {
    flex-shrink: 0;
    width: 110px;
    height: 85px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: var(--transition);
    background: #f5f5f5;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.25);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================================
   TWO-COLUMN CONTENT GRID
   ================================================ */
.v2-content-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
}

/* ── Product Info (left column) ── */
.product-info h1 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.product-category-badge {
    display: inline-block;
    background: #eef2ff;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

.product-category-badge:empty {
    display: none;
}

/* ── All-in Zelfmontage Pakket badge ── */
.product-package-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
}

.package-label {
    display: inline-block;
    background: #fff7ed;
    color: #c2610c;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid #fed7aa;
}

.package-info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.package-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.package-tooltip-box {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 300px;
    background: #ffffff;
    color: #374151;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 0.82rem;
    line-height: 1.5;
    z-index: 500;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #f97316;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.package-tooltip-box p {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: #374151;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.package-tooltip-box ul {
    margin: 0;
    padding-left: 16px;
}

.package-tooltip-box ul li {
    margin-bottom: 4px;
    font-size: 0.82rem;
    color: #374151;
}

.package-info-tooltip:hover .package-tooltip-box,
.package-info-tooltip:focus-within .package-tooltip-box {
    display: block;
}

/* ================================================
   USP BADGES BAR
   ================================================ */
.v2-usp-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.v2-usp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
}

/* ── Product Description ── */
.product-description {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
}

/* ================================================
   DIMENSIONS SECTION
   ================================================ */
.product-dimensions-section {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.product-dimensions-section h3 {
    color: var(--primary-color);
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-dimensions-section h3::before {
    content: "\1F4CF";
    font-size: 1.3rem;
}

.price-info {
    color: #6c757d;
    font-size: 0.92rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #e7f3ff;
    border-left: 3px solid #0066cc;
    border-radius: 6px;
}

.dimensions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.dimension-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.dimension-option:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 16px rgba(255, 140, 66, 0.2);
    transform: translateY(-2px);
}

.dimension-option.active {
    border-color: var(--secondary-color);
    background: linear-gradient(135deg, #fff5ed 0%, #ffffff 100%);
    box-shadow: 0 4px 18px rgba(255, 140, 66, 0.25);
}

.dimension-option.active::before {
    content: "\2713";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--secondary-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
}

.dimension-option svg {
    color: var(--secondary-color);
    flex-shrink: 0;
}

.dimension-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.dimension-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.dimension-area {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.dimension-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
}

/* Custom Dimensions */
.custom-dimensions {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 2px dashed #e9ecef;
}

.custom-dimensions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.custom-dimensions h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

.unit-toggle {
    display: flex;
    gap: 0;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.unit-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: white;
    color: #6c757d;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
}

.unit-btn:first-child {
    border-right: 1px solid #e9ecef;
}

.unit-btn.active {
    background: var(--secondary-color);
    color: white;
}

.unit-btn:hover:not(.active) {
    background: #f8f9fa;
}

.custom-dimension-inputs {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.custom-dimension-inputs .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.custom-dimension-inputs label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-dimension-inputs input {
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    width: 120px;
    transition: all 0.3s ease;
    font-family: 'Open Sans', sans-serif;
}

.custom-dimension-inputs input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

.dimension-separator {
    color: #6c757d;
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
}

.custom-price-display {
    background: linear-gradient(135deg, #fff5ed 0%, #ffffff 100%);
    padding: 1.25rem;
    border-radius: 12px;
    border: 2px solid var(--secondary-color);
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.custom-price-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}

.custom-area-label,
.custom-price-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-area-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.custom-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
}

/* ================================================
   WAAROM OVERKAPPINGPLUS — Trust Section
   ================================================ */
/* Dit blok had een gele achtergrond die nergens anders op de site voorkomt en
   die botste met de witte kaarten erin. Nu een rustig grijs uit de huisstijl,
   zodat de kaarten en de oranje iconen het werk doen. */
.v2-trust-section {
    margin-bottom: 2rem;
    margin-top: 1rem;
    padding: 1.75rem;
    background: var(--light-bg);
    border: 1px solid var(--v4-border);
    border-radius: 16px;
}

.v2-trust-section h3 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.v2-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.v2-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.v2-trust-card:hover {
    transform: translateY(-2px);
}

.v2-trust-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #fff7ed;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-trust-text strong {
    font-size: 0.92rem;
    color: var(--primary-color);
}

.v2-trust-text span {
    font-size: 0.82rem;
    color: var(--gray);
}

/* ================================================
   SIDEBAR — Sticky Price + CTA
   ================================================ */
.v2-sidebar {
    position: relative;
    /* Het raster staat op align-items: start, waardoor deze kolom niet hoger
       werd dan het prijsblok zelf. Een sticky element kan alleen bewegen
       binnen zijn eigen kolom, dus met een kolom van precies dezelfde hoogte
       scrolde het blok meteen mee weg. Met stretch loopt de kolom door tot
       onder de configurator en heeft het blok ruimte om mee te lopen. */
    align-self: stretch;
}

.v2-sidebar-inner {
    position: sticky;
    /* De navigatiebalk is 100 px hoog en blijft zelf ook plakken. Zonder de
       extra ruimte hieronder komt het prijsblok er strak tegenaan te liggen. */
    top: calc(100px + 1.5rem);
    /* Past het blok niet in beeld, dan moet de onderkant zichtbaar blijven:
       anders is de bestelknop bij een lang blok op een klein scherm niet meer
       te bereiken. */
    max-height: calc(100vh - 100px - 3rem);
    overflow-y: auto;
}

/* Price Section */
.product-price-section {
    padding: 1.75rem;
    background: linear-gradient(135deg, #1C2A4B 0%, #243656 100%);
    border-radius: 16px;
    color: white;
    margin-bottom: 1rem;
}

.price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
}

.price-line > span:last-child {
    white-space: nowrap;
    padding-top: 1px;
}

/* De gekozen opties van een samengesteld product, als losse regels onder de
   basisprijs. Iets kleiner en ingesprongen, zodat te zien is dat ze bij de
   regel erboven horen. */
#variantOptieRegels { display: flex; flex-direction: column; gap: 0.6rem; }
#variantOptieRegels:not(:empty) { margin-top: 0.6rem; }
.price-line.variant-optie-regel {
    font-size: 0.85rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--secondary-color);
}
.price-line.variant-optie-regel > span:last-child {
    color: #fff;
    font-weight: 600;
}

.price-line.total-line {
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.05rem;
    color: white;
}

.price-line.total-line strong {
    font-weight: 700;
}

.price-line .price {
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: 800;
    line-height: 1;
}

.price-note {
    color: #86efac;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-note svg {
    stroke: #86efac;
}

/* ── Add to Cart Section ── */
.add-to-cart-section {
    margin-bottom: 1rem;
}

.btn-add-to-cart {
    width: 100%;
    padding: 18px 32px;
    background: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 140, 66, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-add-to-cart:hover {
    background: #e67c35;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255, 140, 66, 0.45);
}

.btn-add-to-cart:active {
    transform: translateY(0);
}

.btn-add-to-cart:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #aaa;
    box-shadow: none;
    transform: none;
}

.cart-disabled-notice {
    display: none;
    margin-top: 8px;
    padding: 10px 14px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 10px;
    color: #7a5c00;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.4;
}

.btn-quote-request {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(28, 42, 75, 0.2);
    background: var(--primary-color) !important;
}

.btn-quote-request:hover {
    background: #152038 !important;
}

/* Staat direct bestellen uit, dan is de offerteknop de enige actie die
   overblijft. Hij neemt dan de plek en de kleur van de bestelknop over, zodat
   er geen gat valt in de rechterkolom. Het !important hierboven staat er om
   .btn-primary uit styles.css te verslaan; daarom moet deze regel het ook
   hebben, en staat hij hier in plaats van in styles.css. */
html:not(.direct-bestellen) .btn-quote-request,
html.prijs-op-aanvraag .btn-quote-request {
    background: var(--secondary-color) !important;
    box-shadow: 0 6px 18px rgba(255, 140, 66, 0.32);
}
html:not(.direct-bestellen) .btn-quote-request:hover,
html.prijs-op-aanvraag .btn-quote-request:hover {
    background: #f07a28 !important;
    box-shadow: 0 10px 24px rgba(255, 140, 66, 0.38);
}

/* Sidebar Trust Badges */
.v2-sidebar-trust {
    padding: 16px 18px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-sidebar-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

/* ── CTA Buttons (Call Us) ── */
.product-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.product-cta .call-us-content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.product-cta .call-us-content small {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 2px;
}

/* ── Buttons (shared) ── */
.btn-primary,
.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1.1rem 2rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-large {
    font-size: 1rem;
    padding: 0.875rem 1.75rem !important;
}

.btn-primary {
    background: var(--secondary-color);
    color: var(--white);
}

.btn-primary:hover {
    background: #e07a35;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 140, 66, 0.3);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* ================================================
   WALL OPTION BUTTONS
   ================================================ */
.wall-type-btn,
.wall-variant-btn {
    padding: 0.5rem 1.1rem;
    border: 2px solid #CBD5E1;
    border-radius: 20px;
    background: white;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.18s ease;
}

.wall-type-btn:hover:not(.active),
.wall-variant-btn:hover:not(.active) {
    border-color: #1C2A4B;
    color: #1C2A4B;
    background: #EEF2FF;
}

.wall-type-btn.active,
.wall-variant-btn.active {
    background: #1C2A4B;
    border-color: #1C2A4B;
    color: white;
}

/* ================================================
   V4 TABBED CONTENT SECTION (inside v2 layout)
   ================================================ */
.v7-tabs-wrapper {
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.v4-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--v4-border);
    margin-bottom: 2rem;
}

.v4-tab-btn {
    padding: 0.85rem 1.75rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray);
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Open Sans', sans-serif;
}

.v4-tab-btn:hover {
    color: var(--primary-color);
}

.v4-tab-btn.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.v4-tab-content {
    display: none;
}

.v4-tab-content.active {
    display: block;
}

/* ── Tab 1: Specs inside tab ── */
.v4-specs-block {
    margin-bottom: 2rem;
}

.v4-specs-block h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.v4-tab-content .specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.v4-tab-content .spec-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.15rem;
    background: var(--v4-gray-bg);
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
    border-top: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
}

.v4-tab-content .spec-item:hover {
    transform: none;
    box-shadow: none;
}

.v4-tab-content .product-filters-section {
    background: none;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.spec-label,
.filter-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value,
.filter-value {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Specs richtext mode */
.specs-grid.specs-richtext {
    display: block;
}

.specs-grid.specs-richtext p,
.specs-grid.specs-richtext ul,
.specs-grid.specs-richtext ol {
    margin: 0 0 0.85rem 0;
}

.specs-grid.specs-richtext ul,
.specs-grid.specs-richtext ol {
    padding-left: 1.25rem;
}

.specs-grid.specs-richtext strong {
    color: var(--primary-color);
}

/* Filters grid */
.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.25rem;
    background: white;
    border-radius: 12px;
    border-left: 4px solid var(--secondary-color);
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Product filters section (standalone, outside tab) */
.product-filters-section {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.product-filters-section h3 {
    color: var(--primary-color);
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-filters-section h3::before {
    content: "\2728";
    font-size: 1.3rem;
}

/* ── Tab 2: Pakket grid ── */
.v4-pakket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.v4-pakket-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: var(--v4-green-bg);
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a3a1a;
}

.v4-pakket-item svg {
    flex-shrink: 0;
}

/* ── Tab 3: Reviews ── */
.v4-reviews-overview {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--v4-gray-bg);
    border-radius: 10px;
}

.v4-reviews-score {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.v4-score-big {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    line-height: 1;
}

.v4-score-stars {
    color: var(--v4-star);
    font-size: 1.5rem;
    margin: 0.35rem 0;
    letter-spacing: 2px;
}

.v4-score-count {
    font-size: 0.82rem;
    color: var(--gray);
}

.v4-reviews-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.v4-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.v4-bar-row > span:first-child {
    width: 65px;
    text-align: right;
    flex-shrink: 0;
}

.v4-bar-row > span:last-child {
    width: 20px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
}

.v4-bar-track {
    flex: 1;
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.v4-bar-fill {
    height: 100%;
    background: var(--v4-star);
    border-radius: 5px;
}

.v4-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.v4-review {
    padding: 1.25rem;
    background: var(--v4-gray-bg);
    border-radius: 10px;
}

.v4-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.v4-review-header strong {
    color: var(--primary-color);
    font-size: 0.95rem;
}

.v4-review-stars {
    color: var(--v4-star);
    font-size: 1rem;
    letter-spacing: 1px;
}

.v4-review-date {
    font-size: 0.8rem;
    color: var(--gray);
    margin-bottom: 0.6rem;
}

.v4-review p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-color);
    margin: 0;
}

/* ================================================
   LIGHTBOX
   ================================================ */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: lightboxFadeIn 0.2s ease;
}

.lightbox.open {
    display: flex;
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    -webkit-user-drag: none;
    user-drag: none;
}

.lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10000;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev,
.lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 2.5rem;
    width: 50px;
    height: 70px;
    cursor: pointer;
    z-index: 10000;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 140, 66, 0.8);
}

.lightbox-thumbs {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10000;
    max-width: 90vw;
    overflow-x: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.lightbox-thumbs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
}

.lightbox-thumbs img:hover {
    opacity: 1;
}

.lightbox-thumbs img.active {
    border-color: #FF8C42;
    opacity: 1;
}

/* ================================================
   RELATED PRODUCTS
   ================================================ */
.related-products {
    background: var(--light-bg);
    padding: 4rem 0;
}

.related-products h2 {
    text-align: center;
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
    font-weight: 800;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.related-products .catalog-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.related-products .catalog-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.related-products .catalog-product-image {
    width: 100%;
    height: 200px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.related-products .catalog-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.related-products .catalog-product-content {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-products .catalog-product-content h3 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}

.related-products .catalog-product-content p {
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
    flex: 1;
}

.related-products .product-category {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 0.6rem;
}

.related-products .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 0.8rem;
}

.related-products .product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.related-products .btn-view-product {
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ================================================
   CART PROMPT MODAL
   ================================================ */
.cart-prompt-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 9999;
}

.cart-prompt-modal.active {
    display: flex;
}

.cart-prompt-content {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 2rem 1.5rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    position: relative;
}

.cart-prompt-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.2s;
}

.cart-prompt-close:hover {
    color: #333;
}

.cart-prompt-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

.cart-prompt-check {
    flex-shrink: 0;
    margin-top: 2px;
}

.cart-prompt-content h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
    line-height: 1.35;
}

.cart-prompt-product {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 1.25rem;
}

.cart-prompt-product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f5f5f5;
}

.cart-prompt-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cart-prompt-product-name {
    font-weight: 600;
    color: #222;
    font-size: 0.95rem;
    line-height: 1.3;
}

.cart-prompt-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    width: fit-content;
}

.cart-prompt-product-qty {
    color: #777;
    font-size: 0.85rem;
}

.cart-prompt-product-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: #222;
    white-space: nowrap;
    flex-shrink: 0;
}

.cart-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-prompt-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.6rem;
    font-weight: 500;
    transition: color 0.2s;
}

.cart-prompt-continue:hover {
    color: #222;
}

.cart-prompt-goto {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

/* ================================================
   QUOTE REQUEST MODAL
   ================================================ */
.quote-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.6);
    backdrop-filter: blur(3px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.quote-modal-overlay.active {
    display: flex;
}

.quote-modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 2rem 2.5rem;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 70px rgba(16, 24, 40, 0.28);
    animation: quoteModalIn .22s ease-out;
}

@keyframes quoteModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quote-modal-content { animation: none; }
}

.quote-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--light-bg);
    border: 1px solid var(--v4-border);
    cursor: pointer;
    color: var(--gray);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.quote-modal-close:hover {
    background: var(--light-gray);
    color: var(--primary-color);
}

.quote-modal-content h2 {
    font-size: 1.5rem;
    color: #1C2A4B;
    margin-bottom: 0.5rem;
    padding-right: 2rem;
}

.quote-modal-intro {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* De samenvatting van wat de klant heeft samengesteld. Zonder deze opsomming
   vraagt hij een offerte aan zonder te zien waarvoor. */
.quote-product-summary {
    background: var(--light-bg);
    border: 1px solid var(--v4-border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
}

.quote-summary-kop { display: flex; align-items: center; gap: 0.9rem; }
.quote-summary-kop img {
    width: 76px; height: 56px; object-fit: cover;
    border-radius: 10px; flex-shrink: 0;
    border: 1px solid var(--v4-border); background: #fff;
}
.quote-product-summary strong {
    color: var(--primary-color);
    display: block;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.quote-summary-kop span { color: var(--gray); font-size: 0.88rem; }

.quote-summary-regels {
    list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0;
    border-top: 1px solid var(--v4-border);
    display: flex; flex-direction: column; gap: 0.45rem;
}
.quote-summary-regels li {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; font-size: 0.88rem;
}
.quote-summary-regels li > span:last-child {
    white-space: nowrap; font-weight: 600; color: var(--primary-color);
}
.quote-summary-regels em {
    font-style: normal; color: var(--gray); display: block; font-size: 0.78rem;
}
.quote-summary-leeg { color: var(--gray); font-style: italic; }

.quote-summary-totaal {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin-top: 0.9rem; padding-top: 0.9rem;
    border-top: 1px solid var(--v4-border);
    font-weight: 700; color: var(--primary-color);
}
.quote-summary-totaal > span:last-child {
    text-align: right; color: var(--secondary-color); font-size: 1.15rem;
}
.quote-summary-totaal small {
    display: inline-block; font-weight: 500; font-size: 0.78rem; color: var(--gray);
}

.quote-form-group {
    margin-bottom: 1rem;
}

.quote-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray);
    margin-bottom: 0.35rem;
}

.quote-form-group input,
.quote-form-group textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: #fff;
}

.quote-form-group input:focus,
.quote-form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.18);
}

.quote-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.quote-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.quote-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    cursor: pointer;
    color: #333;
}

.quote-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FF8C42;
    flex-shrink: 0;
}

/* Akkoord-met-voorwaarden checkbox in de offerte-modal — heeft hogere
   specificiteit dan de algemene `.quote-form-group label { display:block }`
   zodat checkbox + tekst horizontaal naast elkaar staan, met de hele tekst
   (inclusief de link) op één regel of natuurlijk doorlopend zonder rare
   rechts-uitlijning. */
.quote-form-group .quote-terms-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 1rem;
    background: var(--light-bg);
    border: 1px solid var(--v4-border);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    text-align: left;
    margin: 0;
}
.quote-form-group .quote-terms-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: #FF8C42;
    flex-shrink: 0;
}
.quote-form-group .quote-terms-label span {
    flex: 1;
}
.quote-form-group .quote-terms-label a {
    color: var(--secondary-color, #FF8C42);
    text-decoration: underline;
}

.quote-submit-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(255, 140, 66, 0.32);
    transition: transform .15s, box-shadow .15s;
}
.quote-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 140, 66, 0.38);
}
.quote-submit-btn:active { transform: none; }

/* Een korte geruststelling onder de knop. Bij een offerte is de vraag "waar
   zeg ik hier ja tegen" de laatste drempel. */
.quote-form-slot {
    margin: 0.7rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--gray);
}

/* Het formulier valt uiteen in twee stappen: wat wilt u, en wie bent u. */
.quote-form-sectiekop {
    margin: 1.6rem 0 0.9rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--v4-border);
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.quote-form-label-main {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
}

.quote-request-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.quote-radio-option {
    cursor: pointer;
    display: block;
}

.quote-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quote-radio-box {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--v4-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.quote-radio-option input[type="radio"]:checked + .quote-radio-box {
    border-color: var(--secondary-color);
    background: #fff6ef;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.22);
}

.quote-radio-box:hover { border-color: var(--border); }
.quote-radio-option input[type="radio"]:focus-visible + .quote-radio-box {
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.35);
}

/* Icoon in een eigen vlakje, net als bij de kaarten in "Waarom
   OverkappingPlus". Emoji leverden per apparaat een ander plaatje op. */
.quote-radio-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff6ef;
    color: var(--secondary-color);
    flex-shrink: 0;
}
.quote-radio-option input[type="radio"]:checked + .quote-radio-box .quote-radio-icon {
    background: var(--secondary-color);
    color: #fff;
}

.quote-radio-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

/* ================================================
   FOOTER
   ================================================ */
.footer {
    background: linear-gradient(135deg, #1C2A4B 0%, #152038 100%);
    color: var(--white);
    padding: 4rem 0 0;
    margin-top: 0;
}

.footer-bottom {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ================================================
   RESPONSIVE
   ================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .v2-content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .v2-sidebar-inner {
        position: static;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-trust-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .product-info h1 {
        font-size: 1.7rem;
    }

    .price-line .price {
        font-size: 1.6rem;
    }

    .main-image {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    .thumbnail {
        width: 85px;
        height: 65px;
    }

    .v2-usp-bar {
        flex-direction: column;
        gap: 8px;
    }

    .v2-trust-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .breadcrumb {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8rem;
    }

    .related-products h2 {
        font-size: 1.8rem;
    }

    .product-price-section {
        padding: 1.25rem;
    }

    /* Tabbed section responsive */
    .v4-tab-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .v4-tab-btn {
        padding: 0.7rem 1.1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .v4-reviews-overview {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .v4-reviews-bars {
        max-width: 400px;
        margin: 0 auto;
    }

    .v4-pakket-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .quote-form-row {
        grid-template-columns: 1fr;
    }

    .thumbnail {
        width: 72px;
        height: 56px;
    }

    .image-thumbnails {
        gap: 8px;
    }

    .dimension-option {
        padding: 0.75rem 1rem;
    }

    .v2-trust-card {
        padding: 12px;
    }

    .package-tooltip-box {
        left: auto;
        right: -10px;
        width: 260px;
    }

    .product-price-section {
        border-radius: 12px;
    }
}

/* ── Glazenschuifwand toggle ───────────────────────────────── */
.glas-toggle-block {
    padding: 1rem 1.25rem; background: #EFF6FF;
    border: 1px solid #93C5FD; border-radius: 10px;
    margin: 1rem 0;
}
.glas-toggle-row {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
}
.glas-toggle-switch {
    position: relative; display: inline-block; width: 44px; height: 24px;
    flex-shrink: 0; margin-top: 3px;
}
.glas-toggle-switch input { opacity: 0; width: 0; height: 0; }
.glas-toggle-knob {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1; transition: .2s; border-radius: 24px;
}
.glas-toggle-knob::before {
    position: absolute; content: "";
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .2s; border-radius: 50%;
}
.glas-toggle-switch input:checked + .glas-toggle-knob { background-color: #2563EB; }
.glas-toggle-switch input:checked + .glas-toggle-knob::before { transform: translateX(20px); }

.glas-toggle-text { display: flex; flex-direction: column; gap: 3px; }
.glas-toggle-text strong { color: #1E3A8A; font-size: 0.98rem; }
.glas-toggle-details { color: #1E40AF; font-size: 0.88rem; }
.glas-toggle-details strong { color: #1E40AF; font-size: 0.92rem; }
.glas-toggle-text small { color: #475569; font-size: 0.78rem; font-style: italic; line-height: 1.4; }

.glas-toggle-block--disabled {
    opacity: 0.55; cursor: not-allowed;
    background: #F1F5F9; border-color: #CBD5E1;
}
.glas-toggle-block--disabled .glas-toggle-row { cursor: not-allowed; }
.glas-toggle-block--disabled .glas-toggle-text strong { color: #64748B; }
.glas-toggle-block--disabled .glas-toggle-details,
.glas-toggle-block--disabled .glas-toggle-details strong { color: #64748B; }

/* ── 3D-kaartje boven de afmetingen (product-detail-script.js) ──
   Zoals het 3D-kaartje in de hero: beeld, oranje bovenschrift, titel en de oranje knop.
   Het hele kaartje is één knop die de configurator opent. Breed: alles naast elkaar;
   smal: beeld en tekst naast elkaar, de knop eronder over de volle breedte. */
.product-3d-kaart {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 14px;
    border: 1px solid #e5e9f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(28, 42, 75, 0.08);
    color: #1C2A4B;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-3d-kaart:hover {
    box-shadow: 0 10px 28px rgba(28, 42, 75, 0.14);
    transform: translateY(-2px);
}

.product-3d-kaart:focus-visible {
    outline: 3px solid #1C2A4B;
    outline-offset: 3px;
}

.product-3d-kaart img {
    width: 150px;
    height: 104px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
}

.product-3d-tekst {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-3d-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FF8C42;
}

.product-3d-titel {
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 700;
}

/* Hetzelfde blauw als in het 3D-kaartje van de hero (haalt 4,8:1 op wit). */
.product-3d-glas {
    color: #1677b8;
}

.product-3d-knop {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 8px;
    background: #FF8C42;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease;
}

.product-3d-kaart:hover .product-3d-knop {
    background: #e67a31;
}

@media (max-width: 640px) {
    .product-3d-kaart {
        flex-wrap: wrap;
        gap: 12px 14px;
        padding: 10px;
    }

    .product-3d-kaart img {
        width: 104px;
        height: 72px;
    }

    .product-3d-titel {
        font-size: 0.95rem;
    }

    .product-3d-knop {
        flex-basis: 100%;
    }
}

/* "WhatsApp ons" boven "Bel ons": zelfde knop, met het WhatsApp-groen in het icoon. */
.btn-whatsapp-ons[hidden] {
    display: none;
}

.btn-whatsapp-ons .whatsapp-ons-icoon {
    color: #25D366;
    flex-shrink: 0;
}

.btn-whatsapp-ons:hover .whatsapp-ons-icoon {
    color: #fff;
}