/*
Theme Name: Leflite child
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/* FOOTER */
footer img {
    width: auto;
}

footer .jmw-foot-brand > img {
    filter: brightness(0) invert(1);
}

/* Topbar */

.topbar * {
    font-size: 12px;
}

@media only screen and (max-width: 991px) {
  .topbar {
    display: block !important;
  }

  /* Center the whole inner row */
  .topbar .topbar-inner {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Center the USP list items */
  .topbar .topbar-usps,
  .topbar ul {
    justify-content: center !important;
  }

  /* The shortcode block defaults to flex-end – center it too */
  .topbar .topbar-shortcode {
    justify-content: center !important;
  }
}

/* =====================================================================
   JM Woods — child theme styling.
   All colours use the custom-leftheme.json tokens (var(--primary),
   var(--secondary), var(--white), var(--gray), …). This file only adds
   "a little CSS" on top of the theme's native blocks and components.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Header — under-menu bar: regular menu items on the left, the
   "Ontwerp je eigen plank" CTA (menu-item-has-button) flush right.
   Only nudges the button; does NOT widen the row (the theme flips to
   the mobile menu the moment the under-menu wraps to a second line).
   --------------------------------------------------------------------- */
/* The theme makes every .nav-holder display:inline-flex (shrinks to content),
   so widen the whole chain to the container width — otherwise margin-left:auto
   on the CTA has no free space and the button sticks to the menu. */
.nav-holder-under-menu {
    display: flex;
    width: 100%;
}

.nav-holder-under-menu > .main-navigation-under {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-holder-under-menu .main-nav-menu {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.nav-holder-under-menu .main-nav-menu .menu-item-has-button {
    margin-left: auto;
}

/* Verberg het standaard WooCommerce-aantal bij individueel verkochte producten */
.single-product .product.sold-individually .quantity {
    display: none !important;
}

/* ---------------------------------------------------------------------
   Typography — semantic tags driven by the theme's type scale.
   h6 is the theme "subtitle"; we give it the design's eyebrow pill.
   --------------------------------------------------------------------- */
/* The type scale only ever reaches <p> (`p { font-size: var(--p-size) }`);
   body itself carries no font-size, so every other text element (li, td, dd,
   figcaption…) fell through to the browser's 16px while paragraphs sat at
   --p-size. That is why list items rendered larger than the copy around them.
   Anchoring body to the token makes one value drive all body copy, so the
   scale stays consistent if --p-size is ever changed again. */
body {
    font-size: var(--p-size);
}
.lef-section h6 {
    display: inline-block;
    margin: 0 0 16px;
    padding: 8px 14px;
    border: 1px solid var(--gray);
    border-radius: 100px;
    background: var(--white);
    color: var(--secondary);
    font: 600 13px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.lef-section h1 {
    letter-spacing: -.02em;
}

.lef-section h2 {
    letter-spacing: -.01em;
}

.jmw-stars {
    color: var(--yellow);
    letter-spacing: 2px;
}
.remove-br br {
    display: none;
}
/* Hero rating — built-in [review_information] output laid out inline. */
.jmw-hero-rating {
    margin-top: 24px;
    color: var(--darkgray);
    font: 500 14px var(--body-font), sans-serif;
}

.jmw-hero-rating .review-information .review-information-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font: 500 14px var(--body-font), sans-serif;
}

.jmw-hero-rating .avarage-stars {
    color: var(--yellow);
    letter-spacing: 2px;
}

.jmw-hero-rating .avarage-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jmw-hero-rating .rating-value {
    font-weight: 600;
    color: var(--black);
}

.jmw-hero-rating .review-information-based-on {
    margin-top: 0;
    color: var(--darkgray);
}

.jmw-hero-rating .review-information-based-on::before {
    content: "·";
    margin-right: 6px;
}

/* ---------------------------------------------------------------------
   Hero product card — new component rendered through the acf/featured
   ("uitlichten") block. (No data-component attr so the theme's
   hide-until-JS rule does not hide it.)
   --------------------------------------------------------------------- */
.featured:has(.card-hero-product) {
    height: 100%;
}

.featured:has(.card-hero-product) .row {
    --bs-gutter-x: 0;
    height: 100%;
    margin: 0;
}

.featured:has(.card-hero-product) [class*="col-lg"] {
    padding: 0;
}

.card-hero-product {
    display: block;
    position: relative;
    min-height: 480px;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--primary);
}

.card-hero-product .hero-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 14px;
    object-fit: cover;
}

.card-hero-product .hero-badge {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 100px;
    background: var(--white);
    color: var(--primary);
    font: 700 13px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.card-hero-product .hero-badge .icon {
    color: var(--secondary);
}

.card-hero-product .hero-overlay {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--white);
    text-decoration: none;
}

/* The overlay is one big <a>, and the theme underlines every non-button link
   inside #main (`#main a:not(.btn):not(.button)`, specificity 1-2-1) — which
   beats the plain `text-decoration:none` above and struck a line through the
   whole card. Re-assert it with the #id in play. The underline paints from the
   <a> itself, so the title/price spans cannot opt out on their own. */
.card-hero-product a.hero-overlay,
#main .card-hero-product a.hero-overlay,
#main .card-hero-product a.hero-overlay:hover {
    text-decoration: none;
}

.card-hero-product .hero-overlay-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-hero-product .hero-overlay-title {
    color: var(--primary);
    font: 700 16px/1.15 var(--heading-font), sans-serif;
}

.card-hero-product .hero-overlay-price {
    color: var(--secondary);
    font: 600 15px/1 var(--heading-font), sans-serif;
}

.card-hero-product .hero-overlay-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 6px;
    background: var(--secondary);
    color: var(--white);
    font: 600 14px/1 var(--heading-font), sans-serif;
}

/* ---------------------------------------------------------------------
   USP strip — a bg-primary section ("row") of 4 columns, each an
   acf/icon block + an acf/text-content block.
   --------------------------------------------------------------------- */
.lef-section.bg-primary [class*="col-lg"]:has(.icon-outer) {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lef-section.bg-primary .icon-outer {
    flex: none;
    margin: 0;
    padding: 0;
}

.lef-section.bg-primary .icon-outer .icon {
    color: var(--yellow);
    font-size: 24px;
}

.lef-section.bg-primary [class*="col-lg"] p {
    margin: 0;
}

.lef-section.bg-primary strong {
    display: block;
    color: var(--white);
    font: 600 15px/1.2 var(--heading-font), sans-serif;
}

.lef-section.bg-primary small {
    color: var(--gray);
    font: 400 13px/1.3 var(--body-font), sans-serif;
}

/* USP rating tile — built-in [review_information] value styled like the
   bold tile titles (stars/based-on are disabled on this shortcode call). */
.lef-section.bg-primary .jmw-usp-rating .rating-value {
    display: block;
    color: var(--white);
    font: 600 15px/1.2 var(--heading-font), sans-serif;
}

/* ---------------------------------------------------------------------
   Reviews — heading + acf/featured block (reviews CPT, card-reviews).
   --------------------------------------------------------------------- */
.card-reviews, .card {
    background-color: white!important;
}
.card-reviews i{
    color: var(--yellow);
}
.jmw-reviews-head {
    margin-bottom: 36px;
    text-align: center;
}

.jmw-reviews-head h2 {
    margin: 0 0 12px;
}

/* Built-in [review_information] under the reviews heading, centered. */
.jmw-reviews-head .review-information .review-information-header {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 400;
    font-size: 16px;
}

.jmw-reviews-head .avarage-stars {
    color: var(--yellow);
    font-size: 20px;
    letter-spacing: 0px;
}

.jmw-reviews-head .avarage-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--darkgray);
    font: 400 16px var(--body-font), sans-serif;
}

.jmw-reviews-head .rating-value {
    font-weight: 600;
    color: var(--black);
}

.card-reviews {
    height: 100%;
    padding: 24px;
    border: 1px solid var(--gray);
    border-radius: 10px;
    background: var(--white);
}

.card-reviews .review-intro {
    display: flex;
    flex-direction: column;
}

.card-reviews .review-intro h4 {
    order: 2;
    margin: 0 0 8px;
    color: var(--black);
    font: 600 14px/1.2 var(--heading-font), sans-serif;
}

.card-reviews .star-count {
    margin-bottom: 10px;
    color: var(--yellow);
    font-size: 15px;
    letter-spacing: 2px;
}

.card-reviews .excerpt-holder {
    margin: 0 0 12px;
    color: var(--black);
    font: 400 15px/1.6 var(--body-font), sans-serif;
}

/* ---------------------------------------------------------------------
   WooCommerce product loop cards (card-product component).
   --------------------------------------------------------------------- */
.card-product {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--gray);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}
.card-product .loop-item-actions-wrapper {
    margin-top: 10px!important;
}

