/* =============================================================
   Mooze Connect — Productconfigurator v2.6.1
   2-koloms blokken-layout: opties links, aantal + prijs rechts
   Huisstijl: Mooze Nederland BV
   ============================================================= */

:root {
    --mzc-gold:        rgb(200, 172, 118);
    --mzc-gold-dark:   rgb(172, 147, 98);
    --mzc-ink:         #242424;
    --mzc-soft:        #777;
    --mzc-border:      #e2e2e2;
    --mzc-surface:     #fff;
    --mzc-bg:          #f8f7f5;
    --mzc-radius-block: 8px;
    --mzc-radius-tile:  4px;
}

/* ── Container ─────────────────────────────────────────────── */
#mzc-configurator {
    font-family: "Helvetica W01 Regular", Arial, Helvetica, sans-serif;
    color: var(--mzc-ink);
}

/* ── Layout ────────────────────────────────────────────────── */
.mzc-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.mzc-main {
    flex: 3 1 0;
    min-width: 0;
}
.mzc-sidebar {
    flex: 2 0 220px;
    max-width: 300px;
    position: sticky;
    top: 90px;
}

/* ── Optie-blok (kaart) ────────────────────────────────────── */
.mzc-block {
    background: var(--mzc-surface);
    border: 1px solid var(--mzc-border);
    border-radius: var(--mzc-radius-block);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 18px 20px 16px;
    margin-bottom: 14px;
}
.mzc-block-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mzc-ink);
    margin: 0 0 12px;
}

/* ── Tile-raster ───────────────────────────────────────────── */
.mzc-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.mzc-tile {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1.5px solid var(--mzc-border);
    border-radius: var(--mzc-radius-tile) !important;
    background: var(--mzc-surface);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--mzc-ink);
    line-height: 1.3;
    transition: border-color .14s, background .14s, color .14s;
    white-space: nowrap;
}
.mzc-tile:hover:not([disabled]) {
    border-color: var(--mzc-gold);
}
.mzc-tile.is-chosen {
    border-color: var(--mzc-gold);
    background: var(--mzc-gold);
    color: #fff;
    font-weight: 700;
}
.mzc-tile.is-chosen .mzc-tile-check {
    font-size: 11px;
    opacity: .85;
}
.mzc-tile[disabled],
.mzc-tile.mzc-cond-disabled,
.mzc-tile.mzc-option-disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: #ccc;
    pointer-events: none;
}
.mzc-tile.mzc-option-conflict {
    border-color: #e8a000;
    background: #fff8e6;
    color: #7a5000;
}
.mzc-cond-reason {
    display: block;
    font-size: 10px;
    font-weight: 400;
    opacity: .75;
    font-style: italic;
    margin-top: 2px;
}

/* ── Grote keuzevelden ────────────────────────────────────── */
.mzc-show-all {
    display: block;
    width: 100%;
    margin-top: 16px !important;
    padding: 13px 8px;
    border: 0;
    border-radius: var(--mzc-radius-tile) !important;
    background: #f3f3f3 !important;
    color: var(--mzc-ink);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.mzc-show-all:hover { color: var(--mzc-gold-dark); }

/* ── Venster met alle formaten / materialen ───────────────── */
.mzc-options-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 20, 20, .58);
}
.mzc-options-dialog {
    display: flex;
    flex-direction: column;
    width: min(60vw, 480px);
    max-height: min(80vh, 760px);
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .28);
}
.mzc-options-header,
.mzc-options-footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    background: #fff;
}
.mzc-options-header { border-bottom: 1px solid var(--mzc-border); }
.mzc-options-header h2 {
    margin: 0;
    color: var(--mzc-ink);
    font-size: clamp(24px, 2.2vw, 38px);
    line-height: 1.15;
}
.mzc-modal-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mzc-ink);
    cursor: pointer;
    font-size: 42px;
    font-weight: 300;
    line-height: .7;
}
.mzc-options-body {
    overflow: auto;
    padding: 26px 28px;
    background: #fbfbfa;
}
.mzc-options-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.mzc-options-group h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 500;
}
.mzc-options-list { display: grid; gap: 8px; }
.mzc-modal-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 11px 16px;
    border: 1.5px solid var(--mzc-border);
    border-radius: var(--mzc-radius-tile);
    background: #fff;
    color: var(--mzc-ink);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    text-align: left;
    transition: border-color .14s, background .14s, color .14s;
}
.mzc-modal-option:hover:not([disabled]) { border-color: var(--mzc-gold); }
.mzc-modal-option.is-chosen {
    border-color: var(--mzc-gold);
    background: var(--mzc-gold);
    color: #fff;
    font-weight: 700;
}
.mzc-modal-option[disabled] {
    cursor: not-allowed;
    opacity: .42;
    text-decoration: line-through;
}
.mzc-options-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--mzc-border);
}
.mzc-modal-cancel,
.mzc-modal-confirm {
    min-width: 120px;
    padding: 12px 20px;
    border: 1px solid var(--mzc-border);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}
