/*
 * Webplace4u MidOcean — product layout skin (mockup-aligned).
 * Override visual tokens via your theme by redefining --wp-mo-* on :root.
 *
 * All font-sizes use rem + clamp() per Webplace4u standards. Headings
 * always wrap with overflow-wrap + hyphens. No px font-sizes.
 */

:root {
    /* Brand */
    --wp-mo-color-accent:        #6E2DFF;
    --wp-mo-color-accent-hover:  #5a1fd9;
    --wp-mo-color-accent-soft:   #f3eeff;
    --wp-mo-color-accent-text:   #ffffff;

    /* Neutrals */
    --wp-mo-color-text:          #1a1a1a;
    --wp-mo-color-text-soft:     #6b7280;
    --wp-mo-color-bg:            #ffffff;
    --wp-mo-color-bg-soft:       #f6f5f1;
    --wp-mo-color-border:        #e5e3df;
    /* Specs-block: licht thema (overschrijfbaar in eigen theme via :root). */
    --wp-mo-color-dark:          #ffffff;
    --wp-mo-color-dark-text:     #1a1a1a;
    --wp-mo-color-dark-muted:    #6b7280;
    --wp-mo-color-dark-border:   #e5e3df;

    /* Semantic */
    --wp-mo-color-success:       #16a34a;
    --wp-mo-color-success-soft:  #dcfce7;
    --wp-mo-color-danger:        #dc2626;

    /* Spacing scale */
    --wp-mo-space-xs: 0.4rem;
    --wp-mo-space-sm: 0.7rem;
    --wp-mo-space-md: 1rem;
    --wp-mo-space-lg: 1.75rem;
    --wp-mo-space-xl: 3rem;

    /* Radii */
    --wp-mo-radius-sm: 6px;
    --wp-mo-radius-md: 12px;
    --wp-mo-radius-lg: 20px;

    /* Typography clamps */
    --wp-mo-font-body:  clamp(0.95rem, 0.88rem + 0.25vw, 1.05rem);
    --wp-mo-font-small: clamp(0.8rem,  0.75rem + 0.2vw,  0.9rem);
    --wp-mo-font-h1:    clamp(2rem,    1.6rem + 1.6vw,  2.75rem);
    --wp-mo-font-h2:    clamp(1.5rem,  1.25rem + 1vw,   2rem);
    --wp-mo-font-h3:    clamp(1.1rem,  0.95rem + 0.6vw, 1.3rem);
    --wp-mo-font-price: clamp(1.5rem,  1.25rem + 1.2vw, 2.2rem);
}

/* Reset stuff that themes often inherit incorrectly */
.wp-mo-layout *,
.wp-mo-specs *,
.wp-mo-logo * { box-sizing: border-box; }

/*
 * ───── Button reset (kleur + theme-pseudo-elementen) ─────
 * Astra / Elementor / Spectra themes injecteren regels op elke `<button>`
 * (background-color: var(--ast-global-color-0), color: #fff, een arrow-
 * pseudo via `.button:after { content: '→' }` etc.) — vaak via een
 * inline Elementor-snippet die NA onze stylesheet inlaadt. Onze custom
 * buttons (kleurswatch, gallery-arrow, calc-add-knop) eindigen daardoor
 * als solide paarse blokken zonder zichtbare inhoud.
 *
 * Hier alleen de problematische theme-defaults killen. Shape (padding,
 * border, width/height) blijft per component lokaal beheerd verderop.
 */
.wp-mo-layout button:not(.wp-mo-layout__configure):not(.wp-mo-calc__cart-btn):not(.wp-mo-cart__btn),
.wp-mo-variations__swatch,
.wp-mo-gallery__nav,
.wp-mo-gallery__zoom,
.wp-mo-calc__add-line {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
    text-transform: none !important;
    box-shadow: none !important;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}
/* Theme zet `.button:after { content: '→'; }` — overschrijven. */
.wp-mo-layout button:not(.wp-mo-layout__configure):not(.wp-mo-calc__cart-btn):not(.wp-mo-cart__btn)::after,
.wp-mo-variations__swatch::after,
.wp-mo-gallery__nav::after,
.wp-mo-gallery__zoom::after,
.wp-mo-calc__add-line::after {
    display: none !important;
    content: none !important;
}

/* Onze PRIMAIRE CTA's mogen wel paars zijn (Stel samen & bestel + cart). */
.wp-mo-layout__configure,
.wp-mo-calc__cart-btn,
.wp-mo-cart__btn {
    background: var(--wp-mo-color-accent) !important;
    background-color: var(--wp-mo-color-accent) !important;
    background-image: none !important;
    color: var(--wp-mo-color-accent-text) !important;
}
.wp-mo-layout__configure:hover,
.wp-mo-calc__cart-btn:hover,
.wp-mo-cart__btn:hover {
    background: var(--wp-mo-color-accent-hover) !important;
    background-color: var(--wp-mo-color-accent-hover) !important;
}

/*
 * Gallery prev/next + zoom + thumbnails — re-apply hun eigen styling
 * met !important zodat ze BOVEN de !important-reset hierboven uitkomen.
 * Anders worden ze onzichtbaar (transparante achtergrond op witte card).
 */
.wp-mo-gallery__nav,
.wp-mo-gallery__zoom {
    background: rgba(255, 255, 255, 0.92) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: var(--wp-mo-color-text) !important;
    border: 1px solid var(--wp-mo-color-border) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    /* Reset theme's padding 15px 30px → klein cirkeltje */
    padding: 0 !important;
}
.wp-mo-gallery__nav:hover,
.wp-mo-gallery__zoom:hover {
    background: #fff !important;
    background-color: #fff !important;
}
.wp-mo-gallery__zoom:hover {
    color: var(--wp-mo-color-accent) !important;
}