.card-product .image-outer {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray);
}

.card-product .image-holder {
    width: 100%;
    height: 100%;
    padding-bottom: 90%!important;
}

.card-product .image-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--yellow);
    color: var(--black);
    font: 600 11px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.card-product .content-outer {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 0;
}

.card-product .content-outer h2,
.card-product .content-outer h3,
.card-product .woocommerce-loop-product__title {
    /* min-height: 40px; */
    margin: 0;
    padding: 0;
    color: var(--black);
    font: 600 15px/1.35 var(--heading-font), sans-serif !important;
}

.card-product .product-excerpt,
.card-product .loop-product-rating {
    display: none;
}

/* price (leflite product-pricing component) */
.card-product .product-pricing {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.card-product .product-pricing .price {
    color: var(--primary);
    font: 700 17px/1 var(--heading-font), sans-serif;
}

.card-product .product-pricing .price.regular-price {
    order: 2;
    color: var(--darkgray);
    font: 400 14px/1 var(--body-font), sans-serif;
    text-decoration: line-through;
}

.card-product .product-pricing .price.sale-price {
    order: 1;
}

.card-product .product-pricing .from-price {
    margin-right: -4px;
    color: var(--darkgray);
    font: 400 13px var(--body-font), sans-serif;
}

/* price (WooCommerce default del/ins fallback) */
.card-product .price {
    margin-top: auto;
    color: var(--primary);
    font: 700 17px/1 var(--heading-font), sans-serif;
}

.card-product .price del {
    color: var(--darkgray);
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
}

.card-product .price ins {
    font-weight: 700;
    text-decoration: none;
}

/* actions — hide the qty stepper, full-width outline "In winkelwagen" */
.card-product .loop-item-actions-wrapper {
    margin-top: 10px;
    padding: 16px;
}

.card-product .quantity-holder,
.card-product .qty-lef-wrapper {
    display: none !important;
}

.card-product .loop-item-actions-wrapper .button,
.card-product .loop-item-actions-wrapper a.button,
.card-product .loop-item-actions-wrapper .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 0;
    border: 1.5px solid var(--secondary) !important;
    border-radius: 6px;
    background: var(--white) !important;
    color: var(--secondary) !important;
    font: 600 14px/1 var(--heading-font), sans-serif;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.card-product .loop-item-actions-wrapper .button:hover,
.card-product .loop-item-actions-wrapper a.button:hover,
.card-product .loop-item-actions-wrapper .btn:hover {
    background: var(--secondary) !important;
    color: var(--white) !important;
}

/* variable-product "Samenstellen" button keeps the filled look */
.card-product .configure_product_button {
    background: var(--secondary) !important;
    color: var(--white) !important;
}

/* ---------------------------------------------------------------------
   Category cards (featured-taxonomy) — sub-categories as pills.
   --------------------------------------------------------------------- */
.card-taxonomy-term .child-terms {
    display: flex;
    flex-direction: unset!important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.card-taxonomy-term .child-term {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border: 0;
    border-radius: 100px;
    background: var(--gray);
    color: var(--secondary);
    font: 600 13px/1 var(--heading-font), sans-serif;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.card-taxonomy-term .child-term .icon {
    display: none;
}

.card-taxonomy-term .child-term:hover {
    background: var(--secondary);
    color: var(--white);
}

/* =====================================================================
   WooCommerce archive filter sidebar — matched to the JM Woods design.
   The theme wraps every filter in a tan card; the design wants one flat
   panel on --white with hairline dividers, a "Filters" master heading,
   custom checkboxes and a --secondary price slider. Non-token colours
   below were sampled straight from the design mockup.
   ===================================================================== */
.lef-webshop .archive-filter {
    --jmw-filter-line: #E4DCD0;    /* hairline dividers + empty slider track */
    --jmw-filter-muted: #9A8C7E;   /* section labels + item counts */
    --jmw-checkbox-border: #8A8A8A;
    --jmw-input-border: #D9CFC0;
}

/* "Filters" master heading (sliders icon + label), as the first section. */
.lef-webshop .archive-filter.filter-holder::before {
    content: "Filters";
    display: flex;
    align-items: center;
    min-height: 26px;
    padding-left: 32px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232F5D59'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cline%20x1='3'%20y1='8'%20x2='21'%20y2='8'/%3E%3Cline%20x1='3'%20y1='16'%20x2='21'%20y2='16'/%3E%3Ccircle%20cx='15'%20cy='8'%20r='3'%20fill='%23FBF8F3'/%3E%3Ccircle%20cx='9'%20cy='16'%20r='3'%20fill='%23FBF8F3'/%3E%3C/svg%3E") left center / 22px 22px no-repeat;
    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}

/* Flatten the tan cards into one continuous panel. */
.lef-webshop .archive-filter .filter-item {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Hairline divider between sections — on the widget wrapper (a true sibling),
   so :last-child excludes only the final section. Each .filter-item is the
   sole child of its aside, so a divider on .filter-item would never show. */
.lef-webshop .archive-filter aside.widget {
    border-bottom: 1px solid var(--gray);
    padding-bottom: 20px;
}

.lef-webshop .archive-filter aside.widget:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Section labels: small, muted, uppercase. */
.lef-webshop .archive-filter .filter-title h4 {
    font-family: var(--heading-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--jmw-filter-muted);
}

/* The design shows no collapse chevrons on desktop. */
@media (min-width: 992px) {
    .lef-webshop .archive-filter .filter-title {
        cursor: default;
    }
    .lef-webshop .archive-filter .filter-title .open-switcher {
        display: none;
    }
}

/* Rows: roomier, dark labels, count pushed to the right edge.
   `.filter-item` is included so these out-specify the theme's own
   `.filter-item .filter-elements li label` rule (which loads from a later
   webpack chunk and would otherwise win the tie and reset the spacing). */
.lef-webshop .archive-filter .filter-item .filter-elements li label {
    gap: 12px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--black);
}

/* Extra breathing room between top-level filter rows. */
.lef-webshop .archive-filter .filter-item .filter-elements .filter-element {
    margin-bottom: 15px;
}

.lef-webshop .archive-filter .filter-item .filter-elements li label > span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lef-webshop .archive-filter .filter-count,
.lef-webshop .archive-filter .count {
    color: var(--jmw-filter-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Custom checkboxes / radios: white fill, thin border, --secondary when on. */
.lef-webshop .archive-filter input[type="checkbox"].checkbox,
.lef-webshop .archive-filter input[type="radio"].radio {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--jmw-checkbox-border);
    border-radius: 5px;
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.lef-webshop .archive-filter input[type="radio"].radio {
    border-radius: 50%;
}

.lef-webshop .archive-filter input[type="checkbox"].checkbox:checked,
.lef-webshop .archive-filter input[type="radio"].radio:checked {
    background: var(--secondary);
    border-color: var(--secondary);
}

.lef-webshop .archive-filter input[type="radio"].radio:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

.lef-webshop .archive-filter input[type="checkbox"].checkbox:focus-visible,
.lef-webshop .archive-filter input[type="radio"].radio:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Price slider — --secondary fill & handles on a light track.
   The rendered markup uses lowercase `noui-*` classes (not standard
   camelCase `noUi-*`) — which is also why the theme's own slider rules
   never land and the raw nouislider default teal shows through. */
.lef-webshop .archive-filter .price-slider-holder .price-slider {
    height: 4px;
    border: 0;
    box-shadow: none;
    background: var(--jmw-filter-line);
}

.lef-webshop .archive-filter .price-slider-holder .price-slider .noui-connect {
    background: var(--secondary);
}

.lef-webshop .archive-filter .price-slider-holder .price-slider .noui-handle {
    width: 16px;
    height: 16px;
    right: -8px;
    top: -6px;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    background: var(--secondary);
    cursor: pointer;
}

.lef-webshop .archive-filter .price-slider-holder .price-slider .noui-handle::before,
.lef-webshop .archive-filter .price-slider-holder .price-slider .noui-handle::after {
    display: none;
}

/* Only reveal the value tooltip while a handle is being dragged. */
.lef-webshop .archive-filter .price-slider-holder .price-slider .noui-handle:not(.noui-active) .noui-tooltip {
    display: none;
}

.lef-webshop .archive-filter .price-slider-holder .price-slider .noui-tooltip {
    border: 0;
    background: var(--secondary);
    color: var(--white);
    font-size: 12px;
    padding: 2px 6px;
}

/* Price inputs — white boxes, light border, with a dash sitting between them. */
.lef-webshop .archive-filter .price-slider-values {
    position: relative;
    align-items: center;
    gap: 20px;
}

.lef-webshop .archive-filter .price-slider-values::after {
    content: "–";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--jmw-filter-muted);
    pointer-events: none;
}

.lef-webshop .archive-filter .price-slider-values input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
}

.lef-webshop .archive-filter .price-slider-values input,
.lef-webshop .archive-filter .filter-item .form input,
.lef-webshop .archive-filter .filter-item select {
    background: #fff;
    border: 1px solid var(--jmw-input-border);
    border-radius: var(--general-border-radius);
    color: var(--black);
}

/* ---------------------------------------------------------------------
   WooCommerce shop/archive — warm background + sale badge.
   --------------------------------------------------------------------- */
/* Paint the whole shop section --white (#FBF8F3); the grid otherwise sits
   on the body's pure #fff, a touch colder than the design. */
.lef-webshop section.products {
    background-color: var(--white);
}

/* Sale badge → yellow pill pinned to the card's top-left corner
   (the card is position:relative, so it anchors over the image). */
.lef-webshop .card-product .product-on-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    padding: 2px 10px;
    background-color: var(--yellow);
    color: var(--black);
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
}

/* Shop toolbar above the grid: result count (left) + sort (right), with the
   same hairline divider used between the sidebar widgets. */
.lef-webshop .jmw-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray);
}

