/* ============================================================
   TM MODERN POLISH  -  LIVE + STAGING2  -  revertible
   Verzacht boxy standaard-onderdelen (WooCommerce, formulieren,
   accordeon, losse content-templates) naar de moderne V9-look:
   zachte ronding, warme randen, lichte schaduw.

   Raakt BEWUST GEEN V9-componenten: de checkout (.tmv2-*, .tm-checkout-*),
   de PDP-viewer, de catalog-kaarten (.tm-catalog-*) en de world (.tmv9-*)
   houden hun eigen styling. Alleen hoek-ronding/rand/schaduw, nooit layout.

   Terugdraaien = mu-plugin-bestand tm-modern-polish.php verwijderen.
   Documentatie per blok: 2026-07-18-staging2-modern-polish-changelog.
   ============================================================ */
:root{
  --tmp-radius:12px;          /* vlakken/cards */
  --tmp-radius-input:10px;    /* inputs, dropdowns, paginering */
  --tmp-line:#ddddda;         /* zachte warme rand (= --tmv2-line) */
  --tmp-shadow:0 8px 24px rgba(0,0,0,.06);
  --tmp-shadow-card:0 12px 30px rgba(20,20,20,.07);
  --tmp-red:#AD1716;
}

/* -------- GLOBAL 0: off-canvas panelen boven de sticky V9-header -------- */
.wd-side-hidden{
  z-index:1100 !important;
}
body:has(.wd-side-hidden.wd-opened) .wd-close-side.wd-close-side-opened{
  z-index:1090;
}

/* -------- GLOBAL 1: formulier-velden -------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="password"],input[type="number"],input[type="search"],input[type="date"],
textarea,select{
  border-radius:var(--tmp-radius-input) !important;
  border-color:var(--tmp-line) !important;
}
.select2-container--default .select2-selection,
.select2-dropdown{
  border-radius:var(--tmp-radius-input) !important;
  border-color:var(--tmp-line) !important;
}

/* -------- GLOBAL 2: knoppen -> chique 12px rondje (Monir 25-07) --------
   Geharmoniseerd met de "Bestel tegelmonsters"-knop in de menubalk (12px).
   Was eerder volle pil (999px); bij twee-regelige knoppen oogde dat overdreven. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-block-components-button,
button.button,.button.alt,
.woocommerce-form-login .button,.woocommerce-form-register .button{
  border-radius:12px !important;
}

/* -------- GLOBAL 3: winkelwagen (block + classic) -------- */
.woocommerce-cart .shop_table,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-cart-form,
.cart-collaterals .cart_totals,
.wc-block-cart-items,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar,
.wc-block-cart .wc-block-cart-items{
  border-radius:var(--tmp-radius) !important;
  border-color:var(--tmp-line) !important;
  overflow:hidden;
}

/* -------- WINKELWAGEN 2026-07-22: verwijderknop vrij van sticky header -------- */
body.woocommerce-cart .tmv9-header{
  position:relative !important;
  top:auto !important;
}
body.woocommerce-cart .wc-block-cart-item__remove-link,
body.woocommerce-cart .product-remove a.remove{
  pointer-events:auto;
}

