/*
 * ========================================
 * WOOCOMMERCE
 * PRODUCT DETAIL PAGE (PDP)
 * ========================================
 *
 * Nieuw: layout, fotogrid, summary-kolom, variatiechips,
 * kooprij + notities, specificaties, upsells.
 */


/* ========================================
   PRODUCT PAGE
======================================== */

.woocommerce.single-product div.product {
    padding-top: 2.5rem;
}


/* ========================================
   MAIN — 2 KOLOMMEN
   Alleen galerij + summary (wrapper .pdp-main,
   zie wc-pdp.inc.php). Alles daaronder loopt
   gewoon over de volle breedte.
======================================== */

.pdp-main {
    /* Afstand tot bovenkant bij sticky summary —
       ruimte voor de sticky navigatie van GP. */
    --pdp-sticky-top: 100px;

    /* ≈ 58/42: summary ~615px op desktop → regellengte
       ~75 tekens, 6 staffels passen nog. */
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;

    margin-bottom: 4rem;
}

/* WooCommerce/GP zetten floats en 48%/50% breedtes */
.woocommerce div.product .pdp-main div.images,
.woocommerce div.product .pdp-main div.summary {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}


/* ========================================
   GALERIJ → GRID
   Even aantal: alles gelijk (2×2).
   Oneven aantal: eerste foto breed, rest 2 kolommen.
======================================== */

/* Inline opacity:0 van WooCommerce (bedoeld voor slider-init) */
.woocommerce div.product .woocommerce-product-gallery {
    opacity: 1 !important;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--neutral-100);
    border-radius: var(--radius-md);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

/* Precies 2 foto's: 1 kolom, 2 rijen (4:3, anders
   worden twee vierkanten over de volle breedte te hoog) */
.woocommerce div.product .woocommerce-product-gallery__wrapper:has(> :nth-child(2):last-child) {
    grid-template-columns: minmax(0, 1fr);
}

.woocommerce div.product .woocommerce-product-gallery__wrapper:has(> :nth-child(2):last-child) .woocommerce-product-gallery__image {
    aspect-ratio: 4 / 3;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    padding: 8%;
    box-sizing: border-box;

    object-fit: contain;
}


/* ========================================
   SUMMARY — STICKY (DESKTOP)
======================================== */

@media (min-width: 1025px) {

    .woocommerce div.product .pdp-main div.summary {
        position: sticky;
        top: var(--pdp-sticky-top);
    }
}


/* ========================================
   EYEBROW (CATEGORIE)
======================================== */

.woocommerce div.product .pdp-eyebrow {
    display: inline-block;

    margin: 0 0 0.75rem 0;

    color: var(--blue-500);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
}

.woocommerce div.product .pdp-eyebrow:hover,
.woocommerce div.product .pdp-eyebrow:focus {
    color: var(--blue-900);
}


/* ========================================
   TITEL
   H1, maar op H2-maat (lange productnamen)
======================================== */

.woocommerce div.product .product_title {
    margin: 0 0 1rem 0;

    color: var(--blue-900);

    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -0.03em;
}


/* ========================================
   INTRO (SHORT DESCRIPTION)
======================================== */

/* Bodymaat (1rem), gelijk aan de beschrijvingsband. De
   intro's zijn nu te lang voor lead-maat (1.125rem); terug
   naar lead zodra ze 1–2 zinnen zijn. */
.woocommerce div.product .woocommerce-product-details__short-description {
    margin: 0 0 1.75rem 0;

    color: var(--neutral-600);

    font-size: 1rem;
    line-height: 1.65;
}

.woocommerce div.product .woocommerce-product-details__short-description > *:last-child {
    margin-bottom: 0;
}


/* ========================================
   MAIN — TABLET
======================================== */

/* Tablet: 50/50, anders wordt de summary bij ~860px
   te smal voor de kooprij (kiezer + knop op één rij). */
@media (max-width: 1024px) {

    .pdp-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
    }
}


