.elementor-kit-28{--e-global-color-primary:#9F7F50;--e-global-color-secondary:#241F21;--e-global-color-text:#3F3C3D;--e-global-color-accent:#EFD39B;--e-global-color-2ffec72:#FFFFFF;--e-global-color-23c11b5:#F3F3F3;--e-global-color-65d9c45:#FEEEC4;--e-global-color-c20b832:#EFD39B;--e-global-color-395fe2e:#9F7F50;--e-global-color-1fa125b:#241F21;--e-global-color-e355282:#3F3C3D;--e-global-color-e668974:#7C797B;--e-global-color-856e99c:#CDCBCA;--e-global-color-e16dbf8:#9F7F5059;--e-global-color-1e59851:#7AC876;--e-global-color-5a5a924:#0E402D;--e-global-color-f5883db:#F7BFB4;--e-global-color-80bc364:#B83D6E;--e-global-color-98f84a5:#166446;--e-global-color-2865711:#152614;--e-global-typography-primary-font-family:"Yeseva One";--e-global-typography-secondary-font-family:"Merriweather Sans";--e-global-typography-text-font-family:"Merriweather Sans";--e-global-typography-accent-font-family:"Merriweather Sans";--e-global-typography-accent-font-size:1.063rem;--e-global-typography-accent-line-height:1.4rem;--e-global-typography-accent-letter-spacing:0.025rem;--e-global-typography-4eedf2f-font-family:"Yeseva One";--e-global-typography-4eedf2f-font-size:1.2rem;--e-global-typography-cf58f87-font-family:"Merriweather Sans";--e-global-typography-dffdd15-font-family:"Merriweather";background-color:var( --e-global-color-23c11b5 );color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:1.125rem;font-weight:400;line-height:1.625rem;}.elementor-kit-28 button,.elementor-kit-28 input[type="button"],.elementor-kit-28 input[type="submit"],.elementor-kit-28 .elementor-button{background-color:var( --e-global-color-2ffec72 );font-family:"Inter", Sans-serif;font-size:1.3rem;font-weight:500;line-height:1.8rem;color:var( --e-global-color-primary );border-style:none;border-radius:0px 0px 0px 0px;}.elementor-kit-28 button:hover,.elementor-kit-28 button:focus,.elementor-kit-28 input[type="button"]:hover,.elementor-kit-28 input[type="button"]:focus,.elementor-kit-28 input[type="submit"]:hover,.elementor-kit-28 input[type="submit"]:focus,.elementor-kit-28 .elementor-button:hover,.elementor-kit-28 .elementor-button:focus{background-color:var( --e-global-color-2ffec72 );color:var( --e-global-color-accent );border-style:none;}.elementor-kit-28 e-page-transition{background-color:#FFBC7D;}.elementor-kit-28 a{color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;font-size:1.125rem;font-weight:500;line-height:1.625rem;}.elementor-kit-28 a:hover{color:var( --e-global-color-primary );}.elementor-kit-28 h1{color:var( --e-global-color-text );font-family:"Cormorant Garamond", Sans-serif;font-size:3.25rem;font-weight:400;text-transform:none;line-height:3.75rem;}.elementor-kit-28 h2{color:var( --e-global-color-primary );font-family:"Cormorant Garamond", Sans-serif;font-size:2.4rem;font-weight:400;text-transform:none;}.elementor-kit-28 h3{color:var( --e-global-color-accent );font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:500;text-transform:none;line-height:2.25rem;}.elementor-kit-28 h4{color:var( --e-global-color-accent );font-family:"Cormorant Garamond", Sans-serif;font-size:1.8rem;font-weight:600;text-transform:none;line-height:1.75rem;}.elementor-kit-28 h5{color:var( --e-global-color-secondary );font-family:"Montserrat", Sans-serif;font-size:1.125rem;font-weight:500;text-transform:none;line-height:1.7rem;}.elementor-kit-28 h6{color:var( --e-global-color-secondary );font-family:"Montserrat", Sans-serif;font-size:1rem;font-weight:500;text-transform:none;line-height:1.625rem;}.elementor-kit-28 label{color:var( --e-global-color-text );}.elementor-kit-28 input:not([type="button"]):not([type="submit"]),.elementor-kit-28 textarea,.elementor-kit-28 .elementor-field-textual{color:var( --e-global-color-text );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-kit-28 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-28 textarea:focus,.elementor-kit-28 .elementor-field-textual:focus{border-style:solid;border-color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-28{font-size:1rem;line-height:1.5em;}.elementor-kit-28 a{font-size:1rem;line-height:1.5rem;}.elementor-kit-28 h1{font-size:2.5rem;line-height:3em;letter-spacing:0.03rem;}.elementor-kit-28 h2{font-size:1.75rem;line-height:2.25em;}.elementor-kit-28 h3{font-size:1.375rem;line-height:1.875em;}.elementor-kit-28 h4{font-size:1.3rem;line-height:1.625rem;}.elementor-kit-28 h5{font-size:1.1rem;line-height:1.6rem;}.elementor-kit-28 h6{font-size:1.2rem;line-height:1.7rem;}.elementor-kit-28 button,.elementor-kit-28 input[type="button"],.elementor-kit-28 input[type="submit"],.elementor-kit-28 .elementor-button{font-size:1rem;line-height:1.6rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-28{--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-line-height:1.4em;font-size:0.9375rem;line-height:1.4375em;}.elementor-kit-28 a{font-size:0.9375rem;line-height:1.4375rem;}.elementor-kit-28 h1{font-size:2rem;line-height:2.5em;letter-spacing:0.03rem;}.elementor-kit-28 h2{font-size:1.5rem;line-height:2em;}.elementor-kit-28 h3{font-size:1.25rem;line-height:1.75em;}.elementor-kit-28 h4{font-size:1.2rem;line-height:1.5rem;}.elementor-kit-28 h5{font-size:1rem;line-height:1.5rem;}.elementor-kit-28 h6{font-size:1rem;line-height:1.5rem;}.elementor-kit-28 button,.elementor-kit-28 input[type="button"],.elementor-kit-28 input[type="submit"],.elementor-kit-28 .elementor-button{font-size:1rem;line-height:1.5rem;letter-spacing:0.03rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================
   W-SHOP — SITE CUSTOM CSS
   ----------------------------------------------------------------------------
   TABLE OF CONTENTS
     §0   LEGACY / MISC          — pre-existing rules (strong, animations)
     §1   ROOT — WS VARIABLES    — global design tokens (--ws-*)
     §2   ROOT — BL VARIABLES    — blog design tokens (--bl-*)
     HOME PAGE STYLE
     §3   WOOCOMMERCE — SHOP     — product cards, buttons, badges, shop header
     §4   WOOCOMMERCE — PRODUCT  — single product page
     §5   WOOCOMMERCE — CART     — cart, checkout, forms, notices
     §6   UTILITIES — WS-*       — reusable classes (container, headings, btns…)
     §7   HEADER & SEARCH
     §8   SIDE CART (XOOTIX)     — .xoo-wsc-* drawer skin
     §9   BLOG INDEX             — hero, filters, pills, posts grid, featured…
     §10  SINGLE POST TEMPLATE   — .bs-* article layout
     §11   LATEST ARTICLES STRIP  —  .bl-strip
     §12 — PRODUCT CARD (Loop Item)  --  .wsh-pc
     §13 — PRODUCT ARCHIVE HEADER -- .wsh-arch
     §14 — BRAND LANDING  --  .wsh-bl
     §15 — CATEGORY LANDING -- .wsh-cl
     §16 — WOOCOMMERCE ACCOUNT -- .woocommerce-account (login, dashboard, addresses)
     
     §17 — SINGLE PRODUCT  (Woostify + Flickity gallery)  ·  HARMONIZED
     §18 FIBOSEARCH 
     § 19 (fibosearch) HIDE THE PIRX DETAIL PANEL
     §20 — SHOP FILTER + SORT BAR   ·  Better Post & Filter Widgets
     §21 — SHOP FILTER CARD + ACTIVE FILTERS
     §22 — SHOP FILTER BAR · refinements
     §23 price block
     §24 — SHOP FILTER · styled sort dropdown (replaces native select)
     §25 — Profielpagina's: verberg de Categorie-pill
   ----------------------------------------------------------------------------
   Design tokens:  dark #241F21 · gold #a8895a · copper #9f7f50
   Fonts:  Playfair Display (display) · Helvetica Neue (body)
   Paste in: Elementor → Site Settings → Custom CSS
   ----------------------------------------------------------------------------
   LAST CLEANUP:
     • §4 — removed the generic "form.cart .button" add-to-cart rule that leaked
       onto the Elementor product cards (single button lives in §17, card in §12).
     • §12 — product-card button is now authoritative (.wsh-pc scope) with a
       gold (#a8895a) hover, consistent with the rest of the site.
     • Numbered the Mijn-account (§16) and FiboSearch (§18) sections.
   ============================================================================ */


/* ============================================================================
   §0   LEGACY / MISC
   ============================================================================ */

strong {
    color: #241f21;
    font-weight: 500;
}

/* Pulse animation */
.animation-pulse {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Grow-on-hover */
.cart-anim:hover {
    transform: scale(1.05);
}


/* ============================================================================
   §1   ROOT — WS VARIABLES (global design tokens)
   ============================================================================ */

:root {
    /* System colors */
    --ws-primary: #241F21;        /* Dark — main / buttons / headings */
    --ws-secondary: #a8895a;      /* Warm gold — accents, hover */
    --ws-accent: #9F7F50;         /* Faded copper — borders, eyebrows */
    --ws-soft: #EFD39B;           /* Soft peach — highlights */

    /* Custom palette */
    --ws-white: #FFFFFF;
    --ws-white-smoke: #F3F3F3;
    --ws-pearl-beige: #FEEEC4;
    --ws-cream: #FAF8F5;
    --ws-cream-deep: #F3EBD8;

    /* Greys */
    --ws-text: #3F3C3D;           /* Body text — graphite */
    --ws-grey: #7C797B;           /* Muted */
    --ws-silver: #CDCBCA;
    --ws-border: #E8E4DC;
    --ws-border-soft: #EFEBE2;

    /* Status */
    --ws-success: #7A8C5C;
    --ws-sale: #C0392B;

    /* Marble texture */
    --ws-marble: url('https://w-shop.myskydoowebsite.com/wp-content/uploads/2-23.png');

    /* Typography */
    --ws-font-body: 'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --ws-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;

    /* UI tokens */
    --ws-radius: 12px;
    --ws-radius-sm: 8px;
    --ws-radius-lg: 20px;
    --ws-shadow-sm: 0 2px 10px rgba(36, 31, 33, 0.04);
    --ws-shadow: 0 4px 20px rgba(36, 31, 33, 0.06);
    --ws-shadow-lg: 0 12px 40px rgba(36, 31, 33, 0.10);
    --ws-shadow-gold: 0 8px 20px rgba(159, 127, 80, 0.25);
    --ws-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ws-transition-fast: all 0.25s ease;
}


/* ============================================================================
   §2   ROOT — BL VARIABLES (blog design tokens)
   ============================================================================ */

:root {
    --bl-primary: #241F21;
    --bl-secondary: #a8895a;
    --bl-accent: #9f7f50;
    --bl-cream: #f3f3f3;
    --bl-light: #faf8f5;
    --bl-text: #3f3c3d;
    --bl-muted: #7c797b;
    --bl-border: #e8e4dc;
    --bl-radius: 12px;
    --bl-radius-sm: 8px;
    --bl-shadow: 0 4px 20px rgba(0,0,0,0.06);
    --bl-shadow-hover: 0 12px 40px rgba(0,0,0,0.12);
    --bl-transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    --bl-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
}

/* =================================================================
   W-SHOP — HOME PAGE STYLES
   -----------------------------------------------------------------
   Moved out of the home HTML widget's inline style block so all
   custom CSS lives in one place (Site Settings → Custom CSS).

   SAFE TO LOAD SITE-WIDE: every rule is namespaced under .hp-page /
   .hp-* (or the .hp-bestsellers section), so it only takes effect on
   the home page — no other page has those elements.

   The block flagged "CASCADE FIX" near the bestsellers rules is load-
   bearing: it stops Elementor's global link style (.elementor-kit-28 a)
   from re-styling the product title & brand. Do not delete it.
   ================================================================= */

.hp-page {
    --hp-primary: #241F21;
    --hp-secondary: #a8895a;
    --hp-accent: #9f7f50;
    --hp-cream: #f3f3f3;
    --hp-light: #faf8f5;
    --hp-dark: #241f21;
    --hp-text: #3f3c3d;
    --hp-muted: #7c797b;
    --hp-border: #e8e4dc;
    --hp-radius: 12px;
    --hp-radius-sm: 8px;
    --hp-shadow: 0 4px 20px rgba(0,0,0,0.06);
    --hp-shadow-hover: 0 12px 40px rgba(0,0,0,0.12);
    --hp-transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    --hp-font: 'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --hp-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --hp-marble: url('/wp-content/uploads/2-23.png');
    font-family: var(--hp-font);
    color: var(--hp-text);
    line-height: 1.6;
    background: var(--hp-light);
    width: 100%;
    overflow-x: hidden;
}
.hp-page * { box-sizing: border-box; margin: 0; padding: 0; }
.hp-page img { max-width: 100%; height: auto; display: block; }
.hp-page a { color: var(--hp-primary); text-decoration: none; transition: var(--hp-transition); }
.hp-page a:hover { color: var(--hp-accent); }
.hp-page ul { list-style: none; }
.hp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* HERO */
.hp-hero { background-color: var(--hp-cream); background-image: linear-gradient(135deg, rgba(243,243,243,0.88) 0%, rgba(240,235,224,0.85) 100%), var(--hp-marble); background-size: cover; background-position: center; padding: 90px 0; position: relative; overflow: hidden; }
.hp-hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(201,169,110,0.18) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.hp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hp-hero-content h1 { font-family: var(--hp-font-display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 400; line-height: 1.1; color: var(--hp-dark); margin-bottom: 20px; letter-spacing: -0.02em; }
.hp-hero-content h1 span { color: var(--hp-secondary); font-style: italic; }
.hp-hero-subtitle { font-family: var(--hp-font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 500; color: var(--hp-secondary); font-style: italic; margin-bottom: 24px; max-width: 540px; line-height: 1.4; }
.hp-hero-content p { font-size: 1.1rem; color: var(--hp-muted); margin-bottom: 16px; max-width: 540px; }
.hp-hero-content p strong { color: var(--hp-primary); font-weight: 600; }
.hp-hero-note { font-size: 0.95rem; color: var(--hp-text); font-style: italic; margin-top: 8px; max-width: 540px; }
.hp-hero-cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hp-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--hp-secondary); color: var(--hp-primary) !important; padding: 14px 32px; border-radius: var(--hp-radius-sm); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: var(--hp-transition); border: 2px solid var(--hp-secondary) !important; }
.hp-btn-primary:hover { background: var(--hp-primary) !important; border-color: var(--hp-primary) !important; color: white !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.hp-btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--hp-primary) !important; padding: 14px 32px; border-radius: var(--hp-radius-sm); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: var(--hp-transition); border: 2px solid var(--hp-primary) !important; }
.hp-btn-secondary:hover { background: var(--hp-primary) !important; color: white !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.hp-hero-image { position: relative; border-radius: var(--hp-radius); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--hp-shadow); }
.hp-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hp-hero-image:hover img { transform: scale(1.03); }

/* SECTION HEADER */
.hp-section-header { padding: 80px 0 40px; text-align: center; }
.hp-eyebrow { display: inline-block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--hp-secondary); font-weight: 600; margin-bottom: 16px; }
.hp-section-header h2 { font-family: var(--hp-font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; color: var(--hp-dark); margin-bottom: 16px; }
.hp-section-header p { color: var(--hp-muted); max-width: 620px; margin: 0 auto; font-size: 1.05rem; }

/* BENEFITS BAR */
.hp-benefits { background-color: var(--hp-primary); color: white; padding: 50px 0; position: relative; overflow: hidden; }
.hp-benefits::before { content: ''; position: absolute; inset: 0; background-image: var(--hp-marble); background-size: cover; background-position: center; opacity: 0.06; pointer-events: none; }
.hp-benefits > * { position: relative; z-index: 1; }
.hp-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.hp-benefit-item { display: flex; align-items: flex-start; gap: 14px; color: white; }
.hp-benefit-icon { width: 44px; height: 44px; background: rgba(201,169,110,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp-benefit-icon svg { width: 22px; height: 22px; color: var(--hp-secondary); }
.hp-benefit-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; color: white; }
.hp-benefit-item p { font-size: 0.875rem; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* BESTSELLERS */
.hp-bestsellers { padding: 30px 0 60px; }
.hp-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; }
.hp-product-card { background: white; border-radius: var(--hp-radius); overflow: hidden; transition: var(--hp-transition); border: 1px solid var(--hp-border); display: flex; flex-direction: column; position: relative; }
.hp-product-card:hover { transform: translateY(-6px); box-shadow: var(--hp-shadow-hover); border-color: var(--hp-secondary); }
.hp-product-image { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--hp-cream); display: block; }
.hp-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hp-product-card:hover .hp-product-image img { transform: scale(1.05); }
.hp-product-badge { position: absolute; top: 14px; left: 14px; background: var(--hp-primary); color: white; padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; z-index: 2; }
.hp-product-info { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.hp-product-brand { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--hp-secondary) !important; font-weight: 700; margin-bottom: 8px; display: inline-block; }
.hp-product-brand:hover { color: var(--hp-accent) !important; }
.hp-product-info h3 { font-family: var(--hp-font); font-size: 1.05rem; font-weight: 600; color: var(--hp-dark); margin-bottom: 12px; line-height: 1.4; min-height: 2.8em; }
.hp-product-info h3 a { color: var(--hp-dark); }
.hp-product-info h3 a:hover { color: var(--hp-accent); }
.hp-product-price { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; gap: 10px; }
.hp-price-current { font-size: 1.25rem; font-weight: 700; color: var(--hp-dark); }
/* Card button — matched to the shop / loop product-card button: solid dark
   pill, white text, no border, 50px radius, Helvetica. The 3-class scoped
   .elementor-kit-28 (0,3,0) beats `.elementor-kit-28 a`, so the font no longer falls
   back to Inter and no !important is needed. */
.hp-bestsellers .hp-product-card .hp-product-btn {
    margin-top: 16px;
    display: block;
    width: 100%;
    text-align: center;
    background: var(--hp-dark);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 13px 18px;
    font-family: var(--hp-font);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: var(--hp-transition);
}
.hp-bestsellers .hp-product-card .hp-product-btn:hover {
    background: var(--hp-secondary);
    color: #fff;
    transform: translateY(-1px);
}
.hp-bestsellers-cta { text-align: center; }

/* CASCADE FIX (keep) — two separate Elementor globals fight these cards:
   (a) `.elementor-kit-28 a`  forces links to Inter / 1.125rem / 500;
   (b) `.elementor-kit-28 h3` forces every <h3> to the accent (gold) colour.
   The title is an <h3><a> and the brand is an <a>, so both get hit. These
   rules re-assert the intended card typography and colours. */
.hp-bestsellers .hp-product-card h3 a {
    font: inherit !important;             /* title link takes its <h3> font (Helvetica Neue) */
    color: var(--hp-dark) !important;     /* NOT inherit: kit makes <h3> gold, so pin dark   */
    text-decoration: none !important;
}
.hp-bestsellers .hp-product-card h3 a:hover {
    color: var(--hp-accent) !important;   /* gold on hover only */
}
.hp-bestsellers .hp-product-card a.hp-product-brand {
    font-family: inherit !important;   /* was forced to Inter    */
    font-size: .72rem !important;      /* was forced to 1.125rem */
    font-weight: 700 !important;       /* was forced to 500      */
}

/* KIT OVERRIDE (keep) — `.elementor-kit-28 h3 { color: accent }` ties the
   section heading rules on specificity; now that this file loads before the
   kit it was turning every home <h3> gold (bestseller / discover / workshop
   titles) and the benefit-bar <h3> too. The .hp-page prefix wins the tie by
   specificity, so it holds regardless of load order. */
.hp-page .hp-product-info h3,
.hp-page .hp-discover-body h3,
.hp-page .hp-workshop-body h3 { color: var(--hp-dark); }
.hp-page .hp-benefit-item h3 { color: #fff; }

/* CATEGORIES + PROBLEMS — two large feature cards */
.hp-discover { padding: 60px 0; }
.hp-discover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hp-discover-card { background: white; border-radius: var(--hp-radius); overflow: hidden; border: 1px solid var(--hp-border); transition: var(--hp-transition); box-shadow: var(--hp-shadow); display: flex; flex-direction: column; }
.hp-discover-card:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-hover); border-color: var(--hp-secondary); }
.hp-discover-image { aspect-ratio: 16/9; overflow: hidden; background: var(--hp-cream); }
.hp-discover-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hp-discover-card:hover .hp-discover-image img { transform: scale(1.04); }
.hp-discover-body { padding: 32px 30px 36px; flex: 1; display: flex; flex-direction: column; }
.hp-discover-body h3 { font-family: var(--hp-font-display); font-size: 1.65rem; font-weight: 500; color: var(--hp-dark); margin-bottom: 14px; letter-spacing: -0.01em; }
.hp-discover-body > p { font-size: 0.98rem; color: var(--hp-muted); margin-bottom: 22px; line-height: 1.7; }
.hp-discover-body p strong { color: var(--hp-primary); font-weight: 600; }
.hp-discover-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: auto; }
.hp-discover-list li { font-size: 0.93rem; }
.hp-discover-list li a { display: inline-flex; align-items: center; gap: 8px; color: var(--hp-primary); padding: 4px 0; transition: var(--hp-transition); font-weight: 500; }
.hp-discover-list li a:hover { color: var(--hp-accent); transform: translateX(4px); }
.hp-leaf { color: var(--hp-secondary); font-size: 0.9em; }

