/*
Theme Name: Blocksy Child
Template: blocksy
Author: Dutchicon
Description: Child theme for Blocksy (Dutchicon)
Version: 1.2
Text Domain: blocksy-child
*/

@font-face {
    font-family: "Gilroy";
    src: url("/wp-content/themes/blocksy-child/assets/fonts/gilroy/Gilroy-Regular-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/wp-content/themes/blocksy-child/assets/fonts/gilroy/Gilroy-Bold-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* PT Sans Pro - Regular */
@font-face {
    font-family: 'PT Sans Pro';
    src: url('/wp-content/themes/blocksy-child/assets/fonts/pt_sans_pro/PTSansProRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* PT Sans Pro - Bold */
@font-face {
    font-family: 'PT Sans Pro';
    src: url('/wp-content/themes/blocksy-child/assets/fonts/pt_sans_pro/PTSansProBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== Tokens (koppelen aan Blocksy palette zodat Customizer leidend is) ===== */
:root {
    /* Kleuren (alias naar Blocksy variabelen) */
    --c-text: var(--theme-palette-color-1);
    /* off-black */
    --c-muted: var(--theme-palette-color-3);
    /* grijs */
    --c-bg: var(--theme-palette-color-10, #fff);
    --c-border: var(--theme-palette-color-7, #e5e7eb);
    /* Optioneel straks: --c-link, --c-accent, etc. */

    /* Typo (families mogen, @font-face via Pro) */
    --font-body: "PT Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-head: "Gilroy", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* Schalen */
    --fs-300: 16px;
    /* basis body size; grotere/kleinere via Pro */
    --sp-4: 16px;
    /* quick spacing token */
    --sp-5: 24px;

    /* Hoeken */
    --radius: 30px;
    /* standaard */
    --radius-thumb: 12px;
    /* thumbnails */
}

/* ===== Base ===== */
html {
    box-sizing: border-box
}

*,
*::before,
*::after {
    box-sizing: inherit
}

body {
    font-family: var(--font-body) !important;
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.55;
    font-size: var(--fs-300);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head) !important;
    color: var(--c-text);
    margin: 0 0 var(--sp-4);
}


/* ===== Global text link underline (ChatGPT-style) ===== */
a {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;

    /* voorkomt kruisen van g/p/y */
    text-underline-offset: 5px;

    /* underline iets lichter dan tekst */
    text-decoration-color: color-mix(in srgb,
            currentColor 65%,
            transparent);
}

/* h1 {
  font-family: Gilroy !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
*/

/* Links (kleur via Pro; hier alleen gedrag) 
a{ color: inherit; text-decoration: none }
a:hover{ opacity: .85 }
*/


/* ===== Mini utilities (neutraal, geen overlap met Pro) ===== */
.u-maxw-1200 {
    max-width: 1200px;
    margin-inline: auto
}

.u-radius {
    border-radius: var(--radius)
}

.u-muted {
    color: var(--c-muted)
}

.u-hide {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.link-dim:hover {
    opacity: .85
}

/* Thumbnails overal 12px (cards/PDP/mini-cart/cart/checkout) */
.woocommerce ul.products li.product a img,
.ct-product-card .product-element-top img,
.single-product .flex-control-thumbs img,
.ct-mini-cart .product-thumbnail img,
.woocommerce-cart-form .product-thumbnail img,
.woocommerce-checkout-review-order-table .product-thumbnail img {
    border-radius: var(--radius-thumb);
}

/* Focus ring (toegankelijkheid, subtiel) */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.highlight {
    background: #FFCD75;
    padding: 0em .1em;
    border-radius: 4px;
    display: inline-block;
    /* ← belangrijkste verschil */
}

/* Zet alle titels, knoppen, nav, minicart etc. terug naar handmatige case */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.entry-title,
.ct-title,
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__buttons,
.ct-header,
.ct-menu a,
.button,
.woocommerce a.button,
.woocommerce-page button,
.woocommerce-page .button {
    text-transform: none !important;
}

/* Page 5234 – band over de standaard page spacing trekken (alle schermen)======================= */
.page-id-5234 .di-band {
    /* trek de band over de onder-ruimte van de pagina */
    margin-bottom: calc(-1 * var(--content-vertical-spacing, 60px)) !important;
    /* geef die ruimte binnenin de band weer terug + jouw eigen bottom padding (64px) */
    padding-bottom: calc(var(--content-vertical-spacing, 60px) + 64px) !important;
}


/* ============ WP bar op zijn plek houden */
@media screen and (max-width: 782px) {

    body.admin-bar header,
    body.admin-bar .ct-header,
    body.admin-bar .site-header {
        margin-top: 46px !important;
    }
}

/* ============ Browse all icon set (Home) */
.browse-all-card {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 380px;
    /* optioneel, afhankelijk van je grid */
    background-color: #86D7FF;
    border-radius: 30px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* ============================= Mini-cart bullets + uitlijning (vereenvoudigd) === */
.woocommerce-mini-cart .di-mini-line-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    font-size: 14px;
    line-height: 1.35;
    color: #2a3350;
}

.woocommerce-mini-cart .di-mini-line-item {
    display: inline-flex;
    align-items: baseline;
    line-height: 1.1;
    margin-top: 2px;
}

/* Bullet (op x-hoogte) */
.woocommerce-mini-cart .di-mini-line-item::before {
    content: "•";
    margin-right: 4px;
    transform: translateY(0.1em);
}

/* Geen bullet bij titel */
.woocommerce-mini-cart .di-mini-title::before {
    content: none;
}

/* Titel flush links */
.woocommerce-mini-cart .di-mini-title {
    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
}

.woocommerce-mini-cart .di-mini-title .product-title {
    margin: 0;
    text-indent: 0;
}

/* Prijs dichterbij bullets */
.woocommerce-mini-cart .price-only {
    margin-top: 4px;
    line-height: 2.7;
}

/* Mobiel: onder elkaar stapelen */
@media (max-width: 520px) {
    .woocommerce-mini-cart .di-mini-line-list {
        display: block;
    }

    .woocommerce-mini-cart .di-mini-line-item {
        display: flex;
        margin-top: 4px;
    }

    .woocommerce-mini-cart .di-mini-title {
        margin-top: 0;
    }
}

.woocommerce-mini-cart .product-title {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
    cursor: default;
}

.woocommerce-mini-cart__buttons .button {
    font-size: 13px;
    padding: 8px 16px 9px 16px;
}

/* ================================= Mini-cart item layout met custom gap */
/* Mini-cart: afbeelding linksboven uitgelijnd naast tekst */
ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: start;
    column-gap: 16px;
    padding: 0;
    /* optioneel: strakker zonder extra padding */
}

/* Thumbnail zonder marge/padding */
ul.woocommerce-mini-cart .product-thumbnail {
    width: 70px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

/* Afbeelding schaalt netjes, afgeronde hoeken */
ul.woocommerce-mini-cart .product-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: contain;
}

/* ================================== Cart styling =============================================================== */
/* ==================== PRODUCTRIJ (DESKTOP + MOBIEL) ==================== */
.di-cart td.product-thumbnail {
    width: 120px;
    min-width: 120px;

}

.di-cart td.product-thumbnail .di-thumb {
    width: 120px;
    max-width: 120px;
    border-radius: 12px;
    overflow: hidden;
}

.di-cart td.product-thumbnail .di-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.di-cart td.product-name {
    padding-left: 0;
}

/* === Bullet-style op desktop: horizontaal met gelijke spacing rond bullets === */
/* Altijd 3 regels met bullets op regel 2 en 3 */
.di-cart .di-line-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
    font-size: 16px;
    color: var(--theme-palette-color-1, #0F1932);
}

.di-cart .di-line-item {
    display: flex;
    align-items: flex-start;
}

.di-cart .di-line-item--bullet::before {
    content: "•";
    margin-right: 2px;
    color: var(--theme-palette-color-1, #0F1932);
    font-weight: bold;
    display: inline-block;
    width: 1em;
}

/* Prijsrij */
.di-cart th.product-subtotal {
    width: 160px;
    text-align: left;
    vertical-align: top;
}

.di-cart td.product-subtotal {
    width: 160px;
    text-align: left;
    vertical-align: top;
    padding-top: 45px;
    /* 👈 Alleen de prijs zakt mee */
}

/* Cart – remove icon uitlijnen met prijs / eerste regel */
.woocommerce-cart .di-cart td.product-remove {
    vertical-align: top !important;
    padding-top: 45px !important;
}

/* ==================== MOBILE PRODUCT LAYOUT ==================== */
@media (max-width: 680px) {
    .di-cart {
        --di-thumb-m: 120px;
        --di-gap-m: 12px;
    }

    .di-cart table.shop_table.cart {
        table-layout: auto !important;
        width: 100% !important;
    }

    .di-cart th.product-subtotal,
    .di-cart td.product-subtotal,
    .di-cart th.product-remove,
    .di-cart td.product-remove {
        display: none !important;
    }

    .di-cart col.di-col-price,
    .di-cart col.di-col-remove {
        width: 0 !important;
    }

    .di-cart col.di-col-thumb {
        width: var(--di-thumb-m) !important;
    }

    .di-cart td.product-thumbnail {
        width: var(--di-thumb-m) !important;
        min-width: var(--di-thumb-m) !important;
        padding-right: var(--di-gap-m) !important;
    }

    .di-cart td.product-thumbnail .di-thumb {
        width: var(--di-thumb-m);
        max-width: var(--di-thumb-m);
    }

    .di-cart td.product-name {
        padding-left: 0 !important;
    }

    .di-cart td.product-name>div {
        margin-left: calc(var(--di-gap-m) + 4px) !important;
    }

    /* Prijs onder tekst, links uitgelijnd */
    .di-cart .product-mobile-actions {
        text-align: left !important;
        margin-left: calc(var(--di-thumb-m) + var(--di-gap-m)) !important;
        margin-top: 4px;
    }

    /* Laat productblok vollopen als totals eronder komen */
    .di-cart table.shop_table.cart {
        margin-bottom: 32px !important;
    }
}

@media (max-width: 1024px) {
    .woocommerce-cart .product-mobile-actions {
        margin-left: 30px !important;
    }
}

/* ==================== COUPON STIJL & KNOP ==================== */
.di-cart .di-coupon-wrap {
    margin: 24px 0 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    justify-content: flex-start;
}

.di-cart #di_coupon_code {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 16px !important;
    padding: 5px 20px 5px 15px !important;
    width: 277px !important;
    box-sizing: border-box !important;
    border: 1px solid #E3E8EE !important;
    border-radius: 4px !important;
    background: #FAFBFC !important;
    color: var(--theme-palette-color-14) !important;
}

.di-cart #di_coupon_code:focus {
    border-color: var(--theme-palette-color-6, #D1D7DE) !important;
    background: #FFFFFF !important;
    /* licht contrast bij focus */
    outline: none !important;
    /* voorkomt dubbele ring */
    color: var(--theme-palette-color-2) !important;
}


/* Apply button: ghost style, PT Sans Pro Semi-Bold */
.di-cart #di_apply_coupon {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    font-family: inter, sans-serif !important;
    font-weight: 600 !important;
    padding: 5px 20px 6px 20px !important;
    border-radius: 9999px !important;
    border: 2px solid #25333D !important;
    background: transparent !important;
    color: #17242F !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.di-cart #di_apply_coupon:hover {
    background: rgba(6, 43, 87, 0.06) !important;
}



/* Centered onder mobile */
@media (max-width: 680px) {
    .di-cart .di-coupon-wrap {
        justify-content: left;
    }

    .di-cart #di_coupon_code,
    .di-cart #di_apply_coupon {
        width: auto !important;
        min-width: unset !important;
        max-width: unset !important;
    }
}

/* Foutmeldingen coupon netjes onder veld */
.di-cart .di-coupon-messages {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 0px !important;
    margin-left: 17px !important;
}

.di-cart .di-coupon-messages ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    color: #0F1932 !important;
    font-size: 14px !important;
}

.di-cart .di-coupon-messages li {
    margin: 0 0 2px 0 !important;
    text-align: left;
}

/* ============= DUBBELE WOO NOTICES VERWIJDEREN ============= */
.woocommerce-notices-wrapper {
    display: none !important;
}

/* ===================================================================== PDP ================================================================= */
/* === Add to bag / Checkout now === */
.di-add-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.di-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border-radius: 9999px;
    min-height: 56px;
    /* gefixeerde hoogte */
    padding: 0 40px;
    /* symmetrisch */
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
    flex: 1;
    box-sizing: border-box;
    /* belangrijk voor hoogte consistency */
}

/* Ghost button (links) */
.di-btn--ghost {
    border: 2px solid var(--theme-palette-color-2);
    background: transparent;
    color: var(--theme-palette-color-2);
}

.di-btn--ghost:hover {
    border-color: var(--theme-palette-color-2);
    background: var(--theme-palette-color-8);
    color: var(--theme-palette-color-2);
}

/* Solid button (rechts) */
.di-btn--solid {
    background: var(--theme-palette-color-2);
    color: #fff;
    border: 2px solid var(--theme-palette-color-2);
}

.di-btn--solid:hover {
    background: var(--theme-palette-color-14);
    border-color: var(--theme-palette-color-14);
    color: #fff;
}

/* === Mobiel (stacked) === */
@media (max-width: 480px) {
    .di-add-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .di-add-buttons .di-btn {
        width: 100%;
        font-size: 14px;
        min-height: 44px;
        padding: 0 28px;
    }
}


/* === PDP dropdowns: extra padding incl. chevron === */
.single-product table.variations select {
    padding-left: 20px;
    padding-right: 36px;
    /* extra ruimte voor chevron */
    height: 44px;
    font-size: 15px;
    border-radius: 4px;
    box-sizing: border-box;
    background-position: right 14px center;
    /* schuif het pijltje iets naar binnen */
    background-repeat: no-repeat;
    background-size: 12px auto;
}

/* optioneel: consistent hover/focus effect */
.single-product table.variations select:hover,
.single-product table.variations select:focus {
    border-color: var(--theme-palette-color-5);
    outline: none;
}

/* Minder ruimte tussen de twee dropdown-rijen */
.single-product form.variations_form table.variations tr:not(:last-child) {
    margin-bottom: 12px;
    /* was 1.5em (~24px) */
}

/* Desktop: extra ruimte rechts van de gallery */
@media (min-width: 1010px) {
    .single-product div.product .entry-summary {
        margin-left: 62px;
    }
}

/* Tablet en kleiner: marge terug naar normaal */
@media (max-width: 1009px) {
    .single-product div.product .entry-summary {
        margin-left: 0px;
        /* of 20px als je iets lucht wilt houden */
    }
}


/* Verberg gallery-prev/next pijlen op touch */
@media (hover: none) and (pointer: coarse) {

    .single-product .woocommerce-product-gallery .flex-direction-nav,
    .single-product .woocommerce-product-gallery .flex-direction-nav a,
    .single-product .woocommerce-product-gallery [class*="flexy-arrow"],
    .single-product .woocommerce-product-gallery .flexy-arrow-prev,
    .single-product .woocommerce-product-gallery .flexy-arrow-next,
    .single-product .woocommerce-product-gallery .ct-product-gallery-container [class*="flexy-arrow"],
    .single-product .woocommerce-product-gallery .swiper-button-prev,
    .single-product .woocommerce-product-gallery .swiper-button-next {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* === Normalize: altijd PT Sans Pro op beide knoppen === 
.single-product .di-add-buttons .di-btn,
.single-product .di-add-buttons .di-btn * {
  font-family: "PT Sans Pro", sans-serif !important;
  font-weight: 600;
} */

/* === Forceer ghost-stijl op de echte Woo button (die vaak .button/.alt krijgt) === */
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost {
    background: transparent !important;
    border: 2px solid var(--theme-palette-color-2) !important;
    color: var(--theme-palette-color-2) !important;
    box-shadow: none !important;
}

/* Ghost: consistent in alle states */
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost:hover,
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost:focus,
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost:active,
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost:disabled,
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost.loading,
.single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost.added {
    background: var(--theme-palette-color-8) !important;
    /* jouw grijze hover bg */
    color: var(--theme-palette-color-2) !important;
    border-color: var(--theme-palette-color-2) !important;
}

/* Sommige thema's duwen .button.alt styling door op mobile/touch – neutraliseren */
@media (hover: none) and (pointer: coarse) {

    .single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost,
    .single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost:hover,
    .single-product .di-add-buttons .single_add_to_cart_button.di-btn--ghost:focus {
        background: transparent !important;
        color: var(--theme-palette-color-2) !important;
        border-color: var(--theme-palette-color-2) !important;
    }
}

.product-specifications [class*="accordion"] [class*="content"] {
    transition: none !important;
}

/* Tekstlinks binnen Content Blocks */
[data-block-id] a {
    text-decoration: none !important;
    color: var(--theme-palette-color-12) !important;
    /* normale kleur */
    font-weight: 600;
    transition: color 0.18s ease;
}

/* Hover / focus: verander alleen de kleur */
[data-block-id] a:hover,
[data-block-id] a:focus {
    text-decoration: none !important;
    color: var(--theme-palette-color-13) !important;
    /* hoverkleur */
    font-weight: 600;
}

html {
    scroll-behavior: smooth;
}

/* =============================================================== Handmatige preview en ghost buttons ========================= */
/* === Wrapper voor de knoppen === */
.di-button-row {
    max-width: 500px;
    display: flex;
    gap: 16px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: nowrap;
}

.di-button-row>.stk-block-column {
    width: 242px !important;
    flex: 0 0 auto;
}

/* === UNSET alles en begin schoon === */
.di-button {
    all: unset;
    display: inline-block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding: 0 24px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.18s ease-in-out;
    text-decoration: none !important;
}

/* === Solid (preview) button === */
.di-button.filled {
    background-color: var(--di-accent);
    color: var(--di-accent-text);
    border: none;
}

/* Hover */
.di-button.filled:hover {
    background-color: var(--di-accent-hover);
}

/* Focus (toegankelijk) */
.di-button.filled:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--di-accent) 60%, white);
    outline-offset: 2px;
}

/* Icons Included / PDP – forceer witte tekst op filled buttons */
.single-product .di-button.filled,
.single-product .di-button.filled *,
.single-product .di-button.filled:visited,
.single-product .di-button.filled:active,
.single-product .di-button.filled:hover,
.single-product .di-button.filled:focus {
    color: var(--di-accent-text) !important;
}


/* =========================================================
   COLLECTION TOKENS (per PDP via body classes)
   ========================================================= */

/* Gizmo */
.single-product.product-slug-gizmo {
    --di-accent: #22bf97;
    --di-accent-hover: #1CB08F;
    --di-accent-text: #ffffff;
    --di-icons-bg: #ebfcf6;
}

/* Raw */
.single-product.product-slug-raw {
    --di-accent: #FFCD75;
    --di-accent-hover: #FFC357;
    /* #FFC357 donkerder – #FFD48A lichter */
    --di-accent-text: #1E2846;
    --di-icons-bg: #FFF8E7;
}

/* Wired */
.single-product.product-slug-wired {
    --di-accent: #FF7D6E;
    --di-accent-hover: #FF6C60;
    --di-accent-text: #ffffff;
    --di-icons-bg: #FFF4F4;
}

/* Pika */
.single-product.product-slug-pika {
    --di-accent: #34C2FF;
    --di-accent-hover: #0FB7FF;
    --di-accent-text: #ffffff;
    --di-icons-bg: #E3F9FF;
    /* #E3F9FF 50% van pastel – #C7F2FF 100% pastel*/
}


/* =========================================================
   ICONS INCLUDED – BACKGROUND (1x, generiek)
   ========================================================= */

/* Icons Included panel – juiste Stackable manier */
.di-icons-panel {
    --stk-block-background-color: var(--di-icons-bg);
}


.di-button.filled,
.di-button.filled:hover,
.di-button.filled:visited,
.di-button.filled:active,
.di-button.filled:focus {
    color: var(--di-accent-text) !important;
}



/* === GHOST: download knop === */
.di-button.ghost {
    background-color: transparent !important;
    border: 2px solid var(--theme-palette-color-2) !important;
    color: var(--theme-palette-color-2) !important;
    line-height: 52px;
}

.di-button.ghost:hover {
    background-color: var(--theme-palette-color-8) !important;
    border-color: var(--theme-palette-color-2) !important;
    color: var(--theme-palette-color-2) !important;
}

.di-button.ghost:visited,
.di-button.ghost:focus,
.di-button.ghost:active {
    background-color: transparent !important;
    border-color: var(--theme-palette-color-2) !important;
    color: var(--theme-palette-color-2) !important;
}

/* === Mobile layout === */
@media (max-width: 767px) {

    .di-button-row {
        flex-direction: column;
        gap: 12px !important;
    }

    .di-button-row>.stk-block-column {
        width: 100% !important;
    }

    .di-button {
        height: auto;
        /* 👈 loslaten */
        line-height: normal;
        /* 👈 loslaten */

        padding: 8px 30px 9px;
        /* jouw exacte wens */
        min-height: 44px;
        /* tap target */

        font-size: 13px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

}


/* === Fix voor links die ook knop zijn === */
[data-block-id] a.di-button {
    color: inherit !important;
    text-decoration: none !important;
}

[data-block-id] a.di-button:hover {
    color: inherit !important;
}

[data-block-id] a.di-button:visited {
    color: inherit !important;
}

/* === Overige tekstlinks in blokken === */
[data-block-id] a:not(.di-button):hover {
    color: var(--theme-palette-color-13) !important;
}


/* =============================================================== Verberg inline lightbox-afbeeldingen === */
.di-lightbox-hidden,
.di-lightbox-hidden img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden;
}

/* ============================================================= Specifications content block ================ */
.max-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 767px) {
    .stk-block-icon-list-item__text {
        width: 100% !important;
        text-align: left !important;
    }
}

.only-mobile {
    display: none;
}

@media (max-width: 767px) {
    .only-mobile {
        display: inline;
    }
}

/* ============================================================= Turn-off visited state add to bag button ================ */
.single_add_to_cart_button.added:not(:hover),
.single_add_to_cart_button.added:focus,
.single_add_to_cart_button.added:active {
    background: transparent !important;
    color: var(--theme-palette-color-2) !important;
    border-color: var(--theme-palette-color-2) !important;
}

/* =================================== License Agreement === */
/* Desktop Sticky */
.sidebar-sticky {
    position: sticky !important;
    top: 120px !important;
    align-self: flex-start;
}

/* Mobile: sticky uit */
@media (max-width: 768px) {
    .sidebar-sticky {
        position: static !important;
        top: auto !important;
    }
}

/* Sidebar navigatie links = zwart */
.sidebar-nav a {
    color: var(--theme-palette-color-1) !important;
    /* jouw off-black */
    font-weight: 600 !important;
    /* Semi-Bold voor scanbaarheid */
}

/* Hover: subtiel dimmen, geen accentkleur */
.sidebar-nav a:hover {
    color: var(--theme-palette-color-12) !important;
    opacity: 1 !important;
}



/* ======================================= Altijd titel in 2 regels voor collection productpagina's */
.single-product .entry-summary .product_title,
.single-product h1.product_title {
    display: block;
    max-width: 320px;
    /* <-- bepaal de breedte hier */
    line-height: 1.05;
    white-space: normal;
    word-break: normal;
}


/* ======================================= Dutchicon Blog index pagina =============================== */
/* Featured Category Pill */
.featured-chip {
    background-color: rgba(255, 255, 255, 0.50) !important;
    /* 50% wit */
    color: #001E4B !important;
    /* jouw navy */
    border-radius: 9999px !important;
    /* perfecte pil */
    transition: background-color 0.18s ease;
    text-decoration: none !important;
    display: inline-block;
    z-index: 20;
    /* boven overlay */
}

/* Hover effect */
.featured-chip:hover {
    background-color: rgba(255, 255, 255, 1.0) !important;
    /* hover → 70% wit */
    color: #001E4B !important;
    /* blijft navy */
}

/* ============================================== Featured title highlight stroken */
/* Highlighted multiline headings: elke span blijft 1 regel */
.featured-title span {
    display: inline-block;
    white-space: nowrap;
    /* <<< geen wrap binnen balk */
    overflow-wrap: normal;
    word-break: normal;
    background: #fff;
    padding: .05em .3em .1em .3em;
    border-radius: .08em;
    line-height: 1;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.featured-title br {
    display: block;
    height: .35em;
    margin: 0;
    line-height: 0;
}

/* --------------------------------------------------------- Card overlay (hele kaart klikbaar) --- */

.blog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* duwt chip omhoog + readmore omlaag */
    height: 100%;
}

.card-content {
    padding-left: 10px;
}

/* Alleen Read more rij duwt omlaag */
.readmore-row {
    margin-top: auto;
}

/* --- Pijl animatie --- */
.read-more svg,
.readmore-row .arrow-shift svg {
    transition: transform .18s ease;
    transform: translateX(0);
}

.read-more:hover svg,
.readmore-row:hover .arrow-shift svg {
    transform: translateX(6px);
}

/* 6 small cards grid */
.blog-grid {
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    /* mobile base */
}

/* Tablet: 2 kolommen */
@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 kolommen */
@media (min-width: 1280px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 50/50 fase → ALLE kaarten = 480px */
@media (min-width: 768px) and (max-width: 1279px) {
    .blog-card {
        min-height: 480px !important;
    }
}

/* Desktop 3 kolommen → ALLE kaarten = 540px */
@media (min-width: 1280px) {
    .blog-card {
        min-height: 540px !important;
    }
}

/* Mobile → vrije hoogte */
@media (max-width: 767px) {
    .blog-card {
        min-height: 0;
        height: auto;
        margin-bottom: 2rem !important;
    }

    .category .entry-header,
    .blog .entry-header {
        margin-bottom: 0rem !important;
        padding-bottom: 20px !important;
    }

    body.admin-bar header {
        margin-top: 58px !important;
    }

    body .card--standard .post-title,
    .category h2,
    .blog h2 {

        font-size: 32px !important;

    }

    .card-content .post-title {
        margin-bottom: 15px !important;
    }

    .dutchicon-grid {
        margin: 20px auto !important;
    }

    .hero-section h1 {
        font-size: 36px !important;
    }

    body.admin-bar header {
        margin-top: 0px !important;
    }

    .hero-section .icon-circle {
        width: 50px !important;
        height: 50px !important;
    }

    .single-post #main .ct-container {
        gap: 10px !important;
    }
}


/* Hover zoom (desktop only) – schaal de zichtbare kaart wanneer de wrapper ergens wordt gehovert */
@media (hover:hover) and (pointer:fine) {
    .card-wrapper .blog-card {
        transition: transform .18s ease;
        will-change: transform;
    }

    .card-wrapper:hover .blog-card {
        transform: scale(1.015);
    }
}

/* Stop full-width hover area rechts van Read more */
.readmore-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 20;

    /* DE FIX: kaartinhoud mag 'm niet laten uitrekken */
    align-self: flex-start;
    /* <-- NIEUW: voorkomt 100% breedte */
    width: auto !important;
    /* <-- dwingt echte content-breedte */

    white-space: nowrap;
    /* ← voorkomt afbreken naar 2 regels */
}

