/*
 * Zirbewinkel — sitebrede design-polish.
 * Subtiele ronde hoeken (Projectbrief: "zachtere uitstraling t.o.v. de scherpe
 * hoeken in het aangeleverde ontwerp").
 *
 * Filosofie:
 *   --z-radius-card  = 6px  cards, images, notices, section-boxes
 *   --z-radius-ctrl  = 3px  buttons, inputs, textareas, small tags
 *
 * Elementor-widget-controls blijven leading voor alle plekken waar die het native
 * doen (cart/checkout/my-account widgets, image-widget border_radius, etc.).
 * Deze CSS raakt alleen WC-native output en overige DOM waar geen widget-control
 * op zit.
 */

:root, .elementor-kit-11 {
  --z-radius-card: 6px;
  --z-radius-ctrl: 3px;
}

/* --- WC-native buttons (niet Elementor-Pro-widget-buttons) ---------- */
a.button, .woocommerce a.button, .woocommerce button.button,
button.wc-forward, button.wp-element-button,
.woocommerce .button, .woocommerce input[type="submit"] {
  border-radius: var(--z-radius-ctrl) !important;
}

/* --- Native form controls waar Elementor geen scope op heeft --------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], select, textarea {
  border-radius: var(--z-radius-ctrl);
}

/* --- WC product images (loop-shop, single, related, cross-sells) ---- */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder img,
.wc-block-grid__product-image img,
img.attachment-woocommerce_thumbnail,
img.attachment-shop_catalog {
  border-radius: var(--z-radius-card);
}

/* --- WC product-card wrappers (loop-shop) --------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border-radius: var(--z-radius-card);
  overflow: hidden;
}

/* --- Content images (WordPress/blocks/text-editor widget) ----------- */
.wp-block-image img,
figure.wp-block-image img,
.elementor-widget-text-editor img,
.elementor-widget-image img,
.entry-content img.aligncenter,
.entry-content img.alignleft,
.entry-content img.alignright {
  border-radius: var(--z-radius-card);
}

/* --- Notices & alerts ---------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
  border-radius: var(--z-radius-card);
}

/* --- Elementor button widget (waar radius=0 nog niet gezet is) ------ */
.elementor-widget-button .elementor-button:not([style*="border-radius"]) {
  border-radius: var(--z-radius-ctrl);
}

/* --- Elementor image widget (waar radius=0 nog niet gezet is) ------- */
.elementor-widget-image img:not([style*="border-radius"]),
.elementor-widget-theme-post-featured-image img {
  border-radius: var(--z-radius-card);
}

/* --- Sub-elementen die vaak zichtbaar vlak zijn --------------------- */
.woocommerce table.shop_table,
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
  border-radius: var(--z-radius-card);
  overflow: hidden;
}

/* --- Elementor icon-widget (stacked/framed) — laat circles rond --- */
/* geen override, cirkels blijven 50% */

/* --- Cart-item thumbnail images (awcc-templates) -------------------- */
.woocommerce-cart-form img,
.awcc-cart-remove-and-thumb img,
.cart-item-thumb img {
  border-radius: var(--z-radius-ctrl);
}

/* --- Order review / cart-totals klein-elementen --------------------- */
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table {
  border-radius: var(--z-radius-card);
}

/* --- Payment-method logos (mollie ikonen etc.) ---------------------- */
.woocommerce ul.payment_methods li img.payment-icon,
.wc_payment_methods li img {
  border-radius: var(--z-radius-ctrl);
}

/* --- Text-editor prose spacing --------------------------------------
 * Kit heeft p{margin-block-end:0} staan, waardoor alle paragrafen en
 * inline headings tegen elkaar plakken. Herstel leesbare prose-spacing
 * binnen tekstblokken. */