.mzc-modal-cancel { background: #fff; color: var(--mzc-ink); }
.mzc-modal-confirm { border-color: var(--mzc-gold); background: var(--mzc-gold); color: #fff; }

/* ── Fout-markering ────────────────────────────────────────── */
.mzc-block.mzc-field-error {
    border-color: #d00;
    border-left-width: 3px;
}
.mzc-field-error-msg {
    display: block;
    font-size: 12px;
    color: #d00;
    margin-top: 8px;
}

/* ── Aantal-blok (in sidebar) ──────────────────────────────── */
.mzc-block-copies {
    padding-bottom: 4px;
}
.mzc-qty-list {
    border: 1px solid var(--mzc-border);
    border-radius: var(--mzc-radius-tile);
    overflow: hidden;
    margin-top: 4px;
}
.mzc-qty-row {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0eeeb;
    transition: background .1s;
    font-size: 15px;
    font-weight: 500;
}
.mzc-qty-row:last-child { border-bottom: none; }
.mzc-qty-row:hover:not(.mzc-qty-other) { background: #f5f3f0; }
.mzc-qty-row.is-chosen {
    background: var(--mzc-gold);
    color: #fff;
    font-weight: 700;
}
.mzc-qty-num { flex: 1; }
.mzc-qty-price { margin-right: 10px; font-weight: 600; }
.mzc-copies-loading { margin: 10px 0 0; color: var(--mzc-soft); font-size: 13px; }
.mzc-qty-tick { font-size: 13px; opacity: .9; }

/* Andere oplage uitklapper */
.mzc-qty-other {
    cursor: default;
    background: var(--mzc-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}
.mzc-qty-other-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mzc-soft);
    transition: color .12s;
}
.mzc-qty-other-toggle:hover { color: var(--mzc-ink); }
.mzc-qty-arrow { font-size: 10px; }
.mzc-qty-other-input {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
}
.mzc-qty-other.is-open .mzc-qty-other-input { display: flex; }

.mzc-copies-input {
    width: 100px;
    padding: 8px 10px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    border: 1.5px solid var(--mzc-border);
    border-radius: var(--mzc-radius-tile);
    text-align: center;
    transition: border-color .15s;
}
.mzc-copies-input:focus {
    border-color: var(--mzc-gold);
    outline: none;
}
.mzc-copies-unit { font-size: 13px; color: var(--mzc-soft); }

/* Vrij veld (geen presets) */
.mzc-qty-free {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

/* ── Samenvatting-paneel (sidebar) ─────────────────────────── */
.mzc-summary-panel {
    border: 1px solid var(--mzc-border);
    border-radius: var(--mzc-radius-block);
    background: var(--mzc-bg);
    margin-bottom: 14px;
    overflow: hidden;
}
.mzc-summary-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #aaa;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--mzc-border);
    background: var(--mzc-surface);
}
.mzc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 7px 16px;
    font-size: 13px;
    border-bottom: 1px solid #f0eeeb;
}
.mzc-summary-row:last-child { border-bottom: none; }
.mzc-summary-key { color: var(--mzc-soft); white-space: nowrap; }
.mzc-summary-val { font-weight: 600; color: var(--mzc-ink); text-align: right; }
.mzc-summary-empty {
    padding: 10px 16px;
    font-size: 13px;
    color: #bbb;
    font-style: italic;
    margin: 0;
}

/* ── Prijs ─────────────────────────────────────────────────── */
.mzc-price-section {
    padding: 12px 0 4px;
    border-top: 1px solid var(--mzc-border);
}
.mzc-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.mzc-price-label { font-size: 13px; color: var(--mzc-soft); }
.mzc-price-display { font-size: 22px; font-weight: 700; color: var(--mzc-ink); }
.mzc-price-note { font-size: 12px; color: #aaa; margin-top: 2px; }

/* ── In winkelwagen ────────────────────────────────────────── */
.mzc-actions { padding-top: 14px; }
.mzc-btn-cart {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}
.mzc-btn-cart:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.mzc-cart-feedback {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}
.mzc-feedback-ok    { color: #2a7a44; }
.mzc-feedback-error { color: #c00; }

/* ── Laad / fout states ────────────────────────────────────── */
.mzc-loading {
    padding: 40px 0;
    color: #aaa;
    text-align: center;
    font-size: 14px;
}
.mzc-error { color: #c00; font-size: 14px; padding: 12px 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .mzc-layout { flex-direction: column; }
    .mzc-sidebar { max-width: 100%; width: 100%; position: static; }
    .mzc-main { width: 100%; }
}
@media (max-width: 480px) {
    .mzc-tile { font-size: 13px; padding: 8px 11px; }
    .mzc-block { padding: 14px 14px 12px; }
}
@media (max-width: 700px) {
    .mzc-options-modal { padding: 10px; }
    .mzc-options-dialog { width: 100%; max-height: calc(100vh - 20px); }
    .mzc-options-header,
    .mzc-options-footer { padding: 16px 18px; }
    .mzc-options-body { padding: 18px; }
    .mzc-options-group h3 { font-size: 18px; }
    .mzc-modal-option { font-size: 15px; }
}


/* ── Winkelwagen: potlood-link ────────────────────────────── */
.mzc-cart-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #f8f8f8;
    color: #666;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 6px;
    transition: background .15s, color .15s, border-color .15s;
}
.mzc-cart-edit-link:hover {
    background: #fff;
    color: #1a1a1a;
    border-color: #999;
}
.mzc-cart-edit-link svg {
    display: block;
}

/* ── Mooze winkelwagen — huisstijl mooze.nl ───────────────── */

/* Variabelen afgestemd op Woodmart child theme */
.mzc-cart-form {
    --mzc-gold:        rgb(200, 172, 118);
    --mzc-gold-light:  rgb(224, 195, 158);
    --mzc-text:        #777;
    --mzc-title:       #242424;
    --mzc-border:      #e8e8e8;
    --mzc-radius:      0px;
    font-family: "Helvetica W01 Regular", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--mzc-text);
}

/* Tabel */
.mzc-cart-table {
    width: 100%;
    border-collapse: collapse;
}
.mzc-cart-table th,
.mzc-cart-table td {
    padding: 20px 16px;
    vertical-align: top;
    border-bottom: 1px solid var(--mzc-border);
}
.mzc-cart-table thead th {
    font-family: "Helvetica W01 Bold", Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 2px solid var(--mzc-border);
    padding-top: 0;
    padding-bottom: 12px;
}
.mzc-cart-table .product-thumbnail { width: 90px; padding-right: 0; }
.mzc-cart-table .product-subtotal  { text-align: right; white-space: nowrap; font-family: "Helvetica W01 Bold", Arial, Helvetica, sans-serif; color: var(--mzc-title); }
.mzc-cart-table .product-remove    { width: 48px; text-align: center; padding-left: 8px; }

/* Thumbnail */
.mzc-cart-table .product-thumbnail img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    border: 1px solid var(--mzc-border);
    display: block;
}

/* Naam-rij */
.mzc-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
a.mzc-product-title,
span.mzc-product-title {
    font-family: "Helvetica W01 Bold", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--mzc-title);
    text-decoration: none;
    line-height: 1.3;
}
a.mzc-product-title:hover { color: var(--mzc-gold); }

