/* DIENSTCLIP webshop — product page, cart and checkout in the style of dienstclip.nl.
   WooCommerce's own stylesheets are switched off (functions.php), so everything WooCommerce shows is styled here.
   Tokens (colours, spacing, buttons, cards, fields) come from style.css. */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clear { clear: both; }
code { font-size: .9em; }

/* ---------- Header: cart button ---------- */
.dc-cart-link { gap: 8px; }
.dc-cart-link svg { width: 18px; height: 18px; flex: none; }
.dc-cart-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 9999px; background: #CFEA22; color: #151514; font-size: 12px; font-weight: 600; line-height: 1;
}
.dc-cart-count.is-empty { background: rgba(21, 21, 20, 0.12); color: inherit; }
@media (max-width: 479px) {
  .dc-cart-label { display: none; }                       /* phones: icon + count only */
  .dc-cart-link { padding-inline: 12px; }
}

/* ---------- Buttons: WooCommerce's own buttons look like the site's ---------- */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 6px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--charcoal);
  font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.5;
  text-decoration: none; cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.woocommerce .button:hover { background: var(--tint); }
.woocommerce .button:active, .single_add_to_cart_button:active { opacity: .8; transform: translateY(1px) scale(0.98); }
.woocommerce .button:focus-visible, .single_add_to_cart_button:focus-visible { outline: none; box-shadow: var(--focus); }
/* the main action of each step: light button, like .btn-dark */
.woocommerce .button.alt, .single_add_to_cart_button, .woocommerce a.checkout-button, .woocommerce #place_order {
  background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; box-shadow: var(--inset);
}
.woocommerce .button.alt:hover, .single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover { background: #ffffff; }
.woocommerce .button:disabled, .woocommerce .button.disabled, .single_add_to_cart_button.disabled {
  opacity: .45; cursor: not-allowed; transform: none;
}
.woocommerce .button.loading { opacity: .6; cursor: progress; }

/* "Processing" overlay WooCommerce lays over the cart/checkout while it updates (inline white by default) */
.blockUI.blockOverlay { background: var(--cream) !important; opacity: .55 !important; border-radius: 12px; }

/* ---------- Notices ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-NoticeGroup .woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0 0 16px; padding: 14px 18px; list-style: none;
  background: var(--surface-raised); border: 1px solid var(--border); border-left: 3px solid #CFEA22; border-radius: 10px;
  color: var(--charcoal); font-size: 15px;
}
.woocommerce-info { border-left-color: #8961fe; }
.woocommerce-error { display: grid; gap: 6px; border-left-color: #e8488c; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; min-height: 38px; padding: 6px 14px; font-size: 15px; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a { color: inherit; text-underline-offset: 3px; }
.woocommerce-message:focus, .woocommerce-error:focus, .woocommerce-info:focus { outline: none; }

/* ---------- Form fields (same as the forms on dienstclip.nl) ---------- */
.woocommerce form .form-row { display: grid; gap: 8px; margin: 0; }
.woocommerce form .form-row label { font-size: 14px; color: var(--text-strong); }
.woocommerce form .form-row .required { color: #e8488c; text-decoration: none; border: 0; }
.woocommerce form .form-row .optional { color: var(--muted); }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select, .woocommerce .quantity .qty,
.select2-container--default .select2-selection--single {
  width: 100%;
  font: inherit; font-size: 16px; color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; line-height: 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce input.input-text, .woocommerce select, .select2-container--default .select2-selection--single { height: 50px; }
.woocommerce textarea { resize: vertical; min-height: 110px; }
.woocommerce input.input-text::placeholder, .woocommerce textarea::placeholder { color: var(--muted); opacity: .8; }
.woocommerce input.input-text:focus, .woocommerce textarea:focus, .woocommerce select:focus, .woocommerce .quantity .qty:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  outline: none; border-color: var(--border-strong); box-shadow: var(--focus);
}
.woocommerce input.input-text:-webkit-autofill, .woocommerce input.input-text:-webkit-autofill:hover, .woocommerce input.input-text:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--charcoal); caret-color: var(--charcoal);
  box-shadow: 0 0 0 1000px var(--cream) inset; transition: background-color 9999s ease-out 0s;
}
.woocommerce form .woocommerce-invalid input.input-text, .woocommerce form .woocommerce-invalid select,
.woocommerce form .woocommerce-invalid .select2-selection { border-color: #e8488c; }
.woocommerce form .form-row .woocommerce-error, .checkout-inline-error-message { margin: 0; font-size: 13px; color: #f2a3c4; }
.woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { accent-color: #CFEA22; width: 18px; height: 18px; margin: 0; flex: none; }
/* checkbox labels: the box on the left, the text next to it (wrapping under itself, the * right after the text) */
.woocommerce-form__label-for-checkbox, .woocommerce form .form-row label.checkbox {
  display: block !important; position: relative; padding-left: 28px; cursor: pointer; font-size: 15px; line-height: 1.45;
}
.woocommerce-form__label-for-checkbox input[type="checkbox"], .woocommerce form .form-row label.checkbox input[type="checkbox"] {
  position: absolute; left: 0; top: 2px;
}

/* country / province dropdown (select2) */
.select2-container--default .select2-selection--single { display: flex; align-items: center; padding: 0 14px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--charcoal); line-height: 48px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 10px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent; }
.select2-dropdown { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; color: var(--charcoal); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--cream); color: var(--charcoal); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--surface-raised); color: var(--charcoal); }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] { background: var(--tint); color: #CFEA22; }
.select2-results__option { padding: 8px 12px; }

/* quantity: number field */
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity .qty { width: 84px; height: 50px; text-align: center; padding: 12px 8px; }

/* ---------- Shared page head (cart, checkout) ---------- */
.shop-section { padding-block: calc(92px + 56px) var(--section); }
.shop-head { display: grid; gap: 18px; justify-items: start; margin-bottom: 40px; }
.shop-head .display { font-size: clamp(40px, 5.4vw, 60px); }
.shop-head a { color: inherit; }

/* order steps: 1 cart · 2 details & pay · 3 confirmation */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; color: var(--muted); }
.steps li, .steps a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.steps .step-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px;
  border: 1px solid var(--border-strong); font-size: 12px; font-weight: 600;
}
.steps .is-current { color: var(--charcoal); }
.steps .is-current .step-n { background: #CFEA22; border-color: #CFEA22; color: #151514; }
.steps .is-done .step-n { background: var(--surface-raised); border-color: var(--border); }
.steps a:hover { color: var(--charcoal); }

/* ---------- Product page ---------- */
.product-hero { padding-block: calc(92px + 40px) 64px; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
/* the photos stay in view while the (longer) summary scrolls by */
.product-media { position: sticky; top: 88px; }

/* gallery: big photo in a card, the other colours as small cards underneath */
.woocommerce-product-gallery { --thumb-gap: 10px; --thumb-row: calc((100% - 5 * var(--thumb-gap)) / 6 + 2px); position: relative; margin: 0; opacity: 1 !important; }
.woocommerce-product-gallery__wrapper { margin: 0; }
/* No jumping while the slider starts: before it adds the thumbnails their rows are kept free (6 per row; padding % is
   of the gallery's width), and each slide is one viewport wide from the start - the slider only sizes them 100 ms
   later, and until then every photo is as wide as the whole strip, which made the page tens of thousands px tall. */
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(.woocommerce-product-gallery__image:nth-child(2)) { padding-bottom: calc(12px + var(--thumb-row)); }
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(.woocommerce-product-gallery__image:nth-child(7)) { padding-bottom: calc(12px + 2 * var(--thumb-row) + var(--thumb-gap)); }
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)):has(.woocommerce-product-gallery__image:nth-child(13)) { padding-bottom: calc(12px + 3 * var(--thumb-row) + 2 * var(--thumb-gap)); }
.woocommerce-product-gallery .flex-viewport { container-type: inline-size; }
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image { float: left; width: 100cqw; }
.woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child) { display: none; }   /* before the slider starts */
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.woocommerce-product-gallery .flex-control-thumbs {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--thumb-gap);
}
.woocommerce-product-gallery .flex-control-thumbs li { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.woocommerce-product-gallery .flex-control-thumbs img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; cursor: pointer;   /* height: the slider sets the photo's own size as attributes */
  opacity: .75; transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: .9; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs li:has(.flex-active) { border-color: #CFEA22; box-shadow: 0 0 0 1px #CFEA22; }
.woocommerce-product-gallery__trigger {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(21, 21, 20, 0.72); color: var(--charcoal); text-decoration: none; font-size: 0;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.woocommerce-product-gallery__trigger::before {           /* magnifier */
  content: ""; width: 18px; height: 18px; background: currentColor;
  -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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-product-gallery__trigger img { display: none !important; }

/* summary */
.product-summary { display: grid; gap: 20px; align-content: start; }
.product-summary > * { margin: 0; }
.product-summary .product_title { font-size: clamp(40px, 5.4vw, 60px); margin-top: -10px; }
.product-summary .price { font-size: 28px; font-weight: 600; letter-spacing: -.4px; color: var(--charcoal); }
.product-summary .price del { color: var(--muted); font-weight: 400; font-size: .7em; margin-right: 8px; }
.product-summary .price ins { text-decoration: none; }
.woocommerce-price-suffix, .product-summary .price small { font-size: 14px; font-weight: 400; color: var(--muted); }
.woocommerce-product-details__short-description { font-size: 18px; line-height: 1.5; color: var(--muted); }
.woocommerce-product-details__short-description { display: grid; gap: 18px; }
.woocommerce-product-details__short-description p { margin: 0; }
.woocommerce-product-details__short-description strong { display: block; margin-bottom: 4px; color: var(--charcoal); font-weight: 600; }
/* its list = the USPs, with lime check marks */
.woocommerce-product-details__short-description ul, .product-description-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--text-strong); }
.woocommerce-product-details__short-description li, .product-description-body li { position: relative; padding-left: 28px; }
.woocommerce-product-details__short-description li::before, .product-description-body li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: #CFEA22;
  -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%3Cpath d='M5 12.5 10 17l9-10'/%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%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-product-rating { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }

/* add to cart */
form.cart { display: grid; gap: 18px; padding-top: 20px; border-top: 1px solid var(--border); }
form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: 10px; }
table.variations, table.variations tbody, table.variations tr, table.variations th, table.variations td { display: block; padding: 0; text-align: left; }
table.variations { border: 0; border-spacing: 0; margin: 0; }
table.variations tr + tr { margin-top: 16px; }
table.variations th.label { margin-bottom: 12px; }
table.variations label { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dc-swatch-name { margin-left: 8px; color: var(--charcoal); letter-spacing: 0; text-transform: capitalize; font-weight: 400; font-size: 15px; }
.dc-swatch-name:not(:empty)::before { content: "· "; color: var(--muted); }
.dc-swatch-select { display: none; }                      /* WooCommerce still uses the dropdown; site.js drives it */

.dc-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-swatch {
  position: relative; width: 44px; height: 44px; padding: 0; border-radius: 9999px; cursor: pointer;
  background: var(--swatch);
  border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -6px 12px rgba(0, 0, 0, 0.18);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.dc-swatch::after {                                       /* ring around the chosen colour */
  content: ""; position: absolute; inset: -5px; border-radius: inherit;
  border: 2px solid transparent; transition: border-color .2s ease;
}
@media (hover: hover) { .dc-swatch:hover { transform: scale(1.08); } }
.dc-swatch[aria-checked="true"]::after { border-color: var(--charcoal); }
.dc-swatch:focus-visible { outline: none; }
.dc-swatch:focus-visible::after { border-color: rgba(96, 165, 250, 0.9); }
.dc-swatch:disabled { cursor: not-allowed; opacity: .3; transform: none; }

/* options without a colour (Variant: dienstclip / motorclip): text buttons */
.dc-option {
  min-height: 44px; padding: 9px 18px; border-radius: 9999px; cursor: pointer;
  background: transparent; color: var(--charcoal); border: 1px solid var(--border-strong);
  font: inherit; font-size: 15px; text-transform: capitalize;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
@media (hover: hover) { .dc-option:hover { background: var(--tint); } }
.dc-option[aria-checked="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; box-shadow: var(--inset); }
.dc-option:focus-visible { outline: none; box-shadow: var(--focus); }
.dc-option:disabled { cursor: not-allowed; opacity: .35; text-decoration: line-through; }
table.variations tr:has(.dc-swatches-text) .dc-swatch-name { display: none; }   /* the button already shows it */

.single_variation_wrap { display: grid; gap: 16px; }
.woocommerce-variation:empty, .woocommerce-variation-description:empty { display: none; }
.woocommerce-variation-price .price { font-size: 22px; }
.stock { margin: 0; font-size: 14px; color: var(--muted); }
.stock.in-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #CFEA22; }
.stock.out-of-stock { color: #f2a3c4; }
.woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { display: flex; gap: 10px; align-items: stretch; }
.single_add_to_cart_button { flex: 1; min-height: 50px; font-weight: 600; letter-spacing: .02em; }
.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { opacity: .45; }

.dc-icon { width: 18px; height: 18px; flex: none; }
.product-install a { font-size: 15px; color: var(--muted); text-underline-offset: 3px; }
.product-install a:hover { color: var(--charcoal); }

.product-page .features-section { padding-block: 64px 0; }
.product-description { padding-block: var(--section) 0; }
.product-description-body { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.product-description-body > * { margin: 0; }
.product-description-body p { color: var(--muted); font-size: 17px; }
.product-description-body h3, .product-description-body h4 { margin-top: 18px; font-size: 22px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; color: var(--charcoal); }
.product-description-body h2 + h3, .product-description-body h2 + h4 { margin-top: 0; }
.product-description-body ul { font-size: 17px; }
/* the small print ("* Deals zijn per kleur.") */
.product-description-body pre { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--muted); }

/* the "added to cart" notice sits above the product, under the header */
.product-page > .woocommerce-notices-wrapper { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: calc(92px + 24px) var(--gutter) 0; }
.product-page > .woocommerce-notices-wrapper:not(:empty) + .product .product-hero { padding-top: 24px; }

/* ---------- Tables (cart, totals, checkout summary, order details) ---------- */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; }
.woocommerce table.shop_table th { text-align: left; font-weight: 600; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 14px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce table.shop_table thead th { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.woocommerce table.shop_table tfoot th { font-weight: 400; color: var(--muted); }
.woocommerce table.shop_table tr:last-child > * { border-bottom: 0; }
.woocommerce table.shop_table .order-total th, .woocommerce table.shop_table .order-total td { font-size: 20px; font-weight: 600; color: var(--charcoal); }
.woocommerce table.shop_table .order-total small, .includes_tax { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.woocommerce-Price-amount { white-space: nowrap; }
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.woocommerce-shipping-methods li { display: flex; align-items: center; gap: 8px; }
/* a method: (carrier logo) name: price, on one line where it fits */
.woocommerce-shipping-methods label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.woocommerce-shipping-methods label .amount { white-space: nowrap; color: var(--charcoal); font-weight: 600; }
.woocommerce-shipping-methods .postnl_shipping_method_icon { height: 22px !important; max-height: none; width: auto; margin: 0 !important; border-radius: 4px; }
/* totals tables (cart, checkout): the labels take only the room they need, the values get the rest */
.cart_totals table.shop_table tr > th { width: 1%; white-space: nowrap; padding-right: 20px; vertical-align: top; }
.woocommerce table.shop_table tr.shipping td, .woocommerce table.shop_table tr.woocommerce-shipping-totals td { padding-top: 12px; padding-bottom: 12px; }
.woocommerce-shipping-methods li { justify-content: flex-end; text-align: right; }
.woocommerce-shipping-destination, .woocommerce-shipping-contents { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.shipping-calculator-button { font-size: 14px; color: var(--muted); }
.shipping-calculator-form { display: grid; gap: 10px; margin-top: 10px; }

/* ---------- Cart ---------- */
.woocommerce:has(> .woocommerce-cart-form) {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 24px; align-items: start;
}
.woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 28px 24px; }
.woocommerce .woocommerce-cart-form table.shop_table thead th { padding-top: 28px; }   /* more room above the column titles */
.woocommerce-cart-form .product-thumbnail { width: 96px; padding-right: 16px !important; }
.woocommerce-cart-form .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; }
.woocommerce-cart-form .product-name a { color: var(--charcoal); text-decoration: none; font-weight: 600; font-size: 17px; }
.woocommerce-cart-form .product-name .variation, .woocommerce-checkout-review-order-table .variation, .wc-item-meta {
  display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted);
}
.variation dt, .variation dd, .variation dd p, .wc-item-meta p, .wc-item-meta li { margin: 0; display: inline; }
.wc-item-meta strong { font-weight: 400; }
.woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal { color: var(--text-strong); }
.woocommerce-cart-form .product-subtotal { text-align: right; }
.woocommerce-cart-form thead .product-subtotal { text-align: right; }
.woocommerce-cart-form .product-remove { width: 40px; }
.woocommerce a.remove {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9999px;
  background: var(--surface-raised); box-shadow: var(--inset-dark);
  color: var(--muted); font-size: 18px; line-height: 1; text-decoration: none; transition: color .15s ease, background-color .15s ease;
}
.woocommerce a.remove:hover { color: #151514; background: #f2a3c4; }
.woocommerce-cart-form td.actions { padding-top: 20px; border-bottom: 0; }
/* the actions row stays a table cell (colspan); its contents line up inside it */
.woocommerce-cart-form td.actions > .coupon, .woocommerce-cart-form td.actions > .button, .woocommerce-cart-form td.actions > .btn {
  vertical-align: middle; margin: 0 6px 8px 0;
}
.woocommerce-cart-form .coupon { display: inline-flex; gap: 10px; }
.woocommerce-cart-form .coupon .input-text { width: 200px; }
.woocommerce-cart-form td.actions > .button[name="update_cart"] { float: right; margin-right: 0; }
.cart-collaterals { position: sticky; top: 88px; }
.cart_totals { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px 28px; display: grid; gap: 8px; }
.cart_totals h2 { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cart_totals table.shop_table td { text-align: right; }
.wc-proceed-to-checkout { margin-top: 8px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: 17px; font-weight: 600; }
.dc-trust { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.dc-trust a { color: inherit; text-underline-offset: 3px; }

/* empty cart */
.cart-empty.woocommerce-info { border-left-color: var(--border-strong); }
.return-to-shop { margin: 8px 0 0; }
.woocommerce .return-to-shop .button { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; box-shadow: var(--inset); }
.woocommerce .return-to-shop .button:hover { background: #fff; }
.wc-empty-cart-message + .return-to-shop { margin-top: 16px; }

/* ---------- Checkout ---------- */
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 16px; }
.woocommerce form.checkout_coupon {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 24px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.woocommerce form.checkout_coupon p:not(.form-row) { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 14px; }
.woocommerce form.checkout_coupon .form-row-first { flex: 1 1 240px; }
.woocommerce form.checkout_coupon .clear { display: none; }

/* two columns: details left, order + payment right. Anything else WooCommerce or a plugin puts in the form
   (notices, <wc-order-attribution-inputs> with hidden fields, …) spans the full width, and "dense" keeps it from
   taking the right column's place, which would push the order summary to the bottom. */
form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); grid-auto-flow: row dense; gap: 24px; align-items: start; }
form.woocommerce-checkout > * { grid-column: 1 / -1; }
form.woocommerce-checkout > .checkout-main { grid-column: 1; }
form.woocommerce-checkout > .checkout-aside { grid-column: 2; }
.checkout-main, #customer_details { display: grid; gap: 16px; }
#customer_details .col-1 > div:has(> *), #customer_details .col-2 > div:has(> *) {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px;
}
#customer_details .col-2:not(:has(> div > *)) { display: none; }
#customer_details .col-2 { display: grid; gap: 16px; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading, .woocommerce-shipping-fields h3 {
  margin: 0 0 20px; font-size: 20px; font-weight: 600; letter-spacing: -.2px; text-transform: uppercase;
}
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.woocommerce-billing-fields__field-wrapper > *, .woocommerce-shipping-fields__field-wrapper > *, .woocommerce-additional-fields__field-wrapper > * { grid-column: 1 / -1; }
.woocommerce-billing-fields__field-wrapper > .form-row-first, .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
.woocommerce-billing-fields__field-wrapper > .form-row-last, .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }
.woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row .description { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
#ship-to-different-address { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; }
#ship-to-different-address label { font-size: 16px !important; color: var(--charcoal) !important; font-weight: 600; }
.shipping_address { margin-top: 20px; }
.woocommerce-account-fields { margin-top: 16px; }

.checkout-aside { position: sticky; top: 88px; padding: 24px 28px 28px; }
.checkout-aside #order_review_heading { font-size: 14px; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.woocommerce-checkout-review-order-table .product-name { color: var(--charcoal); }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 400; white-space: nowrap; }
.woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
/* the order summary: every row sizes its own two columns (label/product left, amount right), so a long product name
   and a shipping method with a carrier logo both get the room they need */
.woocommerce-checkout-review-order-table, .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block; }
.woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; border-bottom: 1px solid var(--border); }
.woocommerce-checkout-review-order-table tfoot tr:last-child { border-bottom: 0; }
.woocommerce table.woocommerce-checkout-review-order-table tr > * { display: block; border-bottom: 0; }
.woocommerce-checkout-review-order-table tr > :first-child { flex: 1 1 auto; min-width: 0; }
.woocommerce-checkout-review-order-table tr > :last-child { flex: 0 1 auto; text-align: right; }

#payment { margin-top: 20px; display: grid; gap: 16px; }
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#payment ul.payment_methods > li {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--cream);
  transition: border-color .15s ease;
}
#payment ul.payment_methods > li:has(> input:checked) { border-color: #CFEA22; }
#payment ul.payment_methods > li > input { vertical-align: middle; margin-right: 10px; }
#payment ul.payment_methods > li > label { cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#payment ul.payment_methods > li > label img { max-height: 24px; width: auto; display: inline-block; }
#payment ul.payment_methods > li:only-child > input { display: none; }
#payment .payment_box { margin-top: 12px; font-size: 14px; color: var(--muted); }
#payment .payment_box p { margin: 0; }
#payment .payment_box fieldset { border: 0; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
#payment .woocommerce-notice, #payment .woocommerce-info { margin: 0; }
#payment .place-order { display: grid; gap: 14px; margin: 0; }
.woocommerce-terms-and-conditions-wrapper { display: grid; gap: 10px; font-size: 13px; color: var(--muted); }
.woocommerce-privacy-policy-text p { margin: 0; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--text-strong); text-underline-offset: 3px; }
.woocommerce-terms-and-conditions { max-height: 240px; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--cream); }
.woocommerce #place_order { width: 100%; min-height: 54px; font-size: 17px; font-weight: 600; }
.woocommerce-checkout .dc-trust { margin-top: 0; }

/* ---------- Order received ---------- */
.woocommerce-order { display: grid; gap: 24px; }
.woocommerce-order > p, .woocommerce-thankyou-order-received { margin: 0; font-size: 18px; color: var(--text-strong); }
ul.woocommerce-order-overview {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
ul.woocommerce-order-overview li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--charcoal); font-weight: 600; word-break: break-word; }
.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-bacs-bank-details, .wc-bacs-bank-details-heading + ul {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px;
}
.woocommerce-order-details__title, .woocommerce-column__title, .wc-bacs-bank-details-heading {
  margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.woocommerce-order-details td.product-total, .woocommerce-order-details tfoot td { text-align: right; }
.woocommerce-order-details .product-name a { color: var(--charcoal); }
.woocommerce-customer-details address { font-style: normal; line-height: 1.7; color: var(--text-strong); }
.woocommerce-customer-details--phone, .woocommerce-customer-details--email { margin: 6px 0 0; color: var(--muted); }
.woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-order-details .order-again { display: none; }   /* the account pages are not available */

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .product-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-media { position: relative; top: auto; max-width: 620px; width: 100%; justify-self: center; }
  .woocommerce:has(> .woocommerce-cart-form), form.woocommerce-checkout { grid-template-columns: 1fr; }
  form.woocommerce-checkout > .checkout-main, form.woocommerce-checkout > .checkout-aside { grid-column: 1; }
  .cart-collaterals, .checkout-aside { position: static; }
}
@media (max-width: 767px) {
  /* cart table as stacked rows (WooCommerce adds data-title to each cell) */
  .woocommerce-cart-form { padding: 8px 18px 20px; }
  .woocommerce-cart-form .cart thead { display: none; }
  .woocommerce-cart-form .cart, .woocommerce-cart-form .cart tbody { display: block; }
  .woocommerce-cart-form .cart tr.cart_item {
    display: grid; grid-template-columns: 80px minmax(0, 1fr) 30px; column-gap: 14px; align-items: center;
    padding: 16px 0; border-bottom: 1px solid var(--border);
  }
  .woocommerce-cart-form .cart tr.cart_item td { display: block; padding: 0; border: 0; }
  .woocommerce-cart-form .cart .product-thumbnail { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 0 !important; }
  .woocommerce-cart-form .cart .product-name { grid-column: 2; grid-row: 1; }
  .woocommerce-cart-form .cart .product-remove { grid-column: 3; grid-row: 1; width: auto; }
  .woocommerce-cart-form .cart .product-price { display: none !important; }
  .woocommerce-cart-form .cart .product-quantity { grid-column: 2; grid-row: 2; margin-top: 10px; }
  .woocommerce-cart-form .cart .product-subtotal { grid-column: 2 / -1; grid-row: 3; text-align: left; margin-top: 8px; font-weight: 600; }
  .woocommerce-cart-form .cart tr:last-child { display: block; }
  .woocommerce-cart-form td.actions { display: grid; gap: 10px; padding-top: 16px; }
  .woocommerce-cart-form td.actions > .coupon, .woocommerce-cart-form td.actions > .button, .woocommerce-cart-form td.actions > .btn { margin: 0; float: none !important; }
  .woocommerce-cart-form .coupon { display: flex; }
  .woocommerce-cart-form .coupon .input-text { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 639px) {
  .shop-section { padding-block: calc(76px + 32px) var(--section); }
  .shop-head { margin-bottom: 28px; }
  .product-hero { padding-block: calc(76px + 24px) 48px; }
  .product-page > .woocommerce-notices-wrapper { padding-top: calc(76px + 16px); }
  .woocommerce-product-gallery { --thumb-gap: 6px; }
  .woocommerce-product-gallery .flex-control-thumbs li { border-radius: 8px; }
  .cart_totals, .checkout-aside, #customer_details .col-1 > div:has(> *), #customer_details .col-2 > div:has(> *),
  .woocommerce-order-details, .woocommerce-customer-details { padding: 20px; }
  .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-billing-fields__field-wrapper > .form-row-first, .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce-shipping-fields__field-wrapper > .form-row-first, .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 1; }
  .woocommerce-columns--addresses { grid-template-columns: 1fr; }
  .steps { font-size: 13px; gap: 6px 14px; }
}