/*
 * Thumbnail-strip buttons onder de hoofdimage. Theme overschrijft normaal
 * de background naar paars; we forceren onze soft-grey card met border.
 */
.wp-mo-gallery__thumb {
    background: var(--wp-mo-color-bg-soft) !important;
    background-color: var(--wp-mo-color-bg-soft) !important;
    color: inherit !important;
    border: 2px solid transparent !important;
    border-radius: var(--wp-mo-radius-sm) !important;
    padding: 0 !important;
}
.wp-mo-gallery__thumb:hover {
    border-color: var(--wp-mo-color-accent-soft) !important;
}
.wp-mo-gallery__thumb.is-active {
    border-color: var(--wp-mo-color-accent) !important;
}

/*
 * "Alle"-swatch in de kleurgroep-picker — die had een ⁕ icoontje in
 * een witte cirkel. Theme maakte 'm paars; we vinden het terug.
 */
.wp-mo-variations__swatch--all .wp-mo-variations__swatch-all {
    color: var(--wp-mo-color-text) !important;
}
.wp-mo-variations__swatch {
    /* Theme padding 15px 30px killen — swatch is 2.5rem rond. */
    padding: 2px !important;
    border-radius: 50% !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
}
.wp-mo-variations__swatch.is-active {
    border: 2px solid var(--wp-mo-color-accent) !important;
}

/*
 * "+ Extra positie toevoegen" — outline-style knop in de calculator.
 * Theme maakt 'm paars; we maken er een neutrale ghost-button van.
 */
.wp-mo-calc__add-line {
    background: var(--wp-mo-color-bg-soft) !important;
    background-color: var(--wp-mo-color-bg-soft) !important;
    color: var(--wp-mo-color-accent) !important;
    border: 1px dashed var(--wp-mo-color-accent) !important;
    border-radius: var(--wp-mo-radius-md) !important;
    padding: 0.6rem 1rem !important;
}
.wp-mo-calc__add-line:hover {
    background: var(--wp-mo-color-accent-soft) !important;
    background-color: var(--wp-mo-color-accent-soft) !important;
}

/* ───── Maattabel (inline PDF preview) ───── */
.wp-mo-sizechart {
    width: 100%;
    max-width: 1480px;
    margin: var(--wp-mo-space-lg) auto 0;
    padding: var(--wp-mo-space-lg) var(--wp-mo-space-md);
    box-sizing: border-box;
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
}
.wp-mo-sizechart__title {
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.wp-mo-sizechart__intro {
    color: var(--wp-mo-color-text-soft);
    margin: 0 0 var(--wp-mo-space-md);
    font-size: var(--wp-mo-font-small);
}
.wp-mo-sizechart__viewer {
    position: relative;
    background: var(--wp-mo-color-bg-soft);
    border-radius: var(--wp-mo-radius-md);
    overflow: hidden;
    border: 1px solid var(--wp-mo-color-border);
}
.wp-mo-sizechart__embed {
    width: 100%;
    height: 600px;
    border: 0;
    display: block;
    background: #fff;
}
@media (max-width: 720px) {
    /*
     * iOS Safari kan `<object type="application/pdf">` NIET inline
     * renderen (laat een blanke witte box zien zonder onze fallback
     * te triggeren). Op Android Chrome wisselt het per versie. Op
     * mobiel daarom de PDF-embed verbergen en alleen onze nette
     * "Open maattabel" knop tonen.
     */
    .wp-mo-sizechart__embed {
        display: none;
    }
    .wp-mo-sizechart__viewer {
        background: var(--wp-mo-color-bg-soft);
        padding: 1.5rem 1rem;
        text-align: center;
    }
    /* Auto-genereerde "open maattabel" knop wanneer embed verborgen is */
    .wp-mo-sizechart__viewer::before {
        content: "📏";
        display: block;
        font-size: 3rem;
        line-height: 1;
        margin-bottom: 0.5rem;
    }
}
.wp-mo-sizechart__image {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
}
.wp-mo-sizechart__toolbar {
    background: var(--wp-mo-color-bg);
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--wp-mo-color-border);
    text-align: right;
}
.wp-mo-sizechart__toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--wp-mo-color-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--wp-mo-font-small);
}
.wp-mo-sizechart__toolbar-btn:hover {
    text-decoration: underline;
}
@media (max-width: 720px) {
    /*
     * Op mobiel: omdat de PDF-embed verborgen is, wordt deze knop
     * de primaire interactie. Maak 'm groot + tap-vriendelijk.
     */
    .wp-mo-sizechart__toolbar {
        background: transparent;
        padding: 0;
        border-top: 0;
        text-align: center;
    }
    .wp-mo-sizechart__toolbar-btn {
        display: inline-flex;
        min-height: 48px; /* WCAG 2.5.5 touch target */
        padding: 0.8rem 1.5rem;
        background: var(--wp-mo-color-accent);
        color: var(--wp-mo-color-accent-text);
        border-radius: var(--wp-mo-radius-md);
        font-size: 1rem;
        gap: 0.5em;
    }
    .wp-mo-sizechart__toolbar-btn:hover,
    .wp-mo-sizechart__toolbar-btn:focus-visible {
        background: var(--wp-mo-color-accent-hover);
        color: var(--wp-mo-color-accent-text);
        text-decoration: none;
    }
}
.wp-mo-sizechart__fallback {
    padding: 2rem;
    text-align: center;
    color: var(--wp-mo-color-text-soft);
}
.wp-mo-sizechart__btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: var(--wp-mo-color-accent);
    color: var(--wp-mo-color-accent-text);
    text-decoration: none;
    border-radius: var(--wp-mo-radius-md);
    font-weight: 500;
}
.wp-mo-sizechart__btn:hover {
    background: var(--wp-mo-color-accent-hover);
}