.lef-webshop .jmw-shop-count {
    color: var(--darkgray);
    font-size: 15px;
}

.lef-webshop .jmw-shop-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.lef-webshop .jmw-shop-sort-label {
    color: var(--darkgray);
    font-size: 15px;
}

.lef-webshop .jmw-shop-sort-select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    padding: 0 40px 0 16px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%20fill='none'%20stroke='%232F5D59'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%201l5%205%205-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--gray);
    border-radius: var(--general-border-radius);
    color: var(--black);
    font-size: 15px;
    font-family: var(--heading-font);
    cursor: pointer;
}

.lef-webshop .jmw-shop-sort-select:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Sort moved to the toolbar → hide the now-empty sidebar widget aside
   (render_block emptied it). Exclude the reset-filter widget, which has no
   .filter-item either but must stay visible. */
.lef-webshop .archive-filter aside.widget:not(:has(.filter-item)):not(:has(.reset-filter-holder)) {
    display: none;
}

/* ---------------------------------------------------------------------
   Single product page
   --------------------------------------------------------------------- */
.jmw-product-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px;
    color: var(--darkgray);
    font: 400 13px var(--body-font), sans-serif;
}

.jmw-product-usps span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.jmw-product-usps .icon {
    color: var(--succes);
}

.single-product .price .price-suffix {
    color: var(--darkgray);
    font: 400 13px var(--body-font), sans-serif;
}

/* Hide the leflite sticky add-to-cart bar + the TM EPO popup/floating
   duplicates (theme sets .fixed-product-bar{display:flex!important}, so
   out-specify it; the popup uses #id + .appear). */
#tm-section-pop-up,
.tm-section-pop-up,
.tm-extra-product-options.flasho,
.tm-extra-product-options-totals,
body .fixed-product-bar,
.fixed-product-bar.fixed-product-bar {
    display: none !important;
}

/* TM Extra Product Options — compact personalisation box in the summary. */
.product-summary-inner .tm-extra-product-options {
    margin: 22px 0;
    padding: 22px;
    border: 1px solid var(--gray);
    border-radius: 12px;
    background: var(--white);
}

.tm-extra-product-options .tm-extra-product-options-field {
    margin: 0 0 18px;
}

.tm-extra-product-options .tm-extra-product-options-field:last-child {
    margin-bottom: 0;
}

.tm-extra-product-options .tc-epo-element-label-text {
    display: inline-block;
    margin: 0 0 8px;
    color: var(--black);
    font: 600 14px/1.3 var(--heading-font), sans-serif !important;
}

.tm-extra-product-options .tm-epo-required {
    color: var(--error);
}

/* hide the per-option "€0,00" */
.tm-extra-product-options .tc-price-wrap,
.tm-extra-product-options .tc-price {
    display: none !important;
}

/* text fields */
.tm-element-ul-textfield .tm-epo-field-label {
    display: block;
    margin: 0;
}

.tm-extra-product-options input[type="text"] {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--gray);
    border-radius: 6px;
    background: var(--white);
    color: var(--black);
    font: 400 15px var(--body-font), sans-serif;
    box-sizing: border-box;
}

/* "Aantal kinderen" radios as a row of buttons (override TM EPO
   fullwidth-ul / tm-per-row which stack them). */
.tm-element-ul-radio {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-element-ul-radio > li.tmcp-field-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 46px;
    max-width: none !important;
    margin: 0;
    padding: 0;
    float: none !important;
}

.tm-element-ul-radio li .tmcp-field-wrap-inner,
.tm-element-ul-radio li .tc-field-label-wrap,
.tm-element-ul-radio li .tc-label-wrap {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.tm-element-ul-radio li .tm-epo-field-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 6px;
    border: 1.5px solid var(--gray);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.tm-element-ul-radio li .tm-epo-field-label > * {
    margin: 0;
}

.tm-element-ul-radio .tm-epo-field-label .tc-epo-element-label-text {
    margin: 0;
    font-size: 15px !important;
}

/* hide the actual radio dot — the label is the button */
.tm-element-ul-radio .tc-input-wrap {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* selected button */
.tm-element-ul-radio .tmcp-field-wrap.tmcp-active .tm-epo-field-label,
.tm-element-ul-radio .tc-active .tm-epo-field-label,
.tm-element-ul-radio .tmcp-field-wrap:has(input:checked) .tm-epo-field-label {
    border-color: var(--secondary);
    background: var(--secondary);
}

.tm-element-ul-radio .tmcp-field-wrap.tmcp-active .tc-epo-element-label-text,
.tm-element-ul-radio .tmcp-field-wrap:has(input:checked) .tc-epo-element-label-text {
    color: var(--white) !important;
}

/* ---------------------------------------------------------------------
   Footer — brand column, nav-menu widgets, newsletter, socials.
   --------------------------------------------------------------------- */
#footer .jmw-foot-brand p,
#footer .jmw-foot-contact p {
    max-width: 280px;
    margin: 14px 0 0;
    color: var(--gray);
    font: 400 14px/1.7 var(--body-font), sans-serif;
}

#footer .jmw-foot-contact p {
    margin-top: 0;
}

#footer .jmw-foot-brand a,
#footer .jmw-foot-contact a {
    color: var(--gray);
    text-decoration: none;
}

.jmw-foot-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.jmw-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: var(--gray);
    font-size: 17px;
}

/* icomoon icons carry a default margin-right; remove it so the glyph centers */
.jmw-foot-social .icon {
    margin-right: 0;
}

/* footer nav menus (real menus via widgets) — plain text links, no bullets */
#footer .widget_nav_menu ul,
#footer .widget_nav_menu ul.menu {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer .widget_nav_menu li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

#footer .widget_nav_menu a {
    color: var(--gray);
    font: 400 14px/1.4 var(--body-font), sans-serif;
    text-decoration: none;
}

#footer .widget_nav_menu a:hover {
    color: var(--white);
}

#footer .widget-title {
    margin-bottom: 16px;
    color: var(--white);
    font: 700 14px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---------------------------------------------------------------------
   Single product gallery — large square image + thumbnail strip.
   leflite uses FlexSlider: .flex-viewport is the main image and the
   <ol> is the thumbnail control-nav.
   --------------------------------------------------------------------- */
.single-product-gallery-holder .gallery-control-buttons {
    display: none;
}

.woocommerce-product-gallery {
    width: 100% !important;
}

.woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    max-height: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: var(--gray);
    overflow: hidden;
}

/* FlexSlider lays the slides side by side and sizes them with inline styles;
   force the active slide, its link and image to fill the square viewport. */
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    height: 100% !important;
}

.woocommerce-product-gallery .flex-viewport img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 12px;
}

.woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
    overflow: visible;
}

.woocommerce-product-gallery ol li {
    flex: 0 0 auto;
    margin: 0;
}

.woocommerce-product-gallery ol li img {
    width: 72px;
    height: 72px;
    border: 2px solid transparent;
    border-radius: 8px;
    object-fit: cover;
    opacity: .7;
    cursor: pointer;
    transition: opacity .15s, border-color .15s;
}

.woocommerce-product-gallery ol li img.flex-active,
.woocommerce-product-gallery ol li img:hover {
    border-color: var(--secondary);
    opacity: 1;
}

/* =====================================================================
   Single product — "Productinformatie" block.
   Replaces the theme's product-description + attributes sections with a
   short-description intro and a flat accordion (Productdetails /
   Verzending & levering / Ruilen & retourneren) on the warm --gray
   background. Markup lives in the child override
   components/_woocommerce/single-product/single-product.php; the toggle
   reuses the parent accordion-item.js (.opened class), so only styling
   is defined here. All display rules are self-contained (high enough
   specificity) so they never depend on the parent accordion CSS chunk.
   ===================================================================== */