/* -------- WINKELWAGEN 2026-07-22: enkele moderne aantal-kiezer -------- */
body.woocommerce-cart .wc-block-components-quantity-selector{
  width:112px !important;
  height:42px !important;
  display:inline-grid !important;
  grid-template-columns:36px 40px 36px;
  align-items:center;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid var(--tmp-line) !important;
  border-radius:var(--tmp-radius-input) !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(20,20,20,.04) !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector::after{
  border:0 !important;
  box-shadow:none !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button{
  width:36px !important;
  min-width:36px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--tmp-red) !important;
  font-family:Poppins,Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-shadow:none !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover{
  background:rgba(173,23,22,.07) !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible{
  outline:2px solid var(--tmp-red);
  outline-offset:-3px;
}
body.woocommerce-cart input.wc-block-components-quantity-selector__input{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  margin:0 !important;
  padding:0 4px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#f7f7f5 !important;
  color:#242424 !important;
  font-family:Poppins,Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:40px !important;
  box-shadow:none !important;
  appearance:textfield;
}

/* Klassieke WooCommerce-fallback voor carttemplates zonder Cart Block. */
body.woocommerce-cart .quantity{
  display:inline-flex !important;
  align-items:center;
  overflow:hidden;
  height:42px;
  border:1px solid var(--tmp-line) !important;
  border-radius:var(--tmp-radius-input) !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(20,20,20,.04) !important;
}
body.woocommerce-cart .quantity .minus,
body.woocommerce-cart .quantity .plus,
body.woocommerce-cart .quantity input.qty{
  height:40px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:Poppins,Arial,sans-serif !important;
}
body.woocommerce-cart .quantity .minus,
body.woocommerce-cart .quantity .plus{
  width:36px !important;
  min-width:36px !important;
  padding:0 !important;
  background:transparent !important;
  color:var(--tmp-red) !important;
  font-size:18px !important;
  font-weight:600 !important;
}
body.woocommerce-cart .quantity input.qty{
  width:40px !important;
  min-width:40px !important;
  padding:0 4px !important;
  background:#f7f7f5 !important;
  color:#242424 !important;
  font-size:15px !important;
  font-weight:600 !important;
}

/* -------- WINKELWAGEN 2026-07-22: cross-sells typografie -------- */
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > .wp-block-heading,
body.woocommerce-cart .cross-sells > h2{
  font-family:Poppins,Arial,sans-serif !important;
  font-size:clamp(22px,2vw,26px) !important;
  font-weight:600 !important;
  line-height:1.3 !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-name,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-products-block .wc-block-components-product-name,
body.woocommerce-cart .cross-sells .wd-entities-title,
body.woocommerce-cart .cross-sells .woocommerce-loop-product__title{
  font-family:Poppins,Arial,sans-serif !important;
  font-size:clamp(17px,1.45vw,18px) !important;
  font-weight:500 !important;
  line-height:1.45 !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button__button,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-products-block .wc-block-components-product-button__button,
body.woocommerce-cart .cross-sells .button{
  min-height:44px !important;
  max-width:100%;
  padding:11px 18px !important;
  font-family:Poppins,Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:.01em;
}

/* -------- GLOBAL 4: JetSmartFilters paginering (zwarte vierkantjes) -------- */
.jet-smart-filters-pagination .jet-filters-pagination__item{
  border-radius:10px !important;
}

/* -------- MY-ACCOUNT (login/registreren + dashboard) -------- */
body.woocommerce-account .wd-registration-page,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{
  background:#fff !important;
  border:1px solid var(--tmp-line) !important;
  border-radius:var(--tmp-radius) !important;
  box-shadow:var(--tmp-shadow-card);
  padding:34px !important;
}
body.woocommerce-account .wd-registration-page{
  max-width:1040px; margin-left:auto; margin-right:auto;
}

/* -------- FAQ accordeon (page-id-1408) -------- */
body.page-id-1408 .e-n-accordion-item{
  border-radius:var(--tmp-radius) !important;
  border:1px solid var(--tmp-line) !important;
  box-shadow:var(--tmp-shadow);
  overflow:hidden;
  margin-bottom:12px;
}
body.page-id-1408 .e-n-accordion-item-title{
  border-radius:var(--tmp-radius) !important;
}

/* -------- CONTACT (page-id-1412): icoon-tegels, kaart, beeld -------- */
body.page-id-1412 .elementor-view-stacked .elementor-icon{
  border-radius:var(--tmp-radius) !important;
}
body.page-id-1412 .elementor-widget-google_maps iframe,
body.page-id-1412 .elementor-widget-image img,
body.page-id-1412 .wpforms-container,
body.page-id-1412 form.wpcf7-form{
  border-radius:var(--tmp-radius) !important;
  overflow:hidden;
}

/* -------- CIRCULAIR (page-id-1418): beelden + gallery -------- */
body.page-id-1418 .elementor-widget-image img,
body.page-id-1418 .wp-block-image img,
body.page-id-1418 .elementor-widget-text-editor img,
body.page-id-1418 .e-gallery-image,
body.page-id-1418 .elementor-gallery-item{
  border-radius:var(--tmp-radius) !important;
}
body.page-id-1418 .elementor-gallery-item{ overflow:hidden; }

/* -------- OVER ONS (page-id-7): teamfoto's -------- */
body.page-id-7 img.size-thumbnail,
body.page-id-7 img.attachment-thumbnail,
body.page-id-7 .elementor-widget-text-editor img,
body.page-id-7 .elementor-widget-image img,
body.page-id-7 .wp-block-image img{
  border-radius:var(--tmp-radius) !important;
}

/* -------- CHECKOUT: login-melding zonder pil-rand (Monir 24-07) --------
   "Terugkerende klant? Klik hier voor login" toonde een functieloze
   pil-omlijning tegen de bovenrand. Alleen de tekst + link blijven. */
.woocommerce-form-login-toggle .woocommerce-info{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding-left:0 !important;
  margin-top:14px !important;
}


/* -------- WINKELWAGEN cross-sells "Misschien ook interessant" (Monir 25-07) --------
   30% compacter, plaatjes in vast vierkant, prijzen en knoppen uitgelijnd.
   NB: een bestaande cart-stylingregel zet deze maten met clamp() !important en
   hoge specificiteit; daarom winnen deze selectors bewust op specificiteit. */
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > h2.wp-block-heading.has-large-font-size,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > h2.wp-block-heading{
  font-size:19px !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product{
  display:flex !important;
  flex-direction:column !important;
  width:auto !important;
  max-width:none !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product img{
  aspect-ratio:1/1 !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product h3.wc-block-components-product-title,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product h3.wc-block-components-product-title a.wc-block-components-product-name{
  font-size:14px !important;
  line-height:1.35 !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price *{
  font-size:14px !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button{
  margin-top:auto !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product a.wp-block-button__link.wp-element-button.add_to_cart_button{
  border-radius:12px !important;
  font-size:11px !important;
  padding:9px 16px !important;
}

/* -------- CHECKOUT: Plaats bestelling-knop zelfde 12px-rondje (Monir 25-07) -------- */
body form.checkout #place_order,
body .woocommerce-checkout #place_order{
  border-radius:12px !important;
}

/* Aantal-kiezer (Monir 27/7): kale plus/min zonder boxen - de knopranden voegden niets toe */
.quantity input.minus,
.quantity input.plus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* -------- ZOEKRESULTAAT: 2 KOLOMMEN OP MOBIEL (2026-08-20) -------- */
/* De zoekresultatengrid stond op 4 kolommen voor desktop, tablet en mobiel.
   Op 390px werd een tegelkaart daardoor 97,5px breed en braken de zes
   eigenschap-iconen in zes rijen door titel en foto heen. De catalogus
   /tegels/ staat op 2 kolommen mobiel; deze regel trekt de zoekpagina
   daarmee gelijk. Zodra de kolominstelling zelf in de bouwer wordt
   gecorrigeerd, matcht deze regel niet meer en dooft hij vanzelf uit. */
@media (max-width:767px){
  .jet-listing-grid__items.grid-col-mobile-4{ --columns:2 !important; }
}
@media (min-width:768px) and (max-width:1024px){
  .jet-listing-grid__items.grid-col-tablet-4{ --columns:3 !important; }
}

/* -------- FILTERKNOP EN FILTERPANEEL ONDER DE HEADER (2026-09-03, alle breedtes 2026-09-04) -------- */
/* Het opengeklapte filterpaneel staat via JetBlocks vast op top:0 en de sticky
   header (z-index 1000) schildert eroverheen: bovenaan de pagina tot 98px op
   mobiel, 108px op tablet en 164px op desktop (34px actiebalk + header). De
   knoppen Tegels/Collecties en de eerste filters vielen daardoor weg.
   Sinds 04-09 meet een klein script in tm-modern-polish.php op /tegels/ de
   echte onderkant van de header en zet die als --tm-header-offset op <body>,
   bij laden, scrollen en van formaat veranderen. De waarden hieronder zijn het
   vangnet voor als het script niet draait: ruim, dus hooguit een gat, nooit overlap. */
body{ --tm-header-offset: 170px; }
@media (max-width:1199px){ body{ --tm-header-offset: 114px; } }
@media (max-width:767px){
  body{ --tm-header-offset: 104px; }
  body:has(.tmv9-header.is-scrolled){ --tm-header-offset: 70px; }
  .elementor-element.elementor-element-fd9430f.elementor-fixed{
    top: var(--tm-header-offset) !important;
  }
}
.jet-hamburger-panel__instance{
  top: var(--tm-header-offset);
  height: calc(100vh - var(--tm-header-offset));
  max-height: calc(100vh - var(--tm-header-offset));
}

/* Het resultaatblok met de telling lag onder de zwevende filterknop. Op mobiel
   schuift het HELE afgeronde blok naar rechts langs de knop (die daar 74px
   breed is) en wordt daardoor smaller. Alleen mobiel; desktop blijft ongemoeid. */
@media (max-width:767px){
  .jet-hamburger-panel__toggle{ padding: 6px 9px !important; }
  .jet-hamburger-panel__toggle .jet-hamburger-panel__toggle-icon{ font-size: 15px; }
  .jet-hamburger-panel__toggle .jet-hamburger-panel__toggle-label{ font-size: 13px; }
  .jet-hamburger-panel__toggle .jet-hamburger-panel__toggle-label span{ letter-spacing: 0; }
  .tmv2-plp-state{ margin-left: 86px; margin-right: 16px; width: auto; max-width: none; box-sizing: border-box; }
}