.elementor-widget-text-editor p {
  margin-bottom: 1em !important;
}
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor > *:last-child {
  margin-bottom: 0 !important;
}
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6 {
  margin-top: 1.6em !important;
  margin-bottom: 0.6em !important;
  line-height: 1.3 !important;
}
.elementor-widget-text-editor h2:first-child,
.elementor-widget-text-editor h3:first-child,
.elementor-widget-text-editor h4:first-child,
.elementor-widget-text-editor h5:first-child,
.elementor-widget-text-editor h6:first-child {
  margin-top: 0 !important;
}
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin: 0 0 1em 1.4em !important;
  padding: 0 !important;
}
.elementor-widget-text-editor li {
  margin-bottom: 0.4em !important;
  line-height: 1.6 !important;
}
.elementor-widget-text-editor ul li { list-style: disc !important; }
.elementor-widget-text-editor ol li { list-style: decimal !important; }
/* Losstaande links en <br>-blokjes hebben ademruimte tussen paragraph-secties */
.elementor-widget-text-editor a { color: var(--e-global-color-primary, #C1272D); }

/* --- Outline SVG icon-widgets (custom-SVG met stroke) --------------
 * Elementor's icon-widget-CSS forceert fill:primary op de <svg> waardoor
 * outline-SVG's als filled shape renderen. Deze klasse forceert outline. */
.elementor-widget-icon.zirbe-outline-icon svg,
.zirbe-outline-icon .elementor-icon svg {
  fill: none !important;
  stroke: currentColor !important;
}

/* --- Archive filter-sidebar tablet/mobile layout --------------------
 * Op tablet klapt de filter-sidebar bovenaan (grid stack, gedaan in template)
 * en gaan de sub-filters (Categorie/Prijs/Voorraad) horizontaal naast elkaar. */
@media (max-width: 1024px) {
  .aw-archive-sidebar > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px 32px !important;
  }
  .aw-archive-sidebar .aw-filter-group {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 220px !important;
  }
  .aw-archive-sidebar .aw-filter-group:nth-of-type(1) { flex-grow: 2; }
  .aw-archive-sidebar .aw-filter-group + .aw-filter-group { border-top: none !important; padding-top: 0 !important; }
}
@media (max-width: 600px) {
  .aw-archive-sidebar > .e-con-inner {
    flex-direction: column !important;
  }
  .aw-archive-sidebar .aw-filter-group { width: 100% !important; min-width: 0 !important; }
}

/* Archive grid: op tablet/mobiel stack met content-height rijen (niet 1fr 1fr) */
@media (max-width: 1024px) {
  .aw-archive-row > .e-con-inner {
    grid-template-rows: auto auto !important;
  }
}

/* --- Archive filter mobile-toggle -----------------------------------
 * Op mobiel (≤600px) start de filter-sidebar collapsed en toont een
 * 'Filters' toggle-knop. Boven 600px onzichtbaar, sidebar altijd open. */
.aw-archive-filter-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  margin: -16px -16px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  border-radius: var(--z-radius-card);
}
.aw-archive-filter-toggle .aw-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 14px;
}
.aw-archive-sidebar.aw-collapsed .aw-archive-filter-toggle .aw-toggle-icon {
  transform: rotate(-90deg);
}
@media (max-width: 600px) {
  .aw-archive-filter-toggle { display: flex; }
  .aw-archive-sidebar.aw-collapsed > .e-con-inner { display: none !important; }
  .aw-archive-sidebar.aw-collapsed { padding-bottom: 0 !important; }
}

/* Reset button base-states (theme heeft generieke button-fill die anders overheerst) */
.aw-archive-filter-toggle,
.aw-archive-filter-toggle:hover,
.aw-archive-filter-toggle:focus,
.aw-archive-filter-toggle:active {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.aw-archive-filter-toggle:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #C1272D) !important;
  outline-offset: 2px !important;
}

/* --- Mobile: sidebar zelf géén card, knop is de card ---------------- */
@media (max-width: 600px) {
  .aw-archive-sidebar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .aw-archive-filter-toggle {
    margin: 0 !important;
    padding: 14px 18px !important;
    background: #FFFDF9 !important;
    border: 1px solid #E9DCC4 !important;
    border-radius: var(--z-radius-card) !important;
  }
  .aw-archive-sidebar:not(.aw-collapsed) > .e-con-inner {
    margin-top: 10px !important;
    gap: 20px !important;
  }
}

/* --- Winkel-CTA's: "In winkelwagen", "Afrekenen", "Bestelling plaatsen" = groen ---
   Site-breed, zodat productkaarten (loop 337), single product (284), mini-cart,
   winkelwagen en checkout dezelfde CTA-kleur hebben. */