.block-product-information {
    --pi-line: #E4DCD0;          /* hairline dividers, matches filter/design */
    background: var(--gray);
    padding: 90px 0;
}

/* Centered, narrower reading column — as in the design. */
.block-product-information .product-information {
    max-width: 760px;
    margin: 0 auto;
}

.block-product-information > .container > .product-information > h2 {
    margin: 0 0 26px;
    color: var(--primary);
}

/* Flatten the theme's card-style accordion into hairline-separated rows. */
.block-product-information .product-information-accordions {
    display: block;
    border-bottom: 1px solid var(--pi-line);
}

.block-product-information .accordion {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--pi-line);
    border-radius: 0;
}

.block-product-information .accordion .accordion-title {
    padding: 22px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    font-family: var(--heading-font), sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--primary);
}

/* Show/hide — self-contained, so it works regardless of chunk load order. */
.block-product-information .accordion .accordion-content {
    display: none;
    border-top: 1px solid var(--pi-line);
    padding: 0;
}

.block-product-information .accordion.opened .accordion-content {
    display: block;
}

.block-product-information .accordion .accordion-content .content-wrapper {
    padding: 18px 0 26px;
    font: var(--p-font-weight, 400) var(--p-size, 17px) / var(--p-line-height, 1.7) var(--body-font), sans-serif;
}

.block-product-information .accordion .accordion-content .content-wrapper > *:first-child {
    margin-top: 0;
}

.block-product-information .accordion .accordion-content .content-wrapper > *:last-child {
    margin-bottom: 0;
}

/* Long product description lives in the first accordion panel — tame its
   headings/lists so the imported marketing copy reads cleanly on beige. */
.block-product-information .accordion .accordion-content .content-wrapper :is(h1, h2, h3, h4, h5, h6) {
    margin: 22px 0 8px;
    color: var(--primary);
    font-family: var(--heading-font), sans-serif;
    line-height: 1.25;
}

.block-product-information .accordion .accordion-content .content-wrapper :is(h1, h2) {
    font-size: 20px;
}

.block-product-information .accordion .accordion-content .content-wrapper :is(h3, h4, h5, h6) {
    font-size: 17px;
}

.block-product-information .accordion .accordion-content .content-wrapper p {
    margin: 0 0 14px;
}

.block-product-information .accordion .accordion-content .content-wrapper ul,
.block-product-information .accordion .accordion-content .content-wrapper ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.block-product-information .accordion .accordion-content .content-wrapper li {
    margin: 0 0 6px;
}

.block-product-information .accordion .accordion-content .content-wrapper a {
    color: var(--primary);
    text-decoration: underline;
}

.block-product-information .accordion .accordion-content .content-wrapper strong {
    color: var(--primary);
}

.block-product-information .product-details-inline {
    margin: 0;
}

/* CSS-drawn + / − toggle (no icon-minus glyph exists in the icon font). */
.block-product-information .accordion .accordion-toggle {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.block-product-information .accordion .accordion-toggle::before,
.block-product-information .accordion .accordion-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--primary);
    transform: translate(-50%, -50%);
}

.block-product-information .accordion .accordion-toggle::before {
    width: 15px;
    height: 1.5px;
}

.block-product-information .accordion .accordion-toggle::after {
    width: 1.5px;
    height: 15px;
}

/* Opened → vertical bar hidden, leaving a minus. */
.block-product-information .accordion.opened .accordion-toggle::after {
    display: none;
}

@media only screen and (max-width: 991px) {
    .block-product-information {
        padding: 40px 0;
    }

    .block-product-information .product-information {
        max-width: 100%;
    }

    .block-product-information .product-information-intro {
        margin-bottom: 32px;
    }

    .block-product-information .accordion .accordion-title {
        font-size: 17px;
        padding: 20px 0;
    }
}

/* ---------------------------------------------------------------------
   Single product header — white background, tight 20px vertical padding.
   Overrides the parent single-product.scss (background: var(--gray)); the
   extra `body` in the selector wins over the parent's
   `.single-main-product .block-product-header` regardless of chunk load order.
   --------------------------------------------------------------------- */
body .single-main-product .block-product-header {
    background: var(--white);
    padding: 20px 0;
}

/* Breadcrumbs is a <span> in the theme; make it a block with its own spacing. */
#breadcrumbs {
    display: block;
    margin-bottom: 20px;
    font: 400 13px/1.5 var(--body-font), sans-serif;
    color: #9A8C7E;               /* separators + links: muted taupe (design) */
}

#breadcrumbs a {
    color: #9A8C7E;
    text-decoration: none;
}

#breadcrumbs a:hover {
    text-decoration: underline;
}

/* Current page (the non-link span at the end) in dark, like the design. */
#breadcrumbs span:not(:has(a)) {
    color: var(--black);
}

/* =====================================================================
   Product hero — matched to the JM Woods product design.
   Title / price / rating sit on the cream section background; only the
   configure + purchase controls form a white card. Colours map 1:1 to the
   design system tokens (--primary brown, --secondary green, --gray beige).
   ===================================================================== */

/* Drop the theme's white summary card — content sits on the cream section. */
body .single-main-product .block-product-header .product-summary-inner {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Title */
body .single-main-product .block-product-header .product_title {
    margin: 0 0 12px;
    font: 700 34px/1.15 var(--heading-font), sans-serif;
    letter-spacing: -0.01em;
    color: var(--primary);
}

/* Price */
body .single-main-product .block-product-header .product-pricing .price,
body .single-main-product .block-product-header .product-pricing .amount {
    font: 700 28px/1 var(--heading-font), sans-serif;
    color: var(--primary);
}

body .single-main-product .block-product-header .price-suffix {
    font: 400 13px var(--body-font), sans-serif;
    color: #9A8C7E;
}

/* Stock line isn't part of the design — hide it in the hero. The
   pricing-and-stock component forces display:flex, so !important is needed. */
body .single-main-product .block-product-header .stock {
    display: none !important;
}

/* Short description / subtitle under the title.
   `.product-summary-inner` is in the selector on purpose: the parent sets
   `margin-bottom: 33px` at 4 classes deep, which out-specified the shorthand
   here — so the intended bottom margin never actually landed. */
body .single-main-product .block-product-header .product-summary-inner .woocommerce-product-details__short-description {
    margin: 8px 0 18px;
    font: 400 16px/1.5 var(--body-font), sans-serif;
    color: #6B5D50;
}

/* Summary vertical rhythm — the stack ran title →12→ short description →33→
   price →36→ cart, which read as disconnected blocks. Pull the two large gaps
   back to a single 18px step (14px on mobile). The price margin and the cart's
   own margin-top collapse together, so both are set to the same value to keep
   the step predictable. */
body .single-main-product .block-product-header .pricing-and-stock {
    margin-bottom: 18px;
}

/* Configure block: EPO options become the white purchase card. */
body .single-main-product .block-product-header .tc-extra-product-options {
    margin: 24px 0 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #E4DCD0;
    border-radius: 12px;
}

/* Field label — the real element is h3.tm-epo-element-label. Its text span
   carries an 8px bottom margin and the required-* stretches the row to 28px,
   which is the gap the design doesn't want. Tighten all three. */
body .single-main-product .block-product-header .tm-epo-element-label {
    margin: 0 0 4px;
    padding: 0;
    font: 600 14px/1.25 var(--heading-font), sans-serif;
    color: var(--black);
}

body .single-main-product .block-product-header .tm-epo-element-label .tc-epo-element-label-text {
    margin: 0;
    line-height: 1.25;
}

body .single-main-product .block-product-header .tm-epo-element-label .tm-epo-required {
    line-height: 1.25;
}

/* Required-field error message ("Dit veld is verplicht.") — tighten the roomy
   12.8px top/bottom margins so it sits close under its select. */
body .single-main-product .block-product-header label.tm-error {
    margin: 4px 0 0;
    line-height: 1.3;
}

/* Inputs & selects — smaller than the theme default, light border + warm fill
   like the design (was padding 20px 16px with a dark #2A2420 border). */
body .single-main-product .block-product-header .tm-extra-product-options .tmcp-field {
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    font: 400 15px var(--body-font), sans-serif;
    color: var(--black);
    background-color: #FCFAF6;
    border: 1px solid #D9CFC0;
    border-radius: 6px;
}

/* Tighten the vertical rhythm between fields inside the card. */
body .single-main-product .block-product-header .tm-extra-product-options .tmcp-field-wrap {
    margin-top: 0;
}

/* Cart form: EPO + USP take full width, quantity + button share one row.
   :not(.variations_form) raises specificity above the theme's own
   .cart:not(.variations_form) rule (which forces flex-direction:column). */
body .single-main-product .block-product-header form.cart:not(.variations_form) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    /* gap:0 — the EPO totals wrapper (#tm-epo-totals) is empty (0px) until an
       option changes the price, and a flex gap would still reserve space on
       both sides of it. Spacing is applied per visible item instead, so the
       empty totals block adds nothing. */
    gap: 0;
    /* Matches .pricing-and-stock's bottom margin — the two collapse together. */
    margin-top: 18px;
}