/* ========================================
   MAIN — ÉÉN KOLOM (< 860px)
   Eigen breekpunt, los van GP's 768px: onder
   ~860px worden foto's en summary naast elkaar
   te smal. Galerij wordt dan een swipe-rij
   (scroll-snap); de volgende foto piept in beeld.
   Op bredere schermen in deze range staan ~1,7
   tegels in beeld (max 480px), op mobiel 88%.
======================================== */

@media (max-width: 859px) {

    .pdp-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;

        margin-bottom: 3rem;
    }

    .woocommerce div.product .woocommerce-product-gallery__wrapper {
        display: flex;
        gap: 10px;

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .woocommerce div.product .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
        display: none;
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__image,
    .woocommerce div.product div.images .woocommerce-product-gallery__image:first-child:nth-last-child(odd),
    .woocommerce div.product .woocommerce-product-gallery__wrapper:has(> :nth-child(2):last-child) .woocommerce-product-gallery__image {
        flex: 0 0 min(88%, 480px);
        aspect-ratio: 1 / 1;

        scroll-snap-align: start;
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__image:only-child {
        flex-basis: 100%;
        aspect-ratio: 4 / 3;
    }
}


/* ========================================
   MAIN — MOBIEL (GP-breekpunt)
======================================== */

@media (max-width: 768px) {

    .woocommerce.single-product div.product {
        padding-top: 1.5rem;
    }

    .woocommerce div.product .product_title {
        font-size: 1.75rem;
    }
}







/* ========================================
   VARIATIES
   WooCommerce-tabel (label | select) → label
   boven, chips eronder.
======================================== */

.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
    display: block;

    width: auto;

    margin: 0;
    padding: 0;

    background: none;
    border: 0;

    text-align: left;
}

.woocommerce div.product form.cart table.variations {
    margin: 0 0 1.75rem 0;
}

.woocommerce div.product form.cart table.variations tr + tr {
    margin-top: 1.75rem;
}

.woocommerce div.product form.cart table.variations th.label {
    margin-bottom: 0.5rem;
}

.woocommerce div.product form.cart table.variations th.label label {
    margin: 0;

    color: var(--blue-900);

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Originele select: blijft voor WooCommerce, niet zichtbaar */
.woocommerce div.product form.cart .pdp-attr-select {
    display: none;
}


/* ========================================
   VARIATIE-CHIPS
   Zelfde maat en kleuren als de filterchips
   op de PLP. Hoek --radius-md: alles in het
   koopblok (staffels, chips, kiezer, knop)
   heeft dezelfde hoek. !important vanwege de
   globale button-stijl in buttons.css.
======================================== */

.pdp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pdp-chips .pdp-chip {
    display: inline-flex;
    align-items: center;

    height: 36px;

    margin: 0;
    padding: 0 12px !important;

    background: var(--white) !important;
    border: 1px solid var(--neutral-300) !important;
    border-radius: var(--radius-md) !important;

    color: var(--blue-900) !important;

    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;

    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.pdp-chips .pdp-chip:hover {
    background: var(--white) !important;
    border-color: var(--blue-400) !important;
    color: var(--blue-900) !important;
}

.pdp-chips .pdp-chip[aria-checked="true"] {
    background: var(--blue-500) !important;
    border-color: var(--blue-500) !important;
    color: var(--white) !important;
}

.pdp-chips .pdp-chip[aria-checked="true"]:hover {
    background: var(--blue-900) !important;
    border-color: var(--blue-900) !important;
}

.pdp-chips .pdp-chip:focus {
    outline: none;
}

.pdp-chips .pdp-chip:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}

/* Combinatie niet leverbaar */
.pdp-chips .pdp-chip:disabled {
    background: var(--white) !important;
    border-color: var(--neutral-200) !important;
    color: var(--neutral-400) !important;

    text-decoration: line-through;

    opacity: 1;
    cursor: not-allowed;
}

/* Chips worden niet meer verborgen, alleen uitgeschakeld
   (pdp-variation-chips.js). Regel blijft als vangnet voor
   een oude versie van het script in de cache. */
.pdp-chips .pdp-chip.is-hidden {
    display: inline-flex !important;
}


/* ========================================
   PRIJSBLOK
   € 1,22 /st  excl. btw
   Totaal € 292,80 voor 240 stuks
   Stukprijs volgt het aantal (pdp-price.js).
======================================== */

/* Lijn erboven: scheidt "over het product" (titel,
   intro) van "kopen" (prijs, staffels, opties, knop).
   Ritme koopblok: 1.75rem tussen groepen (prijs ·
   staffels · variatie · aantal), 0.5rem label → veld. */
.woocommerce div.product .pdp-price {
    margin: 0 0 1.75rem 0;
    padding-top: 1.75rem;

    border-top: 1px solid var(--neutral-200);
}

.woocommerce div.product .pdp-price p {
    margin: 0;
}

.woocommerce div.product .pdp-price__unit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.375rem;

    color: var(--neutral-600);

    font-size: 0.875rem;
    line-height: 1.2;
}