/* ───── Downloads ───── */
.wp-mo-downloads {
    width: 100%;
    max-width: 1480px;
    margin: var(--wp-mo-space-lg) auto 0;
    padding: var(--wp-mo-space-lg) var(--wp-mo-space-md);
    box-sizing: border-box;
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
}
.wp-mo-downloads__title {
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.wp-mo-downloads__intro {
    color: var(--wp-mo-color-text-soft);
    margin: 0 0 var(--wp-mo-space-md);
    font-size: var(--wp-mo-font-small);
}
.wp-mo-downloads__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.wp-mo-downloads__item { margin: 0; padding: 0; }
.wp-mo-downloads__link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    /* Min-height = WCAG 2.5.5 touch target (44px aanbevolen, 48px ideaal) */
    min-height: 56px;
    background: var(--wp-mo-color-bg-soft);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    color: var(--wp-mo-color-text);
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
@media (max-width: 420px) {
    /*
     * Op zeer smalle viewports (oude/small phones < 420px):
     * 1. CTA-tekst inkorten tot ↗ icon-only zodat de label-tekst
     *    de hele breedte krijgt
     * 2. Iets compactere padding zodat 2 woorden label per regel passen
     */
    .wp-mo-downloads__cta-text { display: none; }
    .wp-mo-downloads__link {
        padding: 0.7rem 0.8rem;
        gap: 0.6rem;
    }
}
.wp-mo-downloads__link:hover,
.wp-mo-downloads__link:focus-visible {
    border-color: var(--wp-mo-color-accent);
    background: var(--wp-mo-color-bg);
    transform: translateY(-1px);
}
.wp-mo-downloads__icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wp-mo-color-accent-soft);
    color: var(--wp-mo-color-accent);
    border-radius: var(--wp-mo-radius-sm);
}
.wp-mo-downloads__label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wp-mo-downloads__ext {
    color: var(--wp-mo-color-text-soft);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 0.3em;
}
.wp-mo-downloads__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-accent);
    font-weight: 500;
    white-space: nowrap;
}
.wp-mo-downloads__arrow {
    font-size: 1.1em;
    line-height: 1;
}

/* ───── Breadcrumb ───── */
.wp-mo-breadcrumb {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: var(--wp-mo-space-sm) var(--wp-mo-space-md) 0;
    box-sizing: border-box;
}
.wp-mo-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
    gap: 0.15rem 0.4rem;
}
.wp-mo-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}
.wp-mo-breadcrumb__link {
    color: var(--wp-mo-color-text-soft);
    text-decoration: none;
    transition: color 120ms ease;
}
.wp-mo-breadcrumb__link:hover,
.wp-mo-breadcrumb__link:focus-visible {
    color: var(--wp-mo-color-accent);
    text-decoration: underline;
}
.wp-mo-breadcrumb__current {
    color: var(--wp-mo-color-text);
    font-weight: 500;
}
.wp-mo-breadcrumb__sep {
    color: var(--wp-mo-color-border);
    user-select: none;
}

/* ───── Hero ───── */
.wp-mo-layout {
    color: var(--wp-mo-color-text);
    font-size: var(--wp-mo-font-body);
}

/* Force the whole layout to break out of any "boxed" Elementor section
   that hosts our shortcode. Astra/Elementor often wrap the column in a
   max-width 1140px container — we override it so the customer gets the
   full screen width. */
.wp-mo-layout {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}
.elementor-element .wp-mo-layout,
.elementor-widget-container .wp-mo-layout {
    width: 100%;
}
/* Stretch the Elementor column container so our shortcode actually fills
   the parent. Targets the wrapper Elementor builds around shortcode widgets. */
.elementor-widget-shortcode > .elementor-widget-container:has(.wp-mo-layout) {
    width: 100%;
}

.wp-mo-layout__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp-mo-space-xl);
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: var(--wp-mo-space-lg) var(--wp-mo-space-md);
    box-sizing: border-box;
}
@media (min-width: 900px) {
    .wp-mo-layout__hero {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

/* Gallery card */
.wp-mo-layout__gallery {
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
    padding: var(--wp-mo-space-md);
}

/* ───── Custom product gallery ───── */
.wp-mo-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--wp-mo-space-md);
    outline: none;
}
.wp-mo-gallery__main {
    position: relative;
    background: var(--wp-mo-color-bg-soft);
    border-radius: var(--wp-mo-radius-md);
    aspect-ratio: 1 / 1;
    max-height: 36rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-mo-gallery__main-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: var(--wp-mo-space-md);
    box-sizing: border-box;
    transition: transform 200ms ease;
}
.wp-mo-gallery__main:hover .wp-mo-gallery__main-img {
    transform: scale(1.02);
}
/* Prev/next arrow buttons */
.wp-mo-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--wp-mo-color-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    color: var(--wp-mo-color-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 120ms ease, transform 120ms ease;
}
.wp-mo-gallery__nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}
.wp-mo-gallery__nav--prev { left: 0.75rem; }
.wp-mo-gallery__nav--next { right: 0.75rem; }
/* Zoom button — top-right */
.wp-mo-gallery__zoom {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--wp-mo-color-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    color: var(--wp-mo-color-text-soft);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 120ms ease, color 120ms ease;
}
.wp-mo-gallery__zoom:hover {
    background: #fff;
    color: var(--wp-mo-color-accent);
}
/* Thumbnail strip */
.wp-mo-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    scrollbar-width: thin;
}
.wp-mo-gallery__thumbs::-webkit-scrollbar {
    height: 6px;
}
.wp-mo-gallery__thumbs::-webkit-scrollbar-thumb {
    background: var(--wp-mo-color-border);
    border-radius: 3px;
}
.wp-mo-gallery__thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--wp-mo-color-bg-soft);
    border: 2px solid transparent;
    border-radius: var(--wp-mo-radius-sm);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 120ms ease, transform 120ms ease;
}
.wp-mo-gallery__thumb:hover {
    border-color: var(--wp-mo-color-accent-soft);
    transform: translateY(-1px);
}
.wp-mo-gallery__thumb.is-active {
    border-color: var(--wp-mo-color-accent);
}
.wp-mo-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
    box-sizing: border-box;
    display: block;
}
/*
 * Defensive hide of WC's default FlexSlider gallery if a theme template
 * still renders it (single-product.php overrides). Our custom
 * `.wp-mo-gallery` replaces it entirely.
 */