body .single-main-product .block-product-header form.cart > .tc-extra-product-options,
body .single-main-product .block-product-header form.cart > .tc-totals-form {
    flex: 1 0 100%;
}

/* Empty totals wrapper contributes no space; when TM EPO fills it, it shows. */
body .single-main-product .block-product-header form.cart > .tc-totals-form {
    margin: 0;
    padding: 0;
}

/* #tm-epo-totals keeps 16px top/bottom padding even while the total is hidden
   (display:none inner), which reserved ~32px of empty space. Zero it — TM EPO
   sets it via an ID rule, so the override needs the ID to win. */
body .single-main-product .block-product-header #tm-epo-totals {
    padding: 0;
}

body .single-main-product .block-product-header form.cart > .quantity {
    flex: 0 0 auto;
    margin: 0;
}

body .single-main-product .block-product-header form.cart > .single_add_to_cart_button {
    flex: 1 1 auto;
    margin: 0 0 0 14px;
}

/* The quantity + button row aligns at the same top (both margin-top:0); the
   spacing from the EPO options card lives on the card's bottom instead, so
   simple products (no card) don't get a phantom offset. */
body .single-main-product .block-product-header form.cart:not(.variations_form) > .tc-extra-product-options {
    margin-bottom: 20px;
}

body .single-main-product .block-product-header form.cart > .jmw-product-usps {
    flex: 1 0 100%;
    margin: 14px 0 0;
}

/* Quantity stepper — white, bordered, matching the design. */
body .single-main-product .block-product-header form.cart .quantity {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid #D9CFC0;
    border-radius: 6px;
}

body .single-main-product .block-product-header form.cart .quantity .minus,
body .single-main-product .block-product-header form.cart .quantity .plus {
    width: 46px;
    height: 52px;
    border: none;
    background: #fff;
    font: 600 22px var(--heading-font), sans-serif;
    color: var(--primary);
    cursor: pointer;
}

body .single-main-product .block-product-header form.cart .quantity input.qty {
    width: 76px;
    height: 52px;
    text-align: center;
    border: none;
    background: #fff;
    font: 600 17px var(--heading-font), sans-serif;
    color: var(--black);
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Add-to-cart button — green, matching the design. */
body .single-main-product .block-product-header .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 28px;
    border: none;
    border-radius: 6px;
    background: var(--secondary);
    color: var(--white);
    font: 700 17px var(--heading-font), sans-serif;
}

/* USP line. */
body .single-main-product .block-product-header .jmw-product-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 6px;
    font: 400 13px var(--body-font), sans-serif;
    color: #6B5D50;
}

body .single-main-product .block-product-header .jmw-product-usps .icon {
    color: #3F7D5A;
}

/* =====================================================================
   Variable products — mirror the EPO configure card. WooCommerce renders
   attributes as `.variations` (label + <select>) and the buy controls as
   `.woocommerce-variation-add-to-cart`. Give them the same white card,
   input styling and quantity/button row as the EPO products above.
   (The .quantity stepper and .single_add_to_cart_button styles already
   apply here — they are scoped to `form.cart .quantity` / the button class,
   which the variations form also matches.)
   ===================================================================== */

/* Attributes block → white purchase card. */
body .single-main-product .block-product-header .variations {
    margin: 24px 0 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #E4DCD0;
    border-radius: 12px;
}

/* Attribute labels — compact, block, matching the field labels. */
body .single-main-product .block-product-header .variation-label {
    display: block;
    margin: 0 0 4px;
    font: 600 14px/1.25 var(--heading-font), sans-serif;
    color: var(--black);
}

/* Attribute selects/inputs — smaller, light border + warm fill like the design
   (was padding 20px 16px with a dark #2A2420 border). */
body .single-main-product .block-product-header .variations .options select,
body .single-main-product .block-product-header .variations .options input {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    font: 400 15px var(--body-font), sans-serif;
    color: var(--black);
    background-color: #FCFAF6;
    border: 1px solid #D9CFC0;
    border-radius: 6px;
}

/* Buy controls: quantity + button on one row, USP full width — like the EPO
   form. Beats the theme's `.woocommerce-variation-add-to-cart{flex-direction:
   column}` via the deeper scope. */
body .single-main-product .block-product-header .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-top: 20px;
}

body .single-main-product .block-product-header .woocommerce-variation-add-to-cart > .quantity {
    flex: 0 0 auto;
    margin: 0;
}

body .single-main-product .block-product-header .woocommerce-variation-add-to-cart > .single_add_to_cart_button {
    flex: 1 1 auto;
    margin: 0 0 0 14px;
}

body .single-main-product .block-product-header .woocommerce-variation-add-to-cart > .jmw-product-usps {
    flex: 1 0 100%;
    margin: 14px 0 0;
}

/* Variation + EPO product: the EPO options card renders INSIDE
   .woocommerce-variation-add-to-cart (as a full-width flex item right above the
   quantity/button row), with no bottom margin — so it sat flush against them.
   Give it a full row and breathing room below. */
body .single-main-product .block-product-header .woocommerce-variation-add-to-cart > .tc-extra-product-options {
    flex: 1 0 100%;
    margin: 0 0 20px;
}

/* Selected-variation price — it reuses the .pricing-and-stock component, which
   carries a 36px bottom margin (all the space below, none above). Zero that and
   give the price block balanced spacing between the options card and the qty row. */
body .single-main-product .block-product-header .woocommerce-variation-price .pricing-and-stock {
    margin: 0;
}

body .single-main-product .block-product-header .single_variation {
    margin: 18px 0 0;
}

/* Gallery — always a square (1:1) image, softer 12px corners.
   Needs this specificity (0,4,1) + !important to beat the parent theme's
   `.single-main-product .block-product-header ... .flex-viewport{height:438px!important}`
   and FlexSlider's inline height, so the aspect-ratio can drive a square. */
body .single-main-product .block-product-header .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

body .single-main-product .block-product-header .woocommerce-product-gallery__image {
    border-radius: 12px;
}

/* =====================================================================
   Header search (Ajax Search Lite) — matched to the design: a clean
   rounded-rect field (white, 1px #D9CFC0 border, 8px radius) with a plain
   grey magnifier on the LEFT, instead of the plugin's beige pill + dark
   circular button on the right. ASL ships its own CSS, hence !important.
   ===================================================================== */