.woocommerce div.product .pdp-price__amount,
.woocommerce div.product .pdp-price__amount .woocommerce-Price-amount {
    color: var(--blue-900);

    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.woocommerce div.product .pdp-price__tax {
    margin-left: 0.25rem;
}

.woocommerce div.product .pdp-price__total {
    margin-top: 0.375rem;

    color: var(--neutral-600);

    font-size: 0.875rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.woocommerce div.product .pdp-price__total[hidden],
.woocommerce div.product .pdp-price__prefix[hidden] {
    display: none;
}

/* WooCommerce' eigen variatieprijs: dubbel met het prijsblok */
.woocommerce div.product .woocommerce-variation-price {
    display: none;
}


/* ========================================
   STAFFELS (U2Code Tiered Price Table, blokken)
   Eén raster: wrapper tekent boven- en linkerrand,
   elk blok rechter- en onderrand; hoeken via
   tiered-pricing-corners.js. Klik op een blok vult
   het aantal in (pdp-price.js).
======================================== */

.tiered-pricing-wrapper {
    margin: 0 0 1.75rem 0;

    border-top: 1px solid var(--neutral-300);
    border-left: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);

    overflow: hidden;
}

.tiered-pricing-blocks {
    --tp-columns: 6;

    display: grid;
    gap: 0;
}

.tiered-pricing-blocks .tiered-pricing-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    margin: 0 !important;
    padding: 10px 4px;

    background: var(--white);

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--neutral-300) !important;
    border-bottom: 1px solid var(--neutral-300) !important;
    border-radius: 0;

    cursor: pointer;

    transition: background-color .2s ease;
}

.tiered-pricing-blocks .tiered-pricing-block:hover {
    background: var(--neutral-100);
}

