/* ==========================================================================
   CrystalKoorn - designlaag
   Aangelegd 20-09-2026. Tilt de shop naar het niveau van het
   AH-Vastgoedadvies-ontwerp, maar met een eigen taal voor edelstenen.

   Wat we van AH overnemen (het "dure" gevoel):
     - hoog-contrast display-serif voor koppen        -> Bodoni Moda
     - eyebrow-labels: klein, uppercase, gespatieerd
     - clip-path/translate reveals bij scrollen
     - royaal verticaal ritme (tot 10rem)
     - gelaagde neutralen i.p.v. vlak wit
     - accent spaarzaam, nooit als vlak
   Wat anders is: palet (pruim/brons i.p.v. navy/goud), en de fotografie
   draagt hier de pagina - dus meer beeld, minder typografisch effect.
   ========================================================================== */

:root {
    /* --- display-letter --- */
    --ck-display: "Bodoni Moda", Didot, "Times New Roman", Georgia, serif;
    --ck-lees: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
    --ck-ui: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* --- ritme: ruimer dan het thema standaard doet --- */
    --ck-s1: .25rem;  --ck-s2: .5rem;   --ck-s3: .75rem;  --ck-s4: 1rem;
    --ck-s5: 1.5rem;  --ck-s6: 2rem;    --ck-s7: 3rem;    --ck-s8: 4rem;
    --ck-s9: 6rem;    --ck-s10: 8rem;

    /* --- beweging --- */
    --ck-ease: cubic-bezier(.22, 1, .36, 1);
    --ck-dur: 220ms;
    --ck-dur-reveal: 700ms;

    /* --- laagjes --- */
    --ck-lijn: #DED5C9;
    --ck-schaduw-zacht: 0 2px 10px rgba(36, 31, 27, .04);
    --ck-schaduw-kaart: 0 14px 40px rgba(36, 31, 27, .08);
}

/* LET OP het pad. Een relatieve url() in CSS gaat vanaf het CSS-BESTAND,
   niet vanaf de themawortel. Dit bestand staat zelf in assets/, dus
   "assets/fonts/..." werd "assets/assets/fonts/..." en gaf een 404. Gevolg:
   Bodoni Moda laadde nergens en alle koppen op de site vielen terug op
   Didot/Times. De fontbestanden in theme.json hebben dit niet, want die
   gebruiken "file:./assets/fonts/..." en dat lost WordPress zelf op vanaf
   de themawortel. */
@font-face {
    font-family: "Bodoni Moda";
    src: url("fonts/bodonimoda-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Bodoni Moda";
    src: url("fonts/bodonimoda-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   1. TYPOGRAFIE - de belangrijkste ingreep
   Bodoni Moda heeft veel dun-dik-contrast. Dat vraagt om royale regelafstand
   en iets negatieve letterspatiëring op grote maten, anders valt het uiteen.
   ========================================================================== */

h1, h2,
.wp-block-post-title,
.woocommerce-products-header__title {
    font-family: var(--ck-display) !important;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.08;
    text-wrap: balance;
}

h1, .wp-block-post-title {
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
}
h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.9rem);
    line-height: 1.12;
}
/* h3/h4 blijven in de leesletter: rustiger in lange teksten */
h3, h4 {
    font-family: var(--ck-lees) !important;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
}
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

/* Lange leesteksten: serif, ruim, beperkte regellengte */
.entry-content p,
.wp-block-post-content p {
    font-family: var(--ck-lees);
    font-size: 1.075rem;
    line-height: 1.72;
}

/* --- eyebrow: het label boven een kop --- */
.ck-eyebrow {
    display: block;
    font-family: var(--ck-ui);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
    margin-bottom: var(--ck-s3);
}

/* --- eerste alinea na een h1/h2 iets groter: redactioneel --- */
h1 + p, h2 + p, .ck-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--wp--preset--color--graphite, #3A332C);
}

/* ==========================================================================
   2. RITME - ruimte is het duurste materiaal
   ========================================================================== */

.wp-site-blocks > * + * { margin-block-start: 0; }

.ck-sectie {
    padding-block: clamp(var(--ck-s8), 9vw, var(--ck-s10));
}
.ck-sectie--dun { padding-block: clamp(var(--ck-s7), 6vw, var(--ck-s9)); }

/* haarlijn als scheiding, niet een zware rand */
.ck-hairline { border-top: 1px solid var(--ck-lijn); }

/* ==========================================================================
   3. REVEAL - inhoud komt rustig binnen
   Respecteert prefers-reduced-motion.
   ========================================================================== */

/* VANGNET: verbergen gebeurt alleen als de designlaag-JS daadwerkelijk draait
   (die zet .ck-js op <html>). Faalt het script, dan is alles gewoon zichtbaar
   in plaats van onzichtbaar - bij een webshop mag inhoud nooit verdwijnen. */
