/* =========================================================
   WooCommerce, gestileerd in de vormgeving van het thema.
   Wordt alleen geladen op WooCommerce-pagina's.
   ========================================================= */

.woocommerce-wrap{
  padding:56px 28px 80px;
}

/* ---------- algemene titels ---------- */
.woocommerce-wrap .page-title,
.woocommerce-wrap h1.entry-title{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:clamp(30px, 3.6vw, 42px);
  color:var(--graphite);
  margin:0 0 20px;
}
.woocommerce-wrap h1.entry-title{
  border-bottom:2px solid var(--copper);
  padding-bottom:16px;
  margin-bottom:36px;
}

/* Balk met resultaattelling + sorteren, boven de koperen lijn, net als de titel */
.woocommerce-wrap .shop-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  border-bottom:2px solid var(--copper);
  padding-bottom:20px;
  margin-bottom:36px;
}
.woocommerce-wrap .shop-toolbar-rechts{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.woocommerce-wrap .btn-filter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  font-size:14px;
  white-space:nowrap;
}

.woocommerce-breadcrumb{
  font-size:13.5px;
  color:var(--text-muted);
  margin-bottom:24px;
}
.woocommerce-breadcrumb a{
  color:var(--steel);
}
.woocommerce-breadcrumb a:hover{ color:var(--copper-dark); }

/* ---------- meldingen ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  list-style:none;
  padding:14px 18px;
  margin:0 0 26px;
  border:1px solid var(--line);
  border-left:3px solid var(--copper);
  background:var(--paper-alt);
  font-size:14.5px;
  color:var(--text);
}
.woocommerce-error{ border-left-color:#b3382c; }
.woocommerce-message .button,
.woocommerce-info .button{
  margin-left:12px;
}

/* ---------- knoppen ---------- */
.woocommerce-wrap .button,
.woocommerce-wrap button.button,
.woocommerce-wrap input.button,
.woocommerce-wrap #respond input#submit{
  display:inline-block;
  padding:12px 24px;
  font-family:'Source Sans 3', sans-serif;
  font-weight:600;
  font-size:15px;
  background:var(--copper);
  color:var(--white) !important;
  border:1px solid var(--copper);
  border-radius:0;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.woocommerce-wrap .button:hover,
.woocommerce-wrap button.button:hover,
.woocommerce-wrap input.button:hover{
  background:var(--copper-dark);
  border-color:var(--copper-dark);
}
.woocommerce-wrap .button.alt{
  background:var(--graphite);
  border-color:var(--graphite);
}
.woocommerce-wrap .button.alt:hover{
  background:#000;
  border-color:#000;
}
.woocommerce-wrap a.remove{
  color:var(--text-muted) !important;
  border:none;
  font-size:20px;
}
.woocommerce-wrap a.remove:hover{
  color:#b3382c !important;
  background:none;
}

/* ---------- formuliervelden ---------- */
.woocommerce-wrap input[type="text"],
.woocommerce-wrap input[type="email"],
.woocommerce-wrap input[type="tel"],
.woocommerce-wrap input[type="password"],
.woocommerce-wrap input[type="number"],
.woocommerce-wrap textarea,
.woocommerce-wrap select{
  font-family:'Source Sans 3', sans-serif;
  font-size:15px;
  padding:11px 14px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--text);
  border-radius:0;
  width:100%;
}
.woocommerce-wrap input:focus,
.woocommerce-wrap textarea:focus,
.woocommerce-wrap select:focus{
  outline:none;
  border-color:var(--copper);
}
.woocommerce-wrap label{
  font-size:14px;
  font-weight:600;
  color:var(--steel);
}
.woocommerce-wrap .quantity .qty{
  width:70px;
  padding:9px 10px;
}