.tiered-pricing-blocks .tiered-pricing-block__price,
.tiered-pricing-blocks .tiered-pricing-block__price .woocommerce-Price-amount {
    color: var(--blue-900);

    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.tiered-pricing-blocks .tiered-pricing-block__quantity {
    color: var(--neutral-600);

    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* Staffel "1 stuk" = basisprijs, niet bestelbaar (MOQ) */
.tiered-pricing-blocks .tiered-pricing-block[data-tiered-quantity="1"] {
    display: none;
}

/* Actieve staffel */
.tiered-pricing-blocks .tiered-pricing--active,
.tiered-pricing-blocks .tiered-pricing--active:hover {
    background: var(--blue-100);
    transform: none;
}

/* Hoeken (via JS) */
.tiered-pricing-blocks .tiered-pricing-block.tp-corner-tl {
    border-top-left-radius: var(--radius-md);
}

.tiered-pricing-blocks .tiered-pricing-block.tp-corner-tr {
    border-top-right-radius: var(--radius-md);
}

.tiered-pricing-blocks .tiered-pricing-block.tp-corner-bl {
    border-bottom-left-radius: var(--radius-md);
}

.tiered-pricing-blocks .tiered-pricing-block.tp-corner-br {
    border-bottom-right-radius: var(--radius-md);
}

@media (max-width: 1024px) {

    .tiered-pricing-blocks {
        --tp-columns: 4;
    }
}

@media (max-width: 768px) {

    .tiered-pricing-blocks {
        --tp-columns: 3;
    }
}

@media (max-width: 420px) {

    .tiered-pricing-blocks {
        --tp-columns: 2;
    }
}


/* ========================================
   KOOPRIJ — AANTAL + KNOP
   Eén rij: kiezer links (vast), knop vult de
   rest. Label erboven, notities eronder
   (aantal + voorraad/levertijd).
   Onder 420px gestapeld.

   Container = form.cart (simpel product) of
   .woocommerce-variation-add-to-cart (variabel).
======================================== */

.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 0.75rem;

    margin: 0;
}

/* Alles wat plugins nog in het formulier hangen (bv. een
   staffeltabel) krijgt een eigen regel; alleen kiezer en
   knop delen de rij. :where() = specificiteit 0, zodat de
   regels hieronder winnen. */
:where(
    .woocommerce div.product form.cart:not(.variations_form),
    .woocommerce div.product .woocommerce-variation-add-to-cart
) > * {
    flex: 0 0 100%;
}

.woocommerce div.product .pdp-qty-label {
    flex: 0 0 100%;

    margin: 0 0 0.5rem 0;

    color: var(--blue-900);

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.woocommerce div.product .pdp-buy-notes {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    flex: 0 0 100%;

    margin: 1rem 0 0 0;

    color: var(--neutral-600);

    font-size: 0.875rem;
    line-height: 1.4;
}

.woocommerce div.product .pdp-buy-notes p {
    margin: 0;
}

/* Voorraad + levertijd: stip ervoor, voorraad in navy */
.woocommerce div.product .pdp-buy-notes__delivery {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.woocommerce div.product .pdp-buy-notes__delivery::before {
    content: "";

    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--teal-500);
}

.woocommerce div.product .pdp-buy-notes__delivery--out::before {
    background: var(--neutral-400);
}

.woocommerce div.product .pdp-buy-notes__stock {
    color: var(--blue-900);

    font-weight: 600;
}


/* ========================================
   AANTAL-KIEZER
   Eén doos, zelfde rand/hover/hoek als de
   chips, − en + als iconen.
   !important: wc-plp.css en GP zetten eigen
   randen/achtergronden op .qty, .minus, .plus.
======================================== */

.woocommerce div.product form.cart div.quantity {
    display: flex !important;
    align-items: stretch;
    flex: 0 0 140px;

    width: 140px !important;
    height: 48px;

    margin: 0 !important;

    background: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);

    overflow: hidden;

    transition: border-color .2s ease;
}

.woocommerce div.product form.cart div.quantity:hover,
.woocommerce div.product form.cart div.quantity:focus-within {
    border-color: var(--blue-400);
}

.woocommerce div.product form.cart div.quantity .qty {
    flex: 1 1 auto;

    width: auto !important;
    min-width: 0;
    max-width: none !important;
    height: auto;

    margin: 0;
    padding: 0;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;

    color: var(--blue-900);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;

    -moz-appearance: textfield;
    appearance: textfield;
}

.woocommerce div.product form.cart div.quantity .qty:focus {
    outline: none;
}

.woocommerce div.product form.cart div.quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart div.quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce div.product form.cart div.quantity .minus,
.woocommerce div.product form.cart div.quantity .plus {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;

    width: 40px;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 0;
    line-height: 0;
    text-decoration: none;

    cursor: pointer;

    transition: background-color .2s ease;
}

.woocommerce div.product form.cart div.quantity .minus {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312334f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center / 16px 16px !important;
}

.woocommerce div.product form.cart div.quantity .plus {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312334f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 16px 16px !important;
}

.woocommerce div.product form.cart div.quantity .minus:hover {
    background-color: var(--neutral-100) !important;
}

.woocommerce div.product form.cart div.quantity .plus:hover {
    background-color: var(--neutral-100) !important;
}


/* ========================================
   KNOP "IN WINKELWAGEN"
   Knop in een formulier → --radius-md, gelijk
   aan de velden ernaast (pills alleen voor losse
   CTA's: header, hero, navy kaart — handout §3).
   --blue-500 met witte tekst, hover --blue-900.
   Icoon vóór de tekst via mask (zelfde als de
   header-pill), want WooCommerce escapet de
   knoptekst.
======================================== */

.woocommerce div.product form.cart .single_add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex: 1 1 0;
    min-width: 0;
    height: 48px;

    margin: 0 !important;
    padding: 0 20px !important;

    background: var(--blue-500) !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;

    color: var(--white) !important;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;

    float: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button::before {
    content: "";

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 2-1.58l1.65-7.42H5.12'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 2-1.58l1.65-7.42H5.12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--blue-900) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}

/* Variabel product zonder (geldige) keuze */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
    background: var(--blue-500) !important;

    opacity: 0.45;
    cursor: not-allowed;
}


/* ========================================
   KOOPRIJ — SMAL SCHERM
   Onder 420px: kiezer en knop elk volle breedte.
======================================== */

@media (max-width: 420px) {

    .woocommerce div.product form.cart div.quantity {
        flex-basis: 100%;

        width: 100% !important;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex-basis: 100%;

        margin-top: 0.625rem !important;
    }
}


/* ========================================
   AANLEVERSPECIFICATIES ETIKET (PDF)
   Tekstlink onder de kooprij, dunne lijn
   erboven. Bewust secundair: geen vlak, geen
   knop — "In winkelwagen" blijft de enige
   actie die opvalt.
   Pijl in een rondje, zoals de kaart-pijl
   (handout §3). Op wit → rondje --neutral-100
   i.p.v. wit. Hover: --blue-500 met witte pijl.
   Pijl schuin omhoog = opent in nieuw tabblad.
======================================== */

.woocommerce div.product .pdp-label-pdf {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    margin: 1.5rem 0 0 0;
    padding: 1rem 0 0 0;

    border-top: 1px solid var(--neutral-200);

    color: var(--blue-500);

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.woocommerce div.product .pdp-label-pdf__icon {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    color: var(--blue-400);
}

.woocommerce div.product .pdp-label-pdf__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    margin-left: auto;

    border-radius: 50%;

    background: var(--neutral-100);
    color: var(--blue-400);

    transition: background-color .2s ease, color .2s ease;
}

.woocommerce div.product .pdp-label-pdf__arrow svg {
    width: 16px;
    height: 16px;
}

.woocommerce div.product .pdp-label-pdf:hover .pdp-label-pdf__arrow,
.woocommerce div.product .pdp-label-pdf:focus-visible .pdp-label-pdf__arrow {
    background: var(--blue-500);
    color: var(--white);
}

.woocommerce div.product .pdp-label-pdf:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}


/* ========================================
   SPECIFICATIES
   Kerngegevens-raster: label klein boven,
   waarde eronder. Dunne lijn boven elke cel
   vormt de rijen. Wit vlak, binnen de content.
======================================== */

.waterconcepts-product-sections {
    clear: both;

    margin: 0;
    padding: 0;
}

.pdp-specs {
    padding: 1rem 0 0 0;
}

.woocommerce div.product .pdp-specs__title {
    margin: 0 0 1.5rem 0;

    color: var(--blue-900);

    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.pdp-specs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;

    margin: 0;
    padding: 0;
}

.pdp-specs__item {
    padding: 1rem 0;

    border-top: 1px solid var(--neutral-200);
}

.pdp-specs .pdp-specs__label {
    margin: 0 0 0.25rem 0;

    color: var(--neutral-600);

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Artikelnummer-cel heeft class product_meta (voor de
   variatie-JS); GP zet daarop lijn, padding en kleinere
   tekst — terug naar de gewone cel. */
.pdp-specs .pdp-specs__item--sku {
    padding: 1rem 0 !important;

    border-top: 1px solid var(--neutral-200) !important;

    font-size: inherit !important;
}

.pdp-specs .pdp-specs__item--sku:has(.sku:empty) {
    display: none;
}

.pdp-specs .pdp-specs__value {
    margin: 0;

    color: var(--blue-900);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 1024px) {

    .pdp-specs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .woocommerce div.product .pdp-specs__title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {

    .pdp-specs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
    }

    .woocommerce div.product .pdp-specs__title {
        margin-bottom: 1rem;

        font-size: 1.375rem;
    }
}


/* ========================================
   OOK INTERESSANT (UPSELLS)
   Eigen sectie buiten de content-container
   (generate_before_footer, prioriteit 7):
   onder de beschrijvingsband, boven de
   categoriekaarten. Kop en inner gelijk aan
   .category-cards; kaarten = PLP-productkaart
   (wc-plp.css).
======================================== */

.pdp-related {
    --container: 1600px;
    --gutter: 30px;

    padding: 5rem 0 0 0;

    background: var(--white);
}

.pdp-related__inner {
    max-width: var(--container);

    margin: 0 auto;
    padding: 0 var(--gutter);
}

.pdp-related .pdp-related__eyebrow {
    margin: 0 0 0.625rem 0;

    color: var(--blue-500);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.pdp-related .pdp-related__title {
    margin: 0 0 2rem 0;

    color: var(--blue-900);

    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.pdp-related .related.products {
    margin: 0;
    padding: 0;
}

.pdp-related .related.products > h2 {
    display: none;
}

.pdp-related ul.products {
    margin: 0 !important;
}

@media (max-width: 1024px) {

    .pdp-related {
        padding-top: 4rem;
    }

    .pdp-related .pdp-related__title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {

    .pdp-related {
        --gutter: 15px;

        padding-top: 3rem;
    }

    .pdp-related .pdp-related__title {
        margin-bottom: 1.5rem;

        font-size: 1.375rem;
    }
}

/* ========================================
   GESCHIKT VOOR (TAGS → LANDINGSPAGINA'S)
   Laatste rij van de specificaties: zelfde
   lijn erboven en zelfde label als de cellen,
   label en chips naast elkaar. Chips in de
   vorm van de filter-/variatiechips (36px,
   --radius-md), met trailing pijl = "ga naar".
   Onder 768px: label boven de chips.
======================================== */

.pdp-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;

    padding: 1rem 0;

    border-top: 1px solid var(--neutral-200);
}

.pdp-tags__label {
    flex: 0 0 auto;

    color: var(--neutral-600);

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.woocommerce div.product .pdp-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.woocommerce div.product .pdp-tags__list li {
    margin: 0;
    padding: 0;
}

.woocommerce div.product .pdp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 36px;

    padding: 0 10px 0 12px;

    background: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);

    color: var(--blue-900);

    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;

    transition: border-color .2s ease, color .2s ease;
}

.woocommerce div.product .pdp-tag svg {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    color: var(--blue-400);

    transition: transform .2s ease;
}

.woocommerce div.product .pdp-tag:hover,
.woocommerce div.product .pdp-tag:focus-visible {
    border-color: var(--blue-400);
    color: var(--blue-500);
}

.woocommerce div.product .pdp-tag:hover svg {
    transform: translateX(2px);
}

.woocommerce div.product .pdp-tag:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
}

@media (max-width: 768px) {

    .pdp-tags__label {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .woocommerce div.product .pdp-tag svg {
        transition: none;
    }

    .woocommerce div.product .pdp-tag:hover svg {
        transform: none;
    }
}