header .asl_w_container .asl_w div.probox {
    height: 50px !important;
    background: #fff !important;
    border: 1px solid #D9CFC0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* Magnifier button → plain grey glyph on the left, no dark circle/fill. */
header .asl_w_container .asl_w div.probox .promagnifier {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 2px 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

header .asl_w_container .asl_w div.probox .promagnifier .innericon,
header .asl_w_container .asl_w div.probox .promagnifier svg,
header .asl_w_container .asl_w div.probox .promagnifier svg path,
header .asl_w_container .asl_w div.probox .promagnifier svg use,
header .asl_w_container .asl_w div.probox .promagnifier i {
    color: var(--primary) !important;
    fill: var(--primary) !important;
}

/* Search input — clear the left icon, warm text colour. */
header .asl_w_container .asl_w .proinput input.orig,
header .asl_w_container .asl_w .proinput input.autocomplete {
    padding-left: 6px !important;
    color: var(--black) !important;
    background: transparent !important;
}

/* Topbar — truck USP icon + rating stars in the design's warm gold (the topbar
   uses the lighter #E7C46B, not the product-page star gold --yellow #CDA349). */
.topbar .topbar-usps .icon,
.topbar .avarage-stars .icon,
.topbar .avarage-stars i {
    color: #E7C46B;
}

/* =====================================================================
   Header layout + topbar rating + account/cart labels — matched to the
   design. All site-wide (header is on every page).
   ===================================================================== */

/* Main bar: search fills the centre (flex:1, capped like the design's 680px),
   logo left, account/cart right — instead of space-between leaving the icons
   floating at the far edge with a big gap. */
.navigation-inner-main {
    justify-content: flex-start;
    gap: 40px;
}

.navigation-inner-main .nav-shortcode {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.navigation-inner-main .nav-shortcode .asl_w_container {
    width: 100%;
    max-width: 680px;
}

.navigation-inner-main .nav-holder-primary-1 {
    flex: 0 0 auto;
}

/* Account + cart → icon stacked over a small label, like the design. */
.navigation-inner-main .main-nav-menu > li > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.navigation-inner-main .main-nav-menu > li > a::after {
    font: 600 11px/1 var(--heading-font), sans-serif;
    color: var(--black);
    white-space: nowrap;
}

.navigation-inner-main .main-nav-menu > li:has(.icon-user) > a::after {
    content: "Account";
}

.navigation-inner-main .main-nav-menu > li:has(.icon-cart-shopping) > a::after {
    content: "Winkelwagen";
}

/* Mobile: the 40px gap above is meant for the desktop logo | search | icons
   row. On mobile the search is hidden and the logo flexes, so that gap left the
   account/cart icons floating ~60px from the hamburger. Reduce it to sit in
   line with the spacing between the account and cart icons themselves. */
@media only screen and (max-width: 991px) {
    .navigation-inner-main {
        gap: 4px;

        /* Account + Winkelwagen sat ~32px apart (16px of padding on each
           facing side). Rescope the token rather than hard-coding the padding:
           the theme also derives .main-nav-menu's negative side margins from it
           (margin-right: calc(var(--menu-items-padding-horizontal) * -1)), so
           setting the padding alone would drag the cart icon out of alignment
           with the hamburger by the difference. */
        --menu-items-padding-horizontal: 6px;
    }

    /* Icon-only on mobile — the "Account"/"Winkelwagen" captions are what made
       these boxes wide (the labels are ::after content added further up). The
       icons are self-explanatory at this size and the room is better spent on
       the logo. The `:has()` selectors are repeated verbatim rather than
       simplified to `> a::after`: :has() contributes its argument's
       specificity, so the shorter selector scores lower and the labels stay. */
    .navigation-inner-main .main-nav-menu > li:has(.icon-user) > a::after,
    .navigation-inner-main .main-nav-menu > li:has(.icon-cart-shopping) > a::after {
        content: none;
    }

    /* Close the gap to the hamburger. Three separate things pushed it away:
       the theme's 20px `padding-left: calc(var(--menu-items-padding-vertical)
       * 2)` on the toggle, plus the 10px each from `.navigation-inner > * {
       margin: 0 10px }` on the facing sides of the icon group and the toggle.
       Only the INNER-facing margins are touched: `.navigation-inner` carries a
       matching `margin: 0 -10px` to bleed the row out to the container edges,
       so zeroing the outer ones would pull the logo and hamburger out of
       alignment with the rest of the page. */
    .navigation-inner-main .mobile-menu-toggle-position {
        /* Not 0: the icons and the hamburger are separate controls and need a
           visible seam between them. 12px + the row's 4px gap lands ~16px. */
        padding-left: 12px;
        margin-left: 0;
    }

    .navigation-inner-main .nav-holder-primary-1 {
        margin-right: 0;
    }

    /* Touch targets. Dropping the labels shrank these to 26x36 (account) and
       30x38 (cart), and the hamburger button ships at 30x25 — all under the
       ~40px floor for a reliable thumb tap (WCAG 2.5.5 asks 44x44; Apple HIG
       44pt). Grow the hit area only — the icons stay the size they look. */
    .navigation-inner-main .main-nav-menu > li > a {
        min-width: 40px;
        min-height: 40px;
        /* The <a> is a column flexbox, so justify-content is the VERTICAL axis
           here; align-items already centres the icon horizontally. */
        justify-content: center;
    }

    .navigation-inner-main .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        /* flex-end, not center: the bars currently sit flush with the right
           edge of the content column, and .hamburger-icon is absolutely
           centred inside its own 30px .hamburger box — so centring a 40px
           button would drag the bars 5px inward and break that alignment.
           The target grows leftwards into the gap instead. */
        justify-content: flex-end;
    }
}

/* Topbar rating — keep the real review content, but lay it out inline on one
   line with gold stars, like the design (theme stacks it over two lines). */
.topbar .topbar-shortcode {
    display: flex;
    justify-content: flex-end;
}

.topbar .review-information,
.topbar .review-information-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--white);
}

.topbar .review-information-header .avarage-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.topbar .review-information-header .review-information-based-on {
    margin: 0;
}

.topbar .review-information-header .avarage-stars {
    display: inline-flex;
    letter-spacing: 1px;
    color: #E7C46B;
}

/* Related products ("Gerelateerde producten") on the product page — white
   background instead of the theme's --gray. (body bumps specificity past the
   parent's `.single-main-product .product-related-products{background:--gray}`.) */
body .single-main-product .product-related-products {
    background-color: var(--white);
}

/* =====================================================================
   Under-menu CTA "Ontwerp je eigen plank" — matched to the design: pen-nib
   icon, 14px label, and flush to the right edge so its button lines up with
   the account/cart icons in the bar above (was inset 16px by the <a> padding).
   ===================================================================== */
.nav-holder-under-menu .main-nav-menu .menu-item-has-button > a {
    padding-right: 0;
}

.under-menu .menu-item-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    font-size: 14px;
}

.under-menu .menu-item-button::before {
    content: "\ebb5"; /* icon-pen-nib */
    font-family: "icomoon" !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
}

/* Footer .sockets — smaller text, slightly muted. */

.socket,
.socket * {
    font-size: 12px;
    opacity: 0.8;
}

/* Under-menu nav items — more subtle: smaller (14px) and lighter weight.
   Excludes the "Ontwerp je eigen plank" CTA button. */
.under-menu .main-nav-menu > li:not(.menu-item-has-button) > a {
    font-size: 14px;
    font-weight: 500;
}

/* Submenu (dropdown) items — subtle like the under-menu, and tighter padding.
   The theme drives submenu padding from the --submenu-items-padding-around
   token (regenerated from the DB theme options), so it's overridden here in
   the child to keep it stable. */
#primary-menu-ul-under .sub-menu a {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 18px;
}

/* TinySlider — extra bottom room so slide shadows/controls aren't clipped. */
.tns-ovh {
    padding-bottom: 30px;
}

/* =====================================================================
   TinySlider controls — subtle, on-brand. The theme ships heavy 50px solid
   brown circles; the design language is restrained (warm #D9CFC0 hairlines
   like the inputs/cards, brown/green accents), so make these outlined, smaller
   and quiet, with a gentle green hover. !important beats the theme's fill.
   ===================================================================== */
/* Related products: put back the gap between prev/next.
   The theme spaces slider controls by giving every button `margin:
   var(--btn-margin-outer)` (6px) and then pulling the whole .tns-controls back
   by -6px, so the pair sits flush with the slider edge with 12px between the
   buttons. But that margin comes from the global `.btn, .button,
   input[type=submit], main button` rule, and the product page has no <main> at
   all — the theme drops WooCommerce's content wrapper
   (functions/woocommerce/woocommerce-cleanup.php:108). The controls are bare
   <button>s tiny-slider injects, so they matched none of those four selectors
   and got margin 0, while the -6px pull stayed. Result: buttons touching AND
   the pair hanging 6px past the slider's right edge.
   Scoped to this section on purpose — a global `.tns-controls button` margin
   would clobber the reviews slider's `margin-right: -60px` desktop offset. */
.product-related-products .tns-controls button {
    margin: var(--btn-margin-outer);
}

.tns-controls button {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: 1px solid #D9CFC0 !important;
    color: var(--primary) !important;
    font-size: 15px !important;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.tns-controls button .icon {
    color: inherit;
}

.tns-controls button:hover {
    background: var(--white) !important;
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
}

.tns-controls button:disabled,
.tns-controls button[disabled] {
    opacity: 0.4;
    cursor: default;
    background: transparent !important;
    border-color: #D9CFC0 !important;
    color: var(--primary) !important;
}

/* ---------------------------------------------------------------------------
 * JM Woods — subtle, compact review stars matching the topbar review badge:
 * small gold stars with a "X / 5" number beside them, in the product hero,
 * the product card (loop) and the review card. Overrides the parent component
 * chunk styles (which load after this file), hence !important.
 * ------------------------------------------------------------------------- */

/* Shared "X / 5" number */
.rating-average-number {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--black) !important;
    white-space: nowrap !important;
}

/* Product hero (woocommerce/single-product/rating.php child override) */
.review-stars-and-count {
    gap: 8px !important;
}

.review-stars-and-count .star-rating-display {
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

/* Product card / loop: shrink + move the average number before the stars.
   letter-spacing drops the parent's 1px gap between stars so they read as one
   compact block. It has to be set on .star-rating-display itself (both __bg and
   __fg inherit it) — the __fg fill width is a percentage of this element, so
   spacing the two layers differently would desync the partial star. */
.review-stars-and-count.loop-product-rating .star-rating-display {
    font-size: 13px !important;
    letter-spacing: 0 !important;
}

.review-stars-and-count.loop-product-rating .average {
    order: -1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--black) !important;
}