/* short pages (empty cart): the footer stays at the bottom of the screen */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ---------- Deals (inc/deals.php) ---------- */
.dc-deals { flex-basis: 100%; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.dc-deals[hidden] { display: none; }
.dc-deals-title { margin-bottom: 4px; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dc-deal {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease;
}
@media (hover: hover) { .dc-deal:not(.is-disabled):hover { border-color: var(--border-strong); } }
.dc-deal:has(input:checked) { border-color: #CFEA22; background: rgba(207, 234, 34, 0.06); }
.dc-deal:has(input:focus-visible) { box-shadow: var(--focus); }
.dc-deal.is-disabled { cursor: not-allowed; opacity: .4; }
.dc-deal input { accent-color: #CFEA22; width: 18px; height: 18px; margin: 0; flex: none; }
.dc-deal-text { display: grid; flex: 1; min-width: 0; }
.dc-deal-label { font-weight: 600; color: var(--charcoal); }
.dc-deal-unit { font-size: 13px; color: var(--muted); }
.dc-deal-price { display: grid; justify-items: end; text-align: right; }
.dc-deal-price del { font-size: 13px; color: var(--muted); }
.dc-deal-price ins { text-decoration: none; font-weight: 600; color: var(--charcoal); }
/* the deals sit above the quantity and the button, which stay on one row */
.woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { flex-wrap: wrap; }
.woocommerce-variation-add-to-cart .quantity, form.cart:not(.variations_form) .quantity { flex: none; }

/* cart: a deal has a fixed quantity */
.dc-deal-qty {
  display: inline-grid; place-items: center; min-width: 50px; height: 50px; padding: 0 12px;
  border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text-strong);
}
.dc-deal-row .product-subtotal del, .cart_item .product-subtotal del { display: block; font-size: 13px; color: var(--muted); }
.dc-deal-row .product-subtotal ins { text-decoration: none; }

/* VAT notice for 0% VAT countries (inc/vat.php) */
.dc-vat-notice { margin: -8px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Payment methods under the add-to-cart button (inc/product.php) ---------- */
.dc-payment { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.dc-payment-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dc-payment-icons img { width: 40px; height: 30px; display: block; border-radius: 5px; box-shadow: 0 0 0 1px var(--border); }

/* review under the payment methods (inc/product.php), like the review cards on dienstclip.nl */
.dc-review { flex-basis: 100%; margin: 4px 0 0; padding: 14px 16px; display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.dc-review-stars { font-size: 14px; letter-spacing: 2px; color: #CFEA22; }
.dc-review-stars .is-off { color: var(--border-strong); }
.dc-review blockquote { margin: 0; font-size: 15px; color: var(--text-strong); }
.dc-review blockquote::before { content: "\201C"; }
.dc-review blockquote::after { content: "\201D"; }
.dc-review figcaption { font-size: 13px; color: var(--muted); }
.dc-review figcaption::before { content: "— "; }

/* checkout: "Ik heb mijn verzendadres gecontroleerd" above the order button (inc/cart-checkout.php) */
/* … and the terms checkbox above it in the same box */
.woocommerce form .dc-address-check, .woocommerce-terms-and-conditions-wrapper .form-row.validate-required {
  margin: 0; padding: 12px 14px; background: var(--cream); border: 1px solid var(--border); border-radius: 8px;
}
.woocommerce form .dc-address-check label.checkbox, .woocommerce-terms-and-conditions-wrapper label.checkbox { color: var(--charcoal); font-size: 15px; }
.woocommerce form .dc-address-check.woocommerce-invalid, .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid { border-color: #e8488c; }

/* ---------- Legal pages (DC_EXTRA_PAGES: terms, privacy, returns) ---------- */
.legal-note {
  max-width: 760px; margin: 0 0 24px; padding: 12px 16px; font-size: 14px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #8961fe; border-radius: 10px;
}
.legal-text { max-width: 760px; display: grid; gap: 14px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.legal-text > * { margin: 0; }
.legal-text h2, .legal-text h3, .legal-text h4 {
  margin-top: 18px; color: var(--charcoal); font-weight: 600; letter-spacing: -.2px; line-height: 1.3;
}
.legal-text h2 { font-size: 26px; }
.legal-text h3 { font-size: 21px; }
.legal-text h4 { font-size: 18px; }
.legal-text > :first-child { margin-top: 0; }
.legal-text strong { color: var(--text-strong); }
.legal-text a { color: var(--charcoal); text-underline-offset: 3px; }
.legal-text ul, .legal-text ol { padding-left: 22px; display: grid; gap: 6px; }
.legal-text li::marker { color: var(--muted); }
.legal-text hr, .legal-text .wp-block-separator { width: 100%; height: 0; margin: 10px 0; border: 0; border-top: 1px solid var(--border); }

/* order summary: "Verzending" above the shipping options, which get the full width */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 10px; }
.woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th { padding-bottom: 0; }
.woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { padding-top: 0; text-align: left; }
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li { justify-content: flex-start; text-align: left; }