/* ---------- productgrid (shop / archief) ---------- */
.woocommerce-wrap ul.products{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  list-style:none;
  margin:0;
  padding:0;
}
.woocommerce-wrap ul.products li.product{
  background:var(--paper);
  padding:24px 24px 28px;
  position:relative;
}
.woocommerce-wrap ul.products li.product a{
  text-decoration:none;
  display:block;
}
.woocommerce-wrap ul.products li.product img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  margin-bottom:16px;
}
.woocommerce-wrap ul.products li.product .woocommerce-loop-product__title{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:600;
  font-size:19px;
  color:var(--graphite);
  margin:0 0 6px;
}
.woocommerce-wrap ul.products li.product .price{
  font-family:'Source Sans 3', sans-serif;
  font-weight:600;
  color:var(--copper-dark);
  font-size:15px;
}
.woocommerce-wrap ul.products li.product .price del{
  color:var(--text-muted);
  font-weight:400;
  opacity:0.7;
  margin-right:6px;
}
.woocommerce-wrap ul.products li.product .loop-korte-beschrijving{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.5;
  margin-top:10px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.woocommerce-wrap ul.products li.product .loop-korte-beschrijving p{
  margin:0;
}
.woocommerce-wrap ul.products li.product .button{
  margin-top:14px;
  font-size:13.5px;
  padding:10px 18px;
}
.woocommerce-wrap ul.products li.product .loop-knoppen{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.woocommerce-wrap ul.products li.product .loop-knoppen .button{
  margin-top:0;
  flex:1 1 0;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
  white-space:normal;
  line-height:1.25;
  padding:10px 12px;
}
.woocommerce-wrap ul.products li.product .loop-knoppen .button svg,
.woocommerce-wrap ul.products li.product .loop-knoppen .button svg.icoon-knop{
  width:15px !important;
  height:15px !important;
  min-width:15px;
  max-width:15px;
  flex-shrink:0;
  display:inline-block;
  margin-right:2px;
}
.woocommerce-wrap ul.products li.product .loop-knoppen .btn-bekijk-product{
  background:transparent;
  color:var(--graphite) !important;
  border:1px solid var(--graphite);
}
.woocommerce-wrap ul.products li.product .loop-knoppen .btn-bekijk-product:hover{
  background:var(--graphite);
  color:var(--white) !important;
}
.woocommerce-wrap ul.products li.product .onsale{
  position:absolute;
  top:20px;
  left:20px;
  background:var(--copper);
  color:var(--white);
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:0;
}
.woocommerce-wrap ul.products li.product .star-rating{
  font-size:13px;
  color:var(--copper);
  margin-bottom:6px;
}

/* ---------- materiaalgroep-badge (ISO 513) ---------- */
.materiaalgroep-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  margin:4px 0 12px;
}
.materiaalgroep-badge .materiaalgroep-letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--mg-kleur, var(--steel));
  color:var(--white);
  font-family:'Big Shoulders Display', sans-serif;
  font-size:13px;
  font-weight:700;
  flex-shrink:0;
}
.materiaalgroep-badge--klein{
  font-size:12px;
  margin:0 0 8px;
}
.materiaalgroep-badge--klein .materiaalgroep-letter{
  width:18px;
  height:18px;
  font-size:11px;
}

.woocommerce-result-count,
.woocommerce-ordering{
  font-size:14px;
  color:var(--text-muted);
  margin:0;
}
.woocommerce-ordering select{
  width:auto;
  min-width:200px;
  font-size:14px;
  padding:9px 12px;
}

/* ---------- enkele productpagina ---------- */
.woocommerce-wrap div.product{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  margin-bottom:64px;
  position:relative;
}
/* Het "Aanbieding!"-label telt niet mee in het raster, maar ligt als
 * badge linksboven over de productfoto. Zo blijven foto en tekst
 * altijd netjes naast elkaar staan, met of zonder aanbieding. */