.card-wrapper {
    display: block;
    position: relative;
}



/* Zorg dat de overlay *onder* alles blijft */
.card-overlay {
    z-index: 5;
}

/* Forceer overlay onder de content-lagen in 6-grid 
.card-overlay { z-index: 0 !important; }*/

/* Chip + Read more altijd erboven (hover/klik werkt weer) 
.featured-chip,
.readmore-row { position: relative; z-index: 2 !important; }*/

.blog-card {
    cursor: pointer;
}

/* jouw bestaande CSS */
/* ... */
/* ... */
/* helemaal onderaan ↓ */

/*.card-wrapper { overflow: visible !important; }*/
.card-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    pointer-events: auto;
}

.featured-chip,
.readmore-row,
.readmore-row * {
    position: relative;
    z-index: 11;
    pointer-events: auto;
}

/*
.blog-card {
  pointer-events: none; /* standaard: kaart is niet klikbaar 
} */

.blog-card .featured-chip,
.blog-card .readmore-row,
.blog-card .readmore-row *,
.blog-card a {
    pointer-events: auto;
    /* expliciet klikbaar */
}

.card-wrapper {
    pointer-events: auto;
    /* wrapper vangt klik voor JS → hele kaart klikbaar */
    cursor: pointer;
}

/* !!!!!!!!!!!!!!!!!!!! Tot hier klopt alles!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --- */
/*
.blog-grid-row {
  max-width: 1200px;
  margin: 0 auto;          /* centreert exact 
  gap: 30px;               /* gelijk aan 6-grid 
  box-sizing: border-box;
} */

