/* ==========================================================================
   Nokli — woo.css
   WooCommerce brengt zijn eigen stylesheet mee voor winkelwagen, afrekenen en
   Mijn account. Dit bestand trekt die onderdelen in de Nokli-vorm, zonder de
   werking ervan aan te raken. Alles wat we zelf tekenen staat in theme.css.
   ========================================================================== */

/* --- 1. Knoppen ---------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-size:.92rem;font-weight:600;letter-spacing:.02em;
  line-height:1;min-height:3rem;padding:.95rem 1.6rem;border-radius:var(--r);
  background:var(--c-accent);border:1px solid var(--c-accent);color:#fff;
  text-transform:none;text-shadow:none;box-shadow:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:var(--c-accent-d);border-color:var(--c-accent-d);color:#fff;transform:translateY(-1px);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled{opacity:.45;transform:none}

/* De knop "winkelwagen bijwerken" is secundair — die mag rustiger. */
.woocommerce button[name="update_cart"]{
  background:transparent;border-color:var(--c-line);color:var(--c-ink);
}
.woocommerce button[name="update_cart"]:hover{background:transparent;border-color:var(--c-ink);color:var(--c-ink)}

/* --- 2. Formuliervelden -------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;min-height:3rem;padding:.8rem 1rem;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r);color:var(--c-ink);
  font-family:var(--f-body);transition:border-color .2s var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--c-ink);outline:none}
.woocommerce form .form-row label{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);
  margin-bottom:.4rem;display:inline-block;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
  line-height:1.4;padding:0;color:var(--c-ink);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%)}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{
  border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface);
}

/* --- 3. Tabellen (winkelwagen, bestellingen) ----------------------------- */
.woocommerce table.shop_table{
  border:1px solid var(--c-line);border-radius:var(--r-lg);border-collapse:separate;
  background:var(--c-surface);font-size:.95rem;
}
.woocommerce table.shop_table th{
  font-family:var(--f-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted);font-weight:600;padding:1rem;
}
.woocommerce table.shop_table td{padding:1.1rem 1rem;border-top:1px solid var(--c-line)}
.woocommerce table.shop_table .product-name a{font-family:var(--f-head);font-size:1.05rem}
.woocommerce table.shop_table img{width:64px;border-radius:6px}
.woocommerce-cart table.cart td.actions .coupon .input-text{width:12rem;display:inline-block;margin-right:.5rem}
.woocommerce .cart_totals table.shop_table{background:var(--c-surface-2)}

/* De kleur en de wens onder de productnaam — dezelfde stijl als in de lade. */
.woocommerce .variation,
.woocommerce dl.variation{font-size:.82rem;color:var(--c-muted);margin-top:.35rem}
.woocommerce dl.variation dt,
.woocommerce dl.variation dd{display:inline;margin:0;font-weight:400}
.woocommerce dl.variation dd p{display:inline;margin:0}
.woocommerce dl.variation dt{margin-right:.25rem}
.woocommerce dl.variation dd{margin-right:.75rem}
.cart-chip{display:inline-flex;align-items:center;gap:.4rem}
.cart-chip__dot{width:.85em;height:.85em;border-radius:50%;border:1px solid rgba(28,26,23,.15);display:inline-block}

/* --- 4. Meldingen -------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius:var(--r);border:1px solid var(--c-line);border-top-width:1px;
  background:var(--c-surface);color:var(--c-ink);font-size:.92rem;padding:1rem 1.25rem;
  list-style:none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{display:none}
.woocommerce-message{background:rgba(46,107,82,.08);border-color:rgba(46,107,82,.3)}
.woocommerce-error{background:rgba(178,58,42,.07);border-color:rgba(178,58,42,.3)}
.woocommerce-message .button,
.woocommerce-info .button{float:none;margin-left:1rem}

/* --- 5. Afrekenen -------------------------------------------------------- */
.woocommerce-checkout #payment{background:var(--c-surface-2);border-radius:var(--r-lg)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--c-line)}
.woocommerce-checkout #payment div.payment_box{background:var(--c-surface);border-radius:var(--r)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--c-surface)}
.woocommerce-checkout h3,
.woocommerce-checkout h2{font-family:var(--f-head);font-weight:var(--fw-head)}
.woocommerce .woocommerce-customer-details address{border:1px solid var(--c-line);border-radius:var(--r)}

/* --- 6. Mijn account ----------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;display:grid;gap:.2rem}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:.6rem .8rem;border-radius:var(--r);font-size:.95rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--c-surface-2);color:var(--c-ink)}

/* --- 7. Overzichtspagina ------------------------------------------------- */
/* De sorteerkeuze zit in onze eigen werkbalk en moet daar niet zweven. */
.woocommerce .woocommerce-ordering{margin:0}
.woocommerce .woocommerce-ordering select{
  min-height:2.6rem;padding:.4rem 2rem .4rem 1rem;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r);font-family:var(--f-body);font-size:.9rem;
}
.woocommerce nav.woocommerce-pagination{margin-top:clamp(2.5rem,5vw,4rem)}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;justify-content:center;gap:.4rem}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--r);
  font-size:.9rem;padding:0;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--c-ink);color:var(--c-bg)}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--c-surface-2);color:var(--c-ink)}