/* MIJN VERHAAL — brand story section */
.hp-story { background-color: var(--hp-cream); background-image: linear-gradient(135deg, rgba(243,243,243,0.85) 0%, rgba(240,235,224,0.82) 100%), var(--hp-marble); background-size: cover; background-position: center; padding: 90px 0; }
.hp-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hp-story-content h2 { font-family: var(--hp-font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; color: var(--hp-dark); margin-bottom: 24px; }
.hp-story-content h2 span { color: var(--hp-secondary); font-style: italic; }
.hp-story-content p { color: var(--hp-text); margin-bottom: 14px; font-size: 1.02rem; line-height: 1.7; }
.hp-story-content p strong { color: var(--hp-primary); font-weight: 600; }
.hp-story-content .hp-story-tagline { font-family: var(--hp-font-display); font-size: 1.4rem; font-style: italic; color: var(--hp-secondary); margin: 20px 0; line-height: 1.4; }
.hp-story-image { border-radius: var(--hp-radius); overflow: hidden; box-shadow: var(--hp-shadow); aspect-ratio: 4/5; }
.hp-story-image img { width: 100%; height: 100%; object-fit: cover; }

/* WORKSHOPS */
.hp-workshops { padding: 80px 0; }
.hp-workshops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 50px; }
.hp-workshop-card { background: white; border-radius: var(--hp-radius); overflow: hidden; border: 1px solid var(--hp-border); transition: var(--hp-transition); box-shadow: var(--hp-shadow); display: flex; flex-direction: column; }
.hp-workshop-card:hover { transform: translateY(-6px); box-shadow: var(--hp-shadow-hover); border-color: var(--hp-secondary); }
.hp-workshop-image { aspect-ratio: 4/3; overflow: hidden; background: var(--hp-cream); }
.hp-workshop-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hp-workshop-card:hover .hp-workshop-image img { transform: scale(1.04); }
.hp-workshop-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.hp-workshop-body h3 { font-family: var(--hp-font-display); font-size: 1.25rem; font-weight: 500; color: var(--hp-dark); margin-bottom: 12px; line-height: 1.3; }
.hp-workshop-body p { font-size: 0.95rem; color: var(--hp-muted); line-height: 1.6; margin: 0; flex: 1; }
.hp-workshops-cta { text-align: center; }
.hp-workshops-cta-text { color: var(--hp-muted); margin-bottom: 24px; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.05rem; }

/* REVIEWS */
.hp-reviews { background-color: var(--hp-cream); background-image: linear-gradient(135deg, rgba(243,243,243,0.85) 0%, rgba(240,235,224,0.82) 100%), var(--hp-marble); background-size: cover; padding: 80px 0; }
.hp-google-rating { display: inline-flex; align-items: center; gap: 16px; background: white; padding: 14px 24px; border-radius: 50px; box-shadow: var(--hp-shadow); margin-bottom: 30px; }
.hp-google-icon { width: 36px; height: 36px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; }
.hp-google-icon svg { width: 24px; height: 24px; }
.hp-google-text { display: flex; flex-direction: column; }
.hp-google-text-label { font-size: 0.78rem; color: var(--hp-muted); font-weight: 500; }
.hp-google-text-score { font-weight: 700; font-size: 0.95rem; color: var(--hp-dark); display: flex; align-items: center; gap: 6px; }
.hp-google-stars { color: var(--hp-secondary); letter-spacing: 1px; font-size: 0.9rem; }
.hp-reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hp-review-card { background: white; border-radius: var(--hp-radius); padding: 24px 22px; border: 1px solid var(--hp-border); display: flex; flex-direction: column; gap: 8px; transition: var(--hp-transition); box-shadow: var(--hp-shadow); }
.hp-review-card:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-hover); border-color: var(--hp-secondary); }
.hp-review-card h4 { font-family: var(--hp-font); font-size: 0.85rem; font-weight: 700; color: var(--hp-dark); line-height: 1.3; margin: 0; min-height: 2.2em; }
.hp-review-stars { color: var(--hp-secondary); letter-spacing: 2px; font-size: 1rem; }
.hp-review-author { font-size: 0.78rem; color: var(--hp-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0; }
.hp-review-text { font-size: 0.88rem; color: var(--hp-text); line-height: 1.55; margin: 0; font-style: italic; }

/* BRAND STRIP */
.hp-brands { background-color: var(--hp-cream); background-image: linear-gradient(135deg, rgba(243,243,243,0.85) 0%, rgba(240,235,224,0.82) 100%), var(--hp-marble); background-size: cover; padding: 60px 0; border-top: 1px solid var(--hp-border); }
.hp-brands-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 50px; max-width: 1100px; margin: 0 auto; }
.hp-brand-item { font-family: var(--hp-font-display); font-size: 1.4rem; font-weight: 500; color: var(--hp-muted); letter-spacing: 0.02em; transition: var(--hp-transition); text-decoration: none; padding: 8px 0; position: relative; }
.hp-brand-item:hover { color: var(--hp-primary); }
.hp-brand-item::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--hp-secondary); transition: var(--hp-transition); transform: translateX(-50%); }
.hp-brand-item:hover::after { width: 100%; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hp-products-grid { grid-template-columns: repeat(3, 1fr); }
    .hp-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .hp-discover-grid { grid-template-columns: 1fr; }
    .hp-workshops-grid { grid-template-columns: 1fr; gap: 24px; }
    .hp-reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-brands-row { gap: 32px; }
}
@media (max-width: 768px) {
    .hp-hero { padding: 60px 0; }
    .hp-hero-grid, .hp-story-grid { grid-template-columns: 1fr; gap: 40px; }
    .hp-hero-image { order: -1; }
    .hp-products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hp-section-header { padding: 50px 0 30px; }
    .hp-discover, .hp-story, .hp-workshops, .hp-reviews, .hp-brands { padding: 50px 0; }
    .hp-bestsellers { padding: 30px 0 50px; }
    .hp-product-info { padding: 16px; }
    .hp-product-info h3 { font-size: 0.95rem; min-height: 2.6em; }
    .hp-discover-list { grid-template-columns: 1fr; }
    .hp-reviews-grid { grid-template-columns: 1fr; }
    .hp-brands-row { gap: 24px; }
    .hp-brand-item { font-size: 1.15rem; }
    .hp-discover-body { padding: 24px; }
    .hp-story-content h2 { text-align: left; }
}
@media (max-width: 480px) {
    .hp-products-grid { grid-template-columns: 1fr; }
    .hp-benefits-grid { grid-template-columns: 1fr; }
    .hp-hero-cta-row { flex-direction: column; }
    .hp-hero-cta-row > a { width: 100%; justify-content: center; }
}

/* ============================================================================
   §3   WOOCOMMERCE — SHOP (product cards, buttons, badges, shop header)
   ============================================================================ */

/* --- Product card --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: var(--ws-radius) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-bottom: 28px !important;
    transition: var(--ws-transition) !important;
    box-shadow: var(--ws-shadow-sm) !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--ws-shadow-lg) !important;
    border-color: var(--ws-secondary) !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    margin: 0 !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
}
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04) !important;
}

/* --- Product title --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-family: var(--ws-font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ws-primary) !important;
    padding: 18px 18px 4px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

/* --- Price --- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    color: var(--ws-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 0 18px 14px !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product .price del {
    color: var(--ws-grey) !important;
    font-weight: 400 !important;
    margin-right: 8px !important;
    opacity: 0.8 !important;
}
.woocommerce ul.products li.product .price ins {
    background: transparent !important;
    color: var(--ws-primary) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* --- Buttons: IOAN style (cream + gold border → dark on hover) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.added_to_cart {
    background: var(--ws-cream) !important;
    color: var(--ws-primary) !important;
    border: 2px solid var(--ws-accent) !important;
    border-radius: var(--ws-radius-sm) !important;
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 18px 18px !important;
    display: block !important;
    text-align: center !important;
    transition: var(--ws-transition) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    width: calc(100% - 36px) !important;
    line-height: 1.4 !important;
    font-family: var(--ws-font-body) !important;
    cursor: pointer !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--ws-primary) !important;
    color: var(--ws-white) !important;
    border-color: var(--ws-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ws-shadow-gold) !important;
}

/* --- Sale / stock badges --- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background: var(--ws-sale) !important;
    color: var(--ws-white) !important;
    border-radius: 50px !important;
    padding: 4px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.6 !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product .outofstock-bubble,
.outofstock-bubble {
    background: var(--ws-grey) !important;
    color: var(--ws-white) !important;
    border-radius: 50px !important;
    padding: 4px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

/* --- Shop / category header --- */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    color: var(--ws-grey) !important;
    font-size: 0.9rem !important;
    font-family: var(--ws-font-body) !important;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-border) !important;
    color: var(--ws-primary) !important;
    padding: 10px 36px 10px 16px !important;
    border-radius: var(--ws-radius-sm) !important;
    font-family: var(--ws-font-body) !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}
.woocommerce .woocommerce-ordering select:focus {
    outline: none !important;
    border-color: var(--ws-accent) !important;
    box-shadow: 0 0 0 3px rgba(159, 127, 80, 0.15) !important;
}

/* --- Breadcrumbs --- */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
    color: var(--ws-grey) !important;
    font-size: 0.875rem !important;
    margin-bottom: 24px !important;
}
.woocommerce-breadcrumb a {
    color: var(--ws-accent) !important;
    text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover {
    color: var(--ws-primary) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.92rem !important;
        padding: 14px 14px 4px !important;
    }
    .woocommerce ul.products li.product .price {
        padding: 0 14px 12px !important;
        font-size: 1rem !important;
    }
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce ul.products li.product .button {
        margin: 0 14px 14px !important;
        width: calc(100% - 28px) !important;
        padding: 10px 18px !important;
        font-size: 0.85rem !important;
    }
}
/* ============================================================
   W-Shop — Shop filter · Categorie tidy
   Hide the 3 profile categories from the Categorie facet — they
   now have their own Huidtype / Haartype / Verzorgingsprobleem
   filters. Targeted by term-ID; hiding the parent <li> removes
   its whole branch.  255=Haartype · 250=Huidtype · 244=Verzorgingprobleem
   ============================================================ */
.flex-wrapper.product_cat li.parent-term:has(input[value="255"]),
.flex-wrapper.product_cat li.parent-term:has(input[value="250"]),
.flex-wrapper.product_cat li.parent-term:has(input[value="244"]) {
  display: none !important;
}

/* ============================================================================
   §4   WOOCOMMERCE — PRODUCT (single product page)
   ============================================================================ */

.woocommerce div.product .product_title {
    font-family: var(--ws-font-display) !important;
    font-weight: 400 !important;
    color: var(--ws-primary) !important;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--ws-primary) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}
.woocommerce div.product p.price del {
    color: var(--ws-grey) !important;
    font-weight: 400 !important;
    opacity: 0.7 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--ws-text) !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
}
.woocommerce .quantity .qty {
    border: 1px solid var(--ws-border) !important;
    border-radius: var(--ws-radius-sm) !important;
    padding: 10px !important;
    font-family: var(--ws-font-body) !important;
    color: var(--ws-primary) !important;
}

/* --- Main "Add to cart" ---
   The single-product add-to-cart button is styled in §17; the product-CARD
   button in §12. The old generic ".woocommerce div.product form.cart .button"
   rule was REMOVED here: because an Elementor loop card also contains
   div.product + form.cart + .button, that rule leaked onto every card and
   overrode §12 (copper instead of dark). §17 already owns the single button. */

/* --- Tabs --- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--ws-border) !important;
    padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 24px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--ws-grey) !important;
    font-weight: 600 !important;
    padding: 14px 0 !important;
    border-bottom: 2px solid transparent !important;
    text-transform: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ws-primary) !important;
    border-bottom-color: var(--ws-accent) !important;
}

/* --- Related / upsells title --- */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    font-family: var(--ws-font-display) !important;
    font-weight: 400 !important;
    color: var(--ws-primary) !important;
    font-size: clamp(1.6rem, 3vw, 2rem) !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}


/* ============================================================================
   §5   WOOCOMMERCE — CART (cart, checkout, forms, notices)
   ============================================================================ */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid var(--ws-border) !important;
    border-radius: var(--ws-radius-sm) !important;
    padding: 12px 14px !important;
    font-family: var(--ws-font-body) !important;
    color: var(--ws-primary) !important;
    background: var(--ws-white) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--ws-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(159, 127, 80, 0.15) !important;
}
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--ws-accent) !important;
    background: var(--ws-cream) !important;
    color: var(--ws-primary) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--ws-accent) !important;
}


/* ============================================================================
   §6   UTILITIES — WS-* (reusable classes for any HTML widget)
   ============================================================================ */

/* --- Container --- */
.ws-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* --- Marble background --- */
.ws-marble-bg {
    background-image: var(--ws-marble) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}
.ws-marble-bg::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(250, 248, 245, 0.85) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.ws-marble-bg > * {
    position: relative !important;
    z-index: 1 !important;
}
.ws-marble-subtle::before {
    background: rgba(250, 248, 245, 0.92) !important;
}

/* --- Headings --- */
.ws-h1,
.ws-h2,
.ws-h3 {
    font-family: var(--ws-font-display) !important;
    font-weight: 400 !important;
    color: var(--ws-primary) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}
.ws-h1 { font-size: clamp(2rem, 4.5vw, 3.4rem) !important; }
.ws-h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important; }
.ws-h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem) !important; }

.ws-eyebrow {
    display: inline-block !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--ws-accent) !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
    font-family: var(--ws-font-body) !important;
}

/* --- Buttons --- */
.ws-btn,
.ws-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--ws-accent) !important;
    color: var(--ws-primary) !important;
    padding: 14px 32px !important;
    border-radius: var(--ws-radius-sm) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid var(--ws-accent) !important;
    transition: var(--ws-transition) !important;
    cursor: pointer !important;
    font-family: var(--ws-font-body) !important;
    line-height: 1.4 !important;
}
.ws-btn:hover,
.ws-btn-primary:hover {
    background: var(--ws-cream) !important;
    color: var(--ws-accent) !important;
    border-color: var(--ws-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ws-shadow-gold) !important;
}
.ws-btn-secondary {
    background: transparent !important;
    color: var(--ws-primary) !important;
    border: 2px solid var(--ws-primary) !important;
}
.ws-btn-secondary:hover {
    background: var(--ws-primary) !important;
    color: var(--ws-white) !important;
}
.ws-btn-dark {
    background: var(--ws-primary) !important;
    color: var(--ws-white) !important;
    border-color: var(--ws-primary) !important;
}
.ws-btn-dark:hover {
    background: var(--ws-accent) !important;
    color: var(--ws-primary) !important;
    border-color: var(--ws-accent) !important;
}
/* Elementor button variants */
.elementor-button.ws-btn,
.elementor-button.ws-btn-primary {
    background-color: var(--ws-accent) !important;
    color: var(--ws-primary) !important;
}
.elementor-button.ws-btn:hover,
.elementor-button.ws-btn-primary:hover {
    background-color: var(--ws-cream) !important;
    color: var(--ws-accent) !important;
}

/* --- Card --- */
.ws-card {
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: var(--ws-radius) !important;
    overflow: hidden !important;
    transition: var(--ws-transition) !important;
    box-shadow: var(--ws-shadow-sm) !important;
}
.ws-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ws-shadow-lg) !important;
    border-color: var(--ws-secondary) !important;
}

/* --- Badges --- */
.ws-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--ws-white) !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--ws-primary) !important;
    border: 1px solid var(--ws-border) !important;
    box-shadow: var(--ws-shadow-sm) !important;
}
.ws-badge-gold {
    background: var(--ws-accent) !important;
    color: var(--ws-primary) !important;
    border-color: var(--ws-accent) !important;
}
.ws-badge-dark {
    background: var(--ws-primary) !important;
    color: var(--ws-white) !important;
    border-color: var(--ws-primary) !important;
}

/* --- Section spacing --- */
.ws-section { padding: 80px 0 !important; }
.ws-section-sm { padding: 50px 0 !important; }
.ws-section-header {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 50px !important;
}
.ws-section-header p {
    color: var(--ws-grey) !important;
    margin-top: 12px !important;
    font-size: 1.05rem !important;
}

/* --- Fade-up animation --- */
@keyframes wsFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ws-fade-up { animation: wsFadeUp 0.7s ease-out backwards !important; }
.ws-fade-up.ws-delay-1 { animation-delay: 0.1s !important; }
.ws-fade-up.ws-delay-2 { animation-delay: 0.2s !important; }
.ws-fade-up.ws-delay-3 { animation-delay: 0.3s !important; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .ws-section { padding: 50px 0 !important; }
    .ws-container { padding: 0 16px !important; }
}


/* ============================================================================
   §7   HEADER & SEARCH
   ============================================================================ */

.woocommerce-product-search input[type="search"],
.search-field {
    border: 1px solid var(--ws-border) !important;
    border-radius: 50px !important;
    padding: 10px 18px !important;
    font-family: var(--ws-font-body) !important;
}


/* ============================================================================
   §8   SIDE CART (XOOTIX)  —  .xoo-wsc-* drawer skin
   ----------------------------------------------------------------------------
   Sub-sections:  8.1 slide/overlay · 8.2 container · 8.3 header ·
                  8.4 body/products · 8.5 empty state · 8.6 footer/totals ·
                  8.7 footer buttons
   ============================================================================ */