.wp-mo-layout__gallery .woocommerce-product-gallery,
.wp-mo-layout__gallery .flex-viewport,
.wp-mo-layout__gallery .flex-control-thumbs {
    display: none !important;
}
/* Variation picker (deduped colour-group filter) */
.wp-mo-variations {
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
    padding: var(--wp-mo-space-md) var(--wp-mo-space-lg);
    width: 100%;
    max-width: 1480px;
    margin: 0 auto var(--wp-mo-space-md);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.wp-mo-variations__swatch--all .wp-mo-variations__swatch-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px dashed var(--wp-mo-color-border);
    color: var(--wp-mo-color-text-soft);
    font-size: 1.1rem;
    background: var(--wp-mo-color-bg-soft);
}
.wp-mo-variations__label {
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
}
.wp-mo-variations__label strong {
    color: var(--wp-mo-color-text);
    font-weight: 600;
    margin-left: 0.25rem;
}
.wp-mo-variations__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.wp-mo-variations__swatch {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 2px;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 140ms ease, transform 140ms ease;
}
.wp-mo-variations__swatch:hover {
    border-color: var(--wp-mo-color-accent-soft);
    transform: scale(1.05);
}
.wp-mo-variations__swatch.is-active {
    border-color: var(--wp-mo-color-accent);
}
.wp-mo-variations__swatch.is-oos {
    opacity: 0.45;
    position: relative;
}
.wp-mo-variations__swatch.is-oos::after {
    content: "";
    position: absolute;
    inset: 50% 4px auto 4px;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%) rotate(-45deg);
    pointer-events: none;
}
.wp-mo-variations__swatch-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

/* Summary */
.wp-mo-layout__summary { display: flex; flex-direction: column; gap: var(--wp-mo-space-md); }
.wp-mo-layout__title {
    font-size: var(--wp-mo-font-h1);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}
.wp-mo-layout__short {
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-body);
    line-height: 1.55;
}
.wp-mo-layout__short p { margin: 0 0 0.5em; }
.wp-mo-layout__short p:last-child { margin-bottom: 0; }

.wp-mo-layout__cart {
    display: flex;
    gap: var(--wp-mo-space-sm);
    align-items: stretch;
}

/* "Stel samen & bestel" CTA in hero — scrolls to calculator */
.wp-mo-layout__configure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    align-self: stretch;
    height: 3.25rem;
    padding: 0 var(--wp-mo-space-xl);
    background: var(--wp-mo-color-accent);
    color: var(--wp-mo-color-accent-text);
    border: none;
    border-radius: var(--wp-mo-radius-md);
    font-size: var(--wp-mo-font-body);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, transform 150ms ease;
}
.wp-mo-layout__configure:hover {
    background: var(--wp-mo-color-accent-hover);
    color: var(--wp-mo-color-accent-text);
    transform: translateY(-1px);
}

/* Smooth-scroll anchor that compensates for sticky headers */
.wp-mo-anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}
html { scroll-behavior: smooth; }

/* Stock badge */
.wp-mo-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: var(--wp-mo-font-small);
    font-weight: 500;
    width: fit-content;
}
.wp-mo-stock--in {
    background: var(--wp-mo-color-success-soft);
    color: var(--wp-mo-color-success);
}
.wp-mo-stock--out {
    background: rgba(220, 38, 38, 0.1);
    color: var(--wp-mo-color-danger);
}
.wp-mo-stock::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
}

/* Price */
.wp-mo-price-from {
    color: var(--wp-mo-color-accent);
    font-size: var(--wp-mo-font-price);
    font-weight: 700;
    line-height: 1;
}
.wp-mo-price-from__prefix {
    font-size: 0.6em;
    font-weight: 500;
    margin-right: 0.25em;
    opacity: 0.85;
}

/* Quantity stepper */
.wp-mo-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    background: var(--wp-mo-color-bg);
    overflow: hidden;
    height: 3rem;
}
.wp-mo-qty__btn {
    background: transparent;
    border: none;
    padding: 0 var(--wp-mo-space-md);
    height: 100%;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--wp-mo-color-text);
}
.wp-mo-qty__btn:hover { background: var(--wp-mo-color-bg-soft); }
.wp-mo-qty__input {
    border: none;
    text-align: center;
    width: 3.5rem;
    height: 100%;
    font-size: var(--wp-mo-font-body);
    font-weight: 600;
    background: transparent;
    -moz-appearance: textfield;
}
.wp-mo-qty__input::-webkit-outer-spin-button,
.wp-mo-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Add-to-cart */
.wp-mo-cart { flex: 1; margin: 0; }
.wp-mo-cart__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    height: 3rem;
    padding: 0 var(--wp-mo-space-lg);
    background: var(--wp-mo-color-accent);
    color: var(--wp-mo-color-accent-text);
    border: none;
    border-radius: var(--wp-mo-radius-md);
    font-size: var(--wp-mo-font-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}
.wp-mo-cart__btn:hover { background: var(--wp-mo-color-accent-hover); transform: translateY(-1px); }