/* --- 8. Voorraadmelding op de productpagina ------------------------------ */
.woocommerce div.product p.stock{font-size:.85rem;color:var(--c-muted);margin-top:1.25rem}
.woocommerce div.product .out-of-stock{color:#B23A2A}

/* --- 9. Prijzen ---------------------------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:inherit;font-size:inherit}
.woocommerce del{opacity:.55;font-size:.9em}
.woocommerce ins{text-decoration:none;font-weight:600}

/* --- 10. Wat we zelf tekenen ---------------------------------------------- */
/* De kaarten, de galerij en het bestelformulier komen uit theme.css; de
   standaardregels van WooCommerce mogen daar niet overheen. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{width:auto;margin:0;float:none}
.woocommerce .woocommerce-result-count{display:none}
.woo-page{max-width:var(--wrap)}

/* --- 11. De blokwinkelwagen en het blokafrekenen -------------------------- */
/* WooCommerce levert winkelwagen en afrekenen tegenwoordig als blokken met een
   eigen opmaak. Alleen de knoppen en de regelgegevens hoeven bijgetrokken. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link){
  background:var(--c-accent);border:1px solid var(--c-accent);color:#fff;
  border-radius:var(--r);font-family:var(--f-body);font-weight:600;min-height:3rem;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover{
  background:var(--c-accent-d);border-color:var(--c-accent-d);color:#fff;
}
.wc-block-components-product-metadata{font-size:.82rem;color:var(--c-muted)}
.wc-block-components-product-name{font-family:var(--f-head);font-size:1.05rem}
.wc-block-components-totals-item__label{font-family:var(--f-body)}
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar{background:var(--c-surface-2);border-radius:var(--r-lg)}

/* --- 12. Beoordelingen ---------------------------------------------------- */
/* WooCommerce levert de lijst en het formulier als gewone reacties. Hier alleen
   de opmaak bijtrekken; de sterren zelf blijven die van WooCommerce, want die
   hangen aan een lettertype dat de plugin meelevert. */
#reviews .woocommerce-noreviews{color:var(--c-muted)}
#reviews ol.commentlist{list-style:none;margin:0;padding:0}
#reviews ol.commentlist li.review{padding:1.1rem 0;border-bottom:1px solid var(--c-line)}
#reviews ol.commentlist li.review:last-child{border-bottom:0}
#reviews .comment_container{display:flex;gap:.9rem;align-items:flex-start}
#reviews img.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
#reviews .comment-text{flex:1;min-width:0}
#reviews p.meta{font-size:.85rem;color:var(--c-muted);margin:.2rem 0 .5rem}
#reviews .woocommerce-review__author{font-weight:600;color:var(--c-ink)}
/* Het label dat WooCommerce zet als het e-mailadres bij een bestelling hoort.
   Dat is het enige echte bewijs dat er ook gekocht is, dus dat mag opvallen. */
#reviews .woocommerce-review__verified{
  display:inline-block;margin-left:.35rem;padding:.1rem .45rem;border-radius:999px;
  background:var(--c-surface-2);color:var(--c-accent);
  font-size:.7rem;font-weight:600;letter-spacing:.04em;
}
#reviews .description>*+*{margin-top:.6em}

#review_form_wrapper{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--c-line)}
#reviews #reply-title{font-family:var(--f-head);font-size:1.15rem;display:block;margin-bottom:.3rem}
#reviews .comment-notes,#reviews .comment-form-cookies-consent{font-size:.85rem;color:var(--c-muted)}
#reviews .comment-form-rating label{display:block;margin-bottom:.2rem}
#reviews .comment-form label{font-size:.85rem;color:var(--c-muted)}
#reviews .comment-form p{margin-top:.9rem}
#reviews .comment-form input[type=text],
#reviews .comment-form input[type=email],
#reviews .comment-form textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--c-line);border-radius:var(--r);
  background:var(--c-bg);color:var(--c-ink);font:inherit;
}
#reviews .comment-form .form-submit input.submit{
  background:var(--c-accent);border:1px solid var(--c-accent);color:#fff;
  border-radius:var(--r);font-family:var(--f-body);font-weight:600;
  padding:.75rem 1.4rem;min-height:3rem;cursor:pointer;
}
#reviews .comment-form .form-submit input.submit:hover{background:var(--c-accent-d);border-color:var(--c-accent-d)}
/* Het uitklapblok heet al "Wat klanten zeggen"; de kop die WooCommerce er zelf
   boven zet ("Beoordelingen", of "1 beoordeling voor …") is dan dubbelop. */
#reviews #comments>h2{display:none}