/* =========================================================
   De VisZaeck, WooCommerce overrides.

   Loaded only on WooCommerce pages, and after wc-blocks-style,
   so rules here win by load order rather than by !important.
   See dvz_child_enqueue_woocommerce_styles() in functions.php.

   Target .wc-block-* and .woocommerce-* classes only. Never
   target Elementor markup from this file.

   Empty for now: rules land here during the design phase.
   ========================================================= */

/* =========================================================
   WINKELPAGINA

   Opzet naar het voorbeeld van de referentie: een lange
   menukaart met een plakkende categoriebalk, in plaats van
   een raster met doorbladeren. De kaarten zelf komen uit
   sections.css, zodat winkel en homepage nooit uit elkaar
   kunnen lopen.
   ========================================================= */

.dvz-shop {
    background: #fff;
}

/* -------------------------------------------------- kop */
.dvz-shop__head {
    padding: 56px 0 40px;
    background: var(--dvz-ijs);
    border-bottom: 1px solid var(--dvz-lijn);
}

.dvz-shop__title {
    margin: 8px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: clamp(38px, 6vw, 62px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -1px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

/* De tweede helft van de kop in de merkkleur, zoals de referentie
   zijn koppen in twee tonen zet. */
.dvz-shop__title em {
    font-style: normal;
    color: var(--dvz-diepblauw);
}

.dvz-shop__dot { color: var(--dvz-azuur); }

.dvz-shop__lead {
    max-width: 58ch;
    margin: 18px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--dvz-tekst);
}

/* ------------------------------------------ categoriebalk */
.dvz-shop__bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--dvz-lijn);
}

.dvz-shop__barinner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* zoeken */
.dvz-shop__search {
    position: relative;
    flex: 0 0 258px;
    display: flex;
    align-items: center;
}

.dvz-shop__searchicon {
    position: absolute;
    left: 14px;
    width: 15px;
    height: 15px;
    background: var(--dvz-tekst);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

/* Twee klassen, met opzet. Het thema stelt input[type="search"] in, en dat is
   een klasse plus een attribuut; een enkele klasse verliest daarvan hoe laat dit
   bestand ook laadt. Dezelfde reden als bij de bandafbeeldingen op de homepage. */
.dvz-shop__search .dvz-shop__input {
    width: 100%;
    padding: 11px 36px 11px 38px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
}

.dvz-shop__search .dvz-shop__input::placeholder { color: #9fb0c4; }
.dvz-shop__search .dvz-shop__input::-webkit-search-cancel-button { display: none; }

.dvz-shop__search .dvz-shop__input:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

.dvz-shop__clear {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--dvz-ijs);
    color: var(--dvz-marine);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.dvz-shop__clear[hidden] { display: none; }

/* chips */
.dvz-shop__cats {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.dvz-shop__cats::-webkit-scrollbar { display: none; }

/* Een zachte rand aan de kant waar de rij doorloopt. chips.js zet de klassen
   is-scrollable, at-start en at-end; zonder script blijft er een vaste
   vervaging rechts, zodat het nooit een harde afsnede wordt. */
.dvz-shop__cats {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.dvz-shop__cats.is-scrollable:not(.at-start):not(.at-end) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 56px), transparent);
}

.dvz-shop__cats.is-scrollable.at-end:not(.at-start) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
            mask-image: linear-gradient(to right, transparent, #000 48px);
}

.dvz-shop__cats:not(.is-scrollable),
.dvz-shop__cats.at-start.at-end {
    -webkit-mask-image: none;
            mask-image: none;
}

.dvz-chips--shop {
    /* De basisrij centreert zichzelf. Op een rij die breder is dan het scherm
       duwt centreren de eerste chips links buiten beeld, waar geen scrollbalk
       ooit bij komt. Hier begint hij dus links. */
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 0;

    /* Op smalle schermen maakt sections.css van deze lijst zelf een scroller
       die 20px buiten zijn kader bloedt. Op de homepage klopt dat, want daar
       is de lijst het buitenste element. Hier zit er al een scrollend kader
       omheen, en die negatieve marge duwde de eerste chip half het scherm af.
       Dit bestand laadt later, dus deze regels winnen op elk formaat. */
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
}

.dvz-chips--shop .dvz-chip {
    padding: 9px 16px;
    font-size: 15px;
    white-space: nowrap;
}

.dvz-chips--shop .dvz-chip.is-active {
    border-color: var(--dvz-diepblauw);
    background: var(--dvz-diepblauw);
    color: #fff;
}

.dvz-chips--shop .dvz-chip.is-active:hover {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    color: #fff;
}

/* ------------------------------------------------ inhoud */
.dvz-shop__body { padding: 40px 0 84px; }

.dvz-shop__count {
    margin: 0 0 8px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    color: var(--dvz-tekst);
    font-variant-numeric: tabular-nums;
}

.dvz-shop__section { padding-top: 34px; }
.dvz-shop__section[hidden] { display: none; }

.dvz-shop__sechead { margin-bottom: 22px; }

.dvz-shop__secdesc {
    margin: 10px 0 0;
    max-width: 62ch;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--dvz-tekst);
}

/* Scrollt een ankerlink aan, dan mag de kop niet onder de balk duiken. */
.dvz-shop__section > .dvz-sec__head [id] { scroll-margin-top: 88px; }

.dvz-card--product[hidden] { display: none; }

/* De keuzes die een product biedt, bijvoorbeeld "3 maten, 10 sauzen". */
.dvz-card__options {
    margin: 9px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dvz-azuur);
}

/* Prijs boven, knop eronder over de volle breedte. Bijna de helft van dit
   assortiment heeft een prijsvork, en "EUR 6,50 - EUR 8,50" naast een knop
   past niet in een kolom van vier. Stapelen leest rustiger dan afbreken. */
.dvz-card--product .dvz-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.dvz-card--product .dvz-card__price { flex-direction: row; align-items: baseline; }

.dvz-card--product .dvz-card__amount {
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
}

.dvz-card--product .dvz-card__cta { justify-content: center; }

/* WooCommerce zet de prijsvork in <span class="woocommerce-Price-amount">.
   Die erven de kaartstijl, en het streepje ertussen mag rustiger. */
.dvz-card--product .dvz-card__amount del { opacity: 0.55; font-size: 0.8em; }
.dvz-card--product .dvz-card__amount ins { text-decoration: none; }