/* USPs */
.wp-mo-usps {
    display: flex;
    gap: var(--wp-mo-space-lg);
    flex-wrap: wrap;
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    margin-top: var(--wp-mo-space-xs);
}
.wp-mo-usps__item { display: inline-flex; align-items: center; gap: 0.4em; }
.wp-mo-usps__icon { font-size: 1.2em; }

/* ───── Specs (dark block) ───── */
.wp-mo-specs {
    background: var(--wp-mo-color-dark);
    color: var(--wp-mo-color-dark-text);
    padding: var(--wp-mo-space-xl) var(--wp-mo-space-md);
}
.wp-mo-specs__inner {
    max-width: 1480px;
    margin: 0 auto;
}
.wp-mo-specs__title {
    text-align: center;
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 var(--wp-mo-space-lg);
    overflow-wrap: break-word;
    hyphens: auto;
}
.wp-mo-specs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp-mo-space-md);
    padding: var(--wp-mo-space-lg) 0;
    border-top: 1px solid var(--wp-mo-color-dark-border);
}
@media (min-width: 800px) {
    .wp-mo-specs__row {
        grid-template-columns: 220px 1fr;
        gap: var(--wp-mo-space-xl);
    }
}
.wp-mo-specs__heading {
    font-size: var(--wp-mo-font-h3);
    font-weight: 600;
}
.wp-mo-specs__body { color: var(--wp-mo-color-dark-text); }
.wp-mo-specs__body--text { color: rgba(26, 26, 26, 0.85); line-height: 1.6; }
.wp-mo-specs__body--text p { margin: 0 0 0.7em; }
.wp-mo-specs__body--text p:last-child { margin-bottom: 0; }
.wp-mo-specs__muted { color: var(--wp-mo-color-dark-muted); }

/* Product opties columns */
.wp-mo-specs__body--cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--wp-mo-space-lg);
}
.wp-mo-specs__col-title {
    font-weight: 600;
    margin-bottom: var(--wp-mo-space-xs);
    color: var(--wp-mo-color-dark-muted);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}
.wp-mo-specs__col-line {
    line-height: 1.55;
    color: rgba(26, 26, 26, 0.92);
}

/* Tiers */
.wp-mo-specs__body--tiers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--wp-mo-space-sm);
}
.wp-mo-specs__tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wp-mo-space-sm);
    padding: var(--wp-mo-space-sm) var(--wp-mo-space-md);
    background: var(--wp-mo-color-bg-soft);
    border-radius: var(--wp-mo-radius-md);
}
.wp-mo-specs__tier-qty { color: var(--wp-mo-color-dark-muted); }
.wp-mo-specs__tier-price { font-weight: 600; }
.wp-mo-specs__tier-discount {
    color: #4ade80;
    font-size: 0.85em;
    margin-left: 0.4em;
}

/* Print positions */
.wp-mo-specs__body--positions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--wp-mo-space-md);
}
.wp-mo-specs__position {
    background: var(--wp-mo-color-bg-soft);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wp-mo-specs__position-image {
    background: #f6f5f1;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-mo-specs__position-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.wp-mo-specs__position-body { padding: var(--wp-mo-space-md); }
.wp-mo-specs__position-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.wp-mo-specs__position-size {
    color: var(--wp-mo-color-dark-muted);
    font-size: var(--wp-mo-font-small);
    margin-bottom: var(--wp-mo-space-xs);
}
.wp-mo-specs__position-techs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    font-size: var(--wp-mo-font-small);
}
.wp-mo-specs__tech {
    background: var(--wp-mo-color-accent-soft);
    color: var(--wp-mo-color-accent);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* Specifications grid */
.wp-mo-specs__body--specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--wp-mo-space-md);
}
.wp-mo-specs__spec {
    border-bottom: 1px solid var(--wp-mo-color-dark-border);
    padding-bottom: var(--wp-mo-space-xs);
}
.wp-mo-specs__spec-label {
    color: var(--wp-mo-color-dark-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.wp-mo-specs__spec-value { color: rgba(26, 26, 26, 0.92); font-weight: 500; }

/* ───── Logo upload zone ───── */
.wp-mo-logo {
    background: var(--wp-mo-color-bg-soft);
    padding: var(--wp-mo-space-xl) var(--wp-mo-space-md);
}
.wp-mo-logo__inner {
    max-width: 1480px;
    margin: 0 auto;
}
.wp-mo-logo__title {
    text-align: center;
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 var(--wp-mo-space-lg);
    overflow-wrap: break-word;
    hyphens: auto;
}
.wp-mo-logo__zone {
    border: 2px dashed var(--wp-mo-color-accent);
    border-radius: var(--wp-mo-radius-lg);
    background: var(--wp-mo-color-bg);
    padding: var(--wp-mo-space-xl) var(--wp-mo-space-md);
    text-align: center;
    transition: background-color 120ms ease, border-color 120ms ease;
    position: relative;
}
.wp-mo-logo__zone.is-dragover {
    background: var(--wp-mo-color-accent-soft);
    border-color: var(--wp-mo-color-accent-hover);
}
.wp-mo-logo__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.wp-mo-logo__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wp-mo-space-sm);
    cursor: pointer;
    pointer-events: none;
}
.wp-mo-logo__icon { color: var(--wp-mo-color-accent); }
.wp-mo-logo__hint {
    font-size: var(--wp-mo-font-body);
    color: var(--wp-mo-color-text);
}
.wp-mo-logo__formats {
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
    font-weight: 600;
}
.wp-mo-logo__status {
    margin-top: var(--wp-mo-space-md);
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
}
.wp-mo-logo__status.is-success { color: var(--wp-mo-color-success); }
.wp-mo-logo__status.is-error { color: var(--wp-mo-color-danger); }