/* Review card: gold + compact, number beside the stars */
.block-product-reviews .card-reviews .review-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.block-product-reviews .card-reviews .star-count {
    color: var(--yellow) !important;
    font-size: 13px !important;
}

/* ---------------------------------------------------------------------------
 * JM Woods — full-width "load more" button.
 *
 * The .page-load-more wrapper (parent: functions/helpers/front-end-helpers.php)
 * is an unstyled div inside .ajax-pagination, so it already spans its column;
 * the visible width came from the .btn inside it, which is an inline-block
 * sized to its label. Stretching the anchor is what actually makes the control
 * full width — the wrapper rules below just make that explicit and keep the
 * label centred once the box is wider than the text.
 * ------------------------------------------------------------------------- */
.page-load-more {
    display: block;
    width: 100%;
}

.page-load-more .btn {
    display: block;
    width: 100%;
    text-align: center;
}

/* =====================================================================
   Mobile refinements.
   ===================================================================== */
@media only screen and (max-width: 991px) {
    /* Sections carried the full desktop --section-padding (72px) on phones,
       which is most of a viewport in whitespace before any content shows.
       Overriding `section` here rather than redefining --section-padding on
       :root is deliberate — the theme prints its own `:root { … }` inline in
       wp_head, i.e. AFTER this stylesheet, so a same-specificity :root block
       would silently lose the tie. Sections that set their own padding
       (.block-product-header, .block-product-information) out-specify this and
       keep their values. */
    section,
    .section-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Summary rhythm — one step tighter again on a narrow screen. */
    body .single-main-product .block-product-header .product-summary-inner .woocommerce-product-details__short-description {
        margin-bottom: 14px;
    }

    body .single-main-product .block-product-header .pricing-and-stock {
        margin-bottom: 14px;
    }

    body .single-main-product .block-product-header form.cart:not(.variations_form) {
        margin-top: 14px;
    }

    /* Quantity + add-to-cart alignment. The parent stacks the cart form on
       mobile (`.product-summary .product-summary-inner .cart{flex-direction:
       column}` — 5 classes, so it beats the row layout set above and there is
       no point fighting it). But the button keeps the 14px left margin meant
       for sitting BESIDE the stepper, so it landed indented from the qty box
       and flush against its bottom edge. Reset the margin so both share the
       same left edge, and move the spacing onto the button itself — a row-gap
       would also be applied around the empty #tm-epo-totals wrapper, which is
       the reason the form runs at gap:0 in the first place.
       `:not(.variations_form)` below is load-bearing, not decoration: the
       parent also resets `margin-top: unset` on this button from 5 classes
       deep, so without it the top margin is dropped while the left margin still
       applies — leaving the button aligned but flush against the stepper. */
    body .single-main-product .block-product-header form.cart:not(.variations_form) > .single_add_to_cart_button,
    body .single-main-product .block-product-header .woocommerce-variation-add-to-cart > .single_add_to_cart_button {
        width: 100%;
        margin: 10px 0 0;
    }
}


@import url("https://fonts.googleapis.com/css2?family=Grand+Hotel&family=Indie+Flower&family=Julius+Sans+One&family=Montserrat&family=Open+Sans&family=Poppins&display=swap");

/* Grand Hotel – eerste keuze */
#lettertype-kiezer .tmcp-field-wrap:nth-child(1) label,
#lettertype-kiezer .tmcp-field-wrap:nth-child(1) label *,
.lettertype-kiezer .tmcp-field-wrap:nth-child(1) label,
.lettertype-kiezer .tmcp-field-wrap:nth-child(1) label * {
    font-family: "Grand Hotel", cursive !important;
    font-size: 24px !important;
}

/* Indie Flower – tweede keuze */
#lettertype-kiezer .tmcp-field-wrap:nth-child(2) label,
#lettertype-kiezer .tmcp-field-wrap:nth-child(2) label *,
.lettertype-kiezer .tmcp-field-wrap:nth-child(2) label,
.lettertype-kiezer .tmcp-field-wrap:nth-child(2) label * {
    font-family: "Indie Flower", cursive !important;
    font-size: 21px !important;
}

/* Julius Sans One – derde keuze */
#lettertype-kiezer .tmcp-field-wrap:nth-child(3) label,
#lettertype-kiezer .tmcp-field-wrap:nth-child(3) label *,
.lettertype-kiezer .tmcp-field-wrap:nth-child(3) label,
.lettertype-kiezer .tmcp-field-wrap:nth-child(3) label * {
    font-family: "Julius Sans One", sans-serif !important;
    font-size: 17px !important;
}

/* Montserrat – vierde keuze */
#lettertype-kiezer .tmcp-field-wrap:nth-child(4) label,
#lettertype-kiezer .tmcp-field-wrap:nth-child(4) label *,
.lettertype-kiezer .tmcp-field-wrap:nth-child(4) label,
.lettertype-kiezer .tmcp-field-wrap:nth-child(4) label * {
    font-family: "Montserrat", sans-serif !important;
}

/* Open Sans – vijfde keuze */
#lettertype-kiezer .tmcp-field-wrap:nth-child(5) label,
#lettertype-kiezer .tmcp-field-wrap:nth-child(5) label *,
.lettertype-kiezer .tmcp-field-wrap:nth-child(5) label,
.lettertype-kiezer .tmcp-field-wrap:nth-child(5) label * {
    font-family: "Open Sans", sans-serif !important;
}

/* Poppins – zesde keuze */
#lettertype-kiezer .tmcp-field-wrap:nth-child(6) label,
#lettertype-kiezer .tmcp-field-wrap:nth-child(6) label *,
.lettertype-kiezer .tmcp-field-wrap:nth-child(6) label,
.lettertype-kiezer .tmcp-field-wrap:nth-child(6) label * {
    font-family: "Poppins", sans-serif !important;
}

/* =====================================================
   LETTERTYPEKIEZER NETJES UITLIJNEN
   ===================================================== */

#lettertype-kiezer .tmcp-ul-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#lettertype-kiezer .tmcp-field-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alle lettertypeknoppen even groot */
#lettertype-kiezer .tmcp-field-wrap > label,
#lettertype-kiezer .tmcp-field-wrap label {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 68px !important;
    padding: 8px 10px !important;

    text-align: center !important;
    line-height: 1.25 !important;

    background: #faf7f2 !important;
    border: 1px solid #e3d6c8 !important;
    border-radius: 9px !important;

    cursor: pointer !important;
    transition: border-color 0.2s ease,
                background-color 0.2s ease,
                transform 0.2s ease !important;
}

/* Hover */
#lettertype-kiezer .tmcp-field-wrap > label:hover,
#lettertype-kiezer .tmcp-field-wrap label:hover {
    border-color: #2f6f69 !important;
    background: #f3f8f7 !important;
    transform: translateY(-1px);
}

/* Geselecteerde lettertypeknop */
#lettertype-kiezer .tmcp-field-wrap:has(input:checked) > label,
#lettertype-kiezer .tmcp-field-wrap:has(input:checked) label,
#lettertype-kiezer .tmcp-field-wrap.tc-active > label,
#lettertype-kiezer label.tc-active {
    background: #2f6f69 !important;
    border-color: #2f6f69 !important;
    color: #ffffff !important;
}

/* Tekst in geselecteerde knop ook wit */
#lettertype-kiezer .tmcp-field-wrap:has(input:checked) label *,
#lettertype-kiezer .tmcp-field-wrap.tc-active label *,
#lettertype-kiezer label.tc-active * {
    color: #ffffff !important;
}

/* Standaard radioknop onzichtbaar maken */
#lettertype-kiezer input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}


/* =====================================================
   POSITIEKEUZE COMPACT MAKEN
   ===================================================== */

#positie-naam .tmcp-ul-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#positie-naam .tmcp-field-wrap {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alleen een compact vakje rondom de afbeelding */
#positie-naam .tmcp-field-wrap > label,
#positie-naam .tmcp-field-wrap label {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 7px !important;

    background: #ffffff !important;
    border: 1px solid #e3d6c8 !important;
    border-radius: 9px !important;

    cursor: pointer !important;
    overflow: hidden !important;
}

/* Positieafbeelding */
#positie-naam img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Geselecteerde positie */
#positie-naam .tmcp-field-wrap:has(input:checked) > label,
#positie-naam .tmcp-field-wrap:has(input:checked) label,
#positie-naam .tmcp-field-wrap.tc-active > label,
#positie-naam label.tc-active {
    background: #edf5f4 !important;
    border: 2px solid #2f6f69 !important;
    box-shadow: 0 0 0 2px rgba(47, 111, 105, 0.12) !important;
}