.woocommerce-wrap div.product > .onsale{
  position:absolute;
  top:16px;
  left:16px;
  z-index:5;
  background:var(--copper);
  color:var(--white);
  font-size:13px;
  font-weight:600;
  padding:5px 12px;
  border-radius:0;
  line-height:1.4;
}
.woocommerce-wrap div.product > .woocommerce-product-gallery{
  grid-column:1;
  grid-row:1;
  position:relative;
}
.woocommerce-wrap div.product > .summary{
  grid-column:2;
  grid-row:1;
}
.woocommerce-wrap div.product .woocommerce-product-gallery__wrapper{
  border:1px solid var(--line);
}
.woocommerce-wrap div.product .woocommerce-product-gallery img{
  width:100%;
  height:auto;
  display:block;
}
.woocommerce-wrap div.product .summary.entry-summary .product_title{
  font-family:'Big Shoulders Display', sans-serif;
  font-size:clamp(28px, 3.2vw, 36px);
  margin-bottom:12px;
}
.woocommerce-wrap div.product .summary.entry-summary .price{
  font-size:24px;
  font-weight:700;
  color:var(--copper-dark);
  font-family:'Source Sans 3', sans-serif;
  margin-bottom:18px;
  display:block;
}
.woocommerce-wrap div.product .summary.entry-summary .woocommerce-product-details__short-description{
  color:var(--text-muted);
  margin-bottom:22px;
}
.woocommerce-wrap div.product form.cart{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.woocommerce-wrap div.product .stock{
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:18px;
  display:block;
}
.woocommerce-wrap div.product .stock.in-stock{ color:#3a7d44; }
.woocommerce-wrap div.product .stock.out-of-stock{ color:#b3382c; }

.woocommerce-wrap .woocommerce-tabs{
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  padding-top:28px;
}
.woocommerce-wrap .woocommerce-tabs ul.tabs{
  list-style:none;
  display:flex;
  gap:28px;
  padding:0;
  margin:0 0 24px;
  border-bottom:1px solid var(--line);
}
.woocommerce-wrap .woocommerce-tabs ul.tabs li{
  padding-bottom:14px;
}
.woocommerce-wrap .woocommerce-tabs ul.tabs li a{
  font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
}
.woocommerce-wrap .woocommerce-tabs ul.tabs li.active a{
  color:var(--graphite);
  border-bottom:2px solid var(--copper);
  padding-bottom:14px;
}

.woocommerce-wrap .related.products,
.woocommerce-wrap .upsells.products{
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  padding-top:32px;
  margin-top:8px;
}
.woocommerce-wrap .related.products > h2,
.woocommerce-wrap .upsells.products > h2{
  font-family:'Big Shoulders Display', sans-serif;
  font-size:24px;
  margin-bottom:20px;
}

/* ---------- winkelwagen ---------- */
.woocommerce-wrap table.shop_table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:32px;
}
.woocommerce-wrap table.shop_table th{
  text-align:left;
  font-size:13px;
  font-weight:600;
  text-transform:none;
  color:var(--text-muted);
  border-bottom:2px solid var(--copper);
  padding:12px 10px;
}
.woocommerce-wrap table.shop_table td{
  border-bottom:1px solid var(--line);
  padding:16px 10px;
  font-size:15px;
}
.woocommerce-wrap table.shop_table img{
  width:64px;
  height:64px;
  object-fit:cover;
}
.woocommerce-wrap .cart-collaterals{
  display:flex;
  justify-content:flex-end;
}
.woocommerce-wrap .cart_totals{
  width:100%;
  max-width:420px;
  border:1px solid var(--line);
  padding:24px 28px;
}
.woocommerce-wrap .cart_totals h2{
  font-family:'Big Shoulders Display', sans-serif;
  font-size:22px;
  margin-bottom:16px;
}
.woocommerce-wrap .cart_totals table{
  width:100%;
}
.woocommerce-wrap .cart_totals table th,
.woocommerce-wrap .cart_totals table td{
  border-bottom:1px solid var(--line);
  padding:10px 0;
  font-size:14.5px;
}
.woocommerce-wrap .cart_totals .order-total .woocommerce-Price-amount{
  font-weight:700;
  color:var(--copper-dark);
  font-size:19px;
}
.woocommerce-wrap .wc-proceed-to-checkout{
  margin-top:18px;
}
.woocommerce-wrap .wc-proceed-to-checkout .button{
  width:100%;
  text-align:center;
}

/* ---------- afrekenen ---------- */
.woocommerce-wrap #customer_details,
.woocommerce-wrap #order_review{
  border:1px solid var(--line);
  padding:28px 32px;
  margin-bottom:24px;
}
.woocommerce-wrap .woocommerce-billing-fields h3,
.woocommerce-wrap #order_review_heading{
  font-family:'Big Shoulders Display', sans-serif;
  font-size:22px;
  margin-bottom:18px;
}
.woocommerce-wrap .form-row{
  margin-bottom:16px;
}
.woocommerce-wrap .woocommerce-checkout-payment{
  background:var(--paper-alt);
  border:1px solid var(--line);
  padding:20px;
}
.woocommerce-wrap .woocommerce-checkout-payment ul.payment_methods{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}
.woocommerce-wrap .woocommerce-checkout-payment li{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

/* ---------- mijn account ---------- */
.woocommerce-wrap .woocommerce-MyAccount-navigation ul{
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid var(--line);
}
.woocommerce-wrap .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--line);
}
.woocommerce-wrap .woocommerce-MyAccount-navigation li:last-child{
  border-bottom:none;
}
.woocommerce-wrap .woocommerce-MyAccount-navigation li a{
  display:block;
  padding:12px 16px;
  color:var(--steel);
  font-weight:600;
  font-size:14.5px;
}
.woocommerce-wrap .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--copper-dark);
  background:var(--paper-alt);
}
.woocommerce-wrap .woocommerce-MyAccount-content{
  margin-top:24px;
}
.woocommerce-account .woocommerce-wrap div.woocommerce{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;
  align-items:start;
}