/* Logo via external link */
.wp-mo-logo__divider {
    display: flex;
    align-items: center;
    gap: var(--wp-mo-space-md);
    margin: var(--wp-mo-space-lg) auto;
    max-width: 100%;
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wp-mo-logo__divider::before,
.wp-mo-logo__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wp-mo-color-border);
}
.wp-mo-logo__link {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.wp-mo-logo__link-label {
    display: block;
    margin-bottom: var(--wp-mo-space-sm);
    font-weight: 600;
    color: var(--wp-mo-color-text);
}
.wp-mo-logo__link-hint {
    display: block;
    font-weight: 400;
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    margin-top: 0.15rem;
}
.wp-mo-logo__link-row {
    display: flex;
    gap: var(--wp-mo-space-sm);
    align-items: stretch;
}
.wp-mo-logo__link-input {
    flex: 1;
    min-height: 2.75rem;
    padding: 0 var(--wp-mo-space-md);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    font-size: var(--wp-mo-font-body);
    background: var(--wp-mo-color-bg);
}
.wp-mo-logo__link-input:focus {
    outline: 2px solid var(--wp-mo-color-accent);
    outline-offset: -1px;
}
.wp-mo-logo__link-btn {
    padding: 0 var(--wp-mo-space-lg);
    background: var(--wp-mo-color-accent);
    color: var(--wp-mo-color-accent-text);
    border: none;
    border-radius: var(--wp-mo-radius-md);
    font-size: var(--wp-mo-font-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.wp-mo-logo__link-btn:hover { background: var(--wp-mo-color-accent-hover); }
.wp-mo-logo__link-status {
    margin-top: var(--wp-mo-space-sm);
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
    min-height: 1.2em;
}
.wp-mo-logo__link-status.is-success { color: var(--wp-mo-color-success); }
.wp-mo-logo__link-status.is-error { color: var(--wp-mo-color-danger); }

/* ───── Staffel (price tiers) ───── */
.wp-mo-tiers {
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
    padding: var(--wp-mo-space-lg);
    max-width: 1480px;
    margin: 0 auto var(--wp-mo-space-md);
}
.wp-mo-tiers__title {
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 0.25rem;
    overflow-wrap: break-word;
    hyphens: auto;
}
.wp-mo-tiers__hint {
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    margin: 0 0 var(--wp-mo-space-md);
}
.wp-mo-tiers__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    overflow: hidden;
    font-size: var(--wp-mo-font-body);
}
.wp-mo-tiers__table thead {
    background: var(--wp-mo-color-bg-soft);
}
.wp-mo-tiers__table th,
.wp-mo-tiers__table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--wp-mo-color-border);
}
.wp-mo-tiers__table th {
    font-weight: 600;
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wp-mo-tiers__table tbody tr:last-child td {
    border-bottom: 0;
}
.wp-mo-tiers__table tbody tr:hover {
    background: var(--wp-mo-color-bg-soft);
}
.wp-mo-tiers__price {
    font-weight: 600;
    color: var(--wp-mo-color-text);
}
.wp-mo-tiers__discount {
    color: var(--wp-mo-color-success);
    font-weight: 600;
}

/* ───── Bulk-quantity grid ───── */
.wp-mo-bulk {
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
    padding: var(--wp-mo-space-lg);
    max-width: 1480px;
    margin: 0 auto var(--wp-mo-space-md);
}
.wp-mo-bulk__title {
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 0.25rem;
    overflow-wrap: break-word;
    hyphens: auto;
}
.wp-mo-bulk__hint {
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    margin: 0 0 var(--wp-mo-space-md);
}
.wp-mo-bulk__list {
    display: grid;
    /* Wider cards so "Apple Green — XS" + voorraad + qty input fit. */
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--wp-mo-space-sm);
    /* Cap at ~5 rows visible without scroll on desktop — beyond that,
       scroll inside the section so the page stays scannable. */
    max-height: 28rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.wp-mo-bulk__row {
    display: grid;
    /* Two-row layout: swatch + naam op rij 1, voorraad + qty op rij 2.
       Werkt voor lange combinatie-namen ("Donker Paars — XXL") zonder
       horizontale truncatie. */
    grid-template-columns: 1.4rem 1fr 5rem;
    grid-template-areas:
        "swatch name name"
        ".      stock qty";
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-sm);
    background: var(--wp-mo-color-bg-soft);
    font-size: var(--wp-mo-font-small);
}
.wp-mo-bulk__row .wp-mo-bulk__swatch { grid-area: swatch; }
.wp-mo-bulk__row .wp-mo-bulk__name   { grid-area: name; }
.wp-mo-bulk__row .wp-mo-bulk__stock  { grid-area: stock; justify-self: start; }
.wp-mo-bulk__row .wp-mo-bulk__qty    { grid-area: qty; }
.wp-mo-bulk__row.is-oos {
    opacity: 0.5;
}
.wp-mo-bulk__swatch {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid;
    flex: 0 0 auto;
}
.wp-mo-bulk__name {
    font-weight: 500;
    color: var(--wp-mo-color-text);
    /* Don't truncate — name + size suffix ("Apple Green — XS") needs
       to stay readable. Wrap onto a 2nd line if the column is narrow. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    min-width: 0;
}
.wp-mo-bulk__stock {
    color: var(--wp-mo-color-text-soft);
    font-size: 0.8em;
    white-space: nowrap;
}
.wp-mo-bulk__stock.is-oos {
    color: var(--wp-mo-color-danger);
}
.wp-mo-bulk__qty {
    width: 100%;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-sm);
    background: var(--wp-mo-color-bg);
    font-size: var(--wp-mo-font-small);
    text-align: center;
    box-sizing: border-box;
}
.wp-mo-bulk__qty:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.wp-mo-bulk__qty:focus,
.wp-mo-bulk__qty:not([value="0"]) {
    border-color: var(--wp-mo-color-accent);
    outline: none;
}
.wp-mo-bulk__summary {
    margin-top: var(--wp-mo-space-md);
    padding-top: var(--wp-mo-space-md);
    border-top: 1px solid var(--wp-mo-color-border);
    display: flex;
    gap: var(--wp-mo-space-lg);
    flex-wrap: wrap;
}
.wp-mo-bulk__summary-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--wp-mo-font-body);
}
.wp-mo-bulk__summary-line strong {
    font-size: 1.15em;
    color: var(--wp-mo-color-accent);
}

/* Matrix mode: kleuren rijen × maten kolommen (apparel) */
.wp-mo-bulk--matrix .wp-mo-bulk__list { display: none; }
.wp-mo-bulk__matrix-wrap {
    overflow-x: auto;
    margin: 0 calc(var(--wp-mo-space-md) * -1);
    padding: 0 var(--wp-mo-space-md);
}
.wp-mo-bulk__matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--wp-mo-font-small);
    min-width: 32rem;
    table-layout: auto;
}
.wp-mo-bulk__matrix th,
.wp-mo-bulk__matrix td {
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--wp-mo-color-border);
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
/* Header rij — sticky bovenaan tijdens verticaal scrollen.
   z-index 3 > 2 (left sticky color cell) > 1 (regular cells). */