/* Standaard radioknop onzichtbaar */
#positie-naam input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}


/* =====================================================
   MOBIELE WEERGAVE
   ===================================================== */

@media (max-width: 520px) {
    #lettertype-kiezer .tmcp-ul-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #lettertype-kiezer .tmcp-field-wrap > label,
    #lettertype-kiezer .tmcp-field-wrap label {
        min-height: 64px !important;
    }
}

.single-product .woocommerce-product-details__short-description ul {
    margin: 15px 0 !important;
    padding: 0 !important;
}

.single-product .woocommerce-product-details__short-description ul li {
    position: relative !important;
    display: block !important;
    list-style: none !important;
    padding-left: 20px !important;
    margin-bottom: 7px !important;
}

.single-product .woocommerce-product-details__short-description ul li::before {
    content: "•" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #4a2f20 !important;
}

/* ==========================================
   PERSONALISEREN – NETTE CHECKBOX + MEERPRIJS
   ========================================== */

#personaliseren-keuze .tmcp-field-wrap {
    width: 100% !important;
    margin: 0 !important;
}

/* Klikbare regel */
#personaliseren-keuze .tmcp-field-wrap > label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;

    background: #faf7f2 !important;
    border: 1px solid #ddd1c4 !important;
    border-radius: 8px !important;

    cursor: pointer !important;
}

/* Originele browser-checkbox verbergen */
#personaliseren-keuze input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* Tekst, vinkje en prijs op één regel */
#personaliseren-keuze .tc-label-wrap {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
}

/* Eigen checkbox */
#personaliseren-keuze .tc-label-wrap::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;

    width: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    border: 2px solid #bcae9f !important;
    border-radius: 4px !important;

    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Geselecteerd vinkje */
#personaliseren-keuze
.tmcp-field-wrap:has(input[type="checkbox"]:checked)
.tc-label-wrap::before {
    content: "✓" !important;
    background: #2f6f69 !important;
    border-color: #2f6f69 !important;
}

/* Geselecteerde regel */
#personaliseren-keuze
.tmcp-field-wrap:has(input[type="checkbox"]:checked)
> label {
    background: #edf5f4 !important;
    border-color: #2f6f69 !important;
}

/* Labeltekst */
#personaliseren-keuze .tc-label,
#personaliseren-keuze .tm-label {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
}

/* EPO-meerprijs zichtbaar houden */
#personaliseren-keuze .tc-price,
#personaliseren-keuze .tc-price-wrap,
#personaliseren-keuze .amount,
#personaliseren-keuze .price {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    color: #2f6f69 !important;
    font-weight: 700 !important;
}

/* Oude pseudo-elementen verwijderen */
#personaliseren-keuze label::before,
#personaliseren-keuze label::after {
    content: none !important;
    display: none !important;
}

@media only screen and (max-width: 767px) {
    body.single-product div.product .summary h1.product_title,
    body.single-product h1.product_title.entry-title {
        font-size: 32px !important;
        line-height: 1.08 !important;
    }
}

/* Artikelnummer verbergen op de productpagina */
.single-product .summary .product_meta .sku_wrapper {
    display: none !important;
}

/* Gravity Forms kaart */
.jm-form-card {
    background: #ffffff;
    border: 1px solid #ece7e1;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}

.jm-form-card .gform_wrapper {
    margin: 0;
}

/* Kop boven het formulier */
.jm-form-card .gsection {
    border: 0;
    margin: 0 0 24px;
    padding: 0;
}

.jm-form-card .gsection_title,
.jm-form-card .gform_description {
    margin: 0;
    color: #4a2f20;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
}

/* Ruimte tussen velden */
.jm-form-card .gform_fields {
    row-gap: 20px;
}

/* Labels */
.jm-form-card .gfield_label {
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 7px;
}

/* Invoervelden */
.jm-form-card input[type="text"],
.jm-form-card input[type="email"],
.jm-form-card input[type="tel"],
.jm-form-card select,
.jm-form-card textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    background: #ffffff;
    border: 1px solid #d8d2cb;
    border-radius: 8px;
    box-shadow: none;
    color: #333333;
    font-size: 15px;
    box-sizing: border-box;
}

.jm-form-card textarea {
    min-height: 140px;
    resize: vertical;
}

/* Actief veld */
.jm-form-card input:focus,
.jm-form-card select:focus,
.jm-form-card textarea:focus {
    border-color: #2f6f69;
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 111, 105, 0.12);
}

/* Beschrijvingen onder velden */
.jm-form-card .gfield_description {
    color: #6f6a65;
    font-size: 13px;
    line-height: 1.5;
}

/* Verzendknop */
.jm-form-card input[type="submit"],
.jm-form-card button[type="submit"] {
    width: 100%;
    min-height: 48px;
    margin: 4px 0 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 9px;
    background: #2f6f69;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.jm-form-card input[type="submit"]:hover,
.jm-form-card button[type="submit"]:hover {
    background: #285f5a;
}

/* Mobiel */
@media (max-width: 767px) {
    .jm-form-card {
        padding: 22px;
    }

    .jm-form-card .gsection_title,
    .jm-form-card .gform_description {
        font-size: 23px;
    }
}/* Zichtbaar kader om conditioneel veld */
.jm-form-card .jm-conditional-box {
    background: #f7f5f2;
    border: 1px solid #ece7e1;
    border-radius: 10px;
    padding: 16px;
    box-sizing: border-box;
}

/* Invoerveld binnen het kader */
.jm-form-card .jm-conditional-box input {
    background: #ffffff;
}
/* Compact uploadvak zoals de mock-up */
.jm-form-card .jm-upload-mockup .gform_drop_area {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;

    min-height: 0 !important;
    padding: 14px 18px !important;

    background: #ffffff !important;
    border: 1px dashed #cbc5be !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-align: center;
}

/* Upload-icoon */
.jm-form-card .jm-upload-mockup .gform_drop_area::before {
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E");
}

/* Tekst: Sleep bestanden hierheen of */
.jm-form-card .jm-upload-mockup .gform_drop_instructions {
    margin: 0 !important;
    color: #4f4b47 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Selecteer bestanden als rustige tekstlink */
.jm-form-card .jm-upload-mockup .gform_button_select_files {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

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

    color: #2f6f69 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: underline !important;
}

/* Geen knop-hoverachtergrond */
.jm-form-card .jm-upload-mockup .gform_button_select_files:hover {
    background: transparent !important;
    color: #285f5a !important;
}

/* Bestandseisen op een kleine tweede regel */
.jm-form-card .jm-upload-mockup .gform_fileupload_rules {
    flex: 0 0 100%;
    width: 100%;
    margin: 2px 0 0 !important;

    color: #7a746e !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: center;
}

/* Uploadvak kleur en rand gelijk aan mock-up */
.jm-form-card .jm-upload-mockup .ginput_container_fileupload,
.jm-form-card .jm-upload-mockup .gform_fileupload_multifile {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Het eigenlijke uploadvak */
.jm-form-card .jm-upload-mockup .gform_drop_area {
    background: #ffffff !important;
    border: 1px dashed #d3cec8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #57534f !important;
}

/* Tekst in het uploadvak */
.jm-form-card .jm-upload-mockup .gform_drop_instructions {
    color: #57534f !important;
}

/* Selecteer bestanden */
.jm-form-card .jm-upload-mockup .gform_button_select_files {
    color: #4a2f20 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Kleine tekst met bestandstypen */
.jm-form-card .jm-upload-mockup .gform_fileupload_rules {
    color: #817b75 !important;
}

/* Uploadicoon donkergrijs */
.jm-form-card .jm-upload-mockup .gform_drop_area::before {
    opacity: 0.75;
}
/* Mobiele kaart standaard verbergen op desktop */
.jm-mobile-map {
    display: none !important;
}

/* Op telefoon: desktopkaart verbergen en mobiele kaart tonen */
@media (max-width: 1024px) {
    .jm-desktop-map {
        display: none !important;
    }

    .jm-mobile-map {
        display: block !important;
    }
}
/* CHECKOUT — witruimte onder de pagina bij ingeklapt adresformulier.
   Select2 verbergt de native #shipping_country met .select2-hidden-accessible
   (position: absolute). Zijn containing block is .col-lg-7 (position: relative),
   die BOVEN de ingeklapte #customer_details (max-height: 0; overflow: hidden)
   ligt — daardoor ontsnapt de 1px-select aan de clip, parkeert hij op zijn
   natuurlijke y-positie onder de pagina en rekt hij het scrollgebied op.
   contain: paint maakt de ingeklapte wrapper containing block én clip voor
   absolute nakomelingen, zodat niets meer kan uitsteken. */
.checkout-details.has-saved-address #customer_details.address-form-collapsed {
    contain: paint;
}