/* ---------- paginering ---------- */
.woocommerce-wrap nav.woocommerce-pagination ul{
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
  margin:32px 0 0;
}
.woocommerce-wrap nav.woocommerce-pagination a,
.woocommerce-wrap nav.woocommerce-pagination span{
  display:inline-block;
  padding:8px 14px;
  border:1px solid var(--line);
  color:var(--steel);
  font-size:14px;
}
.woocommerce-wrap nav.woocommerce-pagination .current{
  background:var(--copper);
  border-color:var(--copper);
  color:var(--white);
}

/* ---------- responsief ---------- */
@media (max-width: 900px){
  .woocommerce-wrap ul.products{
    grid-template-columns:repeat(2, 1fr);
  }
  .woocommerce-wrap div.product{
    grid-template-columns:1fr;
  }
  .woocommerce-wrap div.product > .woocommerce-product-gallery,
  .woocommerce-wrap div.product > .summary{
    grid-column:1;
    grid-row:auto;
  }
  .woocommerce-account .woocommerce-wrap div.woocommerce{
    grid-template-columns:1fr;
  }
}
@media (max-width: 560px){
  .woocommerce-wrap ul.products{
    grid-template-columns:1fr;
  }
  .woocommerce-wrap .woocommerce-tabs ul.tabs{
    flex-wrap:wrap;
    gap:16px;
  }
}

/* ---------- categoriefilter-overlay ---------- */
.filter-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}
.filter-overlay.open{
  display:block;
}
.filter-overlay-achtergrond{
  position:absolute;
  inset:0;
  background:rgba(27,31,36,0.55);
}
.filter-overlay-paneel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:420px;
  background:var(--paper);
  box-shadow:-8px 0 24px rgba(27,31,36,0.18);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s ease;
}
.filter-overlay.open .filter-overlay-paneel{
  transform:translateX(0);
}
.filter-overlay-kop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  border-bottom:2px solid var(--copper);
  flex-shrink:0;
}
.filter-overlay-kop h2{
  font-family:'Big Shoulders Display', sans-serif;
  font-size:22px;
  color:var(--graphite);
}
.filter-overlay-sluiten{
  background:none;
  border:none;
  font-size:26px;
  line-height:1;
  color:var(--text-muted);
  cursor:pointer;
  padding:4px 8px;
}
.filter-overlay-sluiten:hover{
  color:var(--graphite);
}
.filter-overlay-form{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.filter-overlay-lijst{
  flex:1;
  overflow-y:auto;
  padding:8px 24px;
}
.filter-groep{
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.filter-groep-kop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.filter-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  color:var(--graphite);
  cursor:pointer;
}
.filter-checkbox--sub{
  font-weight:400;
  font-size:14px;
  color:var(--steel);
}
.filter-checkbox input[type="checkbox"]{
  width:17px;
  height:17px;
  accent-color:var(--copper);
  flex-shrink:0;
}
.filter-groep-toggle{
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text-muted);
  padding:4px;
  display:flex;
  transition:transform .2s ease;
  flex-shrink:0;
}
.filter-groep-toggle[aria-expanded="true"]{
  transform:rotate(180deg);
  color:var(--copper-dark);
}
.filter-subgroep{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 0 4px 27px;
}
.filter-groep:not(.open) .filter-subgroep{
  display:none;
}
.filter-overlay-acties{
  display:flex;
  gap:12px;
  padding:20px 24px;
  border-top:1px solid var(--line);
  flex-shrink:0;
}
.filter-overlay-acties .btn,
.filter-overlay-acties .btn-outline{
  flex:1;
  text-align:center;
  padding:12px 16px;
}

@media (max-width: 480px){
  .filter-overlay-paneel{
    max-width:100%;
  }
}