/* Potlood-knop — goud, aansluitend bij Woodmart accent */
.mzc-pencil-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--mzc-gold);
    background: transparent;
    color: var(--mzc-gold);
    text-decoration: none !important;
    transition: background .15s, color .15s;
    border-radius: var(--mzc-radius);
}
.mzc-pencil-link:hover {
    background: var(--mzc-gold);
    color: #fff;
}
.mzc-pencil-link svg { display: block; }

/* Meta-opties — compact op één regel */
.mzc-meta-line {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--mzc-text);
    line-height: 1.6;
}
.mzc-meta-key {
    color: var(--mzc-title);
    font-family: "Helvetica W01 Bold", Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.mzc-meta-sep { color: #ccc; margin: 0 2px; }

/* Verwijderknop */
.mzc-cart-table .product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--mzc-border);
    background: transparent;
    color: #bbb;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    border-radius: var(--mzc-radius);
    font-size: 0;
}
.mzc-cart-table .product-remove a.remove:hover {
    border-color: #e00;
    color: #e00;
    background: #fff5f5;
}
.mzc-cart-table .product-remove a.remove svg { display: block; }

/* Qty voor reguliere producten */
.mzc-qty-wrapper { margin-top: 10px; }

/* Actiebalk */
.mzc-cart-table .actions { border-bottom: none; padding-top: 12px; }
.mzc-cart-form .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mzc-cart-form .coupon input.input-text {
    border: 1px solid var(--mzc-border);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--mzc-text);
    font-family: inherit;
    outline: none;
    border-radius: var(--mzc-radius);
}
.mzc-cart-form .coupon input.input-text:focus { border-color: var(--mzc-gold); }
.mzc-cart-form .coupon .button {
    background: var(--mzc-gold);
    color: #fff;
    border: none;
    padding: 8px 18px;
    font-family: "Helvetica W01 Bold", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    border-radius: var(--mzc-radius);
    letter-spacing: .04em;
}
.mzc-cart-form .coupon .button:hover { background: var(--mzc-gold-light); }

/* Responsive */
@media (max-width: 600px) {
    .mzc-cart-table .product-thumbnail,
    .mzc-cart-table thead th.product-thumbnail { display: none; }
    .mzc-cart-table th, .mzc-cart-table td { padding: 14px 10px; }
    .mzc-meta-line { font-size: 12px; }
}

/* Legacy: potlood-link vanuit vorige versies */
.mzc-cart-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgb(200,172,118);
    background: transparent;
    color: rgb(200,172,118);
    text-decoration: none;
    vertical-align: middle;
    margin-left: 6px;
    transition: background .15s, color .15s;
}
.mzc-cart-edit-link:hover { background: rgb(200,172,118); color: #fff; }
.mzc-cart-edit-link svg { display: block; }