.wp-mo-bulk__matrix thead th {
    background: var(--wp-mo-color-bg-soft);
    font-weight: 600;
    color: var(--wp-mo-color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Hoekcel — sticky linksboven (top + left) zodat hij blijft staan
   wanneer er zowel verticaal als horizontaal gescrolled wordt. */
.wp-mo-bulk__matrix-corner {
    text-align: left !important;
    padding-left: var(--wp-mo-space-md) !important;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    background: var(--wp-mo-color-bg-soft);
}
/* Linkerkolom — kleurnaam blijft zichtbaar tijdens horizontaal scrollen.
   GEEN display:flex (breekt table-row alignment) — gebruik whitespace
   en inline-block voor swatch+naam layout. */
.wp-mo-bulk__matrix-color {
    text-align: left !important;
    font-weight: 500;
    background: var(--wp-mo-color-bg);
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: var(--wp-mo-space-md) !important;
    padding-right: 1rem !important;
    min-width: 11rem;
    white-space: nowrap;
    /* Subtiele scheiding tussen sticky kolom en de matrix-cellen
       zodat het horizontaal scrollen visueel werkt. */
    border-right: 1px solid var(--wp-mo-color-border);
}
.wp-mo-bulk__matrix-color .wp-mo-bulk__swatch {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}
.wp-mo-bulk__matrix-color-name {
    display: inline-block;
    vertical-align: middle;
    color: var(--wp-mo-color-text);
}
/* Maat-cellen — strakke vaste breedte zodat alle kolommen consistent
   zijn ongeacht hoeveel input erin zit. */
.wp-mo-bulk__matrix-cell {
    padding: 0.3rem !important;
    width: 5rem;
    min-width: 5rem;
}
.wp-mo-bulk__matrix-cell .wp-mo-bulk__qty {
    width: 100%;
    max-width: 4.25rem;
    margin: 0 auto;
    display: block;
}
.wp-mo-bulk__matrix-cell .wp-mo-bulk__qty:not([value="0"]):not(:placeholder-shown) {
    background: var(--wp-mo-color-accent-soft);
    border-color: var(--wp-mo-color-accent);
    font-weight: 600;
}
.wp-mo-bulk__matrix-empty {
    color: var(--wp-mo-color-border);
    font-size: 1.1em;
    user-select: none;
}
/* Zebra-stripe op kleur-rijen verbetert leesbaarheid bij 16+ rijen. */
.wp-mo-bulk__matrix tbody tr:nth-child(even) .wp-mo-bulk__matrix-color {
    background: var(--wp-mo-color-bg-soft);
}
.wp-mo-bulk__matrix tbody tr:nth-child(even) .wp-mo-bulk__matrix-cell {
    background: rgba(0, 0, 0, 0.015);
}
.wp-mo-bulk__matrix tbody tr:hover .wp-mo-bulk__matrix-color,
.wp-mo-bulk__matrix tbody tr:hover .wp-mo-bulk__matrix-cell {
    background: var(--wp-mo-color-accent-soft);
}

/* ───── Live price calculator ───── */
.wp-mo-calc {
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-lg);
    padding: var(--wp-mo-space-lg);
    max-width: 1480px;
    margin: 0 auto var(--wp-mo-space-xl);
}
.wp-mo-calc__title {
    font-size: var(--wp-mo-font-h2);
    font-weight: 700;
    margin: 0 0 var(--wp-mo-space-md);
    overflow-wrap: break-word;
    hyphens: auto;
}
.wp-mo-calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp-mo-space-lg);
}
@media (min-width: 800px) {
    .wp-mo-calc__grid { grid-template-columns: 1fr 1fr; }
}
.wp-mo-calc__form { display: flex; flex-direction: column; gap: var(--wp-mo-space-md); }
.wp-mo-calc__field {
    display: flex;
    flex-direction: column;
    gap: var(--wp-mo-space-xs);
}