@media (prefers-reduced-motion: no-preference) {
    html.ck-js .ck-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity var(--ck-dur-reveal) var(--ck-ease),
                    transform var(--ck-dur-reveal) var(--ck-ease);
        will-change: opacity, transform;
    }
    html.ck-js .ck-reveal.ck-in { opacity: 1; transform: none; }
    html.ck-js .ck-reveal-2 { transition-delay: 90ms; }
    html.ck-js .ck-reveal-3 { transition-delay: 180ms; }
    html.ck-js .ck-reveal-4 { transition-delay: 270ms; }
}

/* ==========================================================================
   4. HERO - beeld doet het werk, tekst legt zich erover
   ========================================================================== */

body.home .wp-block-cover { min-height: min(82vh, 820px); }

body.home .wp-block-cover h1 {
    font-family: var(--ck-display) !important;
    font-weight: 400;
    letter-spacing: -.02em;
    text-shadow: 0 2px 30px rgba(36, 31, 27, .35);
}
body.home .wp-block-cover .wp-block-cover__inner-container > * + * {
    margin-top: var(--ck-s5);
}

/* Fijne verticale lijn als accent links van de herotekst */
@media (min-width: 782px) {
    body.home .wp-block-cover .wp-block-cover__inner-container {
        padding-left: var(--ck-s6);
        border-left: 1px solid rgba(250, 248, 245, .28);
    }
}

/* ==========================================================================
   5. KNOPPEN - rustig, met een tastbare hover
   ========================================================================== */

.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button {
    font-family: var(--ck-ui) !important;
    font-size: .92rem !important;
    font-weight: 500;
    letter-spacing: .02em;
    border-radius: 2px !important;
    padding: 15px 30px !important;
    transition: background-color var(--ck-dur) var(--ck-ease),
                color var(--ck-dur) var(--ck-ease),
                transform var(--ck-dur) var(--ck-ease),
                box-shadow var(--ck-dur) var(--ck-ease);
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--ck-schaduw-kaart);
}
.wp-block-button.is-style-outline .wp-block-button__link {
    border-width: 1px;
}