/* Big + Small row layout */
.blog-grid-row {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    /* Mobile: onder elkaar */
}

/* Tablet: 50 / 50 */
@media (min-width: 768px) {
    .blog-grid-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================================== Desktop layout (≥1280px) - DEFAULT (BIG links, SMALL rechts) */
/* Desktop: 2:1 layout werkt altijd via een expliciete span-class */
@media (min-width: 1280px) {
    .blog-grid-row {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(3, 1fr);
        /* 3 kolommen → 2:1 */
    }

    /* De kaart die breed moet zijn krijgt .span-2 op de card-wrapper */
    .blog-grid-row .span-2 {
        grid-column: span 2;
    }

    .blog-grid-row .card-wrapper:not(.span-2) {
        grid-column: span 1;
    }
}



/* ========================================= Desktop-only: BIG card titel echt 60px, wint van alles */
@media (min-width: 1280px) {

    .blog-card.blog-card--big .featured-title,
    .blog-card.blog-card--big .stk-block-heading__text,
    .blog-card.blog-card--big h1.stk-block-heading__text,
    .blog-card.blog-card--big h2.stk-block-heading__text,
    .blog-card.blog-card--big h3.stk-block-heading__text {
        font-size: 60px !important;
        /* géén line-height hier i.v.m. highlight balken */
    }
}

/* ========================================= Categories navigation */
.blog-filters,
.blog-cat-nav {
    display: flex;
    gap: 28px;
    /* afstemmen op spacing system */
    align-items: center;
    justify-content: center;
    /* centreert horizontaal */
}

.filter-btn,
.cat-link {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 15px;
    color: var(--theme-palette-color-1);
    text-decoration: none;
    padding: 4px 0;
    transition: color .18s ease;
    background-color: unset;
    cursor: pointer;
}

/* Hover alleen op NIET-actieve links */
.blog-filters .filter-btn:not(.is-active):hover,
.blog-cat-nav a:not(.is-active):hover {
    background-color: rgba(var(--ct-color-11-rgb), 0.12);
    border-radius: 9999px;
    color: var(--theme-palette-color-12);
}

/* Actieve CHIP staat */
.filter-btn.is-active,
.cat-link.is-active {
    background-color: var(--theme-palette-color-11);
    /* turquoise pill */
    color: #FFF;
    padding: 4px 18px 4px 18px;
    border-radius: 999px;
    font-weight: 600;
    cursor: default;
}

@media (max-width: 767px) {

    .blog-filters,
    .blog-cat-nav {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 16px;
        margin-top: 16px;
        gap: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn,
    .cat-link {
        white-space: nowrap;
        scroll-snap-align: center;
    }
}

/* ====================================================== Licenses ====================== */

/* === License Cards Grid === */
.license-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* vaste afstand tussen alle cards */
    align-items: start;
    /* zorgt dat alles netjes bovenaan begint */
}

/* Tablet: 2 naast elkaar */
@media (max-width: 1330px) {
    .license-cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin-inline: auto;
        /* centreert de 2 cards */
    }
}

/* Mobile: alles onder elkaar */
@media (max-width: 660px) {
    .license-cards {
        grid-template-columns: 1fr;
    }
}

/* ====================================================== Link kleuren ====================== */
body .entry-content h1 a,
body .entry-content h2 a,
body .entry-content h3 a,
body .entry-content h4 a,
body .entry-content h5 a,
body .entry-content h6 a {
    color: var(--theme-palette-color-1) !important;
    text-decoration: none !important;
}

body .entry-content h1 a:hover,
body .entry-content h2 a:hover,
body .entry-content h3 a:hover,
body .entry-content h4 a:hover,
body .entry-content h5 a:hover,
body .entry-content h6 a:hover {
    color: var(--theme-palette-color-12) !important;
}