/* Multi-position rows */
.wp-mo-calc__lines {
    display: flex;
    flex-direction: column;
    gap: var(--wp-mo-space-sm);
}
.wp-mo-calc__row {
    background: var(--wp-mo-color-bg-soft);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    padding: var(--wp-mo-space-md);
}
.wp-mo-calc__row-body {
    display: grid;
    /* Preview image links iets ruimer — 9rem ≈ 144px geeft een
       behoorlijke preview van het printvlak zonder de form-velden
       rechts in de knel te brengen. */
    grid-template-columns: 9rem 1fr;
    gap: var(--wp-mo-space-md);
    align-items: start;
}
@media (min-width: 800px) {
    .wp-mo-calc__row-body {
        /* Op desktop nóg ruimer — 12rem ≈ 192px. Past comfortabel
           naast 2 form-velden (positie + techniek). */
        grid-template-columns: 12rem 1fr;
    }
}
@media (max-width: 540px) {
    .wp-mo-calc__row-body {
        grid-template-columns: 1fr;
    }
    .wp-mo-calc__row-preview {
        /* Op mobiel beperken zodat 'ie niet de halve viewport vult. */
        max-width: 16rem;
        margin: 0 auto;
    }
}
.wp-mo-calc__row-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--wp-mo-color-bg);
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-mo-calc__row-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0.25rem;
    box-sizing: border-box;
}
.wp-mo-calc__row-preview-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: zoom-in;
}
.wp-mo-calc__row-preview-btn:hover .wp-mo-calc__row-preview-zoom {
    opacity: 1;
}
.wp-mo-calc__row-preview-zoom {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}
.wp-mo-calc__row-preview-empty {
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
    text-align: center;
    padding: 0.5rem;
}

/* Lightbox overlay */
.wp-mo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
    animation: wp-mo-fade 180ms ease both;
}
.wp-mo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border-radius: var(--wp-mo-radius-md);
    background: #fff;
}
.wp-mo-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.wp-mo-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
}
@keyframes wp-mo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.wp-mo-calc__row-fields {
    display: flex;
    flex-direction: column;
    gap: var(--wp-mo-space-sm);
}
.wp-mo-calc__row-meta {
    font-size: var(--wp-mo-font-small);
    color: var(--wp-mo-color-text-soft);
}
.wp-mo-calc__row-meta:empty { display: none; }
.wp-mo-calc__row-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 0.8fr auto;
    gap: var(--wp-mo-space-sm);
    align-items: end;
}
@media (max-width: 720px) {
    .wp-mo-calc__row-grid {
        grid-template-columns: 1fr 1fr;
    }
    .wp-mo-calc__row-remove { grid-column: 2 / 3; justify-self: end; }
}
.wp-mo-calc__row-remove {
    background: transparent;
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-sm);
    width: 2.25rem;
    height: 2.25rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--wp-mo-color-text-soft);
    transition: border-color 120ms ease, color 120ms ease;
}
.wp-mo-calc__row-remove:hover {
    border-color: var(--wp-mo-color-danger);
    color: var(--wp-mo-color-danger);
}
.wp-mo-calc__add-line {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--wp-mo-color-accent);
    color: var(--wp-mo-color-accent);
    border-radius: var(--wp-mo-radius-md);
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: var(--wp-mo-font-small);
    font-weight: 600;
    transition: background 120ms ease;
}
.wp-mo-calc__add-line:hover {
    background: var(--wp-mo-color-accent-soft);
}
.wp-mo-calc__label {
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
    font-weight: 500;
}
.wp-mo-calc__input,
.wp-mo-calc__select {
    border: 1px solid var(--wp-mo-color-border);
    border-radius: var(--wp-mo-radius-md);
    padding: var(--wp-mo-space-sm) var(--wp-mo-space-md);
    font-size: var(--wp-mo-font-body);
    background: var(--wp-mo-color-bg);
    color: var(--wp-mo-color-text);
    height: 2.75rem;
}
.wp-mo-calc__input:focus,
.wp-mo-calc__select:focus {
    outline: 2px solid var(--wp-mo-color-accent);
    outline-offset: -1px;
}

.wp-mo-calc__breakdown {
    background: var(--wp-mo-color-bg-soft);
    border-radius: var(--wp-mo-radius-md);
    padding: var(--wp-mo-space-md) var(--wp-mo-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--wp-mo-space-sm);
}
.wp-mo-calc__loading,
.wp-mo-calc__error {
    color: var(--wp-mo-color-text-soft);
    font-style: italic;
}
.wp-mo-calc__error { color: var(--wp-mo-color-danger); font-style: normal; }

.wp-mo-calc__line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--wp-mo-space-sm);
    align-items: baseline;
    padding: var(--wp-mo-space-xs) 0;
    border-bottom: 1px solid var(--wp-mo-color-border);
    font-size: var(--wp-mo-font-body);
}
.wp-mo-calc__line:last-of-type { border-bottom: none; }
.wp-mo-calc__line-label { font-weight: 500; }
.wp-mo-calc__line-detail {
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
}
.wp-mo-calc__line-amount { font-weight: 600; }

.wp-mo-calc__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--wp-mo-space-sm);
    border-top: 2px solid var(--wp-mo-color-text);
    font-size: var(--wp-mo-font-h3);
    font-weight: 700;
}
.wp-mo-calc__total-amount { color: var(--wp-mo-color-accent); }

.wp-mo-calc__per-piece {
    color: var(--wp-mo-color-text-soft);
    font-size: var(--wp-mo-font-small);
}
.wp-mo-calc__note {
    background: var(--wp-mo-color-accent-soft);
    color: var(--wp-mo-color-text-soft);
    border-left: 3px solid var(--wp-mo-color-accent);
    padding: var(--wp-mo-space-sm) var(--wp-mo-space-md);
    border-radius: var(--wp-mo-radius-sm);
    margin: 0;
    font-size: var(--wp-mo-font-small);
}

/* Cart submit inside calculator */
.wp-mo-calc__cart-form {
    margin: var(--wp-mo-space-lg) 0 0;
    grid-column: 1 / -1;
}
.wp-mo-calc__cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    height: 3.25rem;
    background: var(--wp-mo-color-accent);
    color: var(--wp-mo-color-accent-text);
    border: none;
    border-radius: var(--wp-mo-radius-md);
    font-size: var(--wp-mo-font-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}
.wp-mo-calc__cart-btn:hover {
    background: var(--wp-mo-color-accent-hover);
    transform: translateY(-1px);
}