.dvz-card__cta { flex: 0 0 auto; }

/* WooCommerce hangt na een ajax-toevoeging zelf een "Bekijk mand" link
   achter de knop. Die hoort naast de knop, niet eronder uit de kaart. */
.dvz-card__foot .added_to_cart {
    flex: 0 0 100%;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dvz-diepblauw);
}

.dvz-shop__empty {
    margin: 40px 0 0;
    padding: 28px;
    border: 1px dashed var(--dvz-lijn);
    border-radius: 14px;
    background: var(--dvz-ijs);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-tekst);
    text-align: center;
}

.dvz-shop__empty[hidden] { display: none; }

/* ---------------------------------------------- responsive */
@media (max-width: 1100px) {
    .dvz-shop .dvz-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .dvz-shop__barinner { flex-direction: column; align-items: stretch; gap: 12px; }
    .dvz-shop__search { flex: 1 1 auto; }
    .dvz-shop .dvz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dvz-shop__head { padding: 40px 0 32px; }
}

@media (max-width: 560px) {
    .dvz-shop .dvz-grid--4 { grid-template-columns: 1fr; }
    .dvz-card__foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .dvz-shop__bar { backdrop-filter: none; }
}

/* =========================================================
   PRODUCTPAGINA
   ========================================================= */

.dvz-product { padding: 26px 0 0; background: #fff; }

/* ------------------------------------------------ kruimels */
.dvz-product__crumbs {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    color: var(--dvz-tekst);
}

.dvz-product__crumbs a { color: var(--dvz-tekst); text-decoration: none; }
.dvz-product__crumbs a:hover { color: var(--dvz-diepblauw); }
.dvz-product__crumbsep { margin: 0 8px; color: #b9c7d8; }

/* ------------------------------------------------ twee kolommen */
.dvz-product__top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding: 28px 0 60px;
}


/* De foto is het verkoopargument; die mag de linkerkolom vullen en blijft
   in beeld terwijl rechts de keuzes langslopen. */
@media (min-width: 981px) {
    .dvz-product__gallery { position: sticky; top: 24px; }
}

/* galerij */
/* WooCommerce zet de galerij zelf op "float: left; width: 48%" via
   .woocommerce div.product div.images, en dat is drie klassen plus twee
   elementen. Een kortere selector verliest daarvan, hoe laat dit bestand ook
   laadt. Daarom hier dezelfde vorm met onze eigen klasse ertussen. Zelfde soort
   botsing als bij de bandafbeeldingen op de homepage. */
.woocommerce div.product .dvz-product__gallery div.images,
.dvz-product__gallery .woocommerce-product-gallery {
    width: 100%;
    max-width: none;
    margin: 0;
    float: none;
}

.dvz-product__gallery .woocommerce-product-gallery__wrapper {
    border: 1px solid var(--dvz-lijn);
    border-radius: 18px;
    overflow: hidden;
    background: var(--dvz-ijs);
    margin: 0;
}

/* WooCommerce laat de galerij door zijn slider opmeten en die valt terug op de
   natuurlijke breedte van het plaatje. Bij een kleine placeholder blijft de
   afbeelding dan een postzegel in een halve kolom. De dia's zelf op volle
   breedte zetten lost dat op, nu en straks met echte foto's. */
.dvz-product__gallery .woocommerce-product-gallery__image,
.dvz-product__gallery .woocommerce-product-gallery__wrapper > div { width: 100%; }

.dvz-product__gallery .woocommerce-product-gallery__image img,
.dvz-product__gallery .woocommerce-product-gallery__wrapper img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.dvz-product__gallery .flex-control-thumbs img { aspect-ratio: 1 / 1; }

/* De zoomknop van WooCommerce is een klein vergrootglas rechtsboven. */
.dvz-product__gallery .woocommerce-product-gallery__trigger {
    top: 16px;
    right: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(11, 36, 85, 0.14);
}

/* De duimnagels onder de hoofdafbeelding. */
.dvz-product__gallery .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.dvz-product__gallery .flex-control-thumbs li { width: 100%; margin: 0; float: none; }

.dvz-product__gallery .flex-control-thumbs img {
    border: 1px solid var(--dvz-lijn);
    border-radius: 10px;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.dvz-product__gallery .flex-control-thumbs img.flex-active,
.dvz-product__gallery .flex-control-thumbs img:hover {
    opacity: 1;
    border-color: var(--dvz-azuur);
}

/* ------------------------------------------------ samenvatting */
.dvz-product__cat { color: inherit; text-decoration: none; }
.dvz-product__cat:hover { color: var(--dvz-diepblauw); }

.dvz-product__title {
    margin: 10px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

.dvz-product__lead {
    margin: 14px 0 0;
    max-width: 52ch;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--dvz-tekst);
}

.dvz-product__price {
    margin: 22px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--dvz-marine);
    font-variant-numeric: tabular-nums;
}

.dvz-product__price del { opacity: 0.5; font-size: 0.72em; margin-right: 8px; }
.dvz-product__price ins { text-decoration: none; }

/* De prijs die meebeweegt zodra een variant gekozen is. */
.dvz-product__buy .woocommerce-variation-price {
    margin-bottom: 14px;
    font-family: Lora, Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.dvz-product__buy { margin-top: 26px; }

/* --------------------------------------- keuzelijsten en aantal */
.dvz-product__buy table.variations {
    width: 100%;
    margin: 0 0 20px;
    border: 0;
    border-collapse: collapse;
}

.dvz-product__buy table.variations tr { display: block; margin-bottom: 16px; }

/* Het thema geeft tabelrijen en cellen een streepachtergrond. In een keuzelijst
   levert dat een grijze balk onder elke select op, die niets betekent. */
.dvz-product__buy table.variations,
.dvz-product__buy table.variations tbody,
.dvz-product__buy table.variations tr,
.dvz-product__buy table.variations th,
.dvz-product__buy table.variations td { background: none; }

.dvz-product__buy table.variations th,
.dvz-product__buy table.variations td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
}

.dvz-product__buy table.variations label {
    display: block;
    margin-bottom: 7px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dvz-marine);
}

/* Twee selectors, met opzet. Het thema stelt select via het element in, en een
   enkele klasse zou daarvan kunnen verliezen. Zie ook de bandafbeeldingen. */