/* --- 8.1  Slide behaviour + overlay dimmer --- */
.xoo-wsc-cart-active .xoo-wsc-opac {
    background: rgba(36, 31, 33, 0.4) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.xoo-wsc-modal:not(.xoo-wsc-cart-active) .xoo-wsc-container {
    transform: translateX(100%) !important;
}
.xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container {
    transform: translateX(0) !important;
}

/* --- 8.2  Panel container --- */
.xoo-wsc-container {
    width: 480px !important;
    max-width: 92vw !important;
    background: #ffffff !important;
    font-family: 'Helvetica Neue', 'Inter', -apple-system, sans-serif !important;
    color: #3f3c3d !important;
    box-shadow: -8px 0 40px rgba(36, 31, 33, 0.12) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- 8.3  Header --- */
.xoo-wsc-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e4dc !important;
    padding: 20px 24px !important;
}
.xoo-wsc-header,
.xoo-wsc-header * {
    color: #241F21 !important;
}
.xoo-wsch-top {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
}
.xoo-wsch-top .xoo-wsc-items-count,
.xoo-wsc-header .xoo-wsc-items-count {
    background: #a8895a !important;
    color: #241F21 !important;
    font-family: 'Helvetica Neue', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    border: none !important;
}
.xoo-wsc-slider-close,
.xoo-wsch-top .xoo-wsc-slider-close {
    color: #7c797b !important;
    transition: color 0.25s ease !important;
}
.xoo-wsc-slider-close:hover {
    color: #241F21 !important;
}

/* --- 8.4  Body / products --- */
.xoo-wsc-body {
    background: #faf8f5 !important;
    padding: 20px !important;
}
.xoo-wsc-product {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e8e4dc !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 10px rgba(36, 31, 33, 0.04) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.xoo-wsc-product:hover {
    border-color: #a8895a !important;
    box-shadow: 0 8px 24px rgba(36, 31, 33, 0.08) !important;
}

/* Column layout — image left (fixed), text right (fills) — prevents overlap */
.xoo-wsc-img-col {
    flex: 0 0 90px !important;
    width: 90px !important;
    max-width: 90px !important;
}
.xoo-wsc-img-col img {
    width: 90px !important;
    height: 90px !important;
    max-width: none !important;
    border-radius: 8px !important;
    border: 1px solid #e8e4dc !important;
    object-fit: cover !important;
    display: block !important;
}
.xoo-wsc-sum-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.xoo-wsc-sm-info {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}
.xoo-wsc-sm-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.xoo-wsc-sm-right {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    text-align: right !important;
}

/* Product name */
.xoo-wsc-pname,
.xoo-wsc-pname a {
    font-family: 'Helvetica Neue', 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #241F21 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}
.xoo-wsc-pname a:hover {
    color: #9f7f50 !important;
}

/* Quantity (text; ready for a future Pro stepper) */
.xoo-wsc-sml-qty {
    font-size: 0.85rem !important;
    color: #7c797b !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.xoo-wsc-sml-qty span {
    font-weight: 600 !important;
    color: #241F21 !important;
}
.xoo-wsc-sml-qty input,
.xoo-wsc-sml-qty .xoo-wsc-qty-box {
    border: 1px solid #e8e4dc !important;
    border-radius: 6px !important;
    color: #241F21 !important;
    background: #faf8f5 !important;
}

/* Unit price */
.xoo-wsc-pprice {
    font-size: 0.85rem !important;
    color: #7c797b !important;
    margin-top: 2px !important;
}

/* Line total */
.xoo-wsc-smr-ptotal,
.xoo-wsc-smr-ptotal .woocommerce-Price-amount {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #241F21 !important;
    white-space: nowrap !important;
}

/* Trash / remove */
.xoo-wsc-smr-del {
    color: #7c797b !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}
.xoo-wsc-smr-del:hover {
    color: #c0392b !important;
    transform: scale(1.1) !important;
}

/* --- 8.5  Empty cart state ("Naar de shop" = secondary button) --- */
.xoo-wsc-empty {
    padding: 40px 24px !important;
    text-align: center !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.15rem !important;
    color: #241F21 !important;
}
.xoo-wsc-empty a,
.xoo-wsc-empty .xoo-wsc-empty-button,
.xoo-wsc-empty-cart a {
    display: inline-block !important;
    margin-top: 20px !important;
    padding: 14px 28px !important;
    background: transparent !important;
    color: #241F21 !important;
    border: 2px solid #241F21 !important;
    border-radius: 8px !important;
    font-family: 'Helvetica Neue', 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
.xoo-wsc-empty a:hover,
.xoo-wsc-empty .xoo-wsc-empty-button:hover,
.xoo-wsc-empty-cart a:hover {
    background: #241F21 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* --- 8.6  Footer / totals --- */
.xoo-wsc-footer {
    background: #ffffff !important;
    border-top: 1px solid #e8e4dc !important;
    padding: 24px !important;
}

/* Total ROWS layout (label left, value right) */
.xoo-wsc-ft-amt {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 100% !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}
.xoo-wsc-ft-amt-label {
    flex: 0 0 auto !important;
}
.xoo-wsc-ft-amt-value,
.xoo-wsc-ft-amt-value * {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    color: #241F21 !important;
    white-space: nowrap !important;
}
.xoo-wsc-ft-amt-value {
    flex: 0 0 auto !important;
    text-align: right !important;
}

/* Subtotal + savings amounts (fix the 1px shrink) */
.xoo-wsc-ft-amt-value .woocommerce-Price-amount,
.xoo-wsc-ft-amt-value .woocommerce-Price-amount *,
.xoo-wsc-ft-amt-value bdi {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    width: auto !important;
    color: #241F21 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}
.xoo-wsc-ft-totals,
.xoo-wsc-ft-amt-subtotal,
.xoo-wsc-ft-amt-subtotal .woocommerce-Price-amount {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #241F21 !important;
}
.xoo-wsc-ft-amt-subtotal {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

/* Savings row — gold accent (amount + label) */
.xoo-wsc-ft-amt-savings .woocommerce-Price-amount,
.xoo-wsc-ft-amt-savings .woocommerce-Price-amount *,
.xoo-wsc-ft-amt-savings .xoo-wsc-ft-amt-value,
.xoo-wsc-ft-amt-savings .xoo-wsc-ft-amt-value * {
    font-size: 1rem !important;
    color: #a8895a !important;
}
.xoo-wsc-ft-amt-savings .xoo-wsc-ft-amt-label,
.xoo-wsc-ft-amt-savings .xoo-wsc-ft-amt-label * {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    width: auto !important;
    color: #a8895a !important;
    font-family: 'Helvetica Neue', 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

/* "Shipping, taxes…" note */
.xoo-wsc-footer-txt {
    color: #7c797b !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    display: block !important;
    margin: 6px 0 18px !important;
}

/* --- 8.7  Footer buttons (two on one line) --- */
.xoo-wsc-ft-buttons-cont {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.xoo-wsc-ft-btn-continue {
    display: none !important;             /* hide "Continue shopping" */
}
.xoo-wsc-ft-btn {
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-family: 'Helvetica Neue', 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.xoo-wsc-ft-btn::before,
.xoo-wsc-ft-btn::after {
    content: none !important;
}
/* Winkelwagen bekijken — SECONDARY (outline) */
.xoo-wsc-ft-btn-cart {
    background: transparent !important;
    color: #241F21 !important;
    border: 2px solid #241F21 !important;
}
.xoo-wsc-ft-btn-cart:hover {
    background: #241F21 !important;
    color: #ffffff !important;
}
/* Afrekenen — PRIMARY (gold → dark on hover) */
.xoo-wsc-ft-btn-checkout {
    background: #a8895a !important;
    color: #241F21 !important;
    border: 2px solid #a8895a !important;
}
.xoo-wsc-ft-btn-checkout:hover {
    background: #241F21 !important;
    color: #ffffff !important;
    border-color: #241F21 !important;
    transform: translateY(-1px) !important;
}
/* Hide the price appended inside the Afrekenen button */
.xoo-wsc-ft-btn-checkout .woocommerce-Price-amount {
    display: none !important;
}


/* ============================================================================
   §9   BLOG INDEX
   ----------------------------------------------------------------------------
   Sub-sections:  9.1 eyebrow · 9.2 hero · 9.3 section header · 9.4 filters ·
                  9.5 pills · 9.6 posts widget (cards) · 9.7 FEATURED CARD
                  (scoped to .bl-index ONLY) · 9.8 pagination · 9.9 newsletter
   ----------------------------------------------------------------------------
   NOTE: The featured "Uitgelicht" first-card layout is scoped to .bl-index
   so it ONLY fires on the blog-index Posts widget. Any OTHER Posts widget
   (Latest-3 strip, related section) renders as plain equal cards.
   ============================================================================ */

/* --- 9.1  Eyebrow --- */
.bl-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--bl-secondary);
    font-weight: 600;
    margin-bottom: 16px;
}

/* --- 9.2  Hero --- */
.bl-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.bl-hero-inner h1 {
    font-family: var(--bl-font-display);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--bl-primary);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}
.bl-hero-inner h1 span {
    color: var(--bl-secondary);
    font-style: italic;
}
.bl-hero-subtitle {
    font-family: var(--bl-font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 500;
    color: var(--bl-secondary);
    font-style: italic;
    margin-bottom: 22px;
}
.bl-hero-inner > p:not(.bl-hero-subtitle) {
    font-size: 1.05rem;
    color: var(--bl-muted);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}
.bl-hero-inner p strong { color: var(--bl-primary); font-weight: 600; }

/* --- 9.3  Section header --- */
.bl-section-header {
    text-align: center;
    padding-bottom: 32px;
}
.bl-section-header h2 {
    font-family: var(--bl-font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 400;
    color: var(--bl-primary);
    margin-bottom: 10px;
}
.bl-section-header h2 span {
    color: var(--bl-secondary);
    font-style: italic;
}
.bl-section-header p { color: var(--bl-muted); }

/* --- 9.4  Filter form --- */
.bl-filters-wrap {
    background: white;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius) !important;
    padding: 26px;
    margin-bottom: 36px;
    box-shadow: var(--bl-shadow);
}
.bl-filters-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bl-border);
}
.bl-filter-field { display: flex; flex-direction: column; gap: 8px; }
.bl-filter-field-label {
    font-size: 0.72rem !important;
    font-weight: 700;
    color: var(--bl-primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.bl-filter-input {
    background: var(--bl-light);
    border: 1px solid var(--bl-border);
    color: var(--bl-primary);
    padding: 12px 16px;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 0.95rem !important;
    width: 100%;
}
.bl-filter-input:focus {
    outline: none;
    border-color: var(--bl-accent) !important;
    background: white;
    box-shadow: 0 0 0 3px rgba(159,127,80,0.15);
}
.bl-filter-apply {
    background: var(--bl-light);
    color: var(--bl-primary);
    border: 2px solid var(--bl-accent);
    padding: 12px 22px;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    white-space: nowrap;
    transition: var(--bl-transition);
}
.bl-filter-apply:hover {
    color: var(--bl-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(159,127,80,0.25);
}

/* --- 9.5  Pills --- */
.bl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bl-pills-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bl-filter-pill {
    background: var(--bl-cream);
    border: 1px solid transparent;
    color: var(--bl-text);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem !important;
    font-weight: 500;
    text-decoration: none;
    transition: var(--bl-transition);
}
.bl-filter-pill:hover {
    background: var(--bl-secondary) !important;
    color: white !important;
    transform: translateY(-1px);
}
/* Active pill — driven by WP body classes */
body.page .bl-filter-pill[data-category="all"],
body.category-skincare .bl-filter-pill[data-category="skincare"],
body.category-make-up-advies .bl-filter-pill[data-category="make-up-advies"],
body.category-routines-en-tips .bl-filter-pill[data-category="routines-en-tips"],
body.category-trends-en-inspiratie .bl-filter-pill[data-category="trends-en-inspiratie"] {
    background: var(--bl-primary);
    color: white;
    border-color: var(--bl-primary);
}

/* --- 9.6  Posts widget — base card (applies to ALL Posts widgets) --- */
.elementor-widget-posts .elementor-post__badge { display: none; }

.elementor-widget-posts .elementor-posts {
    gap: 28px;
}
.elementor-widget-posts .elementor-post {
    background: white !important;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    overflow: hidden;
    transition: var(--bl-transition);
    display: flex;
    flex-direction: column;
}
.elementor-widget-posts .elementor-post:hover {
    transform: translateY(-6px);
    box-shadow: var(--bl-shadow-hover);
    border-color: var(--bl-secondary);
}

/* Image */
.elementor-widget-posts .elementor-post__thumbnail__link {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bl-cream);
    position: relative;
    margin: 0 !important;
}
.elementor-widget-posts .elementor-post__thumbnail {
    height: 100%;
    width: 100%;
    padding: 0 !important;
}
.elementor-widget-posts .elementor-post__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail img {
    transform: scale(1.05);
}

/* Force ALL card thumbnails to fill cleanly (covers Elementor fit-height mode) */
.elementor-widget-posts .elementor-post__thumbnail,
.elementor-widget-posts .elementor-post__thumbnail.elementor-fit-height {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}
.elementor-widget-posts .elementor-post__thumbnail img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;   /* kill Elementor's scale/translate centering */
}

/* Text container */
.elementor-widget-posts .elementor-post__text {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta line */
.elementor-widget-posts .elementor-post__meta-data {
    font-size: 0.78rem;
    color: var(--bl-muted);
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
    order: -1;
}
.elementor-widget-posts .elementor-post__meta-data .elementor-post-date,
.elementor-widget-posts .elementor-post__meta-data span,
.elementor-widget-posts .elementor-post__meta-data a {
    color: var(--bl-muted);
    text-decoration: none;
}
.elementor-widget-posts .elementor-post__meta-data a:hover {
    color: var(--bl-primary);
}

/* Title */
.elementor-widget-posts .elementor-post__title {
    font-family: var(--bl-font-display) !important;
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.01em;
}
.elementor-widget-posts .elementor-post__title a {
    color: var(--bl-primary) !important;
    text-decoration: none;
}
.elementor-widget-posts .elementor-post__title a:hover {
    color: var(--bl-accent) !important;
}

/* Excerpt */
.elementor-widget-posts .elementor-post__excerpt {
    font-size: 0.92rem;
    color: var(--bl-muted);
    line-height: 1.6;
    margin-bottom: 18px;
    flex: 1;
}
.elementor-widget-posts .elementor-post__excerpt p {
    margin: 0;
}

/* Read more */
.elementor-widget-posts .elementor-post__read-more {
    color: var(--bl-accent) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: var(--bl-transition);
}
.elementor-widget-posts .elementor-post__read-more::after {
    content: '→';
    font-size: 1rem;
    transition: transform 0.3s ease;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__read-more {
    color: var(--bl-primary) !important;
    gap: 12px;
}

/* --- 9.7  FEATURED CARD — SCOPED TO .bl-index ONLY --- */
/* Add CSS class "bl-index" to the blog-index Posts widget to enable this.    */
/* Widgets WITHOUT .bl-index show a normal first card (no featured blow-up).  */
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
}
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail__link {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
}
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__text {
    padding: 50px;
    justify-content: center;
}
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
    margin-bottom: 16px !important;
}
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__excerpt {
    font-size: 1.02rem;
    line-height: 1.7;
}
/* Featured thumbnail — force fill the tall column (no floating image) */
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}
/* Featured thumbnail WRAPPER — give the fill-image a real box (kills collapse) */
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail,
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail.elementor-fit-height {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;   /* kill Elementor's scale/translate centering */
}

/* Featured "Uitgelicht" badge */
.bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child::before {
    content: 'Uitgelicht';
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--bl-secondary);
    color: var(--bl-primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    border-radius: 50px;
    z-index: 2;
}

/* --- 9.8  Pagination --- */
.elementor-widget-posts .elementor-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.elementor-widget-posts .elementor-pagination .page-numbers {
    background: white;
    border: 1px solid var(--bl-border);
    color: var(--bl-text);
    padding: 10px 16px;
    border-radius: var(--bl-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 44px;
    text-align: center;
    text-decoration: none;
    transition: var(--bl-transition);
}
.elementor-widget-posts .elementor-pagination .page-numbers:hover:not(.current):not(.dots) {
    border-color: var(--bl-secondary);
    color: var(--bl-primary);
}
.elementor-widget-posts .elementor-pagination .page-numbers.current {
    background: var(--bl-primary);
    color: white;
    border-color: var(--bl-primary);
}

/* --- 9.9  Newsletter CTA (blog index — 2-column) --- */
.bl-newsletter-card {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bl-primary);
    color: white;
    border-radius: var(--bl-radius);
    padding: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--bl-shadow);
}
.bl-newsletter-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2-23.png');
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
}
.bl-newsletter-card > * { position: relative; z-index: 1; }
.bl-newsletter-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}
.bl-newsletter-content .bl-eyebrow { color: var(--bl-secondary); }
.bl-newsletter-content h2 {
    font-family: var(--bl-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: white;
    margin-bottom: 14px;
}
.bl-newsletter-content h2 span {
    color: var(--bl-secondary);
    font-style: italic;
}
.bl-newsletter-content p {
    color: rgba(255,255,255,0.85);
    line-height: 1.65;
}
.bl-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bl-newsletter-form label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.bl-newsletter-input-wrap {
    display: flex;
    gap: 8px;
}
.bl-newsletter-input-wrap input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 13px 16px;
    border-radius: var(--bl-radius-sm) !important;
    font-size: 0.95rem;
}
.bl-newsletter-input-wrap input::placeholder {
    color: rgba(255,255,255,0.5);
}
.bl-newsletter-input-wrap input:focus {
    outline: none;
    border-color: var(--bl-secondary);
    background: rgba(255,255,255,0.15);
}
.bl-newsletter-input-wrap button {
    background: var(--bl-secondary);
    color: var(--bl-primary);
    border: 2px solid var(--bl-secondary);
    padding: 13px 24px;
    border-radius: var(--bl-radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--bl-transition);
}
.bl-newsletter-input-wrap button:hover {
    background: white;
    border-color: white;
    transform: translateY(-1px);
}
.bl-newsletter-note {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
}

/* --- §9  Responsive --- */
@media (max-width: 1024px) {
    .elementor-widget-posts .elementor-posts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child {
        grid-template-columns: 1fr;
    }
    .bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__thumbnail__link {
        min-height: auto;
        aspect-ratio: 16/9;
    }
    .bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__text {
        padding: 40px 32px;
    }
    .bl-newsletter-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .bl-filters-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .elementor-widget-posts .elementor-posts {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .bl-index.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__text {
        padding: 32px 24px;
    }
    .bl-newsletter-card {
        padding: 32px 24px;
    }
    .bl-newsletter-input-wrap {
        flex-direction: column;
    }
    .bl-newsletter-input-wrap button {
        width: 100%;
    }
}
/* ============================================================================
   BLOG ARCHIVE CARDS — category / tag / date / author archives
   ----------------------------------------------------------------------------
   Restyles Woostify's default post-archive list (article.post-loop) into a
   3-column card grid that matches the /blog/ page design (flat white cards,
   12px radius, #e8e4dc border, 4:3 image, Playfair title, muted date, gold
   "Lees verder"). Paste into Elementor → Site Settings → Custom CSS.

   Scope: body.archive:not(.woocommerce) — applies to ALL post archives
   (category, tag, date, author) and NEVER to WooCommerce product archives.
   The custom /blog/ page is an Elementor page (body.page), so it is untouched.

   The bottom of this file also styles the HERO + CTA sections that the
   companion snippet "wsh-blog-archive-sections.php" prints into the grid.
   ============================================================================ */

/* --- grid container (was a single-column list) --------------------------- */
body.archive:not(.woocommerce) .site-main{
	max-width:1290px !important; margin:0 auto !important;
	padding:56px 24px 80px !important;
	display:grid !important; grid-template-columns:repeat(3,1fr) !important;
	gap:28px !important; align-items:start !important;
}
/* pagination / any non-card block spans the full row */
body.archive:not(.woocommerce) .site-main > *:not(.post-loop){ grid-column:1 / -1 !important; }

/* --- the card ------------------------------------------------------------ */
body.archive:not(.woocommerce) .post-loop{
	display:flex !important; flex-direction:column !important;
	background:#fff !important; border:1px solid #e8e4dc !important;
	border-radius:12px !important; overflow:hidden !important;
	padding:0 !important; margin:0 !important; box-shadow:none !important;
	transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease, border-color .3s ease !important;
}
body.archive:not(.woocommerce) .post-loop:hover{
	transform:translateY(-6px); box-shadow:0 18px 40px rgba(36,31,33,.08); border-color:#a8895a !important;
}
body.archive:not(.woocommerce) .loop-post-inner{ display:flex !important; flex-direction:column !important; height:100% !important; }
body.archive:not(.woocommerce) .entry-header{ display:flex !important; flex-direction:column !important; }

/* --- image on top (4:3), gentle zoom on hover ---------------------------- */
body.archive:not(.woocommerce) .post-cover-image{
	margin:0 !important; aspect-ratio:4/3 !important; overflow:hidden !important; background:#f3f3f3 !important;
}
body.archive:not(.woocommerce) .post-cover-image a,
body.archive:not(.woocommerce) .post-cover-image img{ display:block !important; width:100% !important; height:100% !important; }
body.archive:not(.woocommerce) .post-cover-image img{ object-fit:cover !important; transition:transform .5s ease !important; }
body.archive:not(.woocommerce) .post-loop:hover .post-cover-image img{ transform:scale(1.04); }

/* --- title -> Playfair, dark, 2 lines (reserved for even card heights) ---- */
body.archive:not(.woocommerce) .entry-header .alpha{
	font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important;
	font-size:1.2rem !important; font-weight:500 !important; line-height:1.3 !important;
	color:#241F21 !important; margin:20px 0 0 !important; padding:0 24px !important;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}
body.archive:not(.woocommerce) .entry-header .alpha a{ color:inherit !important; text-decoration:none !important; }
body.archive:not(.woocommerce) .entry-header .alpha a:hover{ color:#9f7f50 !important; }

/* --- meta -> just the published date, light grey ------------------------- */
body.archive:not(.woocommerce) .entry-meta{
	padding:6px 24px 0 !important; margin:0 !important;
	font-family:'Helvetica Neue','Inter',Arial,sans-serif !important; font-size:.78rem !important; color:#adadad !important;
}
/* strip the "Gepubliceerd op" label, the duplicate updated-time, the author + separators */
body.archive:not(.woocommerce) .entry-meta .author,
body.archive:not(.woocommerce) .entry-meta .post-meta-separator,
body.archive:not(.woocommerce) .entry-meta .sr-only,
body.archive:not(.woocommerce) .entry-meta time.updated{ display:none !important; }
body.archive:not(.woocommerce) .entry-meta a{ color:#adadad !important; text-decoration:none !important; pointer-events:none; }

/* --- excerpt -> muted, 3 lines ------------------------------------------- */
body.archive:not(.woocommerce) .entry-summary{
	padding:12px 24px 0 !important; margin:0 !important;
	color:#7c797b !important; font-size:.92rem !important; line-height:1.7 !important;
}
body.archive:not(.woocommerce) .entry-summary p{
	margin:0 !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* "Lees verder" cue (the image + title are the real links to the post) */
body.archive:not(.woocommerce) .entry-summary::after{
	content:'Lees verder \2192'; display:block; margin-top:16px; padding-bottom:24px;
	font-family:'Helvetica Neue','Inter',Arial,sans-serif; font-size:.72rem; font-weight:700;
	letter-spacing:.09em; text-transform:uppercase; color:#9f7f50;
}

/* --- hero + CTA sections (printed by wsh-blog-archive-sections.php) -------
   These sit inside the same .site-main grid; the rule above
   (.site-main > *:not(.post-loop){ grid-column:1/-1 }) makes them full-width. */
.wsh-arch-eyebrow{ display:inline-block; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:#a8895a; font-weight:600; }
.wsh-arch-hero{ text-align:center; padding:8px 20px 40px; }
.wsh-arch-hero .wsh-arch-eyebrow{ margin-bottom:14px; }
.wsh-arch-hero h1{ font-family:'Playfair Display','Cormorant Garamond',Georgia,serif; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:400; color:#241F21; margin:0 0 14px; letter-spacing:-.01em; }
.wsh-arch-hero p{ max-width:640px; margin:0 auto; color:#7c797b; line-height:1.75; }
/* "other categories" chips */
.wsh-arch-cats{ margin-top:20px; padding-top:52px; border-top:1px solid #e8e4dc; text-align:center; }
.wsh-arch-cats h2{ font-family:'Playfair Display','Cormorant Garamond',Georgia,serif; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:400; color:#241F21; margin:12px 0 26px; }
.wsh-arch-cats-grid{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.wsh-arch-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #e8e4dc; border-radius:50px; padding:12px 24px; color:#241F21; text-decoration:none; font-weight:600; font-size:.92rem; transition:all .25s ease; }
.wsh-arch-chip:hover{ border-color:#a8895a; color:#9f7f50; transform:translateY(-2px); }
/* "Beauty Academy + Shop" tiles */
.wsh-arch-cta{ margin-top:16px; text-align:center; }
.wsh-arch-cta h2{ font-family:'Playfair Display','Cormorant Garamond',Georgia,serif; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:400; color:#241F21; margin:12px 0 26px; }
.wsh-arch-cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:left; }
.wsh-arch-cta-tile{ display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid #e8e4dc; border-radius:16px; padding:32px 30px; text-decoration:none; box-shadow:0 2px 18px rgba(36,31,33,.05); transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease, border-color .3s ease; }
.wsh-arch-cta-tile:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(36,31,33,.10); border-color:#a8895a; }
.wsh-arch-cta-tile .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:#a8895a; font-weight:700; }
.wsh-arch-cta-tile h3{ font-family:'Playfair Display','Cormorant Garamond',Georgia,serif; font-size:1.4rem; font-weight:500; color:#241F21; margin:2px 0 0; line-height:1.25; }
.wsh-arch-cta-tile p{ color:#7c797b; line-height:1.6; margin:0; flex:1; }
.wsh-arch-cta-tile .c{ margin-top:10px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#9f7f50; }
.wsh-arch-cta-tile:hover .c{ color:#241F21; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1024px){ body.archive:not(.woocommerce) .site-main{ grid-template-columns:repeat(2,1fr) !important; } .wsh-arch-cta-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){ body.archive:not(.woocommerce) .site-main{ grid-template-columns:1fr !important; padding:32px 20px 56px !important; } }
/* ============================================================================
   END blog archive cards
   ============================================================================ */
/* ============================================================================
   §10   SINGLE POST TEMPLATE  —  .bs-* article layout
   ----------------------------------------------------------------------------
   Sub-sections:  10.1 breadcrumb · 10.2 category badge · 10.3 header meta ·
                  10.4 featured image · 10.5 prose (body) · 10.6 product
                  highlight · 10.7 section CTA · 10.8 tags & share ·
                  10.9 author card · 10.10 related · 10.11 newsletter ·
                  10.12 body images
   ============================================================================ */

/* --- 10.1  Rank Math breadcrumbs --- */
.bs-breadcrumb {
    font-size: 0.85rem;
}
.bs-breadcrumb .rank-math-breadcrumb p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #7c797b;
}
.bs-breadcrumb .rank-math-breadcrumb a {
    color: #7c797b;
    text-decoration: none;
    transition: color 0.3s ease;
}
.bs-breadcrumb .rank-math-breadcrumb a:hover {
    color: #241F21;
}
.bs-breadcrumb .rank-math-breadcrumb .separator {
    color: #e8e4dc;
    font-weight: 700;
    margin: 0 2px;
}
.bs-breadcrumb .rank-math-breadcrumb .last {
    color: #241F21;
    font-weight: 600;
}
@media (max-width: 768px) {
    .bs-breadcrumb { font-size: 0.78rem; }
    .bs-breadcrumb .rank-math-breadcrumb p { gap: 6px; }
}

/* --- 10.2  Category badge (Post Info widget, class "bs-cat-badge") --- */
.bs-cat-badge .elementor-post-info {
    justify-content: center !important;
}
.bs-cat-badge .elementor-post-info__item--type-terms {
    margin: 0 !important;
    padding: 0 !important;
}
.bs-cat-badge .elementor-post-info__terms-list-item {
    background-color: #a8895a !important;
    color: #241F21 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    font-family: 'Helvetica Neue','Inter',sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}
.bs-cat-badge .elementor-post-info__terms-list-item::before,
.bs-cat-badge .elementor-post-info__terms-list-item::after {
    content: none !important;
    display: none !important;
}
.bs-cat-badge .elementor-post-info__terms-list-item:hover {
    background-color: #241F21 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* --- 10.3  Header meta line (Post Info widget, class "bs-meta") --- */
.bs-meta .elementor-post-info {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 0.88rem;
    color: #7c797b;
}
.bs-meta .elementor-post-info__item {
    display: inline-flex;
    align-items: center;
    color: #7c797b;
    font-family: 'Helvetica Neue','Inter',sans-serif;
    margin: 0 !important;
    padding: 0 !important;
}
.bs-meta .elementor-post-info__item a {
    color: #241F21;
    font-weight: 600;
    text-decoration: none;
}
.bs-meta .elementor-post-info__item a:hover {
    color: #a8895a;
}
.bs-meta .elementor-post-info__separator {
    width: 3px;
    height: 3px;
    background: #cdcbca;
    border-radius: 50%;
    display: inline-block;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 3px;
}

/* --- 10.4  Featured image --- */
.bs-featured-image-wrap {
    overflow: hidden !important;
    border-radius: 12px !important;
    display: block;
}
.bs-featured-image-wrap img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100% !important;
    height: auto;
    display: block !important;
    border-radius: 12px !important;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.bs-featured-image-wrap:hover img {
    transform: scale(1.04) !important;
}

/* --- 10.5  Prose (article body, class "bs-prose") --- */
.bs-prose {
    font-size: 1.08rem;
    line-height: 1.8;
    color: #3f3c3d;
}
.bs-prose > * + * { margin-top: 1.5em; }
.bs-prose p { margin: 0; }
.bs-prose p strong { color: #241F21; font-weight: 600; }
.bs-prose p a {
    color: #9f7f50;
    border-bottom: 1px solid rgba(159,127,80,0.4);
    font-weight: 500;
    text-decoration: none;
}
.bs-prose p a:hover {
    color: #241F21;
    border-bottom-color: #241F21;
}
/* Lead paragraph */
.bs-prose .bs-lead {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.32rem;
    line-height: 1.6;
    color: #241F21;
    font-weight: 400;
    font-style: italic;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8e4dc;
}
/* Headings */
.bs-prose h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 400;
    color: #241F21;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 2.2em;
    margin-bottom: 0.6em;
}
.bs-prose h2 span { color: #a8895a; font-style: italic; }
.bs-prose h2 + p { margin-top: 0; }
.bs-prose h3 {
    font-family: 'Helvetica Neue', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #241F21;
    margin-top: 1.6em;
    margin-bottom: 0.4em;
}
/* Bullet list (dash markers) */
.bs-prose ul { list-style: none; padding: 0; margin: 0; }
.bs-prose ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    line-height: 1.7;
}
.bs-prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 14px;
    height: 1px;
    background: #a8895a;
}
.bs-prose ul li strong { color: #241F21; }
/* Numbered list (gold circles) */
.bs-prose ol {
    counter-reset: tip;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bs-prose ol li {
    counter-increment: tip;
    position: relative;
    padding-left: 56px;
    margin-bottom: 24px;
    min-height: 40px;
}
.bs-prose ol li::before {
    content: counter(tip);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f3f3;
    border: 1.5px solid #a8895a;
    color: #a8895a;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-prose ol li h3 { margin-top: 0; margin-bottom: 6px; }
.bs-prose ol li p {
    font-size: 1rem;
    color: #7c797b;
    line-height: 1.65;
    margin: 0;
}

/* --- 10.6  Inline product highlight --- */
.bs-product-highlight {
    background: #f3f3f3;
    border: 1px solid #e8e4dc;
    border-radius: 12px;
    padding: 0;
    margin: 2em 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: stretch;
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    text-decoration: none;
}
.bs-product-highlight:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    border-color: #a8895a;
}
.bs-product-highlight-image {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.bs-product-highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bs-product-highlight-content {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bs-product-highlight-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #a8895a;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}
.bs-product-highlight-brand {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7c797b;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.bs-product-highlight-content h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #241F21;
    line-height: 1.3;
    margin-bottom: 8px;
}
.bs-product-highlight-reason {
    font-size: 0.92rem;
    color: #7c797b;
    line-height: 1.55;
    margin-bottom: 14px;
}
.bs-product-highlight-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bs-product-highlight-price {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #241F21;
}
.bs-product-highlight-link {
    color: #9f7f50;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.4s ease;
}
.bs-product-highlight:hover .bs-product-highlight-link {
    gap: 12px;
    color: #241F21;
}

/* --- 10.7  Section CTA (dark contained card) --- */
.bs-section-cta {
    background-color: #241F21;
    background-image: url('/wp-content/uploads/2-23.png');
    background-size: cover;
    background-blend-mode: multiply;
    color: white;
    border-radius: 12px;
    padding: 36px 40px;
    margin: 2.5em 0;
}
.bs-section-cta .bs-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a8895a;
    font-weight: 600;
    margin-bottom: 12px;
}
.bs-section-cta h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    margin-bottom: 12px;
    line-height: 1.25;
}
.bs-section-cta h3 span { color: #a8895a; font-style: italic; }
.bs-section-cta p {
    color: rgba(255,255,255,0.85);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 18px;
}
.bs-section-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #a8895a;
    color: #241F21;
    padding: 13px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.4s ease;
    border: 2px solid #a8895a;
}
.bs-section-cta-btn:hover {
    background: white;
    border-color: white;
    transform: translateY(-2px);
}

/* --- 10.8  Tags row & share --- */
.bs-meta-row {
    display: flex !important;
}
.bs-tags {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.bs-tags .elementor-icon-list-text,
.bs-tags .elementor-post-info__item-prefix {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7c797b !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.bs-tags .elementor-post-info__terms-list-item {
    background: #f3f3f3;
    color: #3f3c3d;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.bs-tags .elementor-post-info__terms-list-item:hover {
    background: #a8895a !important;
    color: white;
}
.bs-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.bs-share-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7c797b;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.bs-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: #f3f3f3;
    border: 1px solid #e8e4dc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}
.bs-share-btn svg {
    width: 16px;
    height: 16px;
    color: #3f3c3d;
}
.bs-share-btn:hover {
    background: #a8895a;
    border-color: #a8895a;
    transform: translateY(-2px);
}
.bs-share-btn:hover svg { color: white; }
@media (max-width: 640px) {
    .bs-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* --- 10.9  Author bio card --- */
.bs-author-card {
    background: white;
    border: 1px solid #e8e4dc;
    border-radius: 12px;
    padding: 32px;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 24px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.bs-author-card:hover {
    border-color: #a8895a;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.bs-author-portrait {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f3f3;
    flex-shrink: 0;
}
.bs-author-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bs-author-content .bs-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a8895a;
    font-weight: 600;
    margin-bottom: 6px;
}
.bs-author-content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #241F21;
    margin: 0 0 8px;
    line-height: 1.2;
}
.bs-author-content p {
    color: #7c797b;
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 10px;
}
.bs-author-link {
    color: #9f7f50;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.3s ease;
}
.bs-author-link:hover {
    color: #241F21;
}
.bs-author-link span {
    transition: margin-left 0.3s ease;
    display: inline-block;
    margin-left: 4px;
}
.bs-author-link:hover span {
    margin-left: 8px;
}
@media (max-width: 640px) {
    .bs-author-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 22px;
    }
    .bs-author-portrait {
        margin: 0 auto;
    }
}

/* --- 10.10  Related section ("Andere artikels", class "bs-related") --- */
/* Cancels the featured first-card layout + forces clean thumbnails.          */
.bs-related .elementor-posts > .elementor-post:first-child {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
}
.bs-related .elementor-posts > .elementor-post:first-child .elementor-post__text {
    padding: 24px !important;
    justify-content: flex-start !important;
}
.bs-related .elementor-posts > .elementor-post:first-child .elementor-post__title {
    font-size: 1.3rem !important;
    margin-bottom: 12px !important;
}
.bs-related .elementor-posts > .elementor-post:first-child .elementor-post__excerpt {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}
.bs-related .elementor-posts > .elementor-post:first-child::before {
    content: none !important;
    display: none !important;
}
/* Thumbnail fill (covers all Elementor image modes) */
.bs-related .elementor-post__thumbnail,
.bs-related .elementor-post__thumbnail.elementor-fit-height {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}
.bs-related .elementor-post__thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    margin: 0 !important;
}
.bs-related .elementor-post__thumbnail__link {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* --- 10.11  Newsletter CTA (single post — centered) --- */
.bs-newsletter-card {
    max-width: 820px;
    margin: 0 auto;
    background: #241F21;
    color: white;
    border-radius: 12px;
    padding: 40px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.bs-newsletter-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2-23.png');
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
}
.bs-newsletter-card > * {
    position: relative;
    z-index: 1;
}
.bs-newsletter-card .bs-eyebrow {
    color: #a8895a;
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-bottom: 12px;
}
.bs-newsletter-card h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    font-weight: 400;
    color: white;
    margin: 0 0 12px;
    line-height: 1.2;
}
.bs-newsletter-card h2 span {
    color: #a8895a;
    font-style: italic;
}
.bs-newsletter-card > p {
    color: rgba(255,255,255,0.85);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.bs-newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto 12px;
}
.bs-newsletter-form input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 13px 16px;
    border-radius: 8px !important;
    font-size: 0.95rem;
    font-family: inherit;
}
.bs-newsletter-form input::placeholder {
    color: rgba(255,255,255,0.5);
}
.bs-newsletter-form input:focus {
    outline: none;
    border-color: #a8895a !important;
    background: rgba(255,255,255,0.15);
}
.bs-newsletter-form button {
    background: #a8895a;
    color: #241F21;
    border: 2px solid #a8895a;
    padding: 13px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-family: inherit;
}
.bs-newsletter-form button:hover {
    background: white;
    border-color: white;
    color: #a8895a;
    transform: translateY(-1px);
}
.bs-newsletter-note {
    display: block;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    margin-top: 4px;
}
@media (max-width: 640px) {
    .bs-newsletter-card {
        padding: 32px 24px;
    }
    .bs-newsletter-form {
        flex-direction: column;
    }
    .bs-newsletter-form button {
        width: 100%;
    }
}

/* --- 10.12  Article body images (native WP Image blocks) --- */
.bs-prose figure,
.bs-prose .wp-block-image {
    margin: 2.4em 0;
    padding: 0;
}
.bs-prose figure img,
.bs-prose .wp-block-image img,
.bs-prose img[class*="wp-image"],
.bs-prose p img,
.elementor-widget-theme-post-content img {
    width: 100% !important;
    height: auto;
    display: block !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.bs-prose figcaption,
.bs-prose .wp-block-image figcaption {
    font-size: 0.85rem;
    color: #7c797b;
    text-align: center;
    margin-top: 12px;
    font-style: italic;
    line-height: 1.5;
}
/* Image variants */
.bs-prose figure.bs-image-wide img,
.bs-prose .wp-block-image.bs-image-wide img {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.bs-prose figure.bs-image-square img,
.bs-prose .wp-block-image.bs-image-square img {
    aspect-ratio: 1/1;
    object-fit: cover;
}
/* Gallery — 2 side by side */
.bs-prose .wp-block-gallery {
    margin: 2.4em 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.bs-prose .wp-block-gallery .wp-block-image {
    margin: 0;
}
.bs-prose .wp-block-gallery .wp-block-image img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/5;
}
@media (max-width: 640px) {
    .bs-prose .wp-block-gallery {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   §11   LATEST ARTICLES STRIP  —  .bl-strip
   ----------------------------------------------------------------------------
   Reusable cross-promo block: heading + 3 latest articles + "Naar de blog"
   CTA. Drop on any page. Uses a native Posts widget with CSS class "bl-strip".
   Does NOT carry .bl-index, so the featured first-card layout never applies.
   ----------------------------------------------------------------------------
   Sub-sections:  11.1 section wrapper · 11.2 header · 11.3 grid (3 cols) ·
                  11.4 thumbnail fill (kills floating-image bug) ·
                  11.5 CTA · 11.6 responsive
   ============================================================================ */

/* --- 11.1  Section wrapper --- */
.bl-strip-section {
    padding: 80px 0;
}

/* --- 11.2  Header --- */
.bl-strip-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
}
.bl-strip-header .bl-eyebrow {
    color: var(--bl-secondary);
}
.bl-strip-header h2 {
    font-family: var(--bl-font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 400;
    color: var(--bl-primary);
    margin: 0 0 12px;
    line-height: 1.15;
}
.bl-strip-header h2 span {
    color: var(--bl-secondary);
    font-style: italic;
}
.bl-strip-header p {
    color: var(--bl-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* --- 11.3  Force a clean 3-column row (never the featured layout) --- */
.bl-strip.elementor-widget-posts .elementor-posts {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px;
}
/* Belt-and-suspenders: neutralise any featured first-card treatment */
.bl-strip.elementor-widget-posts .elementor-posts > .elementor-post:first-child {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
}
.bl-strip.elementor-widget-posts .elementor-posts > .elementor-post:first-child::before {
    content: none !important;
    display: none !important;
}
.bl-strip.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__text {
    padding: 24px !important;
    justify-content: flex-start !important;
}
.bl-strip.elementor-widget-posts .elementor-posts > .elementor-post:first-child .elementor-post__title {
    font-size: 1.3rem !important;
    margin-bottom: 12px !important;
}

/* --- 11.4  Thumbnail fill — kill the floating-image bug (all cards) --- */
.bl-strip.elementor-widget-posts .elementor-post__thumbnail,
.bl-strip.elementor-widget-posts .elementor-post__thumbnail.elementor-fit-height {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}
.bl-strip.elementor-widget-posts .elementor-post__thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    margin: 0 !important;
}
.bl-strip.elementor-widget-posts .elementor-post__thumbnail__link {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* --- 11.5  "Naar de blog" CTA --- */
.bl-strip-cta {
    text-align: center;
    margin-top: 44px;
}
.bl-strip-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--bl-primary);
    border: 2px solid var(--bl-primary);
    padding: 14px 32px;
    border-radius: var(--bl-radius-sm);
    font-family: var(--bl-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--bl-transition);
}
.bl-strip-cta a:hover {
    background: var(--bl-primary);
    color: white;
    transform: translateY(-2px);
}
.bl-strip-cta a span {
    transition: margin-left 0.3s ease;
}
.bl-strip-cta a:hover span {
    margin-left: 4px;
}

/* --- 11.6  Responsive --- */
@media (max-width: 1024px) {
    .bl-strip.elementor-widget-posts .elementor-posts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .bl-strip-section { padding: 60px 0; }
}
@media (max-width: 768px) {
    .bl-strip.elementor-widget-posts .elementor-posts {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .bl-strip-section { padding: 48px 0; }
}

/* ============================================================
   §12 — PRODUCT CARD (Loop Item)  ·  prefix: .wsh-pc
   Skins the native Elementor Loop Item used across all
   product archives (/winkel/, /product-category/*, /brand/*).
   Structure lives in Elementor; all visual styling lives here.
   ------------------------------------------------------------
   12.1  Card wrapper
   12.2  Featured image
   12.3  Title
   12.4  Price
   12.5  Add-to-cart button
   12.6  Quantity .elementor-kit-28 (hidden)
   12.7  Responsive
   ============================================================ */

/* --- 12.1 Card wrapper --- */
.wsh-pc {
    background: #ffffff;
    border: 1px solid var(--wsh-border, #e8e4dc);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
                box-shadow 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
                border-color 0.35s ease;
}
.wsh-pc:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(36,31,33,0.10);
    border-color: #a8895a;
}

/* --- 12.2 Featured image --- */
.wsh-pc-img {
    width: 100%;
    margin: 0 !important;
    background: #f3f3f3;
}
.wsh-pc-img img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 18px;
    transition: transform 0.5s ease;
}
.wsh-pc:hover .wsh-pc-img img {
    transform: scale(1.04);
}

/* --- 12.3 Title --- */
.wsh-pc-title {
    margin: 0 !important;
    padding: 18px 18px 0 !important;
}
.wsh-pc-title,
.wsh-pc-title a {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #241F21 !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
    /* clamp to 2 lines so cards align */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wsh-pc:hover .wsh-pc-title,
.wsh-pc:hover .wsh-pc-title a {
    color: #9f7f50 !important;
}

/* --- 12.4 Price --- */
.wsh-pc-price {
    padding: 8px 18px 0 !important;
    margin: 0 !important;
    /* pushes the button to the bottom, aligning all cards */
    margin-bottom: auto !important;
}
.wsh-pc-price .woocommerce-Price-amount,
.wsh-pc-price .price {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #241F21 !important;
}
/* sale: old price muted + struck, new price accent */
.wsh-pc-price del .woocommerce-Price-amount {
    color: #7c797b !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}
.wsh-pc-price ins {
    text-decoration: none !important;
}
.wsh-pc-price ins .woocommerce-Price-amount {
    color: #9f7f50 !important;
}

/* --- 12.5 Add-to-cart button --- */
.wsh-pc-cart {
    padding: 16px 18px 18px !important;
    margin: 0 !important;
}
.wsh-pc .wsh-pc-cart .button .woostify-svg-icon { display: none !important; }
.wsh-pc .wsh-pc-cart .button,
.wsh-pc .wsh-pc-cart a.button,
.wsh-pc .wsh-pc-cart button.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #241F21 !important;
    color: #ffffff !important;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    padding: 13px 18px !important;
    border: none !important;
    border-radius: 50px !important;
    transition: background 0.25s ease, transform 0.15s ease !important;
    cursor: pointer !important;

}
.wsh-pc .wsh-pc-cart .button:hover,
.wsh-pc .wsh-pc-cart a.button:hover,
.wsh-pc .wsh-pc-cart button.button:hover {
    background: #a8895a !important;
}
/* "Opties selecteren" / "Bekijk product" (variable/out-of-stock) — same skin */
.wsh-pc .wsh-pc-cart .button.product_type_variable,
.wsh-pc .wsh-pc-cart .button.product_type_external {
    background: #241F21 !important;
}
/* loading state dot */
.wsh-pc-cart .button.loading::after {
    color: #ffffff !important;
}
/* "toegevoegd" confirmation link under button */
.wsh-pc-cart .added_to_cart {
    display: block !important;
    text-align: center !important;
    margin-top: 8px !important;
    font-size: 0.78rem !important;
    color: #9f7f50 !important;
    text-decoration: underline !important;
}
/* --- 12.6 Quantity .elementor-kit-28 (hidden on card) --- */
.wsh-pc-cart .quantity {
    display: none !important;
}

/* --- 12.7 Responsive --- */
@media (max-width: 768px) {
    .wsh-pc-title,
    .wsh-pc-title a { font-size: 0.95rem !important; }
    .wsh-pc-img img { padding: 12px; }
    .wsh-pc .wsh-pc-cart .button { font-size: 0.8rem !important; padding: 11px 14px !important; }
}

/* ============================================================
   §13 — PRODUCT ARCHIVE HEADER  ·  prefix: .wsh-arch
   Category + Brand archive templates (title + description).
   ------------------------------------------------------------
   13.1  Header band
   13.2  Archive title (H1)
   13.3  Archive description
   13.4  Responsive
   ============================================================ */

/* --- 13.1 Header band --- */
.wsh-arch-head {
    text-align: center;
}

/* --- 13.2 Archive title (H1) --- */
.wsh-arch-title,
.wsh-arch-title h1,
.wsh-arch-title .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #241F21 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}

/* --- 13.3 Archive description --- */
.wsh-arch-desc,
.wsh-arch-desc .elementor-widget-container {
    max-width: 640px !important;
    margin: 0 auto !important;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: #7c797b !important;
}
.wsh-arch-desc p { margin: 0 0 10px !important; }
.wsh-arch-desc p:last-child { margin-bottom: 0 !important; }
/* collapse the description block cleanly when a term has no description */
.wsh-arch-desc:empty { display: none !important; }

/* --- autoscroll offset (AJAX pagination vs sticky header) --- */
.wsh-shop-grid {
	scroll-margin-top: 170px !important;
}
.wsh-cat-grid {
	scroll-margin-top: 120px !important;
}

/* --- 13.4 Responsive --- */
@media (max-width: 767px) {
    .wsh-arch-desc { 
        font-size: 0.95rem !important;
    }
    .wsh-cat-grid {
		scroll-margin-top: 90px !important;
	}
		.wsh-shop-grid {
		scroll-margin-top: 130px !important;
	}
}

/* ============================================================
   §14 — BRAND LANDING  ·  prefix: .wsh-bl   (v2 — living design)
   Styles the [wsh_brand_landing] shortcode output.
   Replaces the previous §14 block entirely.
   ------------------------------------------------------------
   14.1 Base + tokens        14.2 Scroll-reveal
   14.3 Hero (+ badge/glow)  14.4 Universum icon-cards
   14.5 Trust bar (icons)    14.6 Mid-block
   14.7 Cross-sell           14.8 FAQ
   14.9 Responsive
   ============================================================ */

/* --- 14.1 Base + tokens --- */
.wsh-bl {
    --bl-primary:#241F21; --bl-secondary:#a8895a; --bl-accent:#9f7f50;
    --bl-cream:#f3f3f3; --bl-light:#faf8f5; --bl-text:#3f3c3d; --bl-muted:#7c797b;
    --bl-border:#e8e4dc; --bl-radius:14px;
    --bl-font:'Helvetica Neue','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    --bl-display:'Playfair Display','Cormorant Garamond',Georgia,serif;
    --bl-marble:url('/wp-content/uploads/2-23.png');
    --bl-ease:cubic-bezier(0.25,0.46,0.45,0.94);
    font-family:var(--bl-font); color:var(--bl-text); line-height:1.6;
}
.wsh-bl * { box-sizing:border-box; }
.wsh-bl img { max-width:100%; height:auto; display:block; }
.wsh-bl-narrow { max-width:860px; margin:0 auto; padding:0 24px; }
.wsh-bl-center { text-align:center; }
.wsh-bl-eyebrow {
    display:block;
    font-size:0.78rem; text-transform:uppercase;
    letter-spacing:0.16em; color:var(--bl-secondary); font-weight:600;
    margin:0 0 14px;
}
.wsh-bl-h2 {
    font-family:var(--bl-display); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:400;
    color:var(--bl-primary); margin:0 0 20px; line-height:1.18; letter-spacing:-0.01em;
}
.wsh-bl-rich { font-size:1.02rem; color:var(--bl-text); }
.wsh-bl-rich p { margin:0 0 14px; }
.wsh-bl-rich strong { color:var(--bl-primary); font-weight:600; }

/* --- 14.2 Scroll-reveal --- */
.wsh-bl [data-wsh-reveal] { opacity:0; transform:translateY(24px); transition:opacity 0.7s var(--bl-ease), transform 0.7s var(--bl-ease); }
.wsh-bl [data-wsh-reveal].is-visible { opacity:1; transform:none; }

/* --- 14.3 Hero --- */
.wsh-bl-hero {
    position:relative; overflow:hidden;
    background-color:var(--bl-cream);
    background-image:linear-gradient(135deg,rgba(243,243,243,0.9),rgba(240,235,224,0.85)),var(--bl-marble);
    background-size:cover; background-position:center; padding:84px 0;
}
.wsh-bl-hero-glow {
    position:absolute; top:-40%; right:-8%; width:620px; height:620px;
    background:radial-gradient(circle,rgba(168,137,90,0.20) 0%,transparent 70%);
    border-radius:50%; pointer-events:none; z-index:0;
}
.wsh-bl-hero-inner {
    position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.wsh-bl-hero-title {
    font-family:var(--bl-display); font-size:clamp(2.6rem,5.2vw,4rem); font-weight:400;
    color:var(--bl-primary); margin:0 0 12px; line-height:1.05; letter-spacing:-0.02em;
}
.wsh-bl-hero-tagline {
    font-family:var(--bl-display); font-style:italic; font-size:clamp(1.15rem,2.3vw,1.6rem);
    color:var(--bl-secondary); margin:0 0 22px;
}
.wsh-bl-hero-intro { font-size:1.04rem; color:var(--bl-muted); max-width:520px; }
.wsh-bl-hero-intro p { margin:0 0 12px; }
.wsh-bl-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.wsh-bl-pill {
    display:inline-flex; align-items:center; gap:7px;
    background:#fff; border:1px solid var(--bl-border); color:var(--bl-primary);
    padding:8px 16px 8px 12px; border-radius:50px; font-size:0.85rem; font-weight:500;
    transition:border-color 0.25s ease, transform 0.25s ease;
}
.wsh-bl-pill:hover { border-color:var(--bl-secondary); transform:translateY(-2px); }
.wsh-bl-pill svg { width:15px; height:15px; color:var(--bl-secondary); }
/* Hero media + logo + floating badge */
.wsh-bl-hero-media { position:relative; }
.wsh-bl-hero-logo {
    background:#fff; border-radius:var(--bl-radius); overflow:hidden;
    box-shadow:0 16px 48px rgba(36,31,33,0.12);
    transition:transform 0.6s var(--bl-ease), box-shadow 0.6s var(--bl-ease);
    /* no aspect-ratio, no fixed height — container hugs the image */
}
.wsh-bl-hero-logo img {
    display:block; width:100%; height:auto;   /* natural ratio, no crop */
    transition:transform 0.6s var(--bl-ease);
}
.wsh-bl-hero-media:hover .wsh-bl-hero-logo img { transform:scale(1.03); }

.wsh-bl-hero-badge {
    position:absolute; bottom:-16px; left:-16px;
    background:var(--bl-primary); color:#fff; font-family:var(--bl-display); font-style:italic;
    font-size:0.95rem; padding:10px 20px; border-radius:50px;
    box-shadow:0 8px 24px rgba(36,31,33,0.20);
}

/* --- 14.4 Universum icon-cards --- */
.wsh-bl-universum { padding:72px 0; background:var(--bl-light); }
.wsh-bl-universum-list { margin-top:36px; }
.wsh-bl-universum-list ul {
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    list-style:none; margin:0 0 28px; padding:0;
}
.wsh-bl-universum-list li {
    list-style:none; position:relative; background:#fff; border:1px solid var(--bl-border);
    border-radius:var(--bl-radius); padding:28px 24px 24px; margin:0;
    transition:transform 0.3s var(--bl-ease), box-shadow 0.3s var(--bl-ease), border-color 0.3s ease;
}
.wsh-bl-universum-list li:hover { transform:translateY(-6px); box-shadow:0 14px 36px rgba(36,31,33,0.08); border-color:var(--bl-secondary); }
.wsh-bl-universum-list li::before {
    content:''; display:flex; width:44px; height:44px; margin-bottom:16px;
    background:rgba(168,137,90,0.12); border-radius:50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8895a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:22px 22px;
}
.wsh-bl-universum-list li strong { display:block; font-family:var(--bl-display); font-size:1.12rem; color:var(--bl-primary); font-weight:500; margin-bottom:6px; }
.wsh-bl-universum-list p { max-width:680px; margin:0 auto 12px; text-align:center; color:var(--bl-muted); }
.wsh-bl-universum-list p:last-child { margin-bottom:0; }

/* --- 14.5 Trust bar (icons) --- */
.wsh-bl-trust { background:var(--bl-primary); padding:44px 0; position:relative; overflow:hidden; }
.wsh-bl-trust::before { content:''; position:absolute; inset:0; background-image:var(--bl-marble); background-size:cover; opacity:0.05; pointer-events:none; }
.wsh-bl-trust-inner { position:relative; max-width:1180px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.wsh-bl-trust-item { display:flex; align-items:flex-start; gap:14px; }
.wsh-bl-trust-icon {
    flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background:rgba(168,137,90,0.18); border-radius:50%; color:var(--bl-secondary);
}
.wsh-bl-trust-icon svg { width:22px; height:22px; }
.wsh-bl-trust-copy { display:flex; flex-direction:column; gap:3px; }
.wsh-bl-trust-title { font-family:var(--bl-display); font-size:1.05rem; color:#fff; font-weight:500; }
.wsh-bl-trust-text { font-size:0.83rem; color:rgba(255,255,255,0.7); line-height:1.4; }

/* --- 14.6 Mid-block --- */
.wsh-bl-midblock { padding:72px 0; background:#fff; }
.wsh-bl-midblock .wsh-bl-rich { max-width:680px; margin:0 auto; }

/* --- 14.7 Cross-sell --- */
.wsh-bl-crosssell { padding:72px 0; background:var(--bl-light); }
.wsh-bl-crosssell-inner { max-width:1100px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.wsh-bl-crosssell-media { border-radius:var(--bl-radius); overflow:hidden; aspect-ratio:4/3; box-shadow:0 16px 48px rgba(36,31,33,0.12); }
.wsh-bl-crosssell-media img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--bl-ease); }
.wsh-bl-crosssell:hover .wsh-bl-crosssell-media img { transform:scale(1.05); }
.wsh-bl-crosssell-text { font-size:1.04rem; color:var(--bl-muted); margin:0 0 26px; }
.wsh-bl-btn {
    display:inline-flex; align-items:center; gap:9px;
    background:var(--bl-secondary); color:var(--bl-primary);
    padding:14px 30px; border-radius:8px; font-size:0.92rem; font-weight:600;
    text-decoration:none; transition:background 0.25s ease, transform 0.15s ease, gap 0.25s ease;
}
.wsh-bl-btn svg { width:17px; height:17px; transition:transform 0.25s ease; }
.wsh-bl-btn:hover { background:var(--bl-primary); color:#fff !important; transform:translateY(-2px); }
.wsh-bl-btn:hover svg { transform:translateX(4px); }

/* --- 14.8 FAQ --- */
.wsh-bl-faq { padding:72px 0 84px; background:#fff; }
.wsh-bl-faq .wsh-bl-h2 { color: var(--bl-primary, #241F21) !important; }
.wsh-bl-faq-list { max-width:820px; margin:36px auto 0; display:grid; gap:12px; }
.wsh-bl-faq-item { background:var(--bl-light); border:1px solid var(--bl-border); border-radius:var(--bl-radius); overflow:hidden; transition:border-color 0.25s ease, box-shadow 0.25s ease; }
.wsh-bl-faq-item:hover { border-color:var(--bl-secondary); }
.wsh-bl-faq-item[open] { box-shadow:0 10px 28px rgba(36,31,33,0.06); }
.wsh-bl-faq-item summary {
    padding:20px 26px; cursor:pointer; font-weight:600; color:var(--bl-primary);
    display:flex; justify-content:space-between; align-items:center; list-style:none; font-size:1rem; gap:16px;
}
.wsh-bl-faq-item summary::-webkit-details-marker { display:none; }
.wsh-bl-faq-plus { position:relative; flex-shrink:0; width:18px; height:18px; }
.wsh-bl-faq-plus::before, .wsh-bl-faq-plus::after {
    content:''; position:absolute; background:var(--bl-secondary); border-radius:2px; transition:transform 0.3s var(--bl-ease);
}
.wsh-bl-faq-plus::before { top:8px; left:0; width:18px; height:2px; }
.wsh-bl-faq-plus::after { top:0; left:8px; width:2px; height:18px; }
.wsh-bl-faq-item[open] .wsh-bl-faq-plus::after { transform:rotate(90deg); opacity:0; }
.wsh-bl-faq-answer { padding:0 26px 22px; color:var(--bl-muted); line-height:1.7; }

/* --- 14.9 Responsive --- */
@media (max-width:860px) {
    .wsh-bl-hero { padding:56px 0; }
    .wsh-bl-hero-inner { grid-template-columns:1fr; gap:44px; }
    .wsh-bl-hero-media { order:-1; max-width:300px; margin:0 auto; }
    .wsh-bl-universum-list { grid-template-columns:1fr; gap:16px; }
    .wsh-bl-trust-inner { grid-template-columns:repeat(2,1fr); gap:24px; }
    .wsh-bl-crosssell-inner { grid-template-columns:1fr; gap:28px; }
    .wsh-bl-crosssell-media { order:-1; }
    .wsh-bl-universum, .wsh-bl-midblock, .wsh-bl-crosssell { padding:52px 0; }
    .wsh-bl-faq { padding:52px 0 60px; }
}
@media (max-width:480px) {
    .wsh-bl-trust-inner { grid-template-columns:1fr; }
    .wsh-bl-hero-badge { left:0; }
}

/* --- 14.10 Extra / routine section --- */
.wsh-bl-extra { padding:72px 0; background:#fff; }
.wsh-bl-extra-inner {
    max-width:1180px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.wsh-bl-extra-media {
    border-radius:var(--bl-radius); overflow:hidden; aspect-ratio:4/5;
    box-shadow:0 16px 48px rgba(36,31,33,0.12);
}
.wsh-bl-extra-media img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--bl-ease); }
.wsh-bl-extra:hover .wsh-bl-extra-media img { transform:scale(1.04); }
.wsh-bl-extra-content { margin-bottom:26px; }
.wsh-bl-extra-content > p { color:var(--bl-muted); }
/* numbered steps from an <ol> */
.wsh-bl-extra-content ol {
    list-style:none; counter-reset:step; margin:20px 0 0; padding:0;
    display:grid; gap:18px;
}
.wsh-bl-extra-content ol li {
    counter-increment:step; position:relative; padding-left:56px;
    color:var(--bl-muted); line-height:1.6;
}
.wsh-bl-extra-content ol li::before {
    content:counter(step); position:absolute; left:0; top:0;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:var(--bl-secondary); color:#fff; border-radius:50%;
    font-family:var(--bl-display); font-size:1rem; font-weight:600;
}
.wsh-bl-extra-content ol li strong { color:var(--bl-primary); font-weight:600; }
@media (max-width:860px) {
    .wsh-bl-extra { padding:52px 0; }
    .wsh-bl-extra-inner { grid-template-columns:1fr; gap:28px; }
    .wsh-bl-extra-media { order:-1; aspect-ratio:4/3; }
}

/* ============================================================
   §15 — CATEGORY LANDING (.wsh-cl)   ·  v2 — LIGHTENED to match site
   ------------------------------------------------------------
   Drop-in replacement for your existing §15 block.
   Same class names / markup — only the visual weight changes:
     • cards are borderless with a single soft shadow (no more
       border + heavy shadow "double frame")
     • the count badge is a light translucent pill, not a dark chip
     • gentler hover lift, more internal breathing room
     • hero pills switched to clean white chips (match §14 brand)
     • NEW 15.5 lays out the hub product preview, which now uses
       NATIVE WooCommerce cards (styled by your §3) so it matches
       the "Onze bestsellers" row exactly.

   15.1 base · 15.2 hero · 15.3 sub-cat cards (light) · 15.4 benefits
   15.5 hub product preview · 15.6 cross-CTA · 15.7 FAQ
   15.8 reveal · 15.9 responsive · 15.10 hub tiles (legacy)
   ============================================================ */

/* --- 15.1 base --- */
.wsh-cl {
	--wcl-primary: #241F21;
	--wcl-secondary: #a8895a;
	--wcl-accent: #9f7f50;
	--wcl-cream: #f3f3f3;
	--wcl-light: #faf8f5;
	--wcl-text: #3f3c3d;
	--wcl-muted: #7c797b;
	--wcl-border: #e8e4dc;
	--wcl-hairline: #f0ece4;
	--wcl-radius: 16px;
	--wcl-radius-sm: 10px;
	--wcl-shadow: 0 2px 18px rgba(36,31,33,0.05);
	--wcl-shadow-hover: 0 14px 34px rgba(36,31,33,0.09);
	--wcl-transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
	--wcl-marble: url('/wp-content/uploads/2-23.png');
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: var(--wcl-text);
	line-height: 1.6;
}
.wsh-cl-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.wsh-cl .wsh-cl-eyebrow { display: inline-block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--wcl-secondary); font-weight: 600; margin-bottom: 14px; }
.wsh-cl-section-header { padding: 0 0 34px; text-align: center; }
.wsh-cl-section-header h2 { font-family: 'Playfair Display', Georgia, serif !important; font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important; font-weight: 400 !important; color: var(--wcl-primary) !important; margin: 0 0 12px !important; letter-spacing: -0.01em; }
.wsh-cl-section-header p { color: var(--wcl-muted); max-width: 600px; margin: 0 auto; }

/* --- 15.2 hero --- */
.wsh-cl-hero { background-color: var(--wcl-cream); background-image: linear-gradient(135deg, rgba(243,243,243,0.9) 0%, rgba(240,235,224,0.86) 100%), var(--wcl-marble); background-size: cover; background-position: center; padding: 84px 0; position: relative; overflow: hidden; }
.wsh-cl-hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,169,110,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.wsh-cl-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.wsh-cl-hero-grid.wsh-cl-hero-noimg { grid-template-columns: 1fr; max-width: 760px; }
.wsh-cl-hero h1 { font-family: 'Playfair Display', Georgia, serif !important; font-size: clamp(2rem, 4.5vw, 3.5rem) !important; font-weight: 400 !important; line-height: 1.12 !important; color: var(--wcl-primary) !important; margin: 0 0 16px !important; letter-spacing: -0.02em; }
.wsh-cl-tagline { font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.2rem !important; color: var(--wcl-secondary) !important; font-style: italic; margin: 0 0 16px !important; }
.wsh-cl-intro p { font-size: 1.05rem; color: var(--wcl-muted); margin: 0 0 14px; max-width: 540px; }
.wsh-cl-intro strong { color: var(--wcl-primary); font-weight: 600; }
.wsh-cl-hero-image { position: relative; border-radius: var(--wcl-radius); overflow: hidden; aspect-ratio: 1/1; box-shadow: 0 12px 44px rgba(36,31,33,0.10); }
.wsh-cl-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.wsh-cl-hero-image:hover img { transform: scale(1.03); }
/* Pills — clean white chips (matches brand-landing pills) */
.wsh-cl-pills { display: flex !important; flex-wrap: wrap !important; gap: 0.7rem !important; margin-top: 2rem !important; }
.wsh-cl-pill { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.55rem 1rem !important; background: #fff !important; border-radius: 50px !important; font-size: 0.85rem !important; color: #241f21 !important; border: 1px solid var(--wcl-border) !important; }
.wsh-cl-pill::before { content: '✓' !important; color: var(--wcl-secondary) !important; font-weight: 600 !important; font-size: 0.95rem !important; }

/* --- 15.3 sub-cat cards (LIGHTENED) --- */
.wsh-cl-subcats { padding: 72px 0 34px; }
.wsh-cl-subcats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wsh-cl-card {
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border-radius: var(--wcl-radius);
	overflow: hidden;
	border: 1px solid transparent;          /* borderless — no double frame */
	box-shadow: var(--wcl-shadow);          /* one soft shadow */
	transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s ease;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
}
.wsh-cl-card:hover { transform: translateY(-4px); box-shadow: var(--wcl-shadow-hover); }
.wsh-cl-card:focus-visible { outline: 2px solid var(--wcl-accent); outline-offset: 2px; }
.wsh-cl-card.is-active { box-shadow: 0 0 0 1.5px var(--wcl-secondary), var(--wcl-shadow-hover); }
.wsh-cl-card-image { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--wcl-cream); }
.wsh-cl-card-image img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.5s ease; }
.wsh-cl-card:hover .wsh-cl-card-image img { transform: scale(1.04); }
/* count → light, unobtrusive pill */
.wsh-cl-count { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.92); color: var(--wcl-primary) !important; padding: 3px 11px; border-radius: 50px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(36,31,33,0.08); backdrop-filter: blur(4px); }
.wsh-cl-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wsh-cl-card-title { font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.15rem; font-weight: 500; color: var(--wcl-primary) !important; letter-spacing: -0.01em; line-height: 1.25; margin: 0 !important; }
.wsh-cl-card-sub { font-size: 0.85rem; color: var(--wcl-secondary) !important; font-style: italic; line-height: 1.4; margin: 0 !important; }
.wsh-cl-card-p { font-size: 0.9rem !important; color: var(--wcl-muted) !important; line-height: 1.6; flex: 1; margin: 2px 0 0 !important; }
.wsh-cl-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.78rem; font-weight: 600; color: var(--wcl-accent) !important; text-transform: uppercase; letter-spacing: 0.08em; transition: var(--wcl-transition); }
.wsh-cl-card:hover .wsh-cl-card-cta,
.wsh-cl-card.is-active .wsh-cl-card-cta { color: var(--wcl-primary) !important; gap: 10px; }

/* --- 15.4 benefits (optional dark strip — unchanged) --- */
.wsh-cl-benefits { background-color: var(--wcl-primary); padding: 50px 0; margin: 40px 0 0; position: relative; overflow: hidden; }
.wsh-cl-benefits::before { content: ''; position: absolute; inset: 0; background-image: var(--wcl-marble); background-size: cover; background-position: center; opacity: 0.06; pointer-events: none; }
.wsh-cl-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 1; }
.wsh-cl-benefit { display: flex; align-items: flex-start; gap: 14px; }
.wsh-cl-benefit-icon { width: 44px; height: 44px; background: rgba(201,169,110,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wsh-cl-benefit-icon svg { width: 22px; height: 22px; color: var(--wcl-secondary); }
.wsh-cl-benefit h3 { font-size: 1rem !important; font-weight: 600 !important; margin: 0 0 4px !important; color: #fff !important; font-family: 'Helvetica Neue', Arial, sans-serif !important; }
.wsh-cl-benefit p { font-size: 0.875rem; color: rgba(255,255,255,0.8) !important; line-height: 1.5; margin: 0; }

/* --- 15.5 HUB product preview (NATIVE WooCommerce cards) --- */
/* The cards themselves inherit your §3 product-card skin; this block only
   lays them out in a clean responsive grid and neutralises Woo's float. */
.wsh-cl-hubprod { padding: 34px 0 10px; }
.wsh-cl-hubprod .woocommerce ul.products,
.wsh-cl-hubprod ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wsh-cl-hubprod ul.products::before,
.wsh-cl-hubprod ul.products::after { content: none !important; display: none !important; }
.wsh-cl-hubprod ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0 !important;
}

/* --- 15.6 cross-CTA --- */
.wsh-cl-cross { padding: 90px 0 20px; }
.wsh-cl-cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wsh-cl-cross-tile { position: relative; display: block; border-radius: var(--wcl-radius); overflow: hidden; aspect-ratio: 16/7; background: var(--wcl-primary); box-shadow: var(--wcl-shadow); text-decoration: none !important; transition: var(--wcl-transition); }
.wsh-cl-cross-tile:hover { transform: translateY(-4px); box-shadow: var(--wcl-shadow-hover); }
.wsh-cl-cross-media, .wsh-cl-cross-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsh-cl-cross-media img { object-position: center 25%; }
.wsh-cl-cross-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,31,33,0.02) 30%, rgba(36,31,33,0.7) 100%); }
.wsh-cl-cross-body { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wsh-cl-cross-name { font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.5rem; color: #fff !important; }
.wsh-cl-cross-cta { font-size: 0.8rem; font-weight: 600; color: var(--wcl-secondary) !important; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

/* --- 15.7 FAQ --- */
.wsh-cl-faq { background: #fff; margin-top: 20px; padding: 70px 0 84px; }
.wsh-cl-faq .wsh-cl-section-header h2 { color: var(--wcl-primary) !important; }
.wsh-cl-faq-list { max-width: 820px; margin: 0 auto; }
.wsh-cl-faq-item { background: var(--wcl-light) !important; border: 1px solid var(--wcl-border); border-radius: var(--wcl-radius); margin-bottom: 12px; overflow: hidden; transition: var(--wcl-transition); }
.wsh-cl-faq-item[open] { border-color: var(--wcl-secondary); box-shadow: 0 10px 28px rgba(36,31,33,0.05); }
.wsh-cl-faq-item summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 26px; font-weight: 600; font-size: 0.98rem; color: var(--wcl-primary); position: relative; }
.wsh-cl-faq-item summary::-webkit-details-marker { display: none; }
.wsh-cl-faq-item summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--wcl-secondary); transition: var(--wcl-transition); }
.wsh-cl-faq-item[open] summary::after { content: '–'; }
.wsh-cl-faq-a { padding: 0 26px 22px; color: var(--wcl-muted); line-height: 1.7; }
.wsh-cl-faq-a p { margin: 0 0 10px; }

/* --- 15.8 reveal --- */
.wsh-cl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.wsh-cl-reveal.is-visible { opacity: 1; transform: none; }

/* --- 15.9 responsive --- */
@media (max-width: 1024px) {
	.wsh-cl-subcats-grid { grid-template-columns: repeat(2, 1fr); }
	.wsh-cl-benefits-grid { grid-template-columns: repeat(2, 1fr); }
	.wsh-cl-hubprod .woocommerce ul.products,
	.wsh-cl-hubprod ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
	.wsh-cl-hero { padding: 52px 0; }
	.wsh-cl-hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.wsh-cl-subcats { padding: 50px 0 20px; }
	.wsh-cl-subcats-grid { grid-template-columns: 1fr; }
	.wsh-cl-benefits-grid { grid-template-columns: 1fr; gap: 20px; }
	.wsh-cl-cross { padding-top: 60px; }
	.wsh-cl-cross-grid { grid-template-columns: 1fr; }
	.wsh-cl-cross-tile { aspect-ratio: 16/9; }
	.wsh-cl-hubprod .woocommerce ul.products,
	.wsh-cl-hubprod ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}

/* --- 15.10 hub collection tiles (LEGACY — kept for compatibility) --- */
.wsh-cl-hub { padding: 70px 0 30px; }
.wsh-cl-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.wsh-cl-hub-tile { position: relative; display: block; border-radius: var(--wcl-radius); overflow: hidden; aspect-ratio: 16/10; background: var(--wcl-primary); box-shadow: var(--wcl-shadow); text-decoration: none !important; transition: var(--wcl-transition); }
.wsh-cl-hub-tile:hover { transform: translateY(-6px); box-shadow: var(--wcl-shadow-hover); }
.wsh-cl-hub-media, .wsh-cl-hub-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 0.6s ease; }
.wsh-cl-hub-tile:hover .wsh-cl-hub-media img { transform: scale(1.04); }
.wsh-cl-hub-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,31,33,0.02) 25%, rgba(36,31,33,0.82) 100%); }
.wsh-cl-hub-body { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.wsh-cl-hub-name { font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.7rem; color: #fff !important; letter-spacing: -0.01em; }
.wsh-cl-hub-sub { font-size: 0.9rem; color: rgba(255,255,255,0.85) !important; font-style: italic; }
.wsh-cl-hub-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wsh-cl-hub-count { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.75) !important; text-transform: uppercase; letter-spacing: 0.08em; }
.wsh-cl-hub-cta { font-size: 0.82rem; font-weight: 600; color: var(--wcl-secondary) !important; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; transition: var(--wcl-transition); }
.wsh-cl-hub-tile:hover .wsh-cl-hub-cta { color: #fff !important; }
@media (max-width: 767px) {
	.wsh-cl-hub { padding: 50px 0 20px; }
	.wsh-cl-hub-grid { grid-template-columns: 1fr; gap: 18px; }
	.wsh-cl-hub-tile { aspect-ratio: 16/11; }
	.wsh-cl-hub-name { font-size: 1.4rem; }
}
/* ============================================================
   END §15
   ============================================================ */

/* ============================================================================
   §17 — SINGLE PRODUCT  (Woostify + Flickity gallery)  ·  HARMONIZED
   ----------------------------------------------------------------------------
   Full replacement for the previous §17. Pairs with the
   "W-Shop — Single Product enhancements" snippet (description move + CTA).
   Brings the whole product page into the site's design language:
   warm cream canvas, framed gallery, Playfair headings, gold accents,
   light cards, dark buttons, soft rhythm.

   17.0 page canvas + width   17.1 section rhythm
   17.2 summary               17.3 variation + qty
   17.4 add-to-cart           17.5 meta pills
   17.6 description accordion  17.7 related products
   17.8 CTA band              17.9 product gallery
   17.10 breadcrumb
   ============================================================================ */

/* --- 17.0 page canvas: cold grey -> warm cream, wider bands --------------- */
/* The whole product page sat on the theme's cold #f3f3f3. Warming it to the
   site's cream unifies every band AND makes the old grey seam before the
   footer disappear (the gap is now the same cream as the CTA + flows in). */
body.single-product{ background-color:#faf8f5 !important; }
/* use the horizontal space more generously (less dead centered margin).
   .content-top holds the breadcrumb bar (it sits OUTSIDE .site-main), so it is
   widened too — otherwise the breadcrumb would be indented vs the content. */
body.single-product .site-main .woostify-container,
body.single-product .content-top .woostify-container{ max-width:1290px !important; }
.single-product div.product > .woostify-container,
.single-product div.product .woostify-container{ column-gap:56px; }

/* --- 17.1 section rhythm — no hairlines, separation via space + bands --- */
.single-product .woocommerce-tabs.wsh-tabs-moved{ width:100%; max-width:1290px; margin:8px auto 56px; padding:0 24px; float:none; clear:both; }
.single-product .related.products{ border-top:none !important; margin-top:0 !important; padding-top:64px !important; }
.elementor-kit-28 h3 { color: #9f7f50 }

/* --- 17.2 summary: title / price / short description / cart rhythm --------
   TITLE — split by tag so the product page and the loop cards never collide:
     • the single PRODUCT-PAGE title is an <h1>  -> big Playfair (h1 rule)
     • the shop / category LOOP CARDS are <h3>   -> small (h3 rule)
   Both carry .product_title, and §4 has a generic
   ".woocommerce div.product .product_title !important" that leaks onto the
   cards; the h3 rule below out-specifies it, so the cards stay small and the
   product page stays big. Do NOT prefix these with ".single-product": <body>
   holds both .single-product AND .woocommerce, so ".single-product .woocommerce"
   can never match. */
.woocommerce div.product h1.product_title{
	font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important;
	font-weight:500 !important; font-size:clamp(2rem,3vw,2.6rem) !important;
	line-height:1.16 !important; letter-spacing:-.01em !important;
	color:#241F21 !important; margin:0 0 16px !important;
}
/* shop/category loop-card titles — small, card-appropriate (NOT the page title) */
.woocommerce div.product h3.product_title{
	font-size:1.05rem !important;
	line-height:1.35 !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
	font-size:1.55rem !important; font-weight:600 !important; color:#241F21 !important; margin:0 0 22px !important;
}
.single-product .woocommerce-product-details__short-description{ color:#7c797b !important; line-height:1.75 !important; margin:0 0 4px !important; }
/* sale price -> gold, old price -> muted (main product + related) */
.single-product div.product .price ins, .single-product div.product .price ins .woocommerce-Price-amount{ color:#9f7f50 !important; text-decoration:none !important; }
.single-product div.product .price del, .single-product div.product .price del .woocommerce-Price-amount{ color:#7c797b !important; font-weight:400 !important; }
/* cart: quantity + button inline, aligned heights, comfortable gap + rhythm.
   Scoped so it never breaks variable products (whose form.cart also holds the
   variation dropdowns): simple products flex form.cart directly; variable /
   grouped products flex only the qty+button wrapper. */
.single-product div.product form.cart{ margin:30px 0 8px !important; }
.single-product div.product.product-type-simple form.cart{ display:flex !important; align-items:stretch !important; gap:16px !important; flex-wrap:wrap !important; }
.single-product .woocommerce-variation-add-to-cart{ display:flex !important; align-items:stretch !important; gap:16px !important; flex-wrap:wrap !important; }
.single-product div.product form.cart .quantity{ margin:0 !important; flex:0 0 auto !important; }
.single-product div.product form.cart .single_add_to_cart_button{ flex:1 1 240px !important; margin:0 !important; display:flex !important; align-items:center; justify-content:center; }

/* --- 17.3 variation dropdown + quantity ---
   FIX: the theme forces .variations select to height:36px, but the padding
   below is 12px top+bottom (border-box) which left only ~12px for the text and
   clipped it. height:auto + min-height lets the option text breathe. */
.single-product table.variations select, .single-product .variations select{ height:auto !important; min-height:46px !important; line-height:1.4 !important; border:1px solid #e8e4dc !important; border-radius:10px !important; padding:12px 40px 12px 16px !important; background:#fff !important; color:#241F21 !important; font-size:.95rem !important; }
.single-product form.cart .quantity .qty{ border:1px solid #e8e4dc !important; border-radius:10px !important; }

/* --- 17.4 add to cart -> dark, gold on hover --- */
.single-product div.product form.cart .single_add_to_cart_button{ background:#241F21 !important; color:#fff !important; border:2px solid #241F21 !important; border-radius:10px !important; padding:15px 36px !important; font-size:.95rem !important; font-weight:600 !important; letter-spacing:.01em !important; text-transform:none !important; box-shadow:none !important; transition:all .25s ease !important; }
.single-product div.product form.cart .single_add_to_cart_button:hover{ background:#a8895a !important; border-color:#a8895a !important; color:#241F21 !important; transform:translateY(-2px); }
/* disabled state (variable product before a variation is chosen) */
.single-product div.product form.cart .single_add_to_cart_button.disabled,
.single-product div.product form.cart .single_add_to_cart_button:disabled{ background:#e8e4dc !important; border-color:#e8e4dc !important; color:#7c797b !important; transform:none !important; cursor:not-allowed; }

/* --- 17.5 product meta -> pills (category / brand / tags) --- */
.single-product .product_meta{ margin-top:22px; padding-top:18px; border-top:1px solid #e8e4dc; font-size:.9rem; }
.single-product .product_meta > span{ display:block; margin-bottom:10px; color:#7c797b; }
.single-product .product_meta > span:last-child{ margin-bottom:0; }
.single-product .product_meta a{ display:inline-block; background:#f3f3f3; color:#241F21 !important; border:1px solid #e8e4dc; padding:4px 12px; border-radius:50px; font-size:.82rem; margin:2px 4px 2px 0; text-decoration:none; transition:all .2s ease; }
.single-product .product_meta a:hover{ background:#a8895a; color:#fff !important; border-color:#a8895a; }

/* --- 17.6 description -> full-width accordion (white card on the cream) --- */

.single-product .woostify-tab-wrapper{ background:#fff; border:1px solid #e8e4dc; border-radius:12px; overflow:hidden; margin-bottom:12px; transition:border-color .25s ease, box-shadow .25s ease; }
.single-product .woostify-tab-wrapper.active{ border-color:#a8895a; box-shadow:0 10px 28px rgba(36,31,33,.05); }
.single-product a.woostify-accordion-title{ display:flex !important; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px !important; margin:0 !important; cursor:pointer; text-decoration:none !important; font-family:'Helvetica Neue',Arial,sans-serif !important; font-size:1rem !important; font-weight:600 !important; color:#241F21 !important; background:transparent !important; border:none !important; }
.single-product a.woostify-accordion-title .woostify-svg-icon{ display:none !important; }
.single-product a.woostify-accordion-title::after{ content:'+'; font-size:1.5rem; font-weight:300; color:#a8895a; line-height:1; flex-shrink:0; }
.single-product .woostify-tab-wrapper.active a.woostify-accordion-title::after{ content:'\2013'; }
.single-product .woocommerce-Tabs-panel{ padding:0 !important; max-width:none !important; }
.single-product .woostify-tab-inner{ padding:0 !important; }
.single-product .woostify-tab-scroll-content{ max-height:none !important; overflow:visible !important; padding:0 26px 24px !important; color:#7c797b; line-height:1.8; font-size:1rem; }
.single-product .woostify-tab-scroll-content > *:first-child{ margin-top:0 !important; }

/* --- 17.7 related products -> light cards, Playfair titles, dark buttons --- */
.woocommerce .product .product-loop-meta .price .woocommerce-Price-amount, .woocommerce .product .product-loop-meta .price del {
    color: #9f7f50;
}
.single-product .related.products > h2{ font-family:'Playfair Display',Georgia,serif !important; text-align:center; font-size:clamp(1.6rem,3vw,2.2rem) !important; font-weight:400 !important; color:#241F21 !important; margin:0 0 10px !important; }
.single-product .related.products > h2::after{ content:''; display:block; width:48px; height:2px; background:#a8895a; margin:14px auto 34px; }
.single-product .related.products ul.products li.product{ background:#fff !important; border:1px solid transparent !important; border-radius:16px !important; box-shadow:0 2px 18px rgba(36,31,33,.05) !important; transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s !important; }
.single-product .related.products ul.products li.product:hover{ transform:translateY(-6px) !important; box-shadow:0 18px 40px rgba(36,31,33,.10) !important; border-color:transparent !important; }
.single-product .related.products ul.products li.product .woocommerce-loop-product__title{ font-family:'Playfair Display',Georgia,serif !important; font-weight:500 !important; font-size:1.05rem !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.single-product .related.products ul.products li.product .price{ color:#241F21 !important; }
.single-product .related.products ul.products li.product .price ins, .single-product .related.products ul.products li.product .price ins .woocommerce-Price-amount{ color:#9f7f50 !important; text-decoration:none !important; }
.single-product .related.products ul.products li.product .price del, .single-product .related.products ul.products li.product .price del .woocommerce-Price-amount{ color:#7c797b !important; font-weight:400 !important; }
.single-product .related.products ul.products li.product .button{ background:#241F21 !important; color:#fff !important; border:2px solid #241F21 !important; border-radius:10px !important; }
.single-product .related.products ul.products li.product .button:hover{ background:#a8895a !important; border-color:#a8895a !important; color:#241F21 !important; }
/* button text was clipping ("Toevoegen aan winkelwagen") -> full-width, wrap-safe, no cart glyph */
.single-product .related.products ul.products li.product .button{ display:block !important; width:100% !important; text-align:center !important; white-space:normal !important; line-height:1.25 !important; padding:12px 14px !important; font-size:.85rem !important; }
.single-product .related.products ul.products li.product .button .woostify-svg-icon{ display:none !important; }
/* out-of-stock badge -> muted neutral (was loud pink) */
.single-product .related.products .woostify-out-of-stock-label{ background:#7c797b !important; color:#fff !important; border-radius:50px !important; font-size:.7rem !important; font-weight:600 !important; letter-spacing:.03em !important; padding:4px 12px !important; text-transform:none !important; box-shadow:none !important; }

/* --- 17.8 "Verder lezen & leren" CTA band (Beauty Academy + Blog) --- */
.wsh-pcta{ background:#faf8f5; padding:64px 24px; margin-top:24px; border-top:none; }
.wsh-pcta-inner{ max-width:1100px; margin:0 auto; }
.wsh-pcta-head{ text-align:center; margin-bottom:36px; }
.wsh-pcta-eyebrow{ display:inline-block; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:#a8895a; font-weight:600; margin-bottom:12px; }
.wsh-pcta-head h2{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:400; color:#241F21; margin:0; }
.wsh-pcta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.wsh-pcta-tile{ display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid #e8e4dc; border-radius:16px; padding:32px 30px; text-decoration:none; box-shadow:0 2px 18px rgba(36,31,33,.05); transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease, border-color .3s ease; }
.wsh-pcta-tile:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(36,31,33,.10); border-color:#a8895a; }
.wsh-pcta-eyebrow2{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:#a8895a; font-weight:700; }
.wsh-pcta-tile h3{ font-family:'Playfair Display',Georgia,serif; font-size:1.4rem; font-weight:500; color:#241F21; margin:2px 0 0; line-height:1.25; }
.wsh-pcta-tile p{ color:#7c797b; line-height:1.6; margin:0; flex:1; }
.wsh-pcta-cta{ margin-top:10px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#9f7f50; }
.wsh-pcta-tile:hover .wsh-pcta-cta{ color:#241F21; }

/* --- 17.9 PRODUCT GALLERY (Woostify Flickity) -> framed white card ------- */
/* frame the main image so it stops floating on the background */
.single-product .product-images-container{ background:#fff; border:1px solid #e8e4dc; border-radius:18px; box-shadow:0 2px 22px rgba(36,31,33,.06); overflow:hidden; }
.single-product .flickity-viewport{ border-radius:18px; }
/* prev / next arrows -> circular, dark icon, gold->dark on hover */
.single-product .flickity-prev-next-button{ width:46px !important; height:46px !important; border-radius:50% !important; background:#fff !important; border:1px solid #e8e4dc !important; box-shadow:0 4px 14px rgba(36,31,33,.14) !important; transform:translateY(-50%) !important; transition:background .25s ease, border-color .25s ease; }
.single-product .flickity-prev-next-button.previous{ left:16px !important; }
.single-product .flickity-prev-next-button.next{ right:16px !important; }
.single-product .flickity-prev-next-button:hover{ background:#241F21 !important; border-color:#241F21 !important; }
.single-product .flickity-prev-next-button svg, .single-product .flickity-prev-next-button .woostify-svg-icon svg{ fill:#241F21 !important; transition:fill .25s ease; }
.single-product .flickity-prev-next-button:hover svg, .single-product .flickity-prev-next-button:hover .woostify-svg-icon svg{ fill:#fff !important; }
/* thumbnails -> rounded, gold active outline */
.single-product .product-thumbnail-images{ margin-top:16px; }
.single-product .product-thumbnail-images .image-item{ border-radius:12px !important; overflow:hidden; border:1px solid #e8e4dc; transition:border-color .2s ease; }
.single-product .product-thumbnail-images .image-item img{ border-radius:12px; }
.single-product .product-thumbnail-images .is-nav-selected,
.single-product .product-thumbnail-images figure.is-selected{ border-color:#a8895a !important; box-shadow:0 0 0 1px #a8895a; }
/* fullscreen / zoom trigger -> soft rounded chip */
.single-product .product-images-container .icon-fullscreen,
.single-product .product-images-container [class*="zoom"]:not(figure){ border-radius:10px !important; }
/* sale badge -> gold pill (defeats Woostify's high-specificity red).
   Selectors are deliberately heavy so the theme default can't win. */
body.single-product .product-gallery span.onsale.woostify-tag-on-sale,
body.single-product .related.products ul.products li.product span.onsale.woostify-tag-on-sale,
body.single-product span.onsale.woostify-tag-on-sale.sale-left{
	background-color:#a8895a !important; background-image:none !important;
	color:#fff !important; border:none !important; border-radius:50px !important;
	font-weight:700 !important; box-shadow:none !important;
}

/* --- 17.10 breadcrumb (Woostify) -> muted trail, gold hover, bold current --
   Left unscoped (no .single-product) so the trail looks consistent wherever
   Woostify prints it — product, shop and category pages alike. The muted tones
   read correctly on both the cream product canvas and the grey shop/category
   background. Current item (last .item-bread, no link) is emphasised. */
.woostify-breadcrumb{ font-size:.95rem !important; letter-spacing:.01em !important; color:#7c797b !important; padding:6px 0 24px !important; margin:0 !important; line-height:1.7 !important; }
.woostify-breadcrumb .item-bread{ color:#7c797b !important; }
.woostify-breadcrumb .item-bread a{ color:#7c797b !important; text-decoration:none !important; transition:color .2s ease !important; }
.woostify-breadcrumb .item-bread a:hover{ color:#a8895a !important; }
.woostify-breadcrumb .item-bread.delimiter{ color:#d3cec5 !important; padding:0 9px !important; font-weight:400 !important; }
.woostify-breadcrumb .item-bread:last-child{ color:#241F21 !important; font-weight:500 !important; }

@media (max-width:767px){
	.wsh-pcta{ padding:48px 20px; }
	.woostify-breadcrumb{ font-size:.86rem !important; padding-bottom:18px !important; }
	.wsh-pcta-grid{ grid-template-columns:1fr; }
	.single-product .related.products{ padding-top:44px !important; }
	.single-product .woocommerce-tabs.wsh-tabs-moved{ margin-bottom:40px; }
}
/* ============================================================================
   END §17
   ============================================================================ */
   
/* ===== Beauty Academy — spacing fixes ===== */

/* "Extra voordelen" callout: content sat on the dashed border (padding was 0),
   and the button was tight underneath it */
.ba-extra-callout{ padding:20px 26px !important; margin-bottom:36px !important; }

/* Diensten & tarieven: the table was jammed (2px) against the notes below it */
.ba-tarieven{ padding-bottom:48px !important; }

/* "Goed om te weten" band: content sat on the band's top/bottom edges */
.ba-practical-block{ padding:40px 0 48px !important; }


/* ============================================================================
   §16 — MIJN ACCOUNT — WooCommerce account page  ·  site styling
   ----------------------------------------------------------------------------
   Styles the whole account area to match the site: the login/register forms,
   the dashboard nav (as a card sidebar), account details / address forms,
   order & download tables, buttons and inputs.
   Paste into Elementor → Site Settings → Custom CSS.

   NOTE on the "Lorem ipsum" block at the top: that is an Elementor heading
   widget on the account page (page 206), not something CSS controls. Edit the
   page in Elementor and replace the placeholder text (e.g. "Mijn account" +
   a short welcome line) or delete that section.

   Specificity note: the theme sets button colours via ".woocommerce
   button.button" (0,2,1 !important), so the button rules here use
   ".woocommerce-account .woocommerce .button" (0,3,0) to win cleanly.
   ============================================================================ */

/* --- layout: nav sidebar + content (dashboard view) ---------------------- */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){
	display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; max-width:1200px; margin:0 auto;
}

/* --- nav sidebar as a card ----------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation{
	flex:0 0 280px; width:280px; background:#fff; border:1px solid #e8e4dc; border-radius:16px;
	padding:14px; box-shadow:0 2px 18px rgba(36,31,33,.05);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0 !important; border:none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
	display:flex !important; align-items:center; gap:12px; padding:13px 16px !important; border-radius:10px;
	color:#3f3c3d !important; font-weight:500 !important; text-decoration:none !important; transition:all .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:#faf8f5; color:#241F21 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:#241F21; color:#fff !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a svg,
.woocommerce-account .woocommerce-MyAccount-navigation li a .woostify-svg-icon svg{ fill:currentColor !important; width:18px; height:18px; }

/* --- content column ------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-content{ flex:1 1 420px; min-width:0; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button){ color:#9f7f50 !important; text-decoration:underline; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover{ color:#241F21 !important; }

/* --- headings ------------------------------------------------------------ */
.woocommerce-account h1, .woocommerce-account h2, .woocommerce-account h3{
	font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important; color:#241F21 !important; font-weight:500 !important;
}

/* --- buttons (dark, gold on hover) --------------------------------------- */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account .woocommerce .woocommerce-Button{
	background:#241F21 !important; background-image:none !important; color:#fff !important;
	border:2px solid #241F21 !important; border-radius:10px !important; padding:14px 30px !important;
	font-weight:600 !important; text-transform:none !important; white-space:nowrap !important; box-shadow:none !important;
	transition:all .25s ease !important;
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button[type="submit"]:hover,
.woocommerce-account .woocommerce .woocommerce-Button:hover{
	background:#a8895a !important; border-color:#a8895a !important; color:#241F21 !important; transform:translateY(-1px);
}

/* --- inputs / selects / textareas ---------------------------------------- */
.woocommerce-account input.input-text, .woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"], .woocommerce-account input[type="email"],
.woocommerce-account input[type="password"], .woocommerce-account input[type="tel"],
.woocommerce-account select, .woocommerce-account textarea{
	border:1px solid #e8e4dc !important; border-radius:10px !important; padding:12px 16px !important;
	background:#fff !important; color:#241F21 !important; font-size:.95rem !important; box-shadow:none !important;
}
.woocommerce-account input:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus{
	border-color:#a8895a !important; outline:none !important; box-shadow:0 0 0 3px rgba(168,137,90,.12) !important;
}
.woocommerce-account form .form-row label, .woocommerce-account label{ color:#3f3c3d !important; font-weight:500 !important; }
/* kill the browser autofill blue so fields stay on-brand */
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:focus{
	-webkit-box-shadow:0 0 0 40px #fff inset !important; box-shadow:0 0 0 40px #fff inset !important; -webkit-text-fill-color:#241F21 !important;
}

/* --- login + register as two cards --------------------------------------- */
.woocommerce-account #customer_login.col2-set, .woocommerce-account .u-columns.col2-set{
	display:grid !important; grid-template-columns:1fr 1fr; gap:28px; width:100%; max-width:1000px; margin:0 auto; float:none !important;
}
.woocommerce-account #customer_login .col-1, .woocommerce-account #customer_login .col-2{ width:auto !important; max-width:none !important; float:none !important; }
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register{
	background:#fff; border:1px solid #e8e4dc; border-radius:16px; padding:30px 30px 32px; box-shadow:0 2px 18px rgba(36,31,33,.05); margin-top:14px;
}
/* auth submit buttons -> full width of their card */
.woocommerce-account .woocommerce-form-login .button, .woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-form-login button, .woocommerce-account .woocommerce-form-register button{ width:100% !important; display:block !important; }
.woocommerce-account .woocommerce-form-login__rememberme{ display:inline-flex; align-items:center; gap:8px; font-weight:400 !important; }
.woocommerce-account .lost_password a, .woocommerce-account .woocommerce-LostPassword a{ color:#9f7f50 !important; }

/* --- tables (orders / downloads / addresses) ----------------------------- */
.woocommerce-account table.shop_table, .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.woocommerce-table{
	border:1px solid #e8e4dc !important; border-radius:12px !important; border-collapse:separate !important; border-spacing:0 !important; overflow:hidden;
}
.woocommerce-account table.shop_table thead th{ background:#241F21 !important; color:#fff !important; font-weight:600 !important; border:none !important; padding:14px 16px !important; }
.woocommerce-account table.shop_table td, .woocommerce-account table.shop_table th{ border-color:#e8e4dc !important; }
.woocommerce-account table.shop_table tbody tr:hover{ background:#faf8f5 !important; }

/* --- address blocks ------------------------------------------------------
   The .col-1/.col-2 columns carry a WooCommerce float-layout leftover
   (max-width:calc(50% - 15px)) that halves them AGAIN inside the grid — that
   crushed the cards to ~176px and made the "Factuuradres"/"Verzendadres"
   titles wrap letter-by-letter. Reset width/max-width/float so each address
   fills its grid cell, and lay the title header out cleanly. */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address{ width:auto !important; max-width:none !important; float:none !important; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address{ background:#fff; border:1px solid #e8e4dc; border-radius:14px; padding:24px 26px; }
.woocommerce-account .woocommerce-Address-title{ display:flex !important; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3{ margin:0 !important; font-size:1.3rem !important; white-space:nowrap; }
.woocommerce-account .woocommerce-Address-title p{ margin:0 !important; }
.woocommerce-account .woocommerce-Address-title a{ white-space:nowrap; color:#9f7f50 !important; }

/* --- notices ------------------------------------------------------------- */
.woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error{
	border-radius:12px !important; border:1px solid #e8e4dc !important; background:#faf8f5 !important; color:#3f3c3d !important;
}
.woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-info::before{ color:#a8895a !important; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width:900px){
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){ display:block; }
	.woocommerce-account .woocommerce-MyAccount-navigation{ width:100%; flex:none; margin-bottom:28px; }
	.woocommerce-account #customer_login.col2-set, .woocommerce-account .u-columns.col2-set{ grid-template-columns:1fr; }
}
/* ============================================================================
   END Mijn account
   ============================================================================ */
   
   /* ============================================================================
   §18 — FIBOSEARCH (AJAX Search for WooCommerce)  ·  site styling  (v2 — refined)
   ----------------------------------------------------------------------------
   Skins the FiboSearch input + live suggestions dropdown to match the site.
   This revision focuses on three things you asked for:

     1. WIDTH / ONE LINE  — product titles are held to a single line (ellipsis
        when too long) and prices never wrap, so a row reads cleanly left→right.
     2. ONE TYPOGRAPHY     — every row uses the SAME light body typeface, so the
        mix of FiboSearch defaults + our styles is gone. (Playfair is kept only
        for the detail-box product title, in case you re-enable that box.)
     3. LIGHTER            — regular font-weights, a softer shadow and airier
        rows replace the previous heavy look.

   It also HIDES FiboSearch's "Pirx" detail-preview panel (the box on the right
   that showed one product big with an Add-to-cart button). That panel is what
   made the dropdown feel heavy and crushed the prices onto two lines. With it
   hidden the suggestion list uses the full width and stays light.
      → To bring the detail panel back: either delete the one rule flagged
        "HIDE THE PIRX DETAIL PANEL" at the very bottom of this file, OR turn it
        off cleanly in FiboSearch → Search results (uncheck the details/preview
        panel). Its styling below is kept ready either way.

   Paste into Elementor → Site Settings → Custom CSS. FiboSearch supplies the
   dynamic-suggestion logic; this only skins it.
   ============================================================================ */

/* --- input --------------------------------------------------------------- */
.dgwt-wcas-search-input{
	border:1px solid #e8e4dc !important; border-radius:12px !important; background:#fff !important;
	color:#241F21 !important; height:48px !important; font-size:.95rem !important; padding-left:16px !important;
	font-family:'Helvetica Neue','Inter',Arial,sans-serif !important; font-weight:400 !important;
}
.dgwt-wcas-search-input:focus{ border-color:#a8895a !important; box-shadow:0 0 0 3px rgba(168,137,90,.12) !important; outline:none !important; }
.dgwt-wcas-search-input::placeholder{ color:#a9a5a1 !important; font-weight:400 !important; }
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit{ background:transparent !important; box-shadow:none !important; border:none !important; }
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier{ fill:#241F21 !important; margin:0 !important; }
.dgwt-wcas-search-wrapp .dgwt-wcas-preloader div{ border-top-color:#a8895a !important; background:#a8895a !important; }

/* --- field controls: clear (×), search (magnifier) & loader, all centered ---
   FiboSearch ships the clear button as a full-height gold bar and anchors the
   magnifier by a fixed bottom offset, so neither sits in the middle of the
   field. These rules make all three the same 34px control, vertically centred
   on the input at any height (48px header / 60px overlay). */
.dgwt-wcas-search-wrapp .dgwt-wcas-close,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit,
.dgwt-wcas-search-wrapp .dgwt-wcas-preloader{
	top:50% !important; bottom:auto !important; transform:translateY(-50%) !important;
	width:34px !important; height:34px !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	border-radius:50% !important; background:transparent !important; box-shadow:none !important; border:none !important;
}
/* clear (×): a subtle grey mark with a soft circle on hover — not a gold bar */
.dgwt-wcas-search-wrapp .dgwt-wcas-close{ min-width:34px !important; cursor:pointer !important; transition:background .2s ease !important; }
.dgwt-wcas-search-wrapp .dgwt-wcas-close:hover{ background:#f3f3f3 !important; }
.dgwt-wcas-search-wrapp .dgwt-wcas-close svg{ width:13px !important; height:13px !important; fill:#7c797b !important; transition:fill .2s ease !important; }
.dgwt-wcas-search-wrapp .dgwt-wcas-close:hover svg{ fill:#241F21 !important; }

/* --- suggestions dropdown (container) ------------------------------------ */
.dgwt-wcas-suggestions-wrapp{
	border:1px solid #e8e4dc !important; border-radius:14px !important;
	box-shadow:0 16px 36px rgba(36,31,33,.08) !important;   /* lighter than before */
	overflow:hidden !important; margin-top:8px !important;
	min-width:440px !important;                              /* comfortable width for one-line rows */
}
@media (max-width:480px){ .dgwt-wcas-suggestions-wrapp{ min-width:0 !important; } }
/* the list fills the whole dropdown (the right-hand detail panel is hidden) */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestions-list,
.dgwt-wcas-suggestions{ width:100% !important; }

/* --- one unified, light typeface for every row --------------------------- */
.dgwt-wcas-suggestion,
.dgwt-wcas-suggestion *{ font-family:'Helvetica Neue','Inter',Arial,sans-serif !important; }

/* --- suggestion row ------------------------------------------------------ */
.dgwt-wcas-suggestion{
	padding:13px 18px !important; border-bottom:1px solid #f1eee9 !important;
	display:flex !important; align-items:center !important; gap:14px !important;
}
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover{ background:#faf8f5 !important; }
.dgwt-wcas-si{ flex:0 0 auto !important; }
.dgwt-wcas-si img{ border-radius:8px !important; }
.dgwt-wcas-content-wrapp{ flex:1 1 auto !important; min-width:0 !important; }   /* lets title ellipsis kick in */

/* title: one line, ellipsis when long, light weight */
.dgwt-wcas-st{ min-width:0 !important; }
.dgwt-wcas-st-title,
.dgwt-wcas-st .dgwt-wcas-st-title{
	color:#3f3c3d !important; font-weight:400 !important; font-size:.92rem !important;
	white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
	display:block !important; max-width:100% !important;
}
/* the matched search term (bolded by FiboSearch) -> gold, but not heavy */
.dgwt-wcas-suggestion .dgwt-wcas-st-title strong,
.dgwt-wcas-suggestion strong{ color:#a8895a !important; font-weight:600 !important; }

/* price: never wraps, stays on the row (sale = old price struck, new price below) */
.dgwt-wcas-sp{ color:#241F21 !important; font-weight:500 !important; font-size:.9rem !important; white-space:nowrap !important; flex:0 0 auto !important; text-align:right !important; }
.dgwt-wcas-sp del, .dgwt-wcas-sp del .amount{ color:#7c797b !important; font-weight:400 !important; }
.dgwt-wcas-sp ins, .dgwt-wcas-sp ins .amount{ color:#9f7f50 !important; text-decoration:none !important; font-weight:500 !important; }

/* "see all results" (centered, light gold) */
.dgwt-wcas-suggestion-more{ color:#9f7f50 !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.08em !important; font-size:.74rem !important; justify-content:center !important; }
.dgwt-wcas-suggestion-more:hover{ background:#faf8f5 !important; }

/* category / brand group headlines (CATEGORIEËN / PRODUCTEN / merken) */
.dgwt-wcas-suggestion-headline,
.dgwt-wcas-suggestion-headline span{
	color:#a8895a !important; text-transform:uppercase !important; letter-spacing:.1em !important; font-weight:600 !important; font-size:.72rem !important;
}

/* --- Pirx detail-preview box (kept ready in case you re-enable it) -------- */
.dgwt-wcas-details-wrapp, .dgwt-wcas-details-inner{ background:#fff !important; }
.dgwt-wcas-details-product-title, .dgwt-wcas-details-product-title a{
	font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important; color:#241F21 !important; font-weight:500 !important;
}
.dgwt-wcas-pd-price, .dgwt-wcas-pd-price .amount{ color:#241F21 !important; font-weight:600 !important; }
.dgwt-wcas-pd-price del, .dgwt-wcas-pd-price del .amount{ color:#7c797b !important; font-weight:400 !important; }
.dgwt-wcas-pd-price ins, .dgwt-wcas-pd-price ins .amount{ color:#9f7f50 !important; text-decoration:none !important; }
.dgwt-wcas-details-hr{ border-color:#e8e4dc !important; background:#e8e4dc !important; }
.dgwt-wcas-details-desc{ color:#7c797b !important; }
.dgwt-wcas-pd-addtc .button, .dgwt-wcas-pd-addtc button, .dgwt-wcas-pd-addtc a.button{
	background:#241F21 !important; color:#fff !important; border:2px solid #241F21 !important; border-radius:10px !important;
	box-shadow:none !important; font-weight:600 !important; text-transform:none !important;
	font-size:.76rem !important; padding:10px 12px !important; line-height:1.3 !important; white-space:normal !important; width:100% !important; text-align:center !important;
}
.dgwt-wcas-pd-addtc .button:hover, .dgwt-wcas-pd-addtc button:hover{ background:#a8895a !important; border-color:#a8895a !important; color:#241F21 !important; }
.dgwt-wcas-pd-addtc input.qty, .dgwt-wcas-pd-addtc .quantity input{ border:1px solid #e8e4dc !important; border-radius:8px !important; }

/* --- § 19 (fibosearch) HIDE THE PIRX DETAIL PANEL -----------------------------------------
   This is the single rule that removes the heavy right-hand preview box and
   lets the suggestion list run full-width & light. Delete it (or disable the
   details panel in FiboSearch → Search results) to bring the box back. */
.dgwt-wcas-details-wrapp, .dgwt-wcas-suggestion-details{ display:none !important; }
/* ============================================================================
   END FiboSearch
   ============================================================================ */

/* ============================================================
   §20 — SHOP FILTER + SORT BAR   ·  Better Post & Filter Widgets
   ------------------------------------------------------------
   Turns the stacked filter into a horizontal bar of pill dropdowns
   that matches the blog filter. REQUIRES "Enable Toggle Mode = Yes"
   on every facet item (that produces the .collapsible titles).

   Live markup hooks:
     .filter-container form.form-tax        -> the bar (flex row)
     .flex-wrapper                          -> each facet (pill + panel)
     .filter-title.collapsible              -> the pill  (.collapsed = OPEN)
     .bpfwe-taxonomy-wrapper                -> a taxonomy dropdown panel
     .flex-wrapper._price .bpfwe-*          -> the price slider dropdown
     .filter-sorting-wrapper select         -> the "Sorteer op" pill

   Palette: #241F21 dark · #a8895a gold · #9F7F50 copper ·
            #FAF8F5 cream · #E8E4DC border · #3F3C3D text · #7C797B muted
   ============================================================ */

/* ---- 20.1  The bar ---- */
.filter-container form.form-tax{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 6px;
}
.filter-container form.form-tax > input{ display:none !important; } /* stray hidden inputs */

/* ---- 20.2  Facet wrapper = the pill's positioning anchor ---- */
.filter-container .flex-wrapper{
  position:relative; margin:0 !important; width:auto !important; padding:0 !important;
}

/* ---- 20.3  The pill (facet title / toggle) ---- */
.filter-container .filter-title.collapsible{
  display:inline-flex; justify-content:center !important; align-items:center; gap: 6px;
  background:#fff; border:1px solid #E8E4DC; color:#241F21;
  font-family:"Helvetica Neue",Inter,sans-serif; font-size:.9rem; font-weight:600; line-height:1;
  padding:11px 18px; border-radius:50px; cursor:pointer; white-space:nowrap;
  transition:all .22s ease; user-select:none; margin:0;
}
.filter-container .filter-title.collapsible::after{        /* chevron */
  content:""; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .22s ease; opacity:.55;
}
.filter-container .filter-title.collapsible:hover{
  border-color:#a8895a; color:#9F7F50; transform:translateY(-1px);
}
/* .collapsed = OPEN state (the plugin adds it when the panel is showing) */
.filter-container .filter-title.collapsible.collapsed{
  background:#241F21; border-color:#241F21; color:#fff;
}
.filter-container .filter-title.collapsible.collapsed::after{
  transform:rotate(-135deg) translateY(2px); opacity:.9;
}

/* ---- 20.4  Taxonomy dropdown panel ---- */
.filter-container .bpfwe-taxonomy-wrapper{
  position:absolute !important; top:calc(100% + 8px); left:0; z-index:200;
  min-width:250px; max-width:320px; max-height:344px; overflow-y:auto;
  flex-direction:column; background:#fff; border:1px solid #E8E4DC; border-radius:14px;
  padding:12px; box-shadow:0 14px 34px rgba(36,31,33,.12);
}
/* the last two pills open toward the left so they don't clip the right edge */
.filter-container .flex-wrapper:nth-last-child(-n+2) .bpfwe-taxonomy-wrapper{ left:auto; right:0; }
.filter-container .bpfwe-taxonomy-wrapper::-webkit-scrollbar{ width:8px; }
.filter-container .bpfwe-taxonomy-wrapper::-webkit-scrollbar-thumb{ background:#E8E4DC; border-radius:8px; }

/* ---- 20.5  Options (checkbox rows) ---- */
.filter-container ul.taxonomy-filter,
.filter-container ul.child-terms{ list-style:none; margin:0; padding:0; width:100%; }
.filter-container .taxonomy-filter label{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px;
  cursor:pointer; font-size:.88rem; color:#3F3C3D; transition:background .15s ease;
}
.filter-container .taxonomy-filter label:hover{ background:#FAF8F5; }
.filter-container input.bpfwe-filter-item{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0;
  border:1.5px solid #C9C2B6; border-radius:5px; background:#fff; cursor:pointer;
  flex:0 0 auto; position:relative; transition:all .15s ease;
}
.filter-container input.bpfwe-filter-item:checked{ background:#a8895a; border-color:#a8895a; }
.filter-container input.bpfwe-filter-item:checked::after{
  content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* the +/- expander for category children */
.filter-container .low-group-trigger{
  margin-left:auto; width:22px; height:22px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid #E8E4DC; border-radius:6px; font-size:15px;
  color:#7C797B; cursor:pointer; line-height:1; flex:0 0 auto;
}
.filter-container .low-group-trigger:hover{ border-color:#a8895a; color:#9F7F50; }
.filter-container .low-terms-group ul.child-terms{
  padding-left:12px; border-left:1px solid #F0ECE4; margin-left:8px;
}

/* ---- 20.6  Price dropdown (slider card) ---- */
/* the plugin leaves these three parts always-visible; hide them, then show as a card */
.filter-container .flex-wrapper._price .bpfwe-range-slider,
.filter-container .flex-wrapper._price .bpfwe-slider-track,
.filter-container .flex-wrapper._price .bpfwe-slider-values{ display:none !important; }
/* card = the two euro inputs + a fixed height that holds the (absolute) track + values */
.filter-container .flex-wrapper._price .filter-title.collapsed ~ .bpfwe-range-slider{
  display:flex !important; align-items:flex-start; justify-content:center; gap:10px;
  position:absolute; top:calc(100% + 8px); right:0; z-index:200;
  width:290px; height:158px; box-sizing:border-box; padding:20px;
  background:#fff; border:1px solid #E8E4DC; border-radius:14px;
  box-shadow:0 14px 34px rgba(36,31,33,.12);
}
.filter-container .flex-wrapper._price .field-wrapper{
  display:inline-flex; align-items:center; gap:3px; border:1px solid #E8E4DC;
  border-radius:8px; padding:8px 10px; background:#FAF8F5;
}
.filter-container .flex-wrapper._price .field-wrapper .before{ color:#7C797B; font-size:.85rem; }
.filter-container .flex-wrapper._price input[class*="bpfwe-filter-range"]{
  border:none; background:transparent; width:56px; font-size:.9rem; color:#241F21; padding:0;
}
.filter-container .flex-wrapper._price .filter-title.collapsed ~ .bpfwe-slider-track{
  display:block !important; position:absolute; top:calc(100% + 82px); right:20px;
  width:250px; height:4px; background:#E8E4DC; border-radius:4px; z-index:201;
}
.filter-container .bpfwe-slider-range{ background:#a8895a !important; height:100%; border-radius:4px; }
.filter-container .bpfwe-slider-handle{
  width:16px; height:16px; background:#fff; border:2px solid #a8895a; border-radius:50%;
  box-shadow:0 2px 6px rgba(36,31,33,.2); cursor:pointer;
}
.filter-container .flex-wrapper._price .filter-title.collapsed ~ .bpfwe-slider-values{
  display:flex !important; justify-content:center; gap:2px; position:absolute;
  top:calc(100% + 104px); right:20px; left:auto; width:250px; z-index:201;
  font-size:.85rem; color:#3F3C3D; font-weight:600; white-space:nowrap;
}

/* ---- 20.7  Sort "Sorteer op" pill (right-aligned) ---- */
.filter-sorting-wrapper{ display:flex !important; justify-content:flex-end; margin:2px 0 18px; }
.filter-sorting-wrapper .form-order-by{ width:auto; margin:0; }
.filter-sorting-wrapper select{
  width:auto !important; min-width:180px; border:1px solid #E8E4DC; border-radius:50px;
  padding:10px 16px; font-size:.9rem; font-weight:600; color:#241F21; background:#fff;
  cursor:pointer; transition:all .22s ease;
}
.filter-sorting-wrapper select:hover{ border-color:#a8895a; }

/* ---- 20.8  Mobile ---- */
@media (max-width:768px){
  .filter-container form.form-tax{ gap:8px; }
  .filter-container .bpfwe-taxonomy-wrapper{ min-width:220px; max-width:86vw; }
  .filter-sorting-wrapper{ justify-content:flex-start; margin-top:8px; }
}

/* ============================================================
   §21 — SHOP FILTER CARD + ACTIVE FILTERS
   ------------------------------------------------------------
   Wraps the §20 pill bar + sort into a styled white "card"
   (like the collection-page filters) and styles the active-filter
   chips + reset that the companion snippet injects.

   Structure built by the snippet:
     .wsh-filter-card  > [ filter widget · sorting widget · .wsh-filter-active ]
     .wsh-filter-active > .wsh-chips  +  .wsh-active-right > .wsh-reset

   Palette: #241F21 dark · #a8895a gold · #9F7F50 copper ·
            #ECE7DF card border · #F3F1EC chip · #7C797B muted
   ============================================================ */

/* ---- 21.1  The card ---- */
.wsh-filter-card{
  background:#fff; border:1px solid #ECE7DF; border-radius:18px;
  box-shadow:0 12px 34px rgba(36,31,33,.06);
  padding:20px 24px; margin:0 0 34px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px;
}
/* filter pills take the row, sort sits at the right */
.wsh-filter-card .elementor-widget-filter-widget{ flex:1 1 auto; min-width:0; margin:0; width:auto; }
.wsh-filter-card .elementor-widget-sorting-widget{ flex:0 0 auto; margin:0 0 0 auto; width:auto; }
.wsh-filter-card .filter-sorting-wrapper{ margin:0; justify-content:flex-end; }
.wsh-filter-card .filter-container form.form-tax{ margin:0; }

/* ---- 21.2  Active-filters row (below a divider) ---- */
.wsh-filter-active{
  flex:0 0 100%; order:9;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:2px; padding-top:16px; border-top:1px solid #ECE7DF; min-height:34px;
}
.wsh-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ---- 21.3  A chip ---- */
.wsh-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:#F3F1EC; color:#3F3C3D; border-radius:50px;
  padding:6px 8px 6px 14px; font-size:.82rem; font-weight:500;
}
.wsh-chip .wsh-chip-grp{ color:#a8895a; font-weight:600; }
.wsh-chip button{
  border:none; background:#E3DED4; color:#6a6763;
  width:18px; height:18px; border-radius:50%; padding:0;
  font-size:14px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.wsh-chip button:hover{ background:#241F21; color:#fff; }

/* ---- 21.4  Reset + empty state ---- */
.wsh-active-right{ display:flex; align-items:center; gap:16px; }
.wsh-reset{
  color:#7C797B; font-size:.85rem; font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent; transition:all .18s ease; white-space:nowrap; cursor:pointer;
}
.wsh-reset:hover{ color:#9F7F50; border-bottom-color:#9F7F50; }
.wsh-filter-card:not(.has-active) .wsh-chips::before{
  content:"Geen filters actief"; color:#B7B2A9; font-size:.85rem; font-style:italic;
}
.wsh-filter-card:not(.has-active) .wsh-reset{ display:none; }

/* ---- 21.5  Mobile ---- */
@media (max-width:768px){
  .wsh-filter-card{ padding:16px 16px; border-radius:14px; }
  .wsh-filter-card .elementor-widget-sorting-widget{ margin-left:0; flex-basis:100%; }
  .wsh-filter-card .filter-sorting-wrapper{ justify-content:flex-start; }
  .wsh-filter-active{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ============================================================
   §22 — SHOP FILTER BAR · refinements  (paste after §20/§21)
   ============================================================ */

/* pills — more space between label + chevron, chevron re-centered */
.filter-container .filter-title.collapsible{ gap:10px; padding:11px 20px; }
.filter-container .filter-title.collapsible::after{
  width:8px; height:8px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.5;
}

/* option counts flow inline (fixes "10" splitting to 1/0) */
.filter-container .taxonomy-filter label > span:not(.low-group-trigger){
  display:block !important; flex:1 1 auto; min-width:0; line-height:1.35;
}
.filter-container .taxonomy-filter .label-text{ display:inline !important; }
.filter-container .taxonomy-filter .count{ display:inline !important; color:#7C797B; margin-left:1px; }
.filter-container .bpfwe-taxonomy-wrapper{ min-width:272px; max-width:340px; }

/* spread the pills evenly instead of bunching left */
.filter-container form.form-tax{ justify-content:space-between; width:100%; gap:8px; }

/* make the sort recede so the pills lead */
.wsh-filter-card .filter-sorting-wrapper select{
  border-color:transparent !important; background-color:transparent !important;
  color:#7C797B !important; font-weight:500 !important; min-width:auto !important; padding-left:6px !important;
}
.wsh-filter-card .filter-sorting-wrapper select:hover{ color:#241F21 !important; border-color:transparent !important; }
/* §23 price block */
/* price slider — both handles at full opacity (fixes the faded min handle) */
.filter-container .bpfwe-slider-handle{ opacity:1 !important; }
.filter-container .bpfwe-slider-handle::-webkit-slider-thumb{ opacity:1 !important; }
.filter-container .bpfwe-slider-handle::-moz-range-thumb{ opacity:1 !important; }

/* ============================================================
   §24 — SHOP FILTER · styled sort dropdown (replaces native select)
   ============================================================ */
.filter-sorting-wrapper select{ display:none !important; }
.wsh-sort{ position:relative; }
.wsh-sort-trigger{
  display:inline-flex; align-items:center; gap:8px; background:transparent; border:none;
  color:#7C797B !important; font-family:"Helvetica Neue",Inter,sans-serif; font-size:.9rem !important; font-weight:400 !important;
  cursor:pointer; padding:10px 4px; transition:color .2s ease;
}
.wsh-sort-trigger:hover{ color:#241F21; }
.wsh-sort-cap{ color:#B7B2A9; font-size:.8rem; }
.wsh-sort-label{ color:#241F21; font-weight:600; }
.wsh-sort-trigger::after{
  content:""; width:7px; height:7px; margin-left:2px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.6; transition:transform .2s ease;
}
.wsh-sort.open .wsh-sort-trigger::after{ transform:translateY(1px) rotate(-135deg); }
.wsh-sort-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:250; min-width:210px;
  background:#fff; border:1px solid #E8E4DC; border-radius:14px; padding:8px;
  box-shadow:0 14px 34px rgba(36,31,33,.12); display:none;
}
.wsh-sort.open .wsh-sort-menu{ display:block; }
.wsh-sort-opt{
  padding:9px 12px; border-radius:8px; font-size:.88rem !important; color:#3F3C3D !important; cursor:pointer;
  transition:background .15s ease; white-space:nowrap;
}
.wsh-sort-opt:hover{ background:#FAF8F5; }
.wsh-sort-opt.active{ color:#9F7F50; font-weight:600; background:#FAF8F5; }

/* §25 — Profielpagina's: verberg de Categorie-pill
   (de sub-type kaarten zijn hier de filter; de facet zou enkel
   kruisgetagde categorieën tonen) */
/* 
body.term-haartype .filter-container .flex-wrapper.product_cat,
body.term-huidtype .filter-container .flex-wrapper.product_cat,
body.term-verzorgingprobleem .filter-container .flex-wrapper.product_cat {
  display: none !important;
}
*/
/*
Optional also hide the page's own profile filter, since it just duplicates the cards
*/
/*
body.term-haartype .filter-container .flex-wrapper.pa_haartype,
body.term-huidtype .filter-container .flex-wrapper.pa_huidtype,
body.term-verzorgingprobleem .filter-container .flex-wrapper.pa_verzorgingsprobleem {
  display: none !important;
}
*/
/* Shop/category loop-card titles — force the small card size.
   Overrides §4's product-page title rule that leaks onto the cards.
   Only touches <h3> (the cards); the product-page <h1> title is safe. */
.woocommerce div.product h3.product_title {
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
}
/* ============================================================================
   §26 — CHECKOUT & CART (WooCommerce Blocks)  ·  site skin
   ----------------------------------------------------------------------------
   The Afrekenen / Winkelwagen pages use the WooCommerce *Blocks* checkout,
   which ignores the classic §5 styling and ships default block styles. This
   skins the block markup (.wc-block-*) to match the site: Playfair headings,
   a dark-pill place-order button, cream inputs with gold focus, gold links,
   Playfair grand total. Appearance only — nothing about how checkout works
   changes. (Verified live on the Afrekenen page.)
   Paste at the very END of your Custom CSS, before "END OF FILE".
   ============================================================================ */

/* --- Section headings (Contactgegevens / Factuuradres / Besteloverzicht / Totaal…) --- */
.wc-block-checkout .wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title,
.wc-block-cart .wc-block-components-title {
	font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif !important;
	color: #241F21 !important;
	font-weight: 500 !important;
}

/* --- Place-order button -> solid dark pill, gold on hover --- */
.wc-block-components-checkout-place-order-button {
	background: #241F21 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-family: 'Helvetica Neue','Inter',Arial,sans-serif !important;
	font-weight: 600 !important;
	transition: background .25s ease, transform .15s ease !important;
}
.wc-block-components-checkout-place-order-button:hover {
	background: #a8895a !important;
	color: #241F21 !important;
	transform: translateY(-1px) !important;
}

/* --- Inputs / selects / textareas -> site border + radius, gold focus --- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout textarea,
.wc-block-cart .wc-block-components-text-input input {
	border-radius: 10px !important;
	border-color: #e8e4dc !important;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox input:focus,
.wc-block-checkout textarea:focus {
	border-color: #a8895a !important;
	box-shadow: 0 0 0 2px rgba(168,137,90,.15) !important;
	outline: none !important;
}

/* --- Links (edit address, coupon toggle, etc.) -> gold --- */
.wc-block-checkout a:not(.wc-block-components-button),
.wc-block-components-panel__button,
.wc-block-cart a:not(.wc-block-components-button) {
	color: #9f7f50 !important;
}
.wc-block-checkout a:not(.wc-block-components-button):hover {
	color: #241F21 !important;
}

/* --- Order-summary grand total -> Playfair dark --- */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	font-family: 'Playfair Display',Georgia,serif !important;
	color: #241F21 !important;
	font-weight: 600 !important;
}

/* --- Coupon "Toepassen" button -> dark to match --- */
.wc-block-components-totals-coupon .wc-block-components-button:not(.wc-block-components-button--text) {
	background: #241F21 !important;
	color: #fff !important;
	border-radius: 8px !important;
}
/* ============================================================================
   END §26 — Checkout & Cart skin
   ============================================================================ */

/* ============================================================================
   END OF FILE
   ============================================================================ *//* End custom CSS */