/* focus zichtbaar houden (toegankelijkheid) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--wp--preset--color--bronze, #9A7442);
    outline-offset: 3px;
}

/* ==========================================================================
   6. PRODUCTKAART - het hart van een webshop
   Beeld groot, tekst stil, prijs duidelijk. Hover geeft diepte, geen kleur.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-product {
    position: relative;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.wc-block-product .wc-block-components-product-image img {
    transition: transform 600ms var(--ck-ease), filter 400ms var(--ck-ease);
}
.woocommerce ul.products li.product:hover img,
.wc-block-product:hover .wc-block-components-product-image img {
    transform: scale(1.035);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product .wc-block-components-product-name {
    font-family: var(--ck-lees) !important;
    font-size: 1.05rem !important;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--wp--preset--color--ink, #241F1B);
}
.woocommerce ul.products li.product .price,
.wc-block-product .wc-block-components-product-price {
    font-family: var(--ck-ui) !important;
    font-size: .95rem !important;
    color: var(--wp--preset--color--muted, #5F574E);
    letter-spacing: .01em;
}

/* "nog 1 exemplaar" - het verkoopargument van deze shop */
.woocommerce ul.products li.product.ck-uniek::after,
.ck-badge-uniek {
    content: "nog 1 exemplaar";
    position: absolute;
    top: var(--ck-s3);
    left: var(--ck-s3);
    z-index: 2;
    font-family: var(--ck-ui);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: rgba(250, 248, 245, .94);
    color: var(--wp--preset--color--plum-deep, #2B1A2E);
    border: 1px solid var(--ck-lijn);
    border-radius: 2px;
    backdrop-filter: blur(6px);
}

/* uitverkocht: eerlijk, niet verstopt */
.woocommerce ul.products li.product.outofstock a img {
    filter: grayscale(.55) brightness(1.04);
}
.woocommerce ul.products li.product.outofstock::after {
    content: "verkocht";
    position: absolute;
    top: var(--ck-s3); left: var(--ck-s3); z-index: 2;
    font-family: var(--ck-ui); font-size: .68rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 10px;
    background: var(--wp--preset--color--ink, #241F1B);
    color: var(--wp--preset--color--paper, #FAF8F5);
    border-radius: 2px;
}

/* ==========================================================================
   7. PRODUCTPAGINA - rustiger, meer beeld
   ========================================================================== */

.woocommerce div.product .product_title {
    font-family: var(--ck-display) !important;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    letter-spacing: -.015em;
    line-height: 1.1;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--ck-ui) !important;
    font-size: 1.4rem !important;
    font-weight: 400;
    color: var(--wp--preset--color--ink, #241F1B);
}
.woocommerce div.product .woocommerce-product-details__short-description {
    font-family: var(--ck-lees);
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 46ch;
}
.woocommerce div.product form.cart { margin-top: var(--ck-s5); }

/* voorraadtekst opvallend maar niet schreeuwend */
.woocommerce div.product .stock {
    font-family: var(--ck-ui);
    font-size: .9rem;
    letter-spacing: .02em;
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
}

/* ==========================================================================
   8. CATEGORIEKAARTEN
   ========================================================================== */

.ck-cat-kaart img { transition: transform 600ms var(--ck-ease); }
.ck-cat-kaart:hover img { transform: scale(1.03); }
.ck-cat-kaart figcaption {
    font-family: var(--ck-lees);
    font-size: 1.15rem;
    padding-top: var(--ck-s3);
    border-top: 1px solid transparent;
    transition: border-color var(--ck-dur) var(--ck-ease);
}
.ck-cat-kaart:hover figcaption {
    border-top-color: var(--wp--preset--color--bronze, #9A7442);
}
.ck-cat-kaart figcaption span {
    font-family: var(--ck-ui);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--wp--preset--color--muted, #5F574E);
}

/* ==========================================================================
   9. KENNISPAGINA'S - leesbaarheid eerst
   ========================================================================== */

.ck-artikel { max-width: 44rem; margin-inline: auto; }

.entry-content table,
.wp-block-table table {
    font-family: var(--ck-ui);
    font-size: .95rem;
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table th {
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .74rem;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wp--preset--color--ink, #241F1B);
    color: var(--wp--preset--color--ink, #241F1B);
}
.wp-block-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ck-lijn);
    vertical-align: top;
}
.wp-block-table tr:last-child td { border-bottom: none; }

/* FAQ-accordeon */
.wp-block-details {
    border-bottom: 1px solid var(--ck-lijn);
    padding: var(--ck-s4) 0;
}
.wp-block-details summary {
    font-family: var(--ck-lees);
    font-size: 1.08rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--ck-s4);
    color: var(--wp--preset--color--ink, #241F1B);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
    content: "+";
    font-family: var(--ck-ui);
    font-weight: 400;
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
    transition: transform var(--ck-dur) var(--ck-ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details p { margin-top: var(--ck-s3); }

/* ==========================================================================
   10. HEADER / NAVIGATIE
   ========================================================================== */

.wp-block-site-title a {
    font-family: var(--ck-display) !important;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 1.15rem;
    text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content {
    font-family: var(--ck-ui);
    font-size: .93rem;
    letter-spacing: .01em;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
/* submenu: rustig paneel, geen harde doos */
.wp-block-navigation .wp-block-navigation__submenu-container {
    border: 1px solid var(--ck-lijn) !important;
    border-radius: 2px;
    box-shadow: var(--ck-schaduw-kaart);
    padding: var(--ck-s2) 0;
    background: var(--wp--preset--color--paper, #FAF8F5) !important;
}

/* ==========================================================================
   11. BREADCRUMBS + winkelmelding
   ========================================================================== */

.rank-math-breadcrumb,
.woocommerce-breadcrumb {
    font-family: var(--ck-ui);
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, #5F574E);
}
.woocommerce-message,
.woocommerce-info {
    font-family: var(--ck-ui);
    font-size: .95rem;
    border-top-color: var(--wp--preset--color--bronze, #9A7442) !important;
    background: var(--wp--preset--color--linen, #F2EDE6);
}

/* ==========================================================================
   12. MOBIEL
   ========================================================================== */

@media (max-width: 781px) {
    h1, .wp-block-post-title { letter-spacing: -.01em; }
    body.home .wp-block-cover { min-height: 78vh; }
    .ck-sectie { padding-block: var(--ck-s7); }
    .woocommerce div.product .woocommerce-product-details__short-description {
        max-width: none;
    }
}

/* Print: geen beeld, alleen tekst */
@media print {
    .wp-block-cover, .wp-block-navigation, .ck-cat-grid { display: none !important; }
    body { font-family: var(--ck-lees); }
}

/* ==========================================================================
   13. PRODUCTPAGINA - indeling
   Gemeten 20-09: de buitenste container is een grid dat <main> maar 803px van
   1440px gaf; binnen main kreeg de galerij een harde max-width van 512px,
   waardoor de samenvatting (titel, prijs, in winkelwagen) op 211px uitkwam.
   Titels en knoptekst braken daardoor in stukjes. Hier zetten we een echte
   twee-kolomsindeling met het beeld royaal en de tekst leesbaar.
   ========================================================================== */

/* buitenste grid: main mag de volle breedte */
body.single-product .wp-block-group.woocommerce.product {
    display: block !important;
}
body.single-product main.wp-block-group {
    max-width: none !important;
    width: 100% !important;
}

/* de twee kolommen: beeld 56%, tekst 44%, met ruimte ertussen */
body.single-product .wp-block-columns.alignwide {
    max-width: min(1240px, 92vw) !important;
    margin-inline: auto !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
    align-items: flex-start;
}
body.single-product .wp-block-columns.alignwide > .wp-block-column:first-child {
    flex-basis: 56% !important;
    max-width: 56% !important;
}
body.single-product .wp-block-columns.alignwide > .wp-block-column:last-child {
    flex-basis: 44% !important;
    max-width: 44% !important;
    position: sticky;
    top: 2rem;
}

/* galerij: geen harde 512px meer */
body.single-product .wp-block-woocommerce-product-image-gallery {
    max-width: none !important;
    width: 100% !important;
}
body.single-product .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
}
body.single-product .woocommerce-product-gallery img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* samenvatting: royaler ritme */
body.single-product .wp-block-post-title { margin-bottom: .6rem; }
body.single-product .wp-block-woocommerce-product-price { margin-bottom: 1.25rem; }
body.single-product .wp-block-post-excerpt p {
    font-family: var(--ck-lees);
    font-size: 1.08rem;
    line-height: 1.7;
}
body.single-product .wc-block-add-to-cart-form { margin-block: 1.5rem; }
body.single-product .wc-block-add-to-cart-form button,
body.single-product .single_add_to_cart_button {
    width: 100%;
    max-width: 22rem;
    white-space: nowrap;
}
body.single-product .wp-block-woocommerce-product-meta {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ck-lijn);
    font-family: var(--ck-ui);
    font-size: .82rem;
    letter-spacing: .04em;
}

/* voorraadmelding rustiger: brons i.p.v. alarmrood */
body.single-product .stock,
body.single-product .wc-block-components-product-stock-indicator {
    color: var(--wp--preset--color--bronze-ink, #7D5A2E) !important;
    font-family: var(--ck-ui);
    font-size: .92rem;
    letter-spacing: .02em;
}

/* beschrijving en verwante producten in dezelfde kolombreedte */
body.single-product .woocommerce-tabs,
body.single-product .wp-block-post-content,
body.single-product .related,
body.single-product .up-sells,
body.single-product #reviews {
    max-width: min(1240px, 92vw);
    margin-inline: auto;
}
body.single-product .wp-block-post-content p,
body.single-product .woocommerce-Tabs-panel p {
    max-width: 62ch;
}

/* reviewformulier inklappen: neemt nu een halve pagina en er zijn nog geen
   beoordelingen. Blijft bereikbaar via de link. */
body.single-product #review_form_wrapper { display: none; }
body.single-product #reviews .ck-review-open #review_form_wrapper { display: block; }

/* verwante producten: zelfde grid als de shop */
body.single-product .related ul.products,
body.single-product .up-sells ul.products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (max-width: 781px) {
    body.single-product .wp-block-columns.alignwide > .wp-block-column:first-child,
    body.single-product .wp-block-columns.alignwide > .wp-block-column:last-child {
        flex-basis: 100% !important;
        max-width: 100% !important;
        position: static;
    }
}

/* ==========================================================================
   14. "EXTRA KANS" - CrystalNights, FAM en persoonlijk zoeken
   Naast het assortiment, niet ertussen: een eigen band onder de producten
   met een eigen achtergrond, zodat het niet met de shop concurreert.
   ========================================================================== */

.ck-kans {
    margin-block: clamp(3rem, 7vw, 6rem) 0;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--wp--preset--color--linen, #F2EDE6);
    border-top: 1px solid var(--ck-lijn);
}
.ck-kans__label {
    font-family: var(--ck-ui);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.ck-kans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.75rem, 3vw, 3rem);
    max-width: 1240px;
    margin-inline: auto;
}
.ck-kans__kaart {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.ck-kans__kaart h3 {
    font-family: var(--ck-display) !important;
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0;
}
.ck-kans__kaart p:not(.ck-eyebrow) {
    font-family: var(--ck-lees);
    font-size: 1rem;
    line-height: 1.62;
    color: var(--wp--preset--color--graphite, #3A332C);
    margin: 0;
}
.ck-kans__kaart .ck-eyebrow { margin-bottom: 0; }
.ck-kans__cta {
    margin-top: auto;
    padding-top: .5rem;
    font-family: var(--ck-ui);
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--wp--preset--color--plum-deep, #2B1A2E);
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--bronze, #9A7442);
    align-self: flex-start;
    transition: border-color var(--ck-dur) var(--ck-ease),
                color var(--ck-dur) var(--ck-ease);
}
.ck-kans__cta::after { content: " →"; }
.ck-kans__cta:hover {
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
    border-bottom-color: currentColor;
}

@media (max-width: 600px) {
    .ck-kans__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   15. RESPONSIVE-FIXES (gemeten 20-09, zes breedtes x tien paginatypes)
   Body-overflow was overal 0px, maar twee dingen gingen echt stuk:
     - de stenentabel in de keuzehulp is 882px breed en werd op 360px
       afgekapt: 93 elementen buiten de viewport, inhoud onleesbaar
     - WooCommerce' zoomImg (800px) stak op de productpagina uit
   Brede inhoud moet binnen zijn eigen container scrollen, niet de pagina.
   ========================================================================== */

/* Elke tabel scrollt binnen zijn eigen kader. */
.wp-block-table,
.ck-keuzehulp table,
figure.wp-block-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wp-block-table table,
.ck-keuzehulp table {
    min-width: 32rem;          /* kolommen blijven leesbaar, kader scrollt */
    width: 100%;
}

/* Tabellen in de keuzehulp: wrapper met zichtbare scrolhint op smal scherm. */
.ck-keuzehulp .ck-tabelwrap,
.ck-keuzehulp table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
@media (max-width: 781px) {
    .wp-block-table table,
    .ck-keuzehulp table { min-width: 0; width: 100%; font-size: .9rem; }
    .wp-block-table th, .wp-block-table td { padding: 9px 10px; }
}

/* Onder 420px: de tweekoloms feitentabellen (kenmerk/waarde) omklappen naar
   stapelweergave. Zo hoeft niemand op een telefoon zijwaarts te vegen voor
   iets simpels als "Hardheid | 7". Alleen bij twee kolommen: bij een bredere
   tabel blijft scrollen de betere oplossing. */
@media (max-width: 420px) {
    .wp-block-table table tr:has(td:nth-child(2)):not(:has(td:nth-child(3))) {
        display: grid;
        grid-template-columns: 1fr;
        border-bottom: 1px solid var(--ck-lijn);
        padding-block: .35rem;
    }
    .wp-block-table table tr:has(td:nth-child(2)):not(:has(td:nth-child(3))) td {
        border: none;
        padding: 2px 0;
    }
    .wp-block-table table tr:has(td:nth-child(2)):not(:has(td:nth-child(3))) td:first-child {
        font-family: var(--ck-ui);
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--wp--preset--color--muted, #5F574E);
    }
    .wp-block-table table thead:has(th:nth-child(2)):not(:has(th:nth-child(3))) {
        display: none;
    }
}

/* WooCommerce-zoom mag nooit buiten de galerij vallen. */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
    max-width: 100% !important;
    overflow: hidden;
}
.woocommerce-product-gallery img.zoomImg {
    max-width: 100% !important;
    height: auto !important;
}
@media (max-width: 781px) {
    /* op touch is zoom-op-hover zinloos en veroorzaakt het alleen overflow */
    .woocommerce-product-gallery img.zoomImg { display: none !important; }
}

/* Tapdoelen: links in lopende tekst en in de footer ruimer aanklikbaar. */
@media (pointer: coarse) {
    .wp-block-navigation a,
    footer a,
    .ck-cat-kaart figcaption a,
    .ck-kans__cta {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .wp-block-navigation__submenu-container a { min-height: 44px; }
}

/* Lange woorden en URL's mogen nooit de indeling oprekken. */
h1, h2, h3, p, li, td, th, .wp-block-post-title {
    overflow-wrap: break-word;
    hyphens: auto;
}
pre, code { max-width: 100%; overflow-x: auto; }

/* Beeld: nooit breder dan de container, waar ook. */
img, video, iframe, svg { max-width: 100%; height: auto; }

/* ==========================================================================
   16. FOOTER
   De juridische pagina's moeten vindbaar zijn (informatieplicht webshop),
   en de kennisbank hoort hier voor de interne linkstructuur.
   ========================================================================== */

.ck-footer {
    max-width: 1240px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 3fr;
    gap: clamp(2rem, 5vw, 4rem);
}
.ck-footer__naam {
    font-family: var(--ck-display);
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
    color: var(--wp--preset--color--ink, #241F1B);
}
.ck-footer__tekst {
    font-family: var(--ck-lees);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--wp--preset--color--graphite, #3A332C);
    margin: 0 0 .75rem;
    max-width: 24rem;
}
.ck-footer__tekst a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ck-lijn); }
.ck-footer__tekst a:hover { border-bottom-color: var(--wp--preset--color--bronze, #9A7442); }

.ck-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ck-footer__kop {
    font-family: var(--ck-ui);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
    margin: 0 0 .85rem;
}
.ck-footer__kolom ul { list-style: none; margin: 0; padding: 0; }
.ck-footer__kolom li { margin-bottom: .45rem; }
.ck-footer__kolom a {
    font-family: var(--ck-ui);
    font-size: .92rem;
    color: var(--wp--preset--color--graphite, #3A332C);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--ck-dur) var(--ck-ease), color var(--ck-dur) var(--ck-ease);
}
.ck-footer__kolom a:hover {
    color: var(--wp--preset--color--ink, #241F1B);
    border-bottom-color: var(--wp--preset--color--bronze, #9A7442);
}

.ck-footer__slot {
    grid-column: 1 / -1;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--ck-lijn);
    display: grid;
    gap: .6rem;
}
.ck-footer__klein {
    font-family: var(--ck-ui);
    font-size: .78rem;
    line-height: 1.55;
    color: var(--wp--preset--color--muted, #5F574E);
    margin: 0;
    max-width: 70ch;
}
.ck-footer__klein mark {
    background: rgba(154, 116, 66, .18);
    padding: 0 3px;
}

@media (max-width: 781px) {
    .ck-footer { grid-template-columns: 1fr; gap: 2.5rem; }
    .ck-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (pointer: coarse) {
    .ck-footer__kolom a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* ==========================================================================
   17. BEELDBANDEN OP INHOUDSPAGINA'S
   ==========================================================================
   De inhoudspagina's hadden geen enkel beeld. Nu staan er drie soorten:

     .ck-band   volle breedte, bioscoopuitsnede, tussen twee tekstblokken
     .ck-slot   afsluitende band met een kop en de knoppen erop
     media-text beeld naast tekst, halverwege een sectie

   De uitsnede zit op de <img> en niet op de figure. Een aspect-ratio op een
   wrapper met overflow hidden knipte eerder de titel en de prijs van een
   productkaart af; de verhouding hoort op het beeld zelf.
   ========================================================================== */

.wp-block-image.ck-band {
    margin-block: clamp(var(--ck-s7), 6vw, var(--ck-s9));
}

.wp-block-image.ck-band img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    display: block;
}

/* Op een telefoon is 21:9 een streep. Daar past een rustiger uitsnede. */
@media (max-width: 781px) {
    .wp-block-image.ck-band img { aspect-ratio: 3 / 2; }
}

/* Afsluitende band. De kop erop is wit, dus de overlay moet donker genoeg
   blijven; die staat in de blokopmaak zelf op 62%. */
.wp-block-cover.ck-slot {
    margin-block-start: clamp(var(--ck-s8), 8vw, var(--ck-s10));
}

.wp-block-cover.ck-slot .wp-block-cover__inner-container {
    max-width: 46rem;
    text-align: center;
}

.wp-block-cover.ck-slot h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    line-height: 1.12;
    margin-block-end: var(--ck-s3);
}

/* Beeld naast tekst: ruimte tussen de kolommen, en een uitsnede zodat twee
   beelden van verschillende verhouding naast elkaar niet gaan schelen. */
.wp-block-media-text {
    gap: clamp(var(--ck-s5), 4vw, var(--ck-s7));
    margin-block: clamp(var(--ck-s7), 6vw, var(--ck-s9));
}

.wp-block-media-text .wp-block-media-text__media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

@media (max-width: 781px) {
    .wp-block-media-text .wp-block-media-text__media img {
        aspect-ratio: 3 / 2;
        height: auto;
    }
}

/* De eerste kop in een media-text-kolom heeft geen bovenmarge nodig: de
   kolom zelf geeft de ruimte al. */
.wp-block-media-text__content > :first-child { margin-block-start: 0; }

/* ==========================================================================
   18. GEEN ZIJWAARTSE SCROLL
   ==========================================================================
   De mini-cart van WooCommerce is een lade die buiten het scherm geparkeerd
   staat. Zijn schermoverlay krijgt de volle viewportbreedte via 100vw, en op
   een telefoon is dat 2px meer dan de leesbare breedte. Gevolg: de hele site
   kon 2px zijwaarts schuiven. Op een pagina met een volle beeldband valt dat
   op als een trilling bij het scrollen.

   Twee maatregelen. Eerst de oorzaak: de overlay aan beide zijden vastzetten
   in plaats van een breedte geven. Daarna een vangnet met overflow-x: clip.
   Dat is clip en niet hidden: hidden maakt van <html> een scrollcontainer en
   daarmee sneuvelt position: sticky in de header.

   Het vangnet verbergt fouten wel, dus de controle blijft per element meten
   (00_Scripts/paginas_controle.py) en niet alleen naar de scrollbreedte
   kijken.
   ========================================================================== */

.wc-block-components-drawer__screen-overlay {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
}

html {
    overflow-x: clip;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

/* --- knoppen op een donkere band ---
   De outline-knop van WordPress tekent zich met currentColor. Binnen een
   donkere band erft hij de paginakleur (pruim) en dan staat er donkerpaarse
   tekst op een donkere foto: onleesbaar. Op .ck-slot dus expliciet wit, en
   bij hover vult hij wit met donkere tekst zodat het contrast omklapt. */
.wp-block-cover.ck-slot .wp-block-button.is-style-outline > .wp-block-button__link {
    color: #FAF8F5;
    border: 1px solid rgba(250, 248, 245, .7);
    background-color: transparent;
}

.wp-block-cover.ck-slot .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-cover.ck-slot .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    color: #241F1B;
    background-color: #FAF8F5;
    border-color: #FAF8F5;
}

/* ==========================================================================
   19. SIGNATUURBAND - het woord wordt geschreven, de lijn wordt een kristal
   ==========================================================================
   Overgenomen van AH Vastgoedadvies, waar 'gebouw' met een pennenstreek
   wordt geschreven en de lijn daarna een gebouw tekent. Hier: 'kristal'.

   Hoe het werkt:

     1. Een <clipPath> met het woord als <text> in Parisienne.
     2. Daarbinnen een dik pad (de pen) dat van links naar rechts over de
        lettervormen slingert. Buiten de letters is het onzichtbaar, dus je
        ziet alleen letters verschijnen.
     3. `pathLength="1"` maakt de lengte van elk pad precies 1, ongeacht de
        werkelijke lengte. Daarmee werken dasharray en dashoffset van 1 naar
        0 en tekent het pad zichzelf, zonder dat je de lengte hoeft te meten.
     4. De tweede lijn begint waar het woord ophoudt en tekent het kristal.

   De pen is met een script gegenereerd en daarna in een echte browser
   nagemeten: hij dekt 100% van de lettervormen. Raakt de pen een stuk van
   een letter niet, dan wordt dat stuk nooit zichtbaar en staat er een woord
   met gaten. Zie 00_Scripts/signatuur_bouwen.py.
   ========================================================================== */

.ck-signatuur {
    background: var(--wp--preset--color--linen, #F2EDE6);
    padding-block: clamp(var(--ck-s8), 10vw, var(--ck-s10));
    text-align: center;
    overflow: hidden;
}

.ck-signatuur .ck-sig-lead {
    font-family: var(--ck-display);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    letter-spacing: .06em;
    text-transform: none;
    color: var(--wp--preset--color--muted, #5F574E);
    margin: 0 0 .22em;
}

@font-face {
    font-family: "Parisienne";
    src: url("fonts/parisienne-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}

.ck-signatuur .ck-sig-schrift {
    font-family: "Parisienne", "Segoe Script", cursive;
    font-weight: 400;
    line-height: 1.02;
    font-size: clamp(2.9rem, 8.4vw, 6.2rem);
    margin: 0;
    /* Bronzen glans die langzaam door de letters trekt. background-clip op
       tekst vraagt om een transparante kleur; vandaar de fallback-regel
       eronder voor browsers die dat niet doen. */
    color: var(--wp--preset--color--bronze-ink, #7D5A2E);
    background: linear-gradient(100deg,
        #7D5A2E 0%, #9A7442 28%, #C9A96A 46%,
        #9A7442 64%, #7D5A2E 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .ck-signatuur .ck-sig-schrift {
        background: none;
        -webkit-text-fill-color: currentColor;
    }
}

.ck-signatuur .ck-sig-teken {
    display: block;
    height: auto;
    margin: clamp(var(--ck-s4), 3vw, var(--ck-s6)) auto 0;
    overflow: visible;
}

/* Twee tekeningen, want een viewBox kan geen twee indelingen hebben. De
   liggende is 3,4 op 1 en wordt op een telefoon 300px breed en 88px hoog:
   dan is het kristal een paar millimeter. De staande zet het woord boven en
   het kristal eronder. */
.ck-signatuur .ck-sig-teken--breed { width: clamp(340px, 56vw, 660px); }
.ck-signatuur .ck-sig-teken--hoog  { display: none; }

@media (max-width: 640px) {
    .ck-signatuur .ck-sig-teken--breed { display: none; }
    .ck-signatuur .ck-sig-teken--hoog  {
        display: block;
        width: min(86vw, 360px);
    }
}

.ck-signatuur .ck-sig-woord {
    font-family: "Parisienne", "Segoe Script", cursive;
    font-size: 132px;
}

.ck-signatuur .ck-sig-pen {
    fill: none;
    stroke: var(--wp--preset--color--bronze, #9A7442);
    stroke-width: 24;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ck-signatuur .ck-sig-lijn {
    fill: none;
    stroke: var(--wp--preset--color--bronze, #9A7442);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   20. PRODUCTSECTIE OP DE HOMEPAGE
   ==========================================================================
   Gemeten probleem: de lijst stond 704px breed in een viewport van 1440,
   terwijl de hero 1526px is. Twee foto's naast elkaar met een leeg
   rechterdeel. De groep eromheen had `layout: constrained`, en dan krijgt
   een kind zonder eigen uitlijning de content-breedte. Dat is in de
   blokopmaak op `flow` gezet; hier maken we de lijst zelf een grid, zodat
   het niet van de floats van WooCommerce afhangt.
   ========================================================================== */

body.home .woocommerce ul.products,
body.home ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--ck-s4), 2.2vw, var(--ck-s6));
    margin: 0;
    padding: 0;
    list-style: none;
}

body.home .woocommerce ul.products li.product,
body.home ul.products li.product {
    /* WooCommerce zet hier inline floats en procentbreedtes op */
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
}

body.home ul.products li.product::before,
body.home ul.products li.product::after {
    clear: none;
}

@media (max-width: 1100px) {
    body.home .woocommerce ul.products,
    body.home ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
    body.home .woocommerce ul.products,
    body.home ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- knoppen op de homepage rustiger ---
   Onder elke kaart stond een vol pruimen blok. Dat leest als een doorsnee
   webwinkel. De kaart linkt zelf al naar het product, dus hier is een
   tekstlink met een lijntje genoeg. Op /shop/ blijft de knop een knop:
   daar is kopen het doel. */
body.home ul.products li.product a.button,
body.home ul.products li.product button.button {
    background: none !important;
    color: var(--wp--preset--color--plum, #3D2440) !important;
    border: 0;
    padding: 0;
    margin-block-start: var(--ck-s2);
    font-family: var(--ck-ui);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: none;
    border-bottom: 1px solid var(--wp--preset--color--rule, #DED5C9);
    border-radius: 0;
    align-self: flex-start;
    transition: border-color var(--ck-dur) var(--ck-ease),
                color var(--ck-dur) var(--ck-ease);
}

body.home ul.products li.product a.button:hover,
body.home ul.products li.product button.button:hover {
    background: none !important;
    border-bottom-color: var(--wp--preset--color--bronze, #9A7442);
    color: var(--wp--preset--color--bronze-ink, #7D5A2E) !important;
}

/* De titel en prijs stonden op een beige blok dat abrupt eindigde. Op de
   homepage laten we de kaart op papier staan; het beeld doet het werk. */
body.home ul.products li.product {
    background: none;
}

body.home ul.products li.product .woocommerce-loop-product__title {
    margin-block-start: var(--ck-s3);
}

/* --- de groene achtergrond dempen zonder de stenen te slopen ---
   De productfoto's liggen op sterk verzadigd blauwgroen velours en dat
   vecht met papier, linnen, pruim en brons. Opnieuw fotograferen is het
   echte antwoord en staat op de lijst.

   Wat ik eerst probeerde: de achtergrond per pixel omkleuren naar warm
   greige met behoud van de luminantie. Dat werd LELIJKER: velours heeft
   harde schaduwen en veel structuur, dus een tintvervanging gaf bonkige
   grijze vlekken met restjes turkoois. Zie de waarschuwing in
   00_Scripts/velours_neutraal.py.

   Wat wel glad uitpakt is ontzadigen, juist omdat het globaal en
   gelijkmatig is. De truc zit in het verschil: het velours is zwaar
   verzadigd, de stenen zijn bleek en doorschijnend. Ontzadigen haalt dus
   vooral het groen weg en laat amethist, rozenkwarts en bergkristal
   nagenoeg ongemoeid. Bij hover komt de kleur terug, zodat je het echte
   product ziet voordat je klikt. */
.woocommerce ul.products li.product img,
body.home ul.products li.product img {
    filter: saturate(.62) contrast(1.03);
    transition: filter 600ms var(--ck-ease),
                transform var(--ck-dur-reveal, 700ms) var(--ck-ease);
}

.woocommerce ul.products li.product:hover img,
.woocommerce ul.products li.product:focus-within img,
body.home ul.products li.product:hover img {
    filter: saturate(1) contrast(1);
}

/* Op de productpagina zelf NIET dempen: daar moet de klant de echte kleur
   zien voordat hij koopt. */
body.single-product .woocommerce-product-gallery img {
    filter: none;
}

/* Het beige paneel achter titel en prijs eindigde abrupt halverwege de
   kaart. Op de homepage staan de kaarten nu op papier; het beeld doet het
   werk en de tekst hangt eronder. */
body.home ul.products li.product > a,
body.home ul.products li.product .woocommerce-loop-product__title,
body.home ul.products li.product .price {
    background: none !important;
}

body.home ul.products li.product .price {
    padding-block-end: 0;
}

/* ==========================================================================
   21. UIT DE COLLECTIE - het categorieraster
   ==========================================================================
   Gemeten 20-09: de kaarten stonden 336px breed in een container van 704px
   op een scherm van 1440px, met een enorme leegte ernaast. Twee oorzaken:
   de groep had `layout: constrained` (kind krijgt dan de content-breedte, niet
   de wijde breedte), en **`.ck-cat-grid` had geen enkele indelingsregel** in
   de CSS. De twee kolommen kwamen per ongeluk tot stand.

   De beelden zijn de sfeerfoto's in het lichte interieur. Die zijn precies
   op het palet; ze stonden alleen te klein om iets te doen.
   ========================================================================== */

.ck-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--ck-s4), 2.4vw, var(--ck-s6));
    margin-block-start: clamp(var(--ck-s5), 3vw, var(--ck-s7));
}

.ck-cat-kaart {
    margin: 0;
}

/* Het beeld royaal: op een breed scherm is elke kaart nu ruim 290px in
   plaats van 336px verdeeld over twee kolommen met een halve pagina leeg. */
.ck-cat-kaart img {
    width: 100%;
    display: block;
}

@media (max-width: 1100px) {
    .ck-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .ck-cat-grid {
        grid-template-columns: 1fr;
        gap: var(--ck-s5);
    }
    /* Op een telefoon is een liggende uitsnede prettiger dan 4:3 staand
       naast elkaar: de foto krijgt de volle breedte. */
    .ck-cat-kaart img { aspect-ratio: 3 / 2 !important; }
}