.dvz-product .dvz-product__buy select {
    width: 100%;
    max-width: 340px;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2455' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 15px no-repeat;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    color: var(--dvz-marine);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.dvz-product .dvz-product__buy select:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

.dvz-product__buy .reset_variations {
    display: inline-block;
    margin-top: 4px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    color: var(--dvz-tekst);
}

/* aantal plus knop op een rij */
.dvz-product__buy form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.dvz-product__buy form.variations_form { display: block; }

.dvz-product__buy .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.dvz-product__buy .quantity { display: flex; }

.dvz-product .dvz-product__buy .quantity input.qty {
    width: 84px;
    padding: 14px 10px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    text-align: center;
    color: var(--dvz-marine);
}

/* De koopknop krijgt dezelfde vorm als elke andere knop op de site. */
.dvz-product .dvz-product__buy button.single_add_to_cart_button,
.dvz-product .dvz-product__buy .button {
    padding: 15px 30px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dvz-product .dvz-product__buy button.single_add_to_cart_button:hover,
.dvz-product .dvz-product__buy .button:hover {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 36, 85, 0.2);
}

.dvz-product .dvz-product__buy button.single_add_to_cart_button.disabled,
.dvz-product .dvz-product__buy button.single_add_to_cart_button:disabled {
    background: #cdd7e4;
    border-color: #cdd7e4;
    color: #6b7a8f;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* --------------------------------------- keuzes als knoppen */
/* product.js zet naast elke keuzelijst een rij knoppen. De lijst zelf blijft
   in het document, want WooCommerce leest daaruit; hij is alleen niet meer te
   zien. */
.dvz-product .dvz-product__buy table.variations select.dvz-has-swatches {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    min-width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

.dvz-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dvz-swatch {
    padding: 10px 18px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    color: var(--dvz-marine);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.dvz-swatch:hover,
.dvz-swatch:focus-visible {
    border-color: var(--dvz-azuur);
    color: var(--dvz-diepblauw);
    background: #fff;
    transform: translateY(-1px);
    outline: none;
}

.dvz-swatch.is-active,
.dvz-swatch.is-active:hover {
    background: var(--dvz-diepblauw);
    border-color: var(--dvz-diepblauw);
    color: #fff;
}

.dvz-swatch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* De hint naast de knop zolang er nog niets gekozen is. */
.dvz-product__hint {
    flex: 1 1 100%;
    margin: -2px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    color: var(--dvz-tekst);
}

.dvz-product__hint[hidden] { display: none; }

/* De eenheid achter een prijs per gewicht, kleiner en rustiger. */
.dvz-product__price .dvz-vs-unit {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--dvz-tekst);
    margin-left: 6px;
}

/* ----------------------------------- aanvraagformulier visschotel */
/* De plugin zet zijn blokken al als kaarten neer; twee dingen komen van
   buiten. Een legend staat van nature op de rand van het kader, wat als een
   formulier uit 2005 leest: met float staat hij gewoon bovenin als kop. En het
   thema geeft [type="submit"] een roze rand die van de knopklasse wint omdat
   het later laadt; hier, nog later, wint de huisstijl weer. */
.dvz-product .dvz-vs__block { padding: 22px 24px 24px; border-radius: 16px; }

.dvz-product .dvz-vs__legend {
    float: left;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    font-size: 20px;
}

/* Alles na de legend begint eronder, ook een flex-blok zoals het gewichtsveld,
   dat anders als eigen opmaakcontext naast de float gaat staan. */
.dvz-product .dvz-vs__block > :not(legend) { clear: both; }

.dvz-product .dvz-vs__submit,
.dvz-product [type="submit"].dvz-vs__submit {
    padding: 15px 30px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.dvz-product .dvz-vs__submit:hover,
.dvz-product .dvz-vs__submit:focus,
.dvz-product [type="submit"].dvz-vs__submit:hover,
.dvz-product [type="submit"].dvz-vs__submit:focus {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 36, 85, 0.2);
}

.dvz-product .dvz-vs__field input,
.dvz-product .dvz-vs__field textarea,
.dvz-product .dvz-vs__weight input {
    border-radius: 12px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    color: var(--dvz-marine);
}

.dvz-product .dvz-vs__field input:focus,
.dvz-product .dvz-vs__field textarea:focus,
.dvz-product .dvz-vs__weight input:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

/* -------------------------------------- vaste koopbalk (telefoon) */
.dvz-stickybuy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-top: 1px solid var(--dvz-lijn);
    box-shadow: 0 -10px 30px rgba(11, 36, 85, 0.1);
    font-family: "Source Sans 3", system-ui, sans-serif;
}

.dvz-stickybuy[hidden] { display: none; }

@media (min-width: 768px) {
    .dvz-stickybuy { display: none; }
}

.dvz-stickybuy__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.dvz-stickybuy__name {
    font-family: Lora, Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--dvz-marine);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dvz-stickybuy__price { font-size: 14px; color: var(--dvz-tekst); }

.dvz-stickybuy__btn {
    flex: 0 0 auto;
    padding: 13px 22px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.dvz-stickybuy__btn.is-ghost {
    background: #fff;
    color: var(--dvz-diepblauw);
}

/* ------------------------------------------------ bezorgregel */
.dvz-product__note {
    margin: 26px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 14px;
    background: var(--dvz-ijs);
}

.dvz-product__noteline {
    margin: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--dvz-marine);
}

.dvz-product__notesub {
    margin: 4px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    color: var(--dvz-tekst);
}

.dvz-product__notechange {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dvz-diepblauw);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ------------------------------------------------ omschrijving */
.dvz-product__detail {
    padding: 0 0 60px;
    max-width: 68ch;
}

.dvz-product__subtitle {
    margin: 0 0 14px;
    font-family: Lora, Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.dvz-product__text {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--dvz-tekst);
}

.dvz-product__text p { margin: 0 0 14px; }

/* ------------------------------------------------ gerelateerd */
.dvz-product__related {
    padding: 54px 0 84px;
    background: var(--dvz-ijs);
    border-top: 1px solid var(--dvz-lijn);
}

.dvz-product__related .dvz-sec__head { margin-bottom: 26px; }
.dvz-product__related .dvz-card { background: #fff; }

/* ---------------------------------------------- responsive */
@media (max-width: 980px) {
    .dvz-product__top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
    .dvz-product__gallery { max-width: 520px; }
    .dvz-product__related .dvz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .dvz-product__related .dvz-grid--4 { grid-template-columns: 1fr; }
    .dvz-product .dvz-product__buy select { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dvz-product .dvz-product__buy button.single_add_to_cart_button,
    .dvz-product .dvz-product__buy .button { transition: none; }
}

/* =========================================================
   WINKELWAGENLADE

   De typografie en de kleuren van deze lade staan in de widget
   zelf, zodat Elementor er zijn eigen css voor maakt en de klant
   het in de editor kan bijstellen. Wat hier staat is alleen
   indeling: breedte, uitlijning en de dingen waar de widget geen
   knop voor heeft.

   Elementor werkt hier met eigen custom properties, dus dit
   verzet variabelen in plaats van tegen selectors te duwen.
   ========================================================= */

.elementor-menu-cart__main {
    /* De widget staat vast op 350px. Met een productnaam, een prijs en
       een verwijderknop naast elkaar is dat net te krap. */
    width: min(480px, 100vw);
    box-shadow: -18px 0 48px rgba(11, 36, 85, 0.16);
}

/* Twee knoppen naast elkaar in 350 pixels laat "Bekijk winkelwagen"
   over twee regels afbreken naast een veel bredere "Afrekenen".
   Onder elkaar, allebei over de volle breedte, is rustiger en geeft
   de primaire actie de ruimte die hij hoort te hebben. */
.elementor-menu-cart__footer-buttons {
    --cart-footer-layout: 1fr;
    --space-between-buttons: 10px;
    font-size: inherit;
}

.elementor-menu-cart__footer-buttons .elementor-button {
    display: block;
    width: 100%;
    text-align: center;
    transition: background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
    box-shadow: 0 10px 22px rgba(11, 36, 85, 0.22);
}

/* De kop boven de mand, aangehaakt via woocommerce_before_mini_cart. */
/* De kop en de bezorgregel hangen aan de twee haken die Elementor overhoudt, en
   staan daardoor binnen de productlijst. Ze gedragen zich hier als volle regels
   in plaats van als een product in het raster. */
.elementor-menu-cart__products > .dvz-minicart__head,
.elementor-menu-cart__products > .dvz-minicart__note { grid-column: 1 / -1; }

.dvz-minicart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--dvz-lijn, #DCE7F3);
}

.dvz-minicart__title {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dvz-marine, #0B2455);
}

.dvz-minicart__count {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    color: var(--dvz-tekst, #5A667E);
    font-variant-numeric: tabular-nums;
}

/* De regel onder de knoppen: waar het heen gaat en wat het minimum is. */
.dvz-minicart__note {
    margin: 18px 0 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--dvz-ijs, #EFF5FC);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dvz-tekst, #5A667E);
    text-align: left;
}

.dvz-minicart__note strong { color: var(--dvz-marine, #0B2455); font-weight: 600; }

/* De productregel. Beeld links met onze kaartvorm, tekst ernaast; de tekstkolom
   mag krimpen (minmax 0) zodat lange samenstellingen netjes afbreken in plaats
   van het raster op te rekken. */
.elementor-menu-cart__product {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
    padding-inline-end: 36px;
}

.elementor-menu-cart__product-name a {
    display: block;
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Samenstelling / Wensen / Maat / Saus onder de naam: label en waarde in twee
   rustige kolommen, waarde mag meerdere regels zijn. */
.elementor-menu-cart__product-name dl.variation {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    margin: 8px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
}

.elementor-menu-cart__product-name dl.variation dt,
.elementor-menu-cart__product-name dl.variation dd {
    margin: 0;
    padding: 0;
    float: none;
    display: block;
    border: 0;
}

.elementor-menu-cart__product-name dl.variation dt { color: var(--dvz-marine, #0B2455); font-weight: 600; }
.elementor-menu-cart__product-name dl.variation dd { color: var(--dvz-tekst, #5A667E); }
.elementor-menu-cart__product-name dl.variation dd p { margin: 0; display: inline; }

.elementor-menu-cart__product-price {
    margin-top: 8px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--dvz-marine, #0B2455);
    font-variant-numeric: tabular-nums;
}

.elementor-menu-cart__product-image {
    border: 1px solid var(--dvz-lijn, #DCE7F3);
    border-radius: 12px;
    overflow: hidden;
    background: var(--dvz-ijs, #EFF5FC);
}

.elementor-menu-cart__product-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.elementor-menu-cart__product-name { margin-bottom: 2px; }

/* Elementor legt naam en prijs in twee rijen die de resterende hoogte delen,
   waardoor er een gat tussen valt zodra de afbeelding hoger is dan de tekst.
   Bovenaan uitlijnen houdt de regel bij elkaar. */
.elementor-menu-cart__product { align-content: start; row-gap: 2px; }

.elementor-menu-cart__product .remove_from_cart_button {
    top: 2px;
    transform: none;
}

/* Het kruisje om iets te verwijderen is een klein doel. Een rondje
   eromheen maakt het aanwijsbaar zonder het luid te maken. */
.elementor-menu-cart__product .remove_from_cart_button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-menu-cart__product .remove_from_cart_button:hover {
    background: var(--dvz-ijs, #EFF5FC);
}

.elementor-menu-cart__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* Een lege mand hoort niet als een fout te lezen. */
.elementor-menu-cart__empty-message {
    padding: 30px 0;
    text-align: center;
}

@media (max-width: 480px) {
    .elementor-menu-cart__main { width: 100vw; }
    .elementor-menu-cart__product { grid-template-columns: 64px minmax(0, 1fr); padding-inline-end: 32px; }
    .elementor-menu-cart__product-name dl.variation { grid-template-columns: 1fr; row-gap: 1px; }
}

/* =========================================================
   WINKELWAGEN EN AFREKENEN

   Beide pagina's zijn blokken van WooCommerce. De opmaak van die
   blokken loopt via eigen custom properties en een vaste set
   klassen; dit bestand laadt na wc-blocks-style, dus hier is
   nergens !important voor nodig.
   ========================================================= */

/* ------------------------------------------------ paginakop */
.dvz-cart__head {
    margin: 0 0 34px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--dvz-lijn);
}

.dvz-cart__title {
    margin: 8px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: clamp(32px, 4.6vw, 48px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.8px;
    color: var(--dvz-marine);
    text-wrap: balance;
}

.dvz-cart__title em { font-style: normal; color: var(--dvz-diepblauw); }

.dvz-cart__lead {
    margin: 14px 0 0;
    max-width: 56ch;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--dvz-tekst);
}

/* De paginakop staat er als broer voor en levert de ruimte al; het blok hoeft
   er niet nog eens veertig pixels bovenop te doen. */
.wc-block-cart,
.wc-block-checkout { padding: 0 0 84px; }

/* Twee kolommen met wat meer lucht ertussen dan standaard. */
.wc-block-components-sidebar-layout { gap: 0; }

/* ---------------------------------------- regels in de mand */
.wc-block-cart-items { border: 0; }

.wc-block-cart-items__header {
    border-bottom: 1px solid var(--dvz-lijn);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

/* Het blok tekent de scheiding als een border-top op elke cel afzonderlijk.
   Onze eigen border-bottom op de rij kwam daar bovenop, en omdat de cellen niet
   even hoog zijn stonden er twee lijnen net onder elkaar. Nu alleen die van het
   blok, in onze lijnkleur, met gelijke ruimte erboven en eronder. */
/* Met losstaande cellen tekent elke cel zijn eigen bovenrand, en bij een
   gebroken rijhoogte ligt die van de prijskolom een pixel hoger dan de rest.
   Samengevoegde randen delen een lijn, dus dat verschil kan niet meer bestaan. */
.wc-block-cart-items { border-collapse: collapse; }

.wc-block-cart-items,
.wc-block-cart-items__row > td { border-bottom: 0; }

.wc-block-cart-items .wc-block-cart-item__image,
.wc-block-cart-items .wc-block-cart-item__product,
.wc-block-cart-items .wc-block-cart-item__total {
    border-top: 1px solid var(--dvz-lijn);
    padding-top: 22px;
    padding-bottom: 22px;
}

.wc-block-cart-item__wrap { border: 0; }

/* De kolombreedte bepaalt hoe groot het plaatje mag worden; alleen de
   afbeelding breder maken doet niets in een tabel. */
.wc-block-cart-items .wc-block-cart-item__image {
    width: 112px;
    padding-right: 20px;
}

.wc-block-cart-items .wc-block-cart-item__image img {
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--dvz-lijn);
    border-radius: 12px;
    background: var(--dvz-ijs);
}

.wc-block-components-product-name {
    font-family: Lora, Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dvz-marine);
    text-decoration: none;
}

a.wc-block-components-product-name,
.wc-block-cart-item__product .wc-block-components-product-name { text-decoration: none; }

a.wc-block-components-product-name:hover { color: var(--dvz-diepblauw); text-decoration: underline; }

.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-components-product-metadata {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    color: var(--dvz-tekst);
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-family: Lora, Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--dvz-marine);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- aantalregelaar */
.wc-block-components-quantity-selector {
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    max-width: 132px;
}

.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__input {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dvz-marine);
    font-variant-numeric: tabular-nums;
    padding: 10px 0;
}

.wc-block-components-quantity-selector__button {
    color: var(--dvz-diepblauw);
    font-size: 20px;
    font-weight: 400;
    opacity: 1;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
    background: var(--dvz-ijs);
    color: var(--dvz-marine);
}

.wc-block-components-quantity-selector__button:disabled { color: #b9c7d8; }

/* verwijderen */
.wc-block-cart-item__remove-link {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    color: var(--dvz-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wc-block-cart-item__remove-link:hover { color: #9a3f1e; }

/* --------------------------------------------------- zijkant */
/* Let op: wc-block-components-sidebar en wc-block-cart__sidebar staan samen op
   een en hetzelfde element. Als afstammeling geschreven raakt deze regel niets. */
.wc-block-cart__sidebar.wc-block-components-sidebar,
.wc-block-checkout__sidebar.wc-block-components-sidebar {
    padding: 26px 26px 28px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 16px;
    background: var(--dvz-ijs);
}

.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
    font-family: Lora, Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dvz-marine);
}

.wc-block-components-totals-item {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    color: var(--dvz-marine);
}

.wc-block-components-totals-item__label { color: var(--dvz-tekst); }

.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }

.wc-block-components-totals-item__description {
    font-size: 14px;
    color: var(--dvz-tekst);
}

/* De eindregel: het bedrag in de serif, de btw eronder als bijschrift
   in plaats van als een aantekening die er per ongeluk bij staat. */
.wc-block-components-totals-footer-item {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid #cfdcec;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: Lora, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: Lora, Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.wc-block-components-totals-footer-item-tax {
    display: block;
    margin-top: 4px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--dvz-tekst);
}

/* waardebonnen */
.wc-block-components-panel__button {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--dvz-diepblauw);
}

.wc-block-components-totals-coupon { border-bottom: 1px solid #cfdcec; }

/* ------------------------------------------------- knoppen */
/* Alle knoppen in beide blokken krijgen de pilvorm van de site. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button) {
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    border: 1px solid var(--dvz-diepblauw);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding: 16px 30px;
    text-decoration: none;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                box-shadow 0.22s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button):hover {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    color: #fff;
    box-shadow: 0 10px 22px rgba(11, 36, 85, 0.2);
}

.wc-block-cart__submit-button:disabled,
.wc-block-components-checkout-place-order-button:disabled {
    background: #cdd7e4;
    border-color: #cdd7e4;
    color: #6b7a8f;
    box-shadow: none;
}

/* De knop onder de bon moet de breedte van de bon volgen. */
.wc-block-cart__submit-container .wc-block-cart__submit-button { width: 100%; }

/* --------------------------------------- formulier, afrekenen */
.wc-block-components-checkout-step__title {
    font-family: Lora, Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dvz-marine);
}

.wc-block-components-checkout-step { padding-bottom: 8px; }

.wc-block-components-text-input input.components-form-token-field__input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-textarea {
    border: 1px solid var(--dvz-lijn);
    border-radius: 12px;
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label,
.wc-block-components-combobox label {
    font-family: "Source Sans 3", system-ui, sans-serif;
    color: var(--dvz-tekst);
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-textarea:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

/* De keuzerijen voor verzenden en betalen als aanklikbare kaarten. */
.wc-block-components-radio-control__option {
    padding: 15px 18px 15px 46px;
    border-radius: 12px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
    transition: background-color 0.18s ease;
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    border: 1px solid var(--dvz-lijn);
    background: #fff;
}

.wc-block-components-radio-control__option:hover { background: var(--dvz-ijs); }

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--dvz-diepblauw);
    box-shadow: 0 0 0 1px var(--dvz-diepblauw);
}

.wc-block-components-radio-control__option-layout { gap: 4px; }

.wc-block-components-radio-control__label {
    font-weight: 600;
    color: var(--dvz-marine);
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
    font-size: 14.5px;
    color: var(--dvz-tekst);
}

/* het bestellingsoverzicht rechts */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: 17px;
}

.wc-block-components-order-summary-item__image img {
    border: 1px solid var(--dvz-lijn);
    border-radius: 10px;
    background: #fff;
}

/* Het aantalsrondje stond wit op wit en was daardoor onleesbaar. De regel van
   het blok is zwaarder dan een enkele klasse, dus die van ons ook. */
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__quantity {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

/* voorwaarden en notities */
.wc-block-checkout__terms,
.wc-block-components-checkout-step__description {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--dvz-tekst);
}

.wc-block-components-checkbox__label {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    color: var(--dvz-marine);
}

/* ------------------------------------------- lege winkelwagen */
.wc-block-cart--is-empty .wc-block-components-title {
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    color: var(--dvz-marine);
}

/* ---------------------------------------------- responsive */
/* Hello Elementor geeft .alignwide een marge van -80px aan beide kanten. Op
   een breed scherm valt dat binnen de witruimte naast de inhoud; op een
   telefoon steekt de winkelwagen daarmee 70px links buiten beeld. Onder de
   breedte waarop die ruimte er niet meer is, hoort het blok gewoon binnen zijn
   kolom te blijven. */
@media (max-width: 1100px) {
    .wp-block-woocommerce-cart.alignwide,
    .wp-block-woocommerce-checkout.alignwide { margin-inline: 0; }
}

/* =========================================================
   LEGE WINKELWAGEN

   De eigen kop van het blok gaat weg (onze kop zegt het al) en
   de rij "misschien lekker" krijgt de kaartvorm van de winkel.
   ========================================================= */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; }

.wp-block-woocommerce-empty-cart-block { padding-top: 6px; }

.wp-block-woocommerce-empty-cart-block .wp-block-buttons { margin: 0 0 54px; }

.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
    padding: 14px 26px;
    border-radius: 999px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    background: var(--dvz-diepblauw);
    color: #fff;
    text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link {
    background: #fff;
    color: var(--dvz-diepblauw);
    border: 1px solid var(--dvz-lijn);
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover { background: var(--dvz-marine); color: #fff; }
.wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link:hover { background: var(--dvz-ijs); color: var(--dvz-marine); }

.wp-block-woocommerce-empty-cart-block h2.dvz-cart__subtitle {
    margin: 0 0 22px;
    font-family: Lora, Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--dvz-marine);
    text-align: left;
}

/* Het productraster van het blok in onze kaartvorm. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Drie klassen, met opzet: WooCommerce zet met .wc-block-grid.has-4-columns
   .wc-block-grid__product een max-width van 25% en die won van twee klassen. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-4-columns .wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-3-columns .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dvz-lijn);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    overflow: hidden;
    transition: transform 0.26s ease, box-shadow 0.26s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(11, 36, 85, 0.1);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { margin: 0; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    margin: 16px 18px 4px;
    font-family: Lora, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--dvz-marine);
    text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    margin: 0 18px 14px;
    font-family: Lora, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { margin: auto 18px 18px; }

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .add_to_cart_button {
    display: inline-block;
    width: 100%;
    padding: 11px 18px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 860px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   BESTELLING VOLGEN

   Het volgformulier van WooCommerce (shortcode) als kaart, met
   dezelfde velden en knop als het account.
   ========================================================= */
.page-id-329 .site-main { padding: 34px 0 84px; }

.track_order {
    max-width: 520px;
    margin: 0 0 28px;
    padding: 32px 32px 28px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(11, 36, 85, 0.06);
    font-family: "Source Sans 3", system-ui, sans-serif;
}

/* De uitleg van WooCommerce zelf ("Om je bestelling te volgen...") staat al in
   onze kop. */
/* (intro-alinea zit niet meer in het formulier; eigen sjabloon order/form-tracking.php) */

/* De uitkomst: eerst de statusregel als kaart, daaronder de bestelgegevens. */
.page-id-329 .order-info {
    max-width: 520px;
    margin: 0 0 28px;
    padding: 20px 24px;
    border-left: 4px solid var(--dvz-azuur);
    border-radius: 12px;
    background: var(--dvz-ijsblauw);
    color: var(--dvz-marine);
    font-size: 17px;
    line-height: 1.5;
}

.page-id-329 .order-info mark {
    background: none;
    color: var(--dvz-diepblauw);
    font-weight: 700;
}

.page-id-329 .order-info mark.order-status {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-size: 15px;
}

.track_order .form-row { float: none; width: 100%; margin: 0 0 16px; padding: 0; }

.track_order label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

.track_order .input-text,
.track_order input.input-text,
.track_order input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: var(--dvz-marine);
    box-shadow: none;
}

.track_order .input-text:focus,
.track_order input:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

.track_order .button,
.track_order button[type="submit"] {
    width: 100%;
    padding: 14px 28px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.track_order .button:hover,
.track_order button[type="submit"]:hover { background: var(--dvz-marine); border-color: var(--dvz-marine); color: #fff; }

.dvz-track__aside {
    max-width: 520px;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--dvz-ijs);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    color: var(--dvz-tekst);
}

.dvz-track__aside p { margin: 0; }
.dvz-track__asidetitle { font-weight: 700; color: var(--dvz-marine); margin-bottom: 4px !important; }

/* Het resultaat: de orderdetails van WooCommerce. */
.page-id-329 .woocommerce-order-details,
.page-id-329 .woocommerce-customer-details { margin-top: 28px; }

/* =========================================================
   MIJN ACCOUNT

   De sjablonen van WooCommerce, in de huisstijl: het inlogformulier
   als kaart, het accountmenu als rij pillen, tabellen en formulieren
   in dezelfde maat als de rest.
   ========================================================= */
.woocommerce-account .site-main { padding: 34px 0 84px; }

.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 12px;
    background: var(--dvz-ijs);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    color: var(--dvz-marine);
    list-style: none;
}

.woocommerce-account .woocommerce-error { border-color: #f0c9bf; background: #fbeeea; color: #93331f; }

/* ---- inloggen, wachtwoord */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .lost_reset_password {
    max-width: 480px;
    margin: 0;
    padding: 32px 32px 28px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(11, 36, 85, 0.06);
}

/* Inloggen en registreren naast elkaar, allebei als kaart. */
.woocommerce-account .u-columns.col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 { float: none; width: auto; max-width: none; }

/* WooCommerce zet een clearfix (::before/::after met display: table) op de
   kolommen; in een grid wordt dat een eigen cel en schuift alles een plek op. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after { display: none; content: none; }

.woocommerce-account .u-columns.col2-set .woocommerce-form-login,
.woocommerce-account .u-columns.col2-set .woocommerce-form-register { max-width: none; height: 100%; }

.woocommerce-account .woocommerce-form-register {
    padding: 32px 32px 28px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(11, 36, 85, 0.06);
}

.woocommerce-account .woocommerce-form-register__submit { width: 100%; }

/* De koppen "Inloggen" en "Registreren" van WooCommerce worden onze eigen
   kaartkoppen. */
.woocommerce-account:not(.logged-in) .woocommerce > h2 { display: none; }

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
    margin: 0 0 18px;
    font-family: Lora, Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--dvz-marine);
}

.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dvz-tekst);
}

/* Een korte uitleg onder het e-mailveld van het registratieformulier. */
.woocommerce-account .woocommerce-form-register::before {
    content: "Je hebt geen wachtwoord nodig: je krijgt een e-mail met een link om er zelf een te kiezen.";
    display: block;
    margin: -8px 0 18px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--dvz-tekst);
}

@media (max-width: 860px) {
    .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
}

/* WooCommerce zet voor elke melding een tekentje uit zijn eigen lettertype,
   dat hier als leeg vierkantje verschijnt. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { display: none; }

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
    order: 2;
    margin: 0;
    padding: 9px 16px;
    font-size: 14px;
}

/* dashboardtegels */
.dvz-account__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 22px;
}

.dvz-account__tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 14px;
    background: var(--dvz-ijs);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dvz-account__tile:hover { transform: translateY(-3px); border-color: #cfe0f2; box-shadow: 0 12px 28px rgba(11, 36, 85, 0.1); }

/* Hello onderstreept elke link in .page-content; een tegel is geen tekstlink. */
.woocommerce-account .page-content .dvz-account__tile,
.woocommerce-account .dvz-account__tile,
.woocommerce-account .dvz-account__tile span { text-decoration: none; }

.dvz-account__tiletitle { font-family: Lora, Georgia, serif; font-size: 19px; font-weight: 600; color: var(--dvz-marine); }
.dvz-account__tiletext { font-size: 14.5px; line-height: 1.5; color: var(--dvz-tekst); }

@media (max-width: 700px) {
    .dvz-account__tiles { grid-template-columns: 1fr; }
}

/* De productnamen in het raster van de lege mand zijn links; geen streep. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { text-decoration: none; }

.woocommerce-account .form-row { margin: 0 0 16px; padding: 0; }

.woocommerce-account .form-row label {
    display: block;
    margin-bottom: 6px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

.woocommerce-account .form-row label .required { color: var(--dvz-azuur); text-decoration: none; }

/* Twee selectors, met opzet: het thema stijlt input[type] met een attribuut. */
.woocommerce-account .form-row .input-text,
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row input[type="text"],
.woocommerce-account .form-row input[type="email"],
.woocommerce-account .form-row input[type="password"],
.woocommerce-account .form-row input[type="tel"],
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 12px;
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
    box-shadow: none;
}

.woocommerce-account .form-row .input-text:focus,
.woocommerce-account .form-row input:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

.woocommerce-account .password-input { display: block; position: relative; }
.woocommerce-account .show-password-input { top: 50%; right: 14px; transform: translateY(-50%); }

.woocommerce-account .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dvz-tekst);
}

.woocommerce-account .woocommerce-form-login__rememberme input { width: 16px; height: 16px; accent-color: var(--dvz-diepblauw); }

.woocommerce-account .woocommerce-button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button,
.woocommerce-account .button[type="submit"] {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button { width: 100%; }

.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce-button:focus,
.woocommerce-account button.button:focus {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 36, 85, 0.2);
}

.woocommerce-account .lost_password {
    margin: 16px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    text-align: center;
}

.woocommerce-account .lost_password a { color: var(--dvz-diepblauw); text-decoration: underline; text-underline-offset: 3px; }

.woocommerce-account .woocommerce-ResetPassword p:first-of-type,
.woocommerce-account .lost_reset_password p:first-of-type { display: none; }

/* ---- ingelogd: menu als pillen, inhoud als kaart */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    margin: 0 0 28px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    color: var(--dvz-marine);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover { border-color: var(--dvz-azuur); color: var(--dvz-diepblauw); }

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    background: var(--dvz-diepblauw);
    border-color: var(--dvz-diepblauw);
    color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    padding: 30px 32px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 18px;
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dvz-tekst);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-account .dvz-account__intro { margin: 0; color: var(--dvz-tekst); }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    color: var(--dvz-marine);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.woocommerce-button):not(.button) { color: var(--dvz-diepblauw); }