.aw-prod-card__cta .elementor-button,
.single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce-mini-cart__buttons a.button.checkout,
.elementor-menu-cart__footer-buttons a.elementor-button--checkout,
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout a.btn-primary,
.woocommerce-checkout button.awcc-next-step,
#place_order {
    background-color: #3d7a3d !important;
    border-color: #3d7a3d !important;
    color: #FFFDF9 !important;
}
.aw-prod-card__cta .elementor-button:hover,
.aw-prod-card__cta .elementor-button:focus,
.single_add_to_cart_button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce-mini-cart__buttons a.button.checkout:hover,
.elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout a.btn-primary:hover,
.woocommerce-checkout button.awcc-next-step:hover,
#place_order:hover {
    background-color: #316231 !important;
    border-color: #316231 !important;
    color: #FFFDF9 !important;
}

/* --- 3.5 Menustructuur (zoals Oostenrijksewinkel.nl) ---------------------
   Hoofdbalk = alleen productcategorieën; Ons Verhaal + Contact staan op desktop
   rechts in de topbalk en blijven in het mobiele menu. */
nav.elementor-nav-menu--main .zirbe-nav-mobile-only { display: none !important; }
.zirbe-topbar-links { display: flex; gap: 22px; }
.zirbe-topbar-links a {
    color: var(--e-global-color-text-on-dark-emphasis, #F1E6D3);
    font-size: 13px;
    text-decoration: none;
}
.zirbe-topbar-links a:hover { color: #FFFDF9; text-decoration: underline; }
/* 7 categorieën + dropdown-pijltjes moeten op desktop (≥1025px) op één regel passen */
@media (min-width: 1025px) {
  .elementor-element-e303f1b { --e-nav-menu-horizontal-menu-item-margin: 8px !important; }
  .elementor-element-e303f1b .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item { font-size: 14px !important; white-space: nowrap; }
  .elementor-element-e303f1b .elementor-nav-menu--main .sub-arrow { padding-left: 4px !important; }
}

/* --- Homepage "Zoveel Oostenrijk in één winkel" (#cat-grid) ---------------
   Foto's hebben verschillende verhoudingen en teksten verschillende lengtes;
   vaste fotobox + link onderaan zodat titel, tekst en link per rij gelijk staan. */
#cat-grid [id^="cat-card-"] > .zirbe-cat-photo { width: 100%; }
#cat-grid [id^="cat-card-"] > .zirbe-cat-photo a { display: block; }
#cat-grid [id^="cat-card-"] > .zirbe-cat-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
#cat-grid [id^="cat-card-"] > .elementor-element:last-child { margin-top: auto; }

/* --- Productpagina: hoofdfoto + thumbnails altijd vierkant ----------------
   Galerij-afbeeldingen hebben eigen verhoudingen (bv. 600x712, 600x454) en de
   thumbnail-klik in custom.js zet het originele bestand in de hoofdfoto;
   vast 1:1-vak zonder bijsnijden. .zoomImg (hover-zoom) blijft ongemoeid. */
.woocommerce div.product .woocommerce-product-gallery__image > a > img:not(.zoomImg),
.aw-thumbnail-slider .woocommerce-product-gallery__image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* --- Productpagina: ruimte in de galerij en naast de foto ------------------ */
/* Thumbnails: ruimte t.o.v. hoofdfoto en onderling (slick-slides, 12px tussen) */
.aw-thumbnail-slider-parent { margin-top: 12px; }
.aw-thumbnail-slider .slick-list { margin: 0 -6px !important; }
.aw-thumbnail-slider .slick-slide { padding: 0 6px; box-sizing: border-box; }
.aw-thumbnail-slider .slick-slide > a { margin: 0 !important; }
/* Desktop: meer lucht tussen galerij en productinformatie */
@media (min-width: 901px) {
  #sp-main-inner > .e-con-inner { gap: 56px; }
  #sp-buy-box-col { flex: 1 1 0; width: auto; min-width: 0; }
}

/* --- Productpagina: galerij altijd volle kolombreedte ------------------------
   Kolom #sp-gallery-col centreert zijn inhoud; bij een klein bronbestand
   (bv. 203x270) kromp de galerij mee en werden hoofdfoto + thumbnails piepklein. */
#sp-gallery-col > .elementor-widget-woocommerce-product-images { width: 100%; }
#sp-gallery-col .woocommerce-product-gallery,
#sp-gallery-col .woocommerce-product-gallery__wrapper,
#sp-gallery-col .woocommerce-product-gallery__image:not(.slick-slide) { width: 100% !important; max-width: 100% !important; }
#sp-gallery-col .aw-thumbnail-slider-parent { width: 100%; }
/* Minder thumbnails dan plekken: links uitlijnen i.p.v. gecentreerde slick-track */
.aw-thumbnail-slider .slick-track { margin-left: 0 !important; margin-right: 0 !important; }

/* --- Productpagina: vinkje op dezelfde hoogte als voorraadtekst (Op voorraad / Uitverkocht) --- */
#sp-stock-row { align-items: center !important; }
#sp-stock-row > .elementor-widget-icon { align-self: center; line-height: 0; }
#sp-stock-row > .elementor-widget-icon .elementor-icon-wrapper,
#sp-stock-row > .elementor-widget-icon .elementor-icon { display: flex; align-items: center; line-height: 0; }

/* --- Productpagina: tabs (Beschrijving / Verzending / ...) zoals ontwerp ----
   designs/zirbewinkel-productpagina.html r. 211-215: teksttabs, gap 32px,
   2px beige lijn eronder, actieve tab rood met 2.5px rode onderstreping. */
.single-product .woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    gap: 32px;
    padding: 0 !important;
    margin: 0 0 28px !important;
    border: 0 !important;
    border-bottom: 2px solid #E9DCC4 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    flex-wrap: wrap;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
.single-product .woocommerce-tabs ul.tabs.wc-tabs::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs::after,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::after { display: none !important; content: none !important; }
.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
    flex: 0 0 auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 -2px !important;
    padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
    display: block;
    padding: 0 0 14px !important;
    font-family: "Ubuntu", sans-serif;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    color: #8a6f56 !important;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s ease;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover { color: #C1272D !important; }
.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
    color: #C1272D !important;
    border-bottom-color: #C1272D;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Design-afstemming 2026-09-28 (productpagina / archief / home)
   Bron: zirbewinkel-productpagina.html, -productenarchief.html, -homepage-pagina.html
   ========================================================================== */

/* Productkaarten (loop-template 337): foto tot de rand zoals ontwerp, titel vet,
   winkelwagen-icoon in de knop. Groene CTA-kleur blijft (bewuste keuze 25-09). */
.aw-prod-card__image { background: #fff !important; }
.aw-prod-card__image img { padding: 0 !important; border-radius: 0 !important; }
.aw-prod-card__title .elementor-heading-title,
.aw-prod-card__title .elementor-heading-title a { font-weight: 700 !important; color: #3A2317; }
.aw-prod-card .elementor-button .elementor-button-text { display: inline-flex; align-items: center; gap: 6px; }
.aw-prod-card .elementor-button .elementor-button-text::before {
    content: "";
    width: 15px; height: 15px; flex: 0 0 15px;
    background-color: 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='1.8'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%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='1.8'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kruimelpad: chevrons (mu-plugin zirbe-design-align), links #8a6f56 600, huidige pagina #5E2E1C 700 */
.woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px !important; color: #5E2E1C !important; font-weight: 700; }
.woocommerce-breadcrumb a { color: #8a6f56 !important; font-weight: 600; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: #C1272D !important; }
.woocommerce-breadcrumb .zirbe-bc-sep { display: inline-flex; line-height: 0; }

/* Productpagina: ondertitel verborgen bij niet-Zirben-producten (mu-plugin geeft lege output) */
.elementor-element-7d82259:not(:has(.elementor-heading-title)) { display: none !important; }

/* Productpagina: "Vaak samen gekocht" verbergen als er geen gerelateerde producten zijn */
#sp-related-outer:not(:has(.product)) { display: none !important; }

/* Productpagina: hoofdfoto + thumbnails zoals ontwerp (rand #E9DCC4, radius 6/4, actief rood) */
#sp-gallery-col .woocommerce-product-gallery__image:not(.slick-slide) > a > img:not(.zoomImg) {
    border: 1px solid #E9DCC4; border-radius: 6px; box-sizing: border-box;
}
.aw-thumbnail-slider .woocommerce-product-gallery__image img {
    border: 1px solid #E9DCC4 !important; border-radius: 4px !important; box-sizing: border-box; cursor: pointer;
}
.aw-thumbnail-slider .slick-slide.zirbe-thumb-active img { border: 1.5px solid #C1272D !important; }

/* Archief: "Sorteren:" label voor de sorteerselect zoals ontwerp */
.woocommerce-ordering { display: flex; align-items: center; gap: 10px; }
.woocommerce-ordering::before { content: "Sorteren:"; font-size: 13.5px; font-weight: 600; color: #5A4736; white-space: nowrap; }

/* Thumbnail-slider pijlen: bron-SVG (uploads/2024/11/chevronRechts-cropped.svg) bestaat niet
   op deze site -> alt-tekst "Slider next img". Ronde knoppen met CSS-chevron. */
.aw-thumbnail-slider-parent { position: relative; }
.aw-thumbnail-slider-parent .slider-nav { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.aw-thumbnail-slider-parent .aw-slider-btn-left,
.aw-thumbnail-slider-parent .aw-slider-btn-right {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: #FFFDF9; border: 1px solid #E9DCC4; box-shadow: 0 2px 6px rgba(94,46,28,.15);
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto; cursor: pointer; font-size: 0;
}
.aw-thumbnail-slider-parent .aw-slider-btn-left { left: 6px; }
.aw-thumbnail-slider-parent .aw-slider-btn-right { right: 6px; }
.aw-thumbnail-slider-parent .slider-nav img { display: none !important; }
.aw-thumbnail-slider-parent .aw-slider-btn-left::before,
.aw-thumbnail-slider-parent .aw-slider-btn-right::before {
    content: ""; width: 14px; height: 14px; background: #5E2E1C;
    -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' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%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' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.aw-thumbnail-slider-parent .aw-slider-btn-left::before { transform: rotate(180deg); }
.aw-thumbnail-slider-parent .slick-hidden { display: none !important; }
.aw-thumbnail-slider-parent .slick-disabled { opacity: .35; cursor: default; }
.aw-thumbnail-slider-parent .aw-slider-btn-left:not(.slick-disabled):hover,
.aw-thumbnail-slider-parent .aw-slider-btn-right:not(.slick-disabled):hover { background: #F1E6D3; }

/* "Vaak samen gekocht": kaarten zoals ontwerp (bg #FFFDF9, rand #E9DCC4, radius 6, 3 kolommen) */
#sp-related-inner { max-width: 100%; }
#sp-related-outer ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 !important; width: 100%; }
#sp-related-outer ul.products::before, #sp-related-outer ul.products::after { display: none !important; }
#sp-related-outer ul.products li.product {
    width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important;
    background: #FFFDF9; border: 1px solid #E9DCC4; border-radius: 6px; overflow: hidden;
    transition: box-shadow .18s ease;
}
#sp-related-outer ul.products li.product:hover { box-shadow: 0 10px 20px rgba(94,46,28,.12); }
#sp-related-outer ul.products li.product a img {
    width: 100% !important; aspect-ratio: 1 / 1; object-fit: contain; background: #fff;
    margin: 0 !important; border-radius: 0 !important; display: block;
}
#sp-related-outer ul.products li.product .woocommerce-loop-product__title {
    padding: 14px 14px 0 !important; margin: 0 0 5px !important;
    font-family: "Ubuntu", sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; color: #A76626 !important;
}
#sp-related-outer ul.products li.product .price {
    display: block; padding: 0 14px 14px !important; margin: 0 !important;
    font-size: 14.5px !important; font-weight: 800 !important; color: #5E2E1C !important;
}
#sp-related-outer ul.products li.product .button { display: none !important; }
@media (max-width: 900px) { #sp-related-outer ul.products { grid-template-columns: 1fr; } }

/* "Vaak samen gekocht": widget over volle breedte (1000px) + prijs zonder onderstreping */
#sp-related-inner > .elementor-widget-woocommerce-product-related { width: 100%; }
#sp-related-outer ul.products li.product .price ins { text-decoration: none; }
#sp-related-outer ul.products li.product .price del { color: #8a6f56; font-weight: 600; font-size: 13px; margin-right: 6px; }

/* Hero: foto tegen de rechterrand van de content, zodat foto, laatste USP en categoriekaarten op één lijn liggen */
@media (min-width: 901px) {
  #hero-inner > .e-con-inner { justify-content: space-between !important; }
}

/* Homepage USP-balk: eerste blokje op de linkerlijn, tekst van het laatste blokje
   eindigt precies op de lijn van de hero-foto/kaarten; resterende ruimte gelijk verdeeld.
   Blok 1+2 over twee regels, 3+4 op één regel (vanaf 1200px). */
@media (min-width: 901px) {
  #usp-inner > .e-con-inner { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; column-gap: 24px; }
  #usp-inner > .e-con-inner > .elementor-widget { flex: 0 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; }
  #usp-inner > .e-con-inner > .elementor-widget:nth-child(1) .elementor-icon-box-content { max-width: 190px; }
  #usp-inner > .e-con-inner > .elementor-widget:nth-child(2) .elementor-icon-box-content { max-width: 205px; }
}
@media (min-width: 1200px) {
  #usp-inner > .e-con-inner > .elementor-widget:nth-child(3) .elementor-icon-box-content,
  #usp-inner > .e-con-inner > .elementor-widget:nth-child(4) .elementor-icon-box-content { white-space: nowrap; }
}

/* Header-menu: groene hover-/actief-lijn lager, los van de tekst (stond op top 14px in een 17px hoge link) */
.elementor-element-e303f1b .elementor-nav-menu--main .elementor-item::after { top: auto !important; bottom: -5px !important; }

/* ==========================================================================
 * Icoon-uitlijning 2026-09-29 — gelijkgetrokken met de ontwerpen
 * ========================================================================== */

/* Icon-widgets: geen baseline-ruimte onder inline SVG's (gaf 3-4px verschuiving) */
.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon .elementor-icon { line-height: 0; }
.elementor-widget-icon .elementor-icon { display: inline-flex; }

/* Home hero-USP's: icoon links naast de tekst, verticaal gecentreerd — ook op mobiel */
.elementor-element-66f37ef .elementor-icon-box-wrapper {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 8px; text-align: start !important;
}
.elementor-element-66f37ef .elementor-icon-box-icon { margin: 0 !important; display: inline-flex; line-height: 0; }
.elementor-element-66f37ef .elementor-icon { display: inline-flex; line-height: 0; }
.elementor-element-66f37ef .elementor-icon-box-content { display: flex; align-items: center; }
.elementor-element-66f37ef .elementor-icon-box-title { margin: 0 !important; }

/* Home USP-strip: icoon links, bovenkant gelijk met de tekst (ontwerp: align-items flex-start) */
.elementor-element-6c76d94 .elementor-icon-box-wrapper {
  display: flex !important; flex-direction: row !important; align-items: flex-start !important;
  gap: 14px; text-align: start !important;
}
.elementor-element-6c76d94 .elementor-icon-box-icon { margin: 0 !important; flex-shrink: 0; display: inline-flex; line-height: 0; }
.elementor-element-6c76d94 .elementor-icon { display: inline-flex; line-height: 0; }
.elementor-element-6c76d94 .elementor-icon-box-content { flex: 1; min-width: 0; }

/* Vinkjeslijsten: vinkje bij de eerste regel i.p.v. midden van een meerregelig item */
.elementor-icon-list-items:not(.elementor-inline-items) > .elementor-icon-list-item,
.elementor-icon-list-items:not(.elementor-inline-items) > .elementor-icon-list-item > a { align-items: flex-start !important; }
.elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-icon {
  align-self: flex-start; height: var(--z-list-lh, 1.6em); display: inline-flex; align-items: center; flex-shrink: 0;
}

/* Topbalk: locatie-pin bij de eerste regel als de tekst op mobiel afbreekt */
.elementor-element-494a831 { align-items: flex-start !important; }
.elementor-element-494a831 > .elementor-widget-icon { height: var(--z-topbar-lh, 1.5em); display: flex; align-items: center; }

/* Footer-logo: boom verticaal gecentreerd naast "Zirbewinkel" */
.elementor-element-b593e5e { align-items: center !important; }

/* Product: voorraadregel — één groen vinkje (geen extra bolletje), gecentreerd */
#sp-stock-row p.stock::before { display: none !important; }
#sp-stock-row p.stock { padding-left: 0 !important; margin: 0 !important; }

/* Product: USP-box — outline-iconen uit het ontwerp, 20px, gecentreerd boven de tekst */
.awcf-product-usps .awcf-usp-icon { width: 20px !important; height: 20px !important; line-height: 0 !important; display: block; margin: 0 auto; }
.awcf-product-usps .awcf-usp-icon.dashicons-car::before,
.awcf-product-usps .awcf-usp-icon.dashicons-yes-alt::before,
.awcf-product-usps .awcf-usp-icon.dashicons-admin-home::before {
  content: ""; display: block; width: 20px; height: 20px;
  background: currentColor; -webkit-mask: var(--zi) center / contain no-repeat; mask: var(--zi) center / contain no-repeat;
}
.awcf-product-usps .dashicons-car { --zi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='7' width='15' height='10'/%3E%3Cpath d='M16 10h4l3 3v4h-7z'/%3E%3Ccircle cx='6.5' cy='19.5' r='1.7'/%3E%3Ccircle cx='18' cy='19.5' r='1.7'/%3E%3C/svg%3E"); }
.awcf-product-usps .dashicons-yes-alt { --zi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.awcf-product-usps .dashicons-admin-home { --zi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5L12 3l9 6.5V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-5H9v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }

/* Archief: filtertoggle met filter-icoon + chevron (ontwerp) */
.aw-archive-filter-toggle .aw-toggle-label { display: inline-flex; align-items: center; gap: 10px; }
.aw-archive-filter-toggle .aw-toggle-label svg,
.aw-archive-filter-toggle .aw-toggle-icon svg { display: block; }
.aw-archive-filter-toggle .aw-toggle-icon { line-height: 0; font-size: 0; }
.aw-archive-sidebar.aw-collapsed .aw-archive-filter-toggle .aw-toggle-icon { transform: none; }
.aw-archive-sidebar:not(.aw-collapsed) .aw-archive-filter-toggle .aw-toggle-icon { transform: rotate(180deg); }

@media (max-width: 767px) {
  /* Home USP-strip mobiel: links uitgelijnd, zoals ontwerp (1 kolom) */
  .elementor-element-6c76d94 .elementor-icon-box-title { text-align: start !important; }

  /* Product: USP-box in 3 kolommen, icoon gecentreerd boven de tekst */
  .awcf-product-usps { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .awcf-product-usps .awcf-product-usp { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; }

  /* Product: voorraadregel loopt als tekst door, vinkje blijft op de eerste regel */
  #sp-stock-row { display: block !important; }
  #sp-stock-row > .elementor-element { display: inline !important; width: auto !important; }
  #sp-stock-row > .elementor-element > .elementor-widget-container,
  #sp-stock-row > .elementor-element .elementor-heading-title,
  #sp-stock-row p.stock { display: inline !important; }
  #sp-stock-row > .elementor-widget-icon .elementor-icon-wrapper,
  #sp-stock-row > .elementor-widget-icon .elementor-icon { display: inline-flex !important; vertical-align: -3px; margin-right: 6px; }
}

/* Nav-dropdowns: tekst blijft wit op de donkere hover-achtergrond (globale link-hover maakte hem rood) */
.elementor-location-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown a:focus,
.elementor-location-header .elementor-nav-menu--dropdown a.highlighted,
.elementor-location-header .elementor-nav-menu--main .sub-menu a:hover,
.elementor-location-header .elementor-nav-menu--main .sub-menu a:focus,
.elementor-location-header .elementor-nav-menu--main .sub-menu a.highlighted { color: #fff !important; }
.elementor-location-header .elementor-nav-menu--dropdown a:hover .sub-arrow svg,
.elementor-location-header .elementor-nav-menu--main .sub-menu a:hover .sub-arrow svg { fill: #fff; }

/* Archief sorteerregel (2026-09-29): "X resultaten" links, "Sorteren: [select]" rechts op één regel — ook mobiel */
.elementor-element-b350146 > .e-con-inner { flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; }
.elementor-element-b350146 .elementor-widget-shortcode { width: auto !important; min-width: 0; }
.elementor-element-b350146 .woocommerce-result-count { white-space: nowrap; }
.woocommerce-ordering::before { font-weight: 700 !important; color: #5A4736; }
.woocommerce-ordering select.orderby {
  font-weight: 400 !important; font-size: 13.5px; padding: 9px 34px 9px 14px !important; min-width: 0; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2317' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important; background-position: right 12px center !important;
}
@media (max-width: 767px) {
  .elementor-element-b350146 .woocommerce-ordering { gap: 8px; }
  .elementor-element-b350146 .woocommerce-ordering select.orderby { width: 150px; }
}

/* Home hero-foto (2026-10-14): echte foto vult het vlak 1:0.92 (cover), geen beige placeholder meer, label linksonder */
#hero-art {
  background-size: cover !important;
  background-position: 30% center !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 1 / 0.92;
  --min-height: 0px;
  min-height: 0 !important;
}
#hero-art-caption {
  left: 20px !important; right: auto !important; top: auto !important; bottom: 20px !important;
  width: auto !important; max-width: calc(100% - 40px);
  padding: 10px 16px !important;
  background-color: rgba(255,253,249,0.92) !important;
}
#hero-art-caption .elementor-heading-title { font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #5E2E1C !important; }

/* Age Gate (2026-10-23): popup in Zirbewinkel-stijl. Kleuren en logo staan in de Age Gate-instellingen, knoppen en vorm hier. */
.age-gate { border-radius: 6px; border: 1px solid #E9DCC4; box-shadow: 0 12px 24px rgba(94,46,28,0.14); padding: 32px 28px; max-width: min(460px, calc(100vw - 32px)); }
img.age-gate__heading-title--logo { width: 160px; max-width: 100%; height: auto; margin: 0 auto 4px; display: block; }
.age-gate .age-gate__fields .age-gate__challenge { color: #3A2317; font-size: 17px; font-weight: 700; margin: 16px 0 28px; }
.age-gate__buttons { display: flex; gap: 12px; justify-content: center; }
.age-gate__submit { min-width: 120px; padding: 13px 26px; border-radius: 3px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; }
button.age-gate__submit--yes { background: #C1272D; color: #FFFDF9; border: 1.5px solid #C1272D; }
button.age-gate__submit--yes:hover { background: #a01e23; border-color: #a01e23; }
button.age-gate__submit--no { background: transparent; color: #5E2E1C; border: 1.5px solid #5E2E1C; }
button.age-gate__submit--no:hover { background: #5E2E1C; color: #FFFDF9; }
.age-gate__errors { color: #C1272D; }


/* Mobiel zijmenu (Off-Canvas in header, 2026-10-23): submenu's klappen onder het item uit in plaats van als flyout naast het paneel */
.e-off-canvas .elementor-nav-menu--main .sm-vertical .sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; left: auto !important; top: auto !important; box-shadow: none; background: transparent; padding-left: 14px; }
.e-off-canvas .elementor-nav-menu--main .sm-vertical .sub-menu a { padding-left: 0; }
/* Zijmenu: streep onder elk hoofditem, pijl rechts (2026-10-23) */
.e-off-canvas .elementor-nav-menu--main > ul > li > a { border-bottom: 1px solid #E9DCC4; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.e-off-canvas .elementor-nav-menu--main .sub-menu a { border-bottom: 0; padding-top: 12px; padding-bottom: 12px; }

/* --- Header tap-targets op tablet/mobiel (minimaal 44px) ---------------
 * Elementor-icon padding is niet per schermbreedte in te stellen zonder het
 * desktopmenu te verbreden, daarom hier. Zoek, account, burger, winkelwagen. */
@media (max-width: 1024px) {
  [data-elementor-type="header"] .elementor-widget-icon .elementor-icon {
    box-sizing: content-box;
    padding: 12px !important;
  }
  [data-elementor-type="header"] .elementor-hidden-desktop .elementor-icon {
    padding: 9px !important;
  }
  [data-elementor-type="header"] #elementor-menu-cart__toggle_button {
    box-sizing: content-box;
    padding: 11px !important;
  }
}