.stk-container p a,
.stk-container li a {
    color: var(--theme-palette-color-12) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stk-container p a:hover,
.stk-container li a:hover {
    color: var(--theme-palette-color-13) !important;
}

/* ===================================
   BLOG / LICENSE NAVIGATION LINKS
   =================================== */

/* Vorige/volgende post, license agreement nav, pagination */
body .post-navigation a,
body .navigation a,
body .nav-links a,
body .ct-pagination a,
body .ct-pagination span {
    color: var(--theme-palette-color-11) !important;
    text-decoration: none;
    transition: color .18s ease;
}

body .post-navigation a:hover,
body .navigation a:hover,
body .nav-links a:hover,
body .ct-pagination a:hover {
    color: var(--theme-palette-color-13) !important;
}

/* optioneel: active/current state donkerder maken */
body .ct-pagination .current {
    color: var(--theme-palette-color-1) !important;
    font-weight: 600;
}

/* Forceer Blocksy link-variables per template */
.single,
.page,
.archive {
    --links-color: var(--theme-palette-color-12) !important;
    --links-hover-color: var(--theme-palette-color-13) !important;
}

/* Breadcrumbs */
body .ct-breadcrumbs a {
    color: var(--theme-palette-color-12) !important;
    text-decoration: none;
}

body .ct-breadcrumbs a:hover {
    color: var(--theme-palette-color-13) !important;
}

/* Prev/Next post navigatie */
body nav.post-navigation a,
body .navigation.post-navigation a,
body .post-navigation .nav-links a,
body .nav-links a {
    color: var(--theme-palette-color-11) !important;
    text-decoration: none;
    transition: color .18s ease;
}

body nav.post-navigation a:hover,
body .navigation.post-navigation a:hover,
body .post-navigation .nav-links a:hover,
body .nav-links a:hover {
    color: var(--theme-palette-color-13) !important;
}

/* Paginatie (WP core + Blocksy) */
body .wp-block-query-pagination a,
body .wp-block-query-pagination-numbers a,
body .ct-pagination a,
body .page-numbers a,
body .pagination a {
    color: var(--theme-palette-color-11) !important;
    text-decoration: none;
}

body .wp-block-query-pagination a:hover,
body .wp-block-query-pagination-numbers a:hover,
body .ct-pagination a:hover,
body .page-numbers a:hover,
body .pagination a:hover {
    color: var(--theme-palette-color-13) !important;
}

/* Huidige pagina nummer duidelijker */
body .ct-pagination .current,
body .page-numbers .current,
body .wp-block-query-pagination-numbers .current {
    color: var(--theme-palette-color-1) !important;
    font-weight: 600;
}

/* ===================================
   STACKABLE ICON LIST — License Navigation (zwart > blauw)
   =================================== */

body .wp-block-stackable-icon-list-item a,
body .stk-block-icon-list-item__text a {
    color: var(--theme-palette-color-1) !important;
    /* zwart standaard */
    text-decoration: none !important;
    transition: color .18s ease;
}

body .wp-block-stackable-icon-list-item a:hover,
body .stk-block-icon-list-item__text a:hover {
    color: var(--theme-palette-color-12) !important;
    /* blauw op hover */
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Optioneel: laat ook het icoon mee verkleuren */
body .wp-block-stackable-icon-list-item a svg path {
    fill: var(--theme-palette-color-1) !important;
    transition: fill .18s ease;
}

body .wp-block-stackable-icon-list-item a:hover svg path {
    fill: var(--theme-palette-color-12) !important;
}

/* ===== Stackable Icon List nav: zwart → blauw, geen extra darken ===== */
.nav-icon-list .wp-block-stackable-icon-list-item a,
.nav-icon-list .stk-block-icon-list-item__text a {
    color: var(--theme-palette-color-1) !important;
    /* standaard: zwart */
    text-decoration: none !important;
    transition: color .18s ease;
}

.nav-icon-list .wp-block-stackable-icon-list-item a:hover,
.nav-icon-list .stk-block-icon-list-item__text a:hover {
    color: var(--theme-palette-color-12) !important;
    /* hover: blauw */
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Icoon mee kleuren (optioneel) */
.nav-icon-list .wp-block-stackable-icon-list-item a svg path {
    fill: var(--theme-palette-color-1) !important;
    transition: fill .18s ease;
}

.nav-icon-list .wp-block-stackable-icon-list-item a:hover svg path {
    fill: var(--theme-palette-color-12) !important;
}

/* KILL switch voor Stackable hover-darken op de item-container zelf */
.nav-icon-list .wp-block-stackable-icon-list-item:hover,
.nav-icon-list .stk-block-icon-list-item:hover,
.nav-icon-list .stk-block-icon-list-item__content:hover {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    /* neutraliseer mogelijke var-gebaseerde darken */
    --stk--hover-color: currentColor !important;
    --stk--color--text-hover: currentColor !important;
}




/* ========= Override ALL Blocksy / Stackable button typography ========= */

.di-btn,
.di-btn * {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

button,
.button,
.ct-button,
.stk-button,
.di-btn,
.di-btn * {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif !important;
}

/* ============================================================ free cards ================== */


/* ============================================================ Checkout page ================== */

/* Checkout: Apply coupon → Perfect ghost button (Inter 600 / 14px / 44px / 2px border) */
.woocommerce-checkout .woocommerce-form-coupon button.button {

    /* Reset alle Woo/Blocksy defaults */
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;

    /* Jouw custom look */
    height: 44px !important;
    padding: 0 22px !important;
    /* horizontale padding */
    border: 2px solid #17242f !important;
    background: transparent !important;
    color: #17242f !important;
    border-radius: 30px !important;

    /* Typografie */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    /* Perfect vertical alignment */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: all .18s ease;
}

/* Hover */
.woocommerce-checkout .woocommerce-form-coupon button.button:hover {
    background: var(--theme-palette-color-8) !important;
    color: #17242f !important;
}

/* Checkout: style for "Please enter a valid coupon code" */
#coupon-error-notice,
.coupon-error-notice {
    display: block !important;
    font-size: 14px !important;
    color: #0F1932 !important;
    margin-top: 10px !important;
    /* afstand onder input */
    margin-left: 17px !important;
    /* klein naar rechts */
    line-height: 1.4 !important;
}


/* ====================================== Bag + Checkout page titels =========== */
.di-page-header {
    margin: 16px auto 60px;
    text-align: center;
    max-width: 880px;
}

.di-page-title {
    font-family: 'Gilroy', sans-serif;
    font-weight: 700;
    font-size: 70px;
    line-height: 1.05;
    color: var(--theme-palette-color-1);
    margin: 0;
}

@media (max-width: 900px) {
    .di-page-header {
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .di-page-title {
        font-size: 55px;
    }
}

@media (max-width: 600px) {
    body .di-page-header {
        margin-top: 20px !important;
        /* echte override */
        margin-bottom: 30px !important;
    }

    body .di-page-title {
        font-size: 40px !important;
    }
}

/* ===========================================
   MOBILE FIX — force Bag/Checkout title up
   =========================================== */
@media (max-width: 600px) {

    /*  ALL marges above title gone */
    .di-page-header,
    .woocommerce-cart .di-page-header,
    .woocommerce-checkout .di-page-header,
    .woocommerce .di-page-header,
    .ct-container .di-page-header,
    .entry-content>.di-page-header,
    .ct-main-content>.di-page-header {
        margin-top: 10px !important;
        /* ← jouw gewenste 40px omhoog */
        margin-bottom: 30px !important;
    }

}

.woocommerce-notice--success {
    background-color: #E9F7F0;
    border: 1px solid #C1ECDC;
    color: #064E32;
    font-weight: 600;
    border-radius: 12px;
    padding: 20px 24px 20px 53px;
    /* extra ruimte links voor het icoon */
    position: relative;
}

.woocommerce-notice--success .ct-icon,
.woocommerce-notice--success svg {
    position: absolute;
    left: 20px;
    /* afstand van de linkerrand */
    top: 50%;
    transform: translateY(-50%);
    color: #0C8E59;
}

/* =========================================================== MOBILE – 3 regels + prijs uitgelijnd met 1e regel */
/* Checkout – prijs uitlijnen met de bovenste regel (C / P / L) */
.woocommerce-checkout-review-order-table .cart_item td.product-total {
    vertical-align: top !important;
    padding-top: 30px !important;
    /* eventueel 1–4px tunen */
}

/* (optioneel) Zorg dat het bedrag zelf geen rare extra hoogte pakt */
.woocommerce-checkout-review-order-table .cart_item td.product-total .woocommerce-Price-amount {
    line-height: 1.1 !important;
}

/* Checkout – minder ruimte onder de 3 regels (C / P / L) */
.woocommerce-checkout-review-order-table .cart_item td.product-name {
    padding-bottom: 4px !important;
    /* standaard is ~12–14px → dit is half */
}

.woocommerce-checkout-review-order-table .cart_item td.product-name .di-line-item {
    margin-bottom: 0 !important;
    /* verwijder extra marge tussen regels */
    line-height: 1.2 !important;
    /* compacte, maar goed leesbaar */
}

/* THANK YOU PAGE — Force C / P / L onto 3 separate stacked lines */
.woocommerce-order-received td.product-name {
    white-space: normal !important;
    /* breken toestaan */
}

/* Split elke bullet "•" naar een nieuwe regel */
.woocommerce-order-received td.product-name {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Visuele cleanup: zorg dat Bullets mooi beginnen */
.woocommerce-order-received td.product-name::before {
    content: "";
    /* voorkomt rare pseudo-elementen */
}


/* ============================================================= Icons at work ================= */

/* ======================================================
   DUTCHICON LOGO GRID – PERFECT CENTERING + AUTO SCALING
   ====================================================== */

.di-logo-grid {
    display: grid;
    width: 100%;
    margin: 0 auto;
    padding: 0;

    /* Desktop: maximu 4 per row, but flexible */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 30px 20px;
    justify-items: center;
    align-items: center;
}

/* Logos */
.di-logo-grid img {
    width: 100%;
    max-width: 260px;
    height: auto;
    object-fit: contain;
}


/* ============================
   Tablet
   ============================ */
@media (max-width: 900px) {
    .di-logo-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px 0px;
    }

    .di-logo-grid img {
        max-width: 200px;
    }
}


/* ============================
   Small Tablet / Large Mobile
   ============================ */
@media (max-width: 600px) {
    .di-logo-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 15px 0px;
    }

    .di-logo-grid img {
        max-width: 170px;
    }
}


/* ============================
   Mobile
   ============================ */
@media (max-width: 480px) {
    .di-logo-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 20px 0px;
    }

    .di-logo-grid img {
        max-width: 170px;
    }
}

/* =====================================
   MOBILE FIX (600px → 2 columns forced)
   ===================================== */
@media (max-width: 600px) {
    .di-logo-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        justify-items: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .di-logo-grid img {
        max-width: 130px !important;
        /* kleiner zodat 2 naast elkaar wél passen */
        width: 100%;
    }
}

/* ======================================== carousel logos home =========================== */

/* Basis: mobile – 4 underneath each other */
.logo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* wat jij mooi vindt */
}

/* Tablet – 2x2 */
@media (min-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop – 4 next to each other */
@media (min-width: 1024px) {
    .logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =================================================== image icons at work home ===== */

/* Icons-at-work kaart op tablet/kleine desktop */
@media (min-width: 1100px) and (max-width: 1276px) {
    .iaw-photo-col {
        display: flex;
    }

    .iaw-photo {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .iaw-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ================================================== Checkoutpage */


/* Select2 dropdown search field (country search) */
.select2-dropdown .select2-search__field {
    border-radius: 4px !important;
    /* ← kies 6 / 8 / 10 / 12 */
    height: 40px !important;
    padding: 6px 12px !important;
    font-size: 14px;
    border: 1px solid var(--theme-palette-color-6, #D1D7DE) !important;
    box-sizing: border-box;
}

.select2-dropdown .select2-search__field:focus {
    border-color: #9AA6B5 !important;
    outline: none !important;
}

.woocommerce-checkout .ct-order-review {
    --order-review-border: 3px solid var(--theme-palette-color-8);
    --order-review-border-radius: 6px;
}

/* Checkout – horizontale scheidingslijn tussen producten */
.woocommerce-checkout-review-order-table tbody tr.cart_item {
    border-bottom: 1px solid var(--theme-palette-color-7);
}

/* Checkout – lijn onder "Product / Subtotal" (table header) */
.woocommerce-checkout-review-order-table thead th {
    border-bottom: 3px solid var(--theme-palette-color-8) !important;
}

/* Checkout – rand rond payment methods */
.woocommerce-checkout #payment ul.payment_methods li {
    border: 1px solid var(--theme-palette-color-7) !important;
    border-radius: 0px;
    /* optioneel */
}

/* VAT */
.woocommerce-checkout-review-order-table tr.tax-rate th,
.woocommerce-checkout-review-order-table tr.tax-rate td {
    border-top: 0px solid var(--theme-palette-color-7) !important;
}

.woocommerce-checkout-review-order-table tr.tax-rate,
.woocommerce-checkout-review-order-table tr.tax-rate th,
.woocommerce-checkout-review-order-table tr.tax-rate td,
.woocommerce-checkout-review-order-table tr.cart-subtotal th,
.woocommerce-checkout-review-order-table tr.cart-subtotal td {
    border: 0 !important;
}

.woocommerce-checkout-review-order-table {
    --theme-table-border-width: 0px !important;
}

/* Total (vaak iets zwaarder) */
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
    border-top: 3px solid var(--theme-palette-color-14) !important;
}

/* ================================================== Bagpage */

/* Cart – lijn onder de table header (Product) */
.woocommerce-cart table.shop_table thead th {
    border-bottom: 3px solid var(--theme-palette-color-8) !important;
}

/* Cart – lijn onder elk product item */
.woocommerce-cart table.shop_table tbody tr.cart_item td {
    border-bottom: 1px solid var(--theme-palette-color-7) !important;
}

/* Bag totals: zorg dat borders echt zichtbaar zijn */
.woocommerce-cart .cart_totals table {
    border-collapse: collapse !important;
}

/* 1) Dikkere lijn om het hele Bag totals vlak (de box) */
.woocommerce-cart .cart_totals {
    border: 3px solid var(--theme-palette-color-8) !important;
    border-radius: 4px !important;
    /* pas aan naar smaak */
}

/* 1) De lijn BOVEN de VAT-rij = onderkant van Subtotal-rij */
.woocommerce-cart .cart_totals tr.cart-subtotal th,
.woocommerce-cart .cart_totals tr.cart-subtotal td {
    border-bottom: 0px solid var(--theme-palette-color-14) !important;
    /* kleur/dikte boven VAT */
}

/* Checkout – minder witruimte onder producten */
.woocommerce-checkout-review-order-table tr.cart_item td {
    padding-top: 24px !important;
    padding-bottom: 4px !important;
}

/* Prijs uitlijnen met eerste regel productnaam */
.woocommerce-checkout-review-order-table td.product-total {
    padding-top: 24px !important;
    padding-bottom: 4px !important;
    vertical-align: top !important;
}

/* Bag totals – dikke lijn boven Total */
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
    border-top: 3px solid var(--theme-palette-color-14) !important;
}

/* ==================================================================== Overscroll kleur */
html {
    background: #fff;
}

body {
    background: var(--theme-palette-color-10);
    /* jouw wit */
}

/* ===================================================================================== */

/* CART / BAG — verberg VAT regel volledig */
.woocommerce-cart tr.tax-rate,
.woocommerce-cart tr.tax-rate th,
.woocommerce-cart tr.tax-rate td {
    display: none !important;
}

.woocommerce-cart .cart_totals tr.order-total {
    display: none;
}

/* BAG TOTALS — verwijder de divider (border) onder de laatste rij in totals table */
.woocommerce-cart .cart_totals table.shop_table tr.di-subtotal-note th,
.woocommerce-cart .cart_totals table.shop_table tr.di-subtotal-note td {
    border-bottom: 0 !important;
    --theme-table-border-width: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Extra vangnet: als jouw note-row niet de enige laatste rij is */
.woocommerce-cart .cart_totals table.shop_table tfoot tr:last-child th,
.woocommerce-cart .cart_totals table.shop_table tfoot tr:last-child td {
    border-bottom: 0 !important;
    --theme-table-border-width: 0 !important;
}

/* Bag page – titel "Bag totals" groter maken */
.woocommerce-cart .cart_totals>h2 {
    font-size: 20px;
    /* kies 20–24px naar smaak */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Checkout – "Your order" heading */
.ct-woocommerce-checkout #order_review_heading {
    font-size: 20px;
}

/* Checkout – section headers */
.ct-woocommerce-checkout .woocommerce-billing-fields>h3,
.ct-woocommerce-checkout .woocommerce-additional-fields>h3,
.ct-woocommerce-checkout .woocommerce-shipping-fields>h3 {
    font-size: 20px;
    font-weight: 700;
}

/* ================================================================= icons included pdp TEMP!!!!!!!!!==================== *
.single-product .di-icons-included {
  display: none;
}

.single-product.product-slug-gizmo .di-icons-included--gizmo {
  display: block;
}

.single-product.product-slug-raw .di-icons-included--raw {
  display: block;
}
.single-product.product-slug-wired .di-icons-included--wired {
  display: block;
}

.single-product.product-slug-pika .di-icons-included--pika {
  display: block;
}
/* TEMP: toon Icons Included altijd *
.single-product .di-icons-included {
  display: block;
}
/* ================================================================= icons included pdp TEMP!!!!!!!!!==================== */
/* Icons included – individuele iconen */
.di-icons-included .di-icon {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    display: block;
}

/* Stackable Icons Included panel
   NOTE: background via ::before is INTENTIONAL.
   Stackable backgrounds are unreliable for theming. */

/* ICONS INCLUDED – force background op exact het panel, los van Stackable layers */
.di-icons-panel {
    position: relative;
    isolation: isolate;
    /* zorgt dat z-index netjes werkt */
}

/* onze eigen achtergrondlaag */
.di-icons-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--di-icons-bg, #E3E8EE) !important;
    border-radius: inherit;
    /* pakt jouw 30px radius van de group */
    z-index: 0;
}

/* alle inhoud boven onze achtergrond */
.di-icons-panel>* {
    position: relative;
    z-index: 1;
}

/* optioneel: Stackable background layer uitzetten zodat je geen dubbele lagen krijgt */
.di-icons-panel .stk-block-background {
    background: transparent !important;
}

.di-collection-subtitle {
    font-size: 20px;
    font-weight: 400;
}


/* ======================================================= Collection intro – wrapper */

/* Container */
.di-collection-intro {
    max-width: 720px;
    margin: 100px auto 0;
}

/* Title */
.di-collection-title {
    max-width: 500px;
    margin: 0 auto 12px;
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* Subtitle */
.entry-content .di-collection-subtitle {
    max-width: 480px;
    margin: 0 auto 40px;
    font-family: "PT Sans", var(--font-body), sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-muted);
    text-align: center;
}

/* Body text */
.di-collection-body,
.di-collection-body p {
    font-family: "PT Sans", var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 16px;
    text-align: left !important;
}

/* Mobile */
@media (max-width: 689px) {
    .di-collection-intro {
        margin-top: 48px;
        padding: 0 16px;
    }

    .di-collection-title {
        font-size: 26px;
        max-width: 100%;
    }

    .di-collection-subtitle {
        font-size: 16px;
        max-width: 100%;
    }

    .di-collection-body,
    .di-collection-body p {
        font-size: 15px;
    }
}

/* ==================================================================================
   Explore more collections — hide current
   ================================================================================== */

/* Gizmo PDP */
.single-product.product-slug-gizmo .explore-tile--gizmo {
    display: none !important;
}

/* Raw PDP */
.single-product.product-slug-raw .explore-tile--raw {
    display: none !important;
}

/* Wired PDP */
.single-product.product-slug-wired .explore-tile--wired {
    display: none !important;
}

/* Pika PDP */
.single-product.product-slug-pika .explore-tile--pika {
    display: none !important;
}



/* ======================================= Hide EU VAT field in My Account > Addresses */
.woocommerce-address-fields #billing_eu_vat_number_field {
    display: none !important;
}

/* =========================================================
   MY ACCOUNT – PAGINATION (FINAL FIX)
   ========================================================= */

.woocommerce-account .woocommerce-pagination a,
.woocommerce-account .woocommerce-pagination a.woocommerce-button--next,
.woocommerce-account .woocommerce-pagination a.woocommerce-button--prev {
    background-color: var(--theme-palette-color-12) !important;
    color: #ffffff !important;
    border: 2px solid var(--theme-palette-color-12) !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 30px !important;
    /* ❗ geen verticale padding */
    line-height: 1 !important;
    /* ❗ voorkomt hoge knop */

    border-radius: 999px;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Hover */
.woocommerce-account .woocommerce-pagination a:hover {
    background-color: var(--theme-palette-color-11) !important;
    border-color: var(--theme-palette-color-11) !important;
    color: #ffffff !important;
}

/* Meer ruimte tussen Previous / Next */
.woocommerce-account .woocommerce-pagination {
    display: flex;
    gap: 16px;
    /* ← kies bijv. 20–32px */
}


/* Orders table header divider – Blocksy color 8 */
.woocommerce-account .woocommerce-orders-table thead th {
    border-bottom: 3px solid var(--theme-palette-color-8);
}

/* Order number iets lager positioneren */
.woocommerce-account .woocommerce-orders-table__cell-order-number {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Orders – action buttons visual tweak */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
    height: 40px;
    min-height: 40px;

    padding: 0 30px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    line-height: 1;
    font-size: 13px;
}

/* View – primary *
.woocommerce-account
.woocommerce-orders-table__cell-order-actions a.view {
  background: transparent;
  color: var(--theme-palette-color-2);
  border: 2px solid var(--theme-palette-color-2);
}

.woocommerce-account
.woocommerce-orders-table__cell-order-actions a.view:hover {
  background-color: var(--theme-palette-color-8);
}

/* Invoice – ghost */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.invoice {
    background: transparent;
    color: var(--theme-palette-color-2);
    border: 2px solid var(--theme-palette-color-2);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a.invoice:hover {
    background-color: var(--theme-palette-color-8);
}

/* View knop → tekstlink met dotted underline */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.view {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-right: 12px;

    height: auto !important;
    min-height: unset !important;

    font-size: 13px;
    font-weight: 500;
    color: var(--theme-palette-color-2);

    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;

    display: inline;
}

/* Hover: iets donkerder, maar subtiel */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.view:hover {
    color: var(--theme-palette-color-12);
}

/* ===============================
   DESKTOP: View link + Invoice button aligned
================================ */
@media (min-width: 769px) {

    .woocommerce-account .woocommerce-orders-table__cell-order-actions {
        display: flex;
        align-items: center;
        /* 🔑 zelfde hoogte */
        gap: 14px;
    }

    /* View = tekstlink, geen knopgedrag */
    .woocommerce-account .woocommerce-orders-table__cell-order-actions a.view {
        display: inline-flex;
        align-items: center;

        padding: 0;
        margin: 0;

        font-size: 14px;
        font-weight: 600;
        line-height: 1;

        background: none;
        border: none;

        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-underline-offset: 5px;
        text-decoration-color: color-mix(in srgb,
                currentColor 65%,
                transparent);
    }

    /* Invoice = knop, blijft zoals hij is */
    .woocommerce-account .woocommerce-orders-table__cell-order-actions a.invoice {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* =========================================================
   VIEW ORDER – DOWNLOADS TABLE (FIXED)
   ========================================================= */

/* Verberg "Downloads remaining" kolom */
.woocommerce-account .woocommerce-table--order-downloads th:nth-child(2),
.woocommerce-account .woocommerce-table--order-downloads td:nth-child(2) {
    display: none !important;
}

/* Download knop breder zodat tekst op 1 regel past */
.woocommerce-account .woocommerce-table--order-downloads a.button,
.woocommerce-account .woocommerce-table--order-downloads a.download {
    min-width: 220px;
    height: 44px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
    border-radius: 999px;
}

/* Downloads table – Expires kolom */
.woocommerce-account .woocommerce-table--order-downloads th.download-expires,
.woocommerce-account .woocommerce-table--order-downloads td.download-expires {
    position: relative;
    left: 0px;
}

/* =========================================================
   MY ACCOUNT > VIEW ORDER
   Move right column (Total + all totals rows + invoice button)
   ========================================================= */

/* 1) Product "Total" header + values */
.woocommerce-account .woocommerce-table--order-details thead th:last-child,
.woocommerce-account .woocommerce-table--order-details tbody td:last-child {
    position: relative !important;
    left: -25px !important;
}

/* 2) Subtotal / VAT / Total etc. zitten in TFOOT -> die miste je */
.woocommerce-account .woocommerce-table--order-details tfoot th:last-child,
.woocommerce-account .woocommerce-table--order-details tfoot td:last-child {
    position: relative !important;
    left: -25px !important;
}

/* 3) Actions row (invoice button) staat vaak óók in tfoot */
.woocommerce-account .woocommerce-table--order-details tfoot td .button,
.woocommerce-account .woocommerce-table--order-details tfoot td a.button,
.woocommerce-account .woocommerce-table--order-details tfoot td a.woocommerce-button {
    position: relative !important;
    left: -25px !important;
}

/* 4) Invoice button = ghost (color 2 border/text, soft hover color 8) */
.woocommerce-account a.woocommerce-button.invoice,
.woocommerce-account a.button.invoice {
    background: transparent !important;
    color: var(--theme-palette-color-2) !important;
    border: 2px solid var(--theme-palette-color-2) !important;
}

.woocommerce-account a.woocommerce-button.invoice:hover,
.woocommerce-account a.button.invoice:hover {
    background: var(--theme-palette-color-8) !important;
}

/* RESET: invoice buttons overal neutraal */
.woocommerce-account a.woocommerce-button.invoice,
.woocommerce-account a.button.invoice {
    left: 0 !important;
}

/* Invoice button alleen op Order Details 60px naar links */
.woocommerce-account.woocommerce-view-order a.woocommerce-button.invoice {
    position: relative;
    left: -60px;
}

/* View order page: invoice button 60px naar links (alle varianten) */
body.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-content a.invoice,
body.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-content a.woocommerce-button.invoice,
body.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-content a.button.invoice {
    position: relative !important;
    left: 0px !important;
}

/* Order details – force invoice button height */
.woocommerce-account.woocommerce-view-order a.invoice {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    font-size: 13px;
}

/* Downloads + Order details table header divider */
.woocommerce-account table thead th {
    border-bottom: 3px solid var(--theme-palette-color-8);
}

/* =========================================================
   CONTEXT FIXES – DOTTED UNDERLINES (FINAL)
   ========================================================= */

/* Checkout – coupon link */
.woocommerce-info a.showcoupon {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb,
            currentColor 65%,
            transparent);
}

.woocommerce-info a.showcoupon:hover {
    color: var(--theme-palette-color-12);
    text-decoration-color: color-mix(in srgb,
            var(--theme-palette-color-12) 65%,
            transparent);
}

/* Footer navigation – no underlines */
footer a {
    text-decoration: none !important;
}

/* My Account sidebar navigation – no underlines */
.woocommerce-MyAccount-navigation a {
    text-decoration: none !important;
}

/* ==================================== My Account > Order details — verberg "× 1" quantity */
.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details .product-quantity {
    display: none !important;
}

/* =========================================== My Account > Order details — invoice reference */
/* My Account > Order details — invoice reference (fixed) */
.di-invoice-ref {
    margin: 0 0 16px;
    /* ❌ geen negatieve marge */
    font-size: 13px;
    /* ✔ matcht buttons */
    font-weight: 500;
    /* iets lichter dan knop */
    line-height: 1.4;
    /* stabiele baseline */
    color: var(--theme-palette-color-2);
}


/* ================================== Disable links in order details & downloads (My Account) */

/* Disable product name links ONLY on single order detail page */
body.woocommerce-view-order table a:not(.button) {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: inherit;
}

/* View Order – Downloads: vervang knoptekst door generiek label */
.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-downloads-file {
    font-size: 0;
    /* verberg originele tekst */
}

.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-downloads-file::after {
    content: "Download pack";
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* Orders page – Actions column: left aligned, keep inline */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    text-align: left !important;
}

/* Inner flex container: keep row, align left */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions>*,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .ct-actions {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 14px;
}

/* Mobile – Orders page: Actions right aligned */
@media (max-width: 768px) {

    body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
        text-align: right !important;
    }

    body.woocommerce-account .woocommerce-orders-table__cell-order-actions>*,
    body.woocommerce-account .woocommerce-orders-table__cell-order-actions .ct-actions {
        justify-content: flex-end !important;
    }

}

@media (max-width: 768px) {

    /* RESET: haal alle oude left/translate offsets weg op mobile */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details thead th:last-child,
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tbody td:last-child,
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tfoot th:last-child,
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tfoot td:last-child {
        left: 0 !important;
        transform: none !important;
        position: relative !important;
    }

    /* 1) Header "Total" → gewoon rechts uitlijnen, GEEN extra shift */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details thead th:last-child {
        text-align: right !important;
    }

    /* 2) Product line total (prijs achter collectie) → rechts */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tbody td:last-child {
        text-align: right !important;
    }

    /* 3) TFOOT: labels links, waarden rechts */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tfoot th {
        text-align: left !important;
    }

    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tfoot td {
        text-align: right !important;
    }

    /* 4) Invoice button rechts */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tfoot td a.invoice,
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-details tfoot td a.button {
        display: inline-flex !important;
        margin-left: auto !important;
    }
}

@media (max-width: 768px) {

    /* Downloads – Product value netjes onder label laten lopen */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads td[data-title="Product"] {
        display: block;
        width: 100%;
        text-align: left !important;
        margin-top: 6px;
        white-space: normal;
    }

}

@media (max-width: 768px) {

    /* Downloads – zet productwaarde altijd op nieuwe regel */
    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads td[data-title="Product"]::before {
        content: "\A";
        /* line break */
        white-space: pre;
        /* respecteer \A */
        display: block;
        height: 4px;
        /* subtiele spacing */
    }

}

/* Invoice button — force PURE color-2 (no rgba / no alias) */
.woocommerce-account a.invoice,
.woocommerce-account a.woocommerce-button.invoice,
.woocommerce-account a.button.invoice {
    color: rgb(var(--ct-color-2-rgb)) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.woocommerce-account a.invoice *,
.woocommerce-account a.woocommerce-button.invoice *,
.woocommerce-account a.button.invoice * {
    color: rgb(var(--ct-color-2-rgb)) !important;
}

/* Invoice button — fix perceived lightness (font rendering) */
.woocommerce-account a.invoice,
.woocommerce-account a.woocommerce-button.invoice,
.woocommerce-account a.button.invoice {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    /* 🔑 geen 40px-baseline */
    -webkit-font-smoothing: auto;
    /* 🔑 geen grayscale smoothing */
    font-smoothing: auto;
}

/* =========================================
   MY ACCOUNT → DOWNLOADS PAGE
   Force "Download pack" label
   ========================================= */

/* Verberg originele tekst (collection naam) */
.woocommerce-account .woocommerce-MyAccount-downloads-file {
    font-size: 0;
}

/* Toon vaste knoptekst */
.woocommerce-account .woocommerce-MyAccount-downloads-file::after {
    content: "Download pack";
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* PDP – Preview button (Icons included) */
.single-product a.di-button.filled {
    transition:
        background-color .18s ease-out,
        color .18s ease-out,
        border-color .18s ease-out;
}

.di-icons-panel {
    padding: 50px 50px 70px 50px !important;
}

@media (max-width: 768px) {
    .di-icons-panel {
        padding: 40px 0 60px 0 !important;
    }
}

/* Spacing rondom elk icoon */
.di-icons-panel .di-icon-cell {
    padding: 25px 0px !important;
}

svg.search-icon-svg {
    width: 32px !important;
    height: 32px !important;
}

/* =========================================================
   Preview header: logo | divider | title
   ========================================================= */

.di-preview-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin: 40px 0 32px;
    padding: 0;
    text-align: center;
}

/* Logo image */
.di-preview-title .stk-block-image img {
    display: block;
    height: auto;
}

/* Vertical divider (inline SVG) */
.di-preview-divider {
    display: block;
    width: 2px;
    height: 28px;
    color: var(--theme-palette-color-2);
    flex-shrink: 0;
}

/* Heading reset (Stackable zet soms margins) */
.di-preview-title h1,
.di-preview-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1;
    white-space: nowrap;
}

/* =========================================================
   Mobile behaviour
   ========================================================= */

@media (max-width: 689px) {
    .di-preview-title {
        flex-direction: column;
        gap: 18px;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100%;
    }

    /* Divider verbergen op mobile */
    .di-preview-divider {
        display: none !important;
    }

    /* Logo wrapper centreren (Stackable wrappers overrulen) */
    .di-preview-title .stk-block-image {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .di-preview-title .stk-block-image img {
        max-width: 120px;
        height: auto;
        margin: 0 auto !important;
    }
}

@media (max-width: 689px) {

    /* Titel typografie eerder laten meeschakelen */
    .di-preview-title h1,
    .di-preview-title h2 {
        font-size: 28px;
        /* kies dit iets kleiner dan desktop */
        line-height: 1.15;
        white-space: normal;
        /* belangrijk bij stacked layout */
    }

}

/* ================================================= Overscroll ================== */

/* Content layer */
body {
    background-color: #fff;
}

/* ================================================= Collection tiles tekst afbreking ================== */



/* ================Premium slogan in Footer wat groter ======== */
.stk-block.stk-6b7554d .stk-subtitle {
    font-size: 1.2rem;
    /* speel met 1.2–1.4 */
}

/* =========================================================
   VIEW ORDER / THANK YOU — Downloads button label
   Force "Download pack"
   ========================================================= */

body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads a.button,
body.woocommerce-order-received .woocommerce-table--order-downloads a.button {
    font-size: 0 !important;
    /* hide original text */
}

body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads a.button::after,
body.woocommerce-order-received .woocommerce-table--order-downloads a.button::after {
    content: "Download pack";
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 768px) {

    body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads a.button::after,
    body.woocommerce-order-received .woocommerce-table--order-downloads a.button::after {
        font-size: 13px !important;
    }
}



/* =========================================================
   THANK YOU page — remove "Order again" button
   ========================================================= */

body.woocommerce-order-received a.order-again,
body.woocommerce-order-received .order-again {
    display: none !important;
}

/* =========================================================
   THANK YOU page — success notice green + check icon
   ========================================================= */

body.woocommerce-order-received .woocommerce-notice {
    background: #E9F9EE !important;
    /* lichtgroen */
    border: 1px solid #BEECCB !important;
    color: #0F5132 !important;

    border-radius: 14px !important;
    padding: 16px 18px 16px 52px !important;
    /* ruimte voor icoon */
    position: relative !important;
}

/* verwijder standaard "bel" / info icon */
body.woocommerce-order-received .woocommerce-notice::before {
    content: "" !important;
}

/* voeg checkmark toe */
body.woocommerce-order-received .woocommerce-notice::after {
    content: "✓" !important;

    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #22C55E !important;
    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* =========================================================
   THANK YOU page — Mollie payment completed message (quiet)
   Make it subtle instead of a second banner
   ========================================================= */

body.woocommerce-order-received .woocommerce-order .woocommerce-info {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 0 !important;
    margin: 10px 0 0 !important;

    color: var(--theme-palette-color-4) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Remove the icon (bell/notice icon) */
body.woocommerce-order-received .woocommerce-order .woocommerce-info::before {
    display: none !important;
}

/* =========================================================
   MY ACCOUNT > View order — remove "Order again"
   ========================================================= */

body.woocommerce-account.woocommerce-view-order .order-again,
body.woocommerce-account.woocommerce-view-order a.order-again,
body.woocommerce-account.woocommerce-view-order .woocommerce-order a.button.order-again,
body.woocommerce-account.woocommerce-view-order .woocommerce-order a.button.alt.order-again {
    display: none !important;
}

/* =========================================================
   MY ACCOUNT > View order — make payment info a quiet line
   ========================================================= */

body.woocommerce-account.woocommerce-view-order .woocommerce-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

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

    color: var(--theme-palette-color-4) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* remove icon */
body.woocommerce-account.woocommerce-view-order .woocommerce-info::before {
    display: none !important;
}

body.woocommerce-order-received table.woocommerce-table--order-details td:last-child,
body.woocommerce-order-received table.woocommerce-table--order-details th:last-child {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

/* =========================================
   THANK YOU page — Downloads table cleanup
   Hide: Downloads remaining + Expires
   ========================================= */

body.woocommerce-order-received .woocommerce-table--order-downloads th:nth-child(2),
body.woocommerce-order-received .woocommerce-table--order-downloads td:nth-child(2),
body.woocommerce-order-received .woocommerce-table--order-downloads th:nth-child(3),
body.woocommerce-order-received .woocommerce-table--order-downloads td:nth-child(3) {
    display: none !important;
}

body.woocommerce-order-received .woocommerce-table--order-downloads th,
body.woocommerce-order-received .woocommerce-table--order-downloads td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =========================================================
   THANK YOU page — force buttons clickable (override-proof)
   ========================================================= */

body.woocommerce-order-received a.button,
body.woocommerce-order-received a.woocommerce-button,
body.woocommerce-order-received .woocommerce-table--order-downloads a,
body.woocommerce-order-received .woocommerce-table--order-downloads a.button,
body.woocommerce-order-received .woocommerce-table--order-downloads a.download {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* =========================================================
   THANK YOU page — disable ONLY the product title link
   (not the buttons)
   ========================================================= */

/* Downloads table: ONLY the product-name link */
body.woocommerce-order-received .woocommerce-table--order-downloads td.download-product a:not(.button) {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* THANK YOU page — remove the WRONG invoice button above Download */
body.woocommerce-order-received section.woocommerce-order-downloads>a.di-invoice-btn.di-invoice-button {
    display: none !important;
}

/* THANK YOU page — remove second button as well because it's empty */
body.woocommerce-order-received #di-invoice-btn-wrapper {
    display: none !important;
}





/* =========================================================
   THANK YOU — spacing between order overview + Download title
   ========================================================= */

body.woocommerce-order-received .woocommerce-order-overview {
    margin-bottom: 60px !important;
}

body.woocommerce-order-received .woocommerce-customer-details {
    margin-top: 60px !important;
}


/* =========================================================
   THANK YOU — kill double line under "Payment method"
   ========================================================= */

/* 1) Laatste rij: geen bottom-border */
body.woocommerce-order-received .woocommerce-order-overview tr:last-child th,
body.woocommerce-order-received .woocommerce-order-overview tr:last-child td,
body.woocommerce-order-received .woocommerce-order-overview li:last-child {
    border-bottom: 0 !important;
}

/* 2) Ook de cell zelf (Woo class) vaak nog een border */
body.woocommerce-order-received .woocommerce-order-overview__payment-method {
    border-bottom: 0 !important;
}

/* 3) En: zet borders netjes “collapsed” (als het echt een table is) */
body.woocommerce-order-received .woocommerce-order-overview {
    border-collapse: collapse !important;
}

/* =========================================================
   THANK YOU — Download table header line (3px, color 8)
   ========================================================= */

body.woocommerce-order-received .woocommerce-order-downloads table thead th {
    border-bottom: 3px solid var(--theme-palette-color-8) !important;
}

/* =========================================================
   THANK YOU — Order overview borders should not overflow on mobile
   ========================================================= */

body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-account.woocommerce-view-order .woocommerce-order-overview {
    overflow: hidden !important;
    border-radius: 4px !important;
    /* match jouw card look */
}



/* =========================================================
   THANK YOU / VIEW ORDER — FORCE 1 COLUMN (mobile) ✅
   ========================================================= */

@media (max-width: 768px) {

    body.woocommerce-order-received ul.woocommerce-order-overview.order_details,
    body.woocommerce-account.woocommerce-view-order ul.woocommerce-order-overview.order_details {
        display: block !important;

        /* ✅ kill extra bottom line from container */
        border-bottom: 0 !important;
    }

    body.woocommerce-order-received ul.woocommerce-order-overview.order_details>li,
    body.woocommerce-account.woocommerce-view-order ul.woocommerce-order-overview.order_details>li {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;

        display: block !important;
        clear: both !important;

        margin: 0 !important;
        padding: 16px 18px !important;

        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* ✅ hard: last item NEVER has a divider */
    body.woocommerce-order-received ul.woocommerce-order-overview.order_details>li:last-child,
    body.woocommerce-account.woocommerce-view-order ul.woocommerce-order-overview.order_details>li:last-child {
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 16px !important;
    }

    body.woocommerce-order-received ul.woocommerce-order-overview.order_details>li strong,
    body.woocommerce-account.woocommerce-view-order ul.woocommerce-order-overview.order_details>li strong {
        display: block !important;
        margin-top: 6px !important;
    }
}

/* View Order (single order) — hide Expires column */
body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads th.download-expires,
body.woocommerce-account.woocommerce-view-order .woocommerce-table--order-downloads td.download-expires {
    display: none !important;
}

/* =========================================================
   VIEW ORDER (desktop) — align Downloads "Download" with Total column
   ========================================================= */

@media (min-width: 769px) {

    /* 1) Force stable table layout */
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* --- Downloads table --- */
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-downloads th.download-product,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-downloads td.download-product {
        width: 70% !important;
    }

    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-downloads th.download-file,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-downloads td.download-file {
        width: 30% !important;
        text-align: right !important;
    }

    /* --- Order details table --- */
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details th.product-name,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details td.product-name {
        width: 70% !important;
    }

    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details th.product-total,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details td.product-total {
        width: 30% !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

}

/* Allow wrapping for order notes only */
body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details tfoot tr th+td {
    white-space: normal !important;
}


/* =========================================================
   VIEW ORDER (desktop) — Order details: force proper column widths + right align
   (also fixes Subtotal/VAT/Total rows)
   ========================================================= */

@media (min-width: 769px) {

    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* Linkerkolom (product / labels) */
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details thead th:first-child,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details tbody td:first-child,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details tfoot th {
        width: 70% !important;
        text-align: left !important;
    }

    /* Rechterkolom (Total + alle bedragen in tfoot) */
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details thead th:last-child,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details tbody td:last-child,
    body.woocommerce-account.woocommerce-view-order table.woocommerce-table--order-details tfoot td {
        width: 30% !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

body.woocommerce-order-received ul.woocommerce-order-overview.order_details::after {
    content: "Invoice & download link are included in your confirmation email and in your account";
    display: block;

    margin-top: 16px;
    padding: 0 20px;

    font-size: 13px;
    color: var(--theme-palette-color-4);
}

@media (max-width: 768px) {
    body.woocommerce-order-received ul.woocommerce-order-overview.order_details {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
}

/* =========================================================
   THANK YOU — microcopy spacing (mobile)
   ========================================================= */

@media (max-width: 768px) {
    body.woocommerce-order-received ul.woocommerce-order-overview.order_details::after {
        padding-bottom: 20px;
        /* ✅ extra ruimte onder de microcopy */
    }
}

/* =========================================================
   Header bg on selected pages:
   - Top (non-sticky): grey (palette color 8)
   - Sticky/shrink: white
   Pages: 630, 10394, 4856, 4853, 10358, 10408, 10698
   ========================================================= */

/* 1) TOP state (no sticky wrapper active): grey */
body.page-id-630 #header [data-row],
body.page-id-10394 #header [data-row],
body.page-id-4856 #header [data-row],
body.page-id-4853 #header [data-row],
body.page-id-10358 #header [data-row],
body.page-id-10408 #header [data-row],
body.page-id-10698 #header [data-row],
body.page-id-10816 #header [data-row] {
    background-color: var(--theme-palette-color-8) !important;
}

/* 2) STICKY/SHRINK state: white
   IMPORTANT: Blocksy uses data-sticky="yes:shrink" on a wrapper
*/
body.page-id-630 #header [data-sticky*="yes"] [data-row],
body.page-id-10394 #header [data-sticky*="yes"] [data-row],
body.page-id-4856 #header [data-sticky*="yes"] [data-row],
body.page-id-4853 #header [data-sticky*="yes"] [data-row],
body.page-id-10358 #header [data-sticky*="yes"] [data-row],
body.page-id-10408 #header [data-sticky*="yes"] [data-row],
body.page-id-10698 #header [data-sticky*="yes"] [data-row],
body.page-id-10816 #header [data-sticky*="yes"] [data-row] {
    background-color: #ffffff !important;
}

/* =========================================================
   Smooth transition for header bg on selected pages
   ========================================================= */

body.page-id-630 #header [data-row],
body.page-id-10394 #header [data-row],
body.page-id-4856 #header [data-row],
body.page-id-4853 #header [data-row],
body.page-id-10358 #header [data-row],
body.page-id-10408 #header [data-row],
body.page-id-10698 #header [data-row],
body.page-id-10816 #header [data-row] {
    transition: background-color 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease;
}

/* ==========================================
   Footer – Complianz Cookie preferences link
   ========================================== */

/* Force it visible (Complianz may hide it) */
.ct-footer a.cmplz-manage-consent,
.ct-footer button.cmplz-manage-consent {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* If Complianz hides the wrapper container */
.ct-footer .cmplz-manage-consent-container {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make button look like a normal footer link */
.ct-footer button.cmplz-manage-consent {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Optional: subtle hover (premium, no underline) */
.ct-footer a.cmplz-manage-consent:hover,
.ct-footer button.cmplz-manage-consent:hover {
    color: #fff !important;
    transition: color .18s ease;
}




/* Hide the original FontAwesome SVG */
#cmplz-cookiebanner-container .cmplz-close svg {
    display: none !important;
}

/* Replace with a thin custom X */
#cmplz-cookiebanner-container .cmplz-close {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

#cmplz-cookiebanner-container .cmplz-close::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 3.2a1 1 0 0 1 1.4 0L8 6.6l3.4-3.4a1 1 0 1 1 1.4 1.4L9.4 8l3.4 3.4a1 1 0 0 1-1.4 1.4L8 9.4l-3.4 3.4a1 1 0 0 1-1.4-1.4L6.6 8 3.2 4.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 3.2a1 1 0 0 1 1.4 0L8 6.6l3.4-3.4a1 1 0 1 1 1.4 1.4L9.4 8l3.4 3.4a1 1 0 0 1-1.4 1.4L8 9.4l-3.4 3.4a1 1 0 0 1-1.4-1.4L6.6 8 3.2 4.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 1;
}

#cmplz-cookiebanner-container .cmplz-close:hover::before {
    opacity: 0.7;
}

/* Hide floating Manage consent tab (keep footer link intact) */
#cmplz-manage-consent {
    display: none !important;
}

#footer ul li {
    padding-bottom: 10px;
}

/* Increase click space for Complianz links and buttons */
.cmplz-links a,
.cmplz-manage-consent {
    display: inline-block;
    padding: 12px 0;
    min-height: 48px;
}

/* ======================================== Dutchicon: nooit Title Case (Capitalize) op headings/titels */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.post-title,
.archive-title,
.wp-block-post-title,
.widget-title,
.ct-title,
.woocommerce-loop-product__title {
    text-transform: none !important;
}

/* ======================================== Footer */
/* Footer tagline typography fix */
.ct-footer .stk-block-subtitle,
.ct-footer .stk-block-subtitle * {
    font-family: "PT Sans Pro", var(--theme-font-body), sans-serif !important;
    font-weight: 400 !important;
    /* regular */
    letter-spacing: 0 !important;
}

/* ================================
   Dutchicon footer text links
   ================================ */

/* basis typografie */
.ct-footer [data-row="middle"] .stk-block-text__text {
    font-size: 13px;
    line-height: 1.5;
}

/* links gedragen zich als gewone tekst */
.ct-footer [data-row="middle"] .stk-block-text__text a {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none;
    display: block;
    margin: 2px 0;
    transition: color .15s ease;
}

/* hover = volledig wit */
.ct-footer [data-row="middle"] .stk-block-text__text a:hover {
    color: rgba(255, 255, 255, 1) !important;
}

/* visited mag NIET paars/blauw worden */
.ct-footer [data-row="middle"] .stk-block-text__text a:visited {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Force regular weight in footer links */
.ct-footer [data-row="middle"] .stk-block-text__text a {
    font-weight: 400 !important;
}

/* ook de kolomtitels */
.ct-footer [data-row="middle"] .widget-title {
    font-weight: 400 !important;
}

/* Kill Gutenberg block spacing in footer widgets */
.ct-footer [data-row="middle"] .is-layout-flow {
    gap: 0 !important;
}

.ct-footer [data-row="middle"] .is-layout-constrained {
    gap: 0 !important;
}

/* Remove automatic block margins Gutenberg adds */
.ct-footer [data-row="middle"] .wp-block-heading,
.ct-footer [data-row="middle"] .stk-block-text__text,
.ct-footer [data-row="middle"] p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove Stackable block spacing inside footer */
.ct-footer [data-row="middle"] .stk-block-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Also remove internal paragraph spacing */
.ct-footer [data-row="middle"] .stk-block-text p {
    margin: 0 !important;
}

/* Kill Gutenberg block-gap inside footer widgets */
.ct-footer [data-row="middle"] .is-layout-flow>*+* {
    margin-block-start: 0 !important;
}

.ct-footer [data-row="middle"] .ct-widget+.ct-widget {
    margin-top: 8px !important;
}

/*Added by Nikola */
/* Blog Page */

/* First 2 posts: Each takes 3 units (50% width) */
.card--large {
    grid-column: span 4;
    border-radius: 30px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

/* Remaining posts: Each takes 2 units (33.3% width) */
.card--standard {
    grid-column: span 4;
    border-radius: 30px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

/* Pagination Styling */
.pagination {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination a,
.pagination span {
    padding: 8px 15px;
    background: #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
}

.card--standard .card-header-meta {
    margin-bottom: 15px;
}

.card-header-meta {
    margin-bottom: 10px;
}

.pagination .page-numbers:hover,
.pagination .current {
    background: #5865ed;
    color: #fff !important;
    font-weight: 700;
}

.pagination .page-numbers,
.pagination .next {
    font-weight: 700;
}

.dutchicon-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 55px auto 150px;
    max-width: 1200px;
}

@media (min-width: 768px) and (max-width: 1279px) {
    .dutchicon-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px !important;
        column-gap: 30px !important;
    }

    .card--large .post-title {
        font-size: 2.1rem !important;
        letter-spacing: -0.02em;
    }

    .card--standard,
    .blog-card.card--large {
        grid-column: span 1 !important;
        min-height: 450px !important;

    }

}

/* 3. DESKTOP: Keep your original look (Large = 2/3, Standard = 1/3) */
@media (min-width: 1280px) {
    .blog h1 {
        font-size: 70px !important;
        line-height: 1.05em !important;
        font-weight: 700 !important;
        text-transform: none !important;
        font-family: "Gilroy", Sans-serif !important;
        letter-spacing: -1px !important;
    }

    .blog-filters {
        justify-content: center;
    }

    .dutchicon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .blog-card.card--large {
        grid-column: span 2;
        min-height: 540px;
    }

    .blog-card.card--standard {
        grid-column: span 1;
        min-height: 540px;
    }

    .card--large .post-title {
        font-size: 3.5rem;
        letter-spacing: -0.02em;
        max-width: 73%;
    }
}

.category h1 {
    font-size: 70px;
}

.blog h1 {
    font-size: 40px;
}

.category h1,
.blog h1 {
    text-align: center;
    margin-bottom: 0px;
}

.category-description {
    font-size: 20px !important;
    font-family: "pt-sans-pro", Sans-serif !important;
    text-align: center;
    max-width: 300px;
    color: #39414D;
}

.blog .entry-header {
    border-bottom: 3px solid #f1f4f8;
    margin-top: 40px;
    margin-bottom: 24px;
    padding-bottom: 64px;
}

.category .read-more,
.blog .read-more {
    font-size: 17px;
    color: #1a355d;
    font-weight: 700;
    text-decoration: none;
    font-family: "pt-sans-pro", Sans-serif !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.category .read-more svg,
.blog .read-more svg {
    width: 18px;
    height: 18px;
    fill: #1a355d;
}

.category-label {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-label a {
    color: #1a355d;
}

.category-label {
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 15px !important;
    color: #1a355d !important;
    font-weight: 700 !important;
    font-family: "pt-sans-pro", Sans-serif !important;
    padding: 4.5px 20px;
    border-radius: 20px;
    text-decoration: none;
    margin-left: auto;
    display: table;
}

.category-label:hover {
    background-color: rgba(255, 255, 255, 1);
}

.category .excerpt p,
.blog .excerpt p {
    font-size: 15px !important;
    color: #1a355d !important;
    line-height: 1.55em !important;
    font-weight: 400 !important;
    font-family: "pt-sans-pro", Sans-serif !important;
    max-width: 340px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category .excerpt p,
.blog .excerpt p {
    margin-bottom: 8px;
}

.icon-circle {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Full-screen spinner overlay for blog filtering */
.blog-filter-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-in-out;
}

/* Centered spinner icon */
.spinner-center {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 5px solid #5865f2;
    border-right: 5px solid #5865f2;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#ajax-posts.loading {
    opacity: 0.5;
    pointer-events: none;
}

.single-post #main .ct-container {
    max-width: 970px;
}

.lwptoc_i {
    padding: 0px !important;
}

.lwptoc_item_label {
    font-weight: 600;
    font-size: 13px;
    color: #05111f !important;
    font-family: Inter;
}

.lwptoc_item_label:hover {
    color: #5865f2 !important;
    text-decoration: none !important;
}

.lwptoc-notInherit .lwptoc_i div a {
    border-bottom: none !important;
    text-decoration: none !important;
}

body .lwptoc-notInherit .lwptoc_i div a:hover {
    border-bottom: 0 !important;
}

.single-post .entry-meta {
    display: inline-flex;
}

.single-post .meta-read-time:before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url('/wp-content/uploads/2026/02/clock.svg');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    display: block;
}

.single-post .meta-read-time {
    display: flex !important;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    text-transform: lowercase;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    will-change: transform;
    transform: translateZ(0);
}

.blog-card:hover {
    transform: scale(1.015) translateZ(0);
}

.card-link,
.read-more {
    text-decoration: none;
    color: inherit;
}

/* The Parent Container */
.card-content .post-title {
    margin-bottom: 20px;
}

.hero-section .page-title {
    font-size: 70px;
    line-height: 1.5 !important;
    margin-top: 10px;
}

.hero-section .card-header-meta {
    margin-bottom: 0px;
}

.hero-section .icon-circle {
    width: 72px;
    height: 72px;
}

.page-title,
.post-title {
    line-height: 1.5 !important;
}

@media (min-width: 768px) {
    .hero-section .page-title {
        padding-right: 260px;
    }

    .page-title span {
        margin-right: 8px;
    }
}

.page-title span,
.post-title span {
    color: #1a355d !important;
    display: inline;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    background: #fff;
    padding: .03em .3em .07em .3em;
    border-radius: .08em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.card--large .post-title {
    font-weight: 800;
}

.card--standard .post-title {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding-right: 10px;
}

.acf-clear-category-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    text-decoration: none !important;
    color: #ca4a1f !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px;
    border-radius: 50%;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.acf-clear-category-icon:hover {
    color: #fff !important;
    background-color: #ca4a1f !important;
    border-color: transparent !important;
    transform: scale(1.1);
}

.acf-clear-category-icon:hover .dashicons-undo {
    color: #fff !important;
}

.card--double {
    grid-column: span 2;
}

.custom-meta-socials .cn-fa-pinterest {
    margin-right: 13px !important;
    margin-left: 30px !important;
}

.cn-fa-pinterest svg,
.cn-fa-pinterest img,
.cn-fa-linkedin img {
    width: 22px !important;
    height: 22px !important;
}

/* -------------------------------------------------------------------------- Added by Hemmo ------------------- */
.ct-footer [data-row="middle"] .stk-block-text__text br {
    display: none;
}

.entry-content> :first-child {
    margin-top: 40px;
}

@media (max-width:768px) {

    .entry-content> :first-child {
        margin-top: 24px;
    }

}

.single-post article {
    padding-bottom: 80px;
}

@media (max-width:768px) {

    .single-post article {
        padding-bottom: 50px;
    }

}

.entry-content [id]::before {
    content: "";
    display: block;
    height: 18px;
    margin-top: -18px;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    .entry-content [id]::before {
        height: 24px;
        margin-top: -24px;
    }
}

/* --------------------------------------------------------------------------------------------- */
/* BLOG TYPOGRAPHY BASE */
/* --------------------------------------------------------------------------------------------- */

.single-post .entry-content {
    font-size: 18px;
    line-height: 1.75;
    color: #1a1a1a;
    max-width: 760px;
    margin: 0 auto;
}

/* Paragraphs */

.single-post .entry-content p {
    margin-bottom: 1.25em;
}


/* ------------------------------------------------ */
/* HEADINGS */
/* ------------------------------------------------ */

.single-post .entry-content h2 {
    font-size: 32px;
    line-height: 1.3;
    margin-top: 60px;
    margin-bottom: 18px;
    font-weight: 600;
}

.single-post .entry-content h3 {
    font-size: 24px;
    line-height: 1.4;
    margin-top: 36px;
    margin-bottom: 10px;
    font-weight: 600;
}

.single-post .entry-content h4 {
    font-size: 20px;
    margin-top: 28px;
    margin-bottom: 8px;
    font-weight: 600;
}


/* ------------------------------------------------ */
/* LISTS */
/* ------------------------------------------------ */

.single-post .entry-content ul,
.single-post .entry-content ol {
    margin: 1.4em 0;
    padding-left: 1.4em;
}

.single-post .entry-content li {
    margin-bottom: 0.4em;
}



/* ------------------------------------------------ */
/* IMAGES */
/* ------------------------------------------------ */



.single-post .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
}

/* Caption */

.wp-block-image figcaption {
    font-family: "PT Sans Pro", sans-serif;
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
    margin-bottom: 24px;
    line-height: 1.45;
    padding: 0 35px;
    text-align: center;
}


/* ------------------------------------------------ */
/* STUDIO NOTES */
/* ------------------------------------------------ */

.studio-note {
    font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
    font-size: 16px;
    line-height: 1.6;

    margin: 6px 0 40px;
    padding: 32px 35px 38px 35px;

    background: color-mix(in srgb, var(--theme-palette-color-6) 15%, white);
    border: 1px solid color-mix(in srgb, var(--theme-palette-color-6) 35%, white);
    border-radius: 24px;

    color: color-mix(in srgb, #1a355d 85%, white);
}

.studio-note strong {
    font-weight: 600;
    color: #1a355d;
    font-size: 17px;
}

figure+.studio-note {
    margin-top: 0;
}

.single-post .entry-content .wp-block-stackable-image {
    margin-bottom: 20px !important;
}

.single-post .entry-content figure {
    margin: 32px 0 0;
}

.studio-note {
    margin: 6px 0 40px !important;
}

.studio-note p {
    margin: 0 0 12px 0;
}

.studio-note p:last-child {
    margin-bottom: 0;
}

/* Mobile */

@media (max-width:768px) {

    .studio-note {
        font-size: 15px;
        padding: 24px;
    }

    .studio-note strong {
        font-size: 16px;
    }


}

.studio-note .studio-source {
    font-family: "PT Sans Pro", sans-serif;
    font-size: 13px;
    opacity: 1;
    margin-top: 18px;
    letter-spacing: 0.01em;
}

.studio-note .studio-source a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;

}

/* ------------------------------------------------ */
/* BLOCKQUOTES */
/* ------------------------------------------------ */

.single-post .entry-content blockquote {
    margin: 30px 0;
    padding-left: 18px;
    border-left: 3px solid #ddd;
    font-style: italic;
    color: #444;
}


/* ------------------------------------------------ */
/* TABLE OF CONTENTS */
/* ------------------------------------------------ */

.lwptoc_i {
    margin: 20px 0 30px 0;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
}

.lwptoc_i a {
    text-decoration: none;
}

.lwptoc_i a:hover {
    text-decoration: underline;
}


/* =========================================
   ARTICLE END
========================================= */

.article-end {
    margin-top: 70px;
}


/* ----------------------------------------
   RELATED ARTICLES
---------------------------------------- */

.article-end .related-articles {
    margin: 10px 0 0px 0 !important;
}

.article-end .related-articles h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
}

.article-end .related-articles ul {
    margin: 0;
    padding-left: 18px;
}

.article-end .related-articles li {
    margin-bottom: 10px;
}



/* AUTHOR SIGNATURE */

.article-end .author-signature {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* image */

.article-end .author-signature .wp-block-image {
    margin-top: 0px;
    flex-shrink: 0;
}

.article-end .author-signature .wp-block-image img {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 50%;
}

/* text column */

.article-end .author-signature .wp-block-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 9px;
}



/* role */

.article-end .author-role {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.25;
    color: #05111F;
    opacity: .75;
}

.article-end .author-name {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.2;
}

.article-end .author-role {
    margin: 2px 0 0 0 !important;
}

.article-end .author-name a {
    text-decoration: none;
}

.article-end .author-name a:hover {
    text-decoration: none;
    color: var(--theme-palette-color-12);
}


@media (max-width:768px) {

    .article-end .author-signature .wp-block-image {
        margin-top: 10px;
    }

    .article-end .author-signature .wp-block-group {
        margin-top: -4px;
    }

    /* ------------------------------------------------ */
    /* HR DIVIDERS */
    /* ------------------------------------------------ */

    .single-post .entry-content hr {
        margin: 40px 0;
        border: none;
        border-top: 1px solid #eee;
    }


    /* ------------------------------------------------ */
    /* CODE */
    /* ------------------------------------------------ */

    .single-post .entry-content code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.9em;
        background: #f5f5f5;
        padding: 2px 4px;
        border-radius: 3px;
    }


    /* ------------------------------------------------ */
    /* MOBILE */
    /* ------------------------------------------------ */

    @media (max-width:768px) {

        .single-post .entry-content {
            font-size: 17px;
            line-height: 1.7;
            padding-left: 18px;
            padding-right: 18px;
        }

        .single-post .entry-content h2 {
            font-size: 26px;
            margin-top: 46px;
        }

        .single-post .entry-content h3 {
            font-size: 21px;
            margin-top: 30px;
        }

        .single-post .entry-content figure {
            margin: 28px 0 8px;
        }

        .wp-block-image figcaption {
            font-size: 13px;
        }

        .studio-note {
            font-size: 14px;
        }

        .related-articles {
            margin-top: 40px;
        }

    }


    /* ------------------------------------------------ */
    /* MOBILE */
    /* ------------------------------------------------ */

    @media (max-width:768px) {

        /* Hide table of contents */

        .single-post .lwptoc_i {
            display: none !important;
        }

        /* Control space between header block and text */

        .single-post .entry-content> :first-child {
            margin-top: 12px !important;
        }

    }


    /* ------------------------------------------------ */
    /* SMALL MOBILE */
    /* ------------------------------------------------ */

    @media (max-width:480px) {

        .single-post .entry-content {
            font-size: 16px;
        }

        .single-post .entry-content h2 {
            font-size: 24px;
        }

        .single-post .entry-content h3 {
            font-size: 20px;
        }

    }

    /* ---------------------------------------------- end blog typography --------------------This is the one----------- */