/* orders */
.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
    padding: 14px 12px;
    border: 0;
    border-bottom: 1px solid var(--dvz-ijs);
    background: none;
    text-align: left;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table th {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
    border-bottom-color: var(--dvz-lijn);
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button {
    padding: 9px 16px;
    font-size: 14px;
    margin: 0 6px 6px 0;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button.view {
    background: #fff;
    color: var(--dvz-diepblauw);
    border-color: var(--dvz-lijn);
}

/* addresses */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; padding: 22px; border: 1px solid var(--dvz-lijn); border-radius: 14px; }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { margin: 0 0 8px; font-size: 20px; }
.woocommerce-account .woocommerce-Address-title .edit { font-size: 14.5px; }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.6; }

/* edit account / address form */
.woocommerce-account .woocommerce-MyAccount-content fieldset { margin: 26px 0 0; padding: 0; border: 0; }
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last { width: calc(50% - 8px); float: none; display: inline-block; vertical-align: top; }
.woocommerce-account .woocommerce-MyAccount-content .form-row-first { margin-right: 12px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row span em { font-size: 13px; }

@media (max-width: 700px) {
    .woocommerce-account .woocommerce-form-login,
    .woocommerce-account .woocommerce-ResetPassword,
    .woocommerce-account .lost_reset_password { padding: 22px 18px; }
    .woocommerce-account .woocommerce-MyAccount-content { padding: 20px 18px; }
    .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
    .woocommerce-account .woocommerce-MyAccount-content .form-row-first,
    .woocommerce-account .woocommerce-MyAccount-content .form-row-last { width: 100%; margin-right: 0; display: block; }
    .woocommerce-account .woocommerce-orders-table td::before { font-weight: 700; color: var(--dvz-tekst); }
}

@media (max-width: 780px) {
    .wc-block-cart,
    .wc-block-checkout { padding: 28px 0 60px; }

    .dvz-cart__head { margin-bottom: 26px; padding-bottom: 20px; }

    .wc-block-cart-item__image img { width: 76px; }

    .wc-block-cart__sidebar.wc-block-components-sidebar,
    .wc-block-checkout__sidebar.wc-block-components-sidebar { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .wc-block-components-radio-control__option,
    .wc-block-components-quantity-selector__button { transition: none; }
}

/* =========================================================
   BEDANKPAGINA

   Het moment waarop iemand net betaald heeft en wil weten of
   hij moet wachten of moet rijden. Dat antwoord stond bij
   WooCommerce halverwege een tabel met verzendkosten; hier
   staat het bovenaan.
   ========================================================= */

.dvz-thanks {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 30px;
    padding: 22px 24px;
    border: 1px solid var(--dvz-lijn);
    border-left: 5px solid var(--dvz-diepblauw);
    border-radius: 16px;
    background: var(--dvz-ijs);
}

.dvz-thanks.is-pickup { border-left-color: #1f6b4c; }

.dvz-thanks__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    background: var(--dvz-diepblauw);
    /* Een scooter bij bezorgen, een winkelpui bij afhalen. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M18 15V9a3 3 0 0 0-3-3h-2'/%3E%3Cpath d='M4 6h4l2 9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M18 15V9a3 3 0 0 0-3-3h-2'/%3E%3Cpath d='M4 6h4l2 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvz-thanks.is-pickup .dvz-thanks__icon {
    background: #1f6b4c;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E");
}

.dvz-thanks__body { flex: 1 1 auto; min-width: 0; }

.dvz-thanks__title {
    margin: 0 0 8px;
    font-family: Lora, Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dvz-marine);
}

.dvz-thanks__line {
    margin: 0 0 6px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--dvz-marine);
}

.dvz-thanks__sub {
    margin: 0 0 4px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--dvz-tekst);
}

.dvz-thanks__sub:last-child { margin-bottom: 0; }

/* De regel "Bedankt, je bestelling is ontvangen" is de kop van deze pagina
   maar wordt als gewone alinea uitgeprint. Hier krijgt hij het gewicht dat
   erbij hoort, met de ordergegevens eronder als een rustige regel feiten. */
/* Deze regel staat niet in een .woocommerce-order wrapper, zoals de rest van de
   pagina; hij hangt los in .woocommerce. Vandaar geen voorouder in de selector. */
.woocommerce-thankyou-order-received {
    margin: 0 0 22px;
    font-family: Lora, Georgia, serif;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--dvz-marine);
}

.woocommerce ul.woocommerce-order-overview,
.woocommerce ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 0 0 26px;
    padding: 18px 20px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 14px;
    background: #fff;
    list-style: none;
}

.woocommerce ul.woocommerce-order-overview li,
.woocommerce ul.order_details li {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

.woocommerce ul.woocommerce-order-overview li strong,
.woocommerce ul.order_details li strong {
    display: block;
    margin-top: 3px;
    font-family: Lora, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dvz-marine);
}

@media (max-width: 560px) {
    .dvz-thanks { padding: 18px; gap: 12px; }
    .dvz-thanks__title { font-size: 21px; }
}

/* ------------------------------------------------- geschatte tijd
   De schatting staat op de bedankpagina onder het afhaal/bezorgblok en op de
   productpagina in de notitie onder de koopknop. */
.dvz-thanks__eta {
    max-width: 720px;
    margin: -8px 0 28px;
    padding: 12px 18px;
    border-left: 4px solid var(--dvz-azuur);
    border-radius: 10px;
    background: var(--dvz-ijsblauw);
    color: var(--dvz-marine);
    font-size: 15.5px;
    line-height: 1.5;
}

.dvz-product__eta { color: var(--dvz-marine); font-weight: 600; }

/* ------------------------------------------------- meldingen op de productpagina
   Alleen fouten komen hier (zie single-product.php), in de huisstijl. */
.dvz-product .woocommerce-error {
    margin: 0 0 18px;
    padding: 14px 18px 14px 46px;
    border: 1px solid #f0c9bf;
    border-radius: 12px;
    background: #fbeeea;
    color: #93331f;
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
    position: relative;
}

.dvz-product .woocommerce-error::before {
    content: "!";
    position: absolute;
    left: 16px;
    top: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c62828;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.dvz-product .woocommerce-error li { margin: 0; }

/* Buiten openingstijden: de regel onder de kop van winkelwagen en afrekenen. */
.dvz-cart__closed {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-left: 4px solid var(--dvz-azuur, #4a9bf5);
    background: var(--dvz-ijs, #eff5fc);
    border-radius: 0 10px 10px 0;
    color: var(--dvz-marine, #0b2455);
    font-size: 15.5px;
    line-height: 1.5;
    max-width: 62ch;
}

/* "Bewerken" achter een schotel in de lade en het winkelwagenblok. */
.elementor-menu-cart__product-name .dvz-vs-edit {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border: 1px solid var(--dvz-lijn, #DCE7F3);
    border-radius: 999px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dvz-diepblauw, #00377A);
    text-decoration: none;
    vertical-align: middle;
}

.elementor-menu-cart__product-name .dvz-vs-edit:hover { background: var(--dvz-ijs, #EFF5FC); border-color: var(--dvz-azuur, #4A9BF5); }
.wc-block-components-product-details .dvz-vs-edit { font-weight: 600; text-decoration: underline; color: var(--dvz-diepblauw, #00377A); }

/* Volgformulier: de twee velden onder elkaar over de volle breedte, zodat de
   placeholdertekst niet afbreekt. */
.track_order .form-row-first,
.track_order .form-row-last { float: none; width: 100%; }
.track_order .input-text,
.track_order input.input-text,
.track_order input[type="text"],
.track_order input[type="email"] { width: 100%; box-sizing: border-box; }