/* ==========================================================================
   WooCommerce in de huisstijl van Wijnvanjewelste.

   De standaard-stylesheets van WooCommerce zijn uitgeschakeld (zie
   inc/enqueue.php), dus alles wat de plugin zelf uitschrijft, krijgt hier zijn
   opmaak: meldingen, de checkoutvelden, de betaalmethodes, mijn account en de
   beoordelingen. De rest van de winkel staat in theme.css, want dat zijn onze
   eigen sjablonen.
   ========================================================================== */

/* -------------------------------------------------------------- Meldingen */

.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  list-style:none;margin:0 0 22px;padding:16px 20px;border-radius:var(--radius);
  font-size:14.5px;line-height:1.6;background:var(--cream);color:var(--ink);
  border-left:3px solid var(--wine)
}
.woocommerce-message{background:var(--green-soft);border-left-color:var(--green);color:#2f5b30}
.woocommerce-error{background:var(--wine-soft);border-left-color:var(--wine);color:var(--wine-dark)}
.woocommerce-error li+li{margin-top:6px}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{color:inherit;text-decoration:underline;font-weight:600}
.woocommerce-message .button,.woocommerce-info .button{display:none} /* De eigen knoppen staan al in de drawer. */

/* --------------------------------------------------------- Formuliervelden */

.woocommerce form .form-row{display:block;margin-bottom:16px}
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label{
  display:block;font-size:13.5px;color:#5b5c61;margin-bottom:6px
}
.woocommerce form .form-row label .required{color:var(--wine);text-decoration:none;border:0}
.woocommerce form .form-row .optional{color:#8a8b90}

/* Let op de :not(): het aantalvakje hoort hier niet bij. Zonder die uitzondering
   wint deze regel (0,2,1) van ".qty input" (0,1,1) en wordt het smalle vakje van
   44 pixels ineens 217 pixels breed, met de min en de plus ver uit elkaar. */
.woocommerce input[type=text]:not(.wvj-qty-input):not(.qty),
.woocommerce input[type=email],.woocommerce input[type=tel],
.woocommerce input[type=password],
.woocommerce input[type=number]:not(.wvj-qty-input):not(.qty),
.woocommerce input[type=search],
.woocommerce textarea,.woocommerce select,
.select2-container .select2-selection--single{
  width:100%;background:#fff;border:1px solid var(--sand);border-radius:var(--radius);
  padding:12px 14px;font-family:var(--font-body);font-size:15px;color:var(--ink);
  line-height:1.4;height:auto
}
.woocommerce textarea{min-height:120px;resize:vertical}
.woocommerce input:focus,.woocommerce textarea:focus,.woocommerce select:focus{
  outline:0;border-color:var(--wine);box-shadow:0 0 0 2px rgba(155,24,45,.12)
}
.woocommerce .form-row.woocommerce-invalid input{border-color:var(--wine)}
.woocommerce .form-row.woocommerce-validated input{border-color:var(--green)}

/* Twee velden naast elkaar waar WooCommerce dat bedoelt. */
@media(min-width:620px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{float:left;width:48.5%}
  .woocommerce form .form-row-last{float:right}
  .woocommerce form .form-row-wide{clear:both}
  .woocommerce form .clear{clear:both}
}

/* Select2 (het land- en provincieveld) in dezelfde stijl. */
.select2-container--default .select2-selection--single{display:flex;align-items:center}
.select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;color:var(--ink);line-height:1.4}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:10px}
.select2-dropdown{border-color:var(--sand);border-radius:var(--radius);overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--wine)}

/* --------------------------------------------------------------- Knoppen */

.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wine);color:#fff;border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:400;font-size:15px;
  padding:13px 30px;border-radius:var(--btn-radius);transition:.2s;line-height:1
}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover{
  background:var(--wine-dark);color:#fff;transform:translateY(-1px)
}
.woocommerce .button.alt,.woocommerce button.button.alt{background:var(--wine)}
.woocommerce #place_order{width:100%;background:var(--gold);font-size:16px;padding:15px 30px}
.woocommerce #place_order:hover{background:var(--gold-hover)}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ----------------------------------------------------- Checkout-overzicht */

.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin-bottom:18px}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  text-align:left;padding:11px 0;border-bottom:1px solid var(--sand);
  font-size:14.5px;font-weight:400;color:#5b5c61
}
.woocommerce-checkout-review-order-table td{text-align:right;color:var(--title);white-space:nowrap}
.woocommerce-checkout-review-order-table th{width:auto;padding-right:14px}
/* De wijnnaam is de enige cel die mag afbreken; bedragen en labels blijven op één
   regel, anders wordt het overzicht een puzzel. */
.woocommerce-checkout-review-order-table .product-name{color:var(--title);white-space:normal;line-height:1.45}
.woocommerce-checkout-review-order-table .product-quantity{color:#8a8b90;white-space:nowrap}
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table tr.shipping th{white-space:nowrap;vertical-align:top}
.woocommerce-checkout-review-order-table tr.shipping td{white-space:normal}
.woocommerce-checkout-review-order-table thead{display:none} /* "Product / Subtotaal" zegt niets extra. */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  font-family:var(--font-head);font-weight:700;color:var(--title);font-size:17px;border-bottom:0;padding-top:14px
}
.woocommerce-checkout-review-order-table .includes_tax{display:block;font-size:12px;color:#8a8b90;font-family:var(--font-body);font-weight:300}

/* De verzendkeuze: één rij per methode, met de radioknop netjes ervoor. */
.woocommerce-shipping-methods{list-style:none;margin:0;padding:0}
.woocommerce-shipping-methods li{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.woocommerce-shipping-methods li:last-child{margin-bottom:0}
.woocommerce-shipping-methods input[type=radio]{width:auto;accent-color:var(--wine);margin:0}
.woocommerce-shipping-methods label{margin:0;font-size:14.5px;color:var(--title);cursor:pointer}
.woocommerce-shipping-destination{font-size:13px;color:#8a8b90;margin-top:8px}

/* ------------------------------------------------------- Betaalmethodes */

.woocommerce-checkout-payment{margin-top:18px}
.wc_payment_methods{list-style:none;margin:0 0 18px;padding:0}
.wc_payment_method{border:1.5px solid var(--sand);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;transition:.2s}
.wc_payment_method:hover{border-color:var(--wine)}
/* Het keuzerondje hoort op dezelfde regel als de naam en het logo. WooCommerce
   zet het rondje vóór het label als los element, dus het label moet de ruimte
   ernaast opvullen in plaats van eronder te beginnen. */
.wc_payment_method{display:flex;flex-wrap:wrap;align-items:center;padding:0 16px}
.wc_payment_method>input[type=radio]{flex:0 0 auto;width:auto;margin:0 10px 0 0;accent-color:var(--wine)}
.wc_payment_method>label{flex:1;display:flex!important;align-items:center;gap:12px;padding:15px 0;margin:0;cursor:pointer;font-size:15px;color:var(--title)}
.wc_payment_method>label img{max-height:26px;width:auto;margin-left:auto;flex:0 0 auto}
.wc_payment_method .payment_box{flex:0 0 100%;margin:0 -16px;border-top:1px solid var(--sand)}
.wc_payment_method input[type=radio]:checked+label{color:var(--wine)}
.payment_box{background:var(--cream);padding:14px 16px;font-size:14px;color:#5b5c61;margin:0}
.payment_box p{margin:0}
.woocommerce-privacy-policy-text{font-size:12.5px;color:#8a8b90;margin-bottom:14px}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}
.woocommerce-terms-and-conditions-wrapper .form-row{margin-bottom:0}
.woocommerce-form__label-for-checkbox{display:flex!important;gap:10px;align-items:flex-start;font-size:14px;color:#5b5c61}
.woocommerce-form__label-for-checkbox input{width:auto;margin-top:3px;accent-color:var(--wine);flex:0 0 auto}
/* Het sterretje voor "verplicht" zweefde los rechts van de regel. */
.woocommerce-terms-and-conditions-wrapper .required{margin-left:2px}
.woocommerce-terms-and-conditions-wrapper abbr.required{border:0;text-decoration:none}

/* Inklapbaar: "Heb je een kortingscode?" en "Al een account?" */
.woocommerce-form-coupon-toggle,.woocommerce-form-login-toggle{margin-bottom:18px}
.woocommerce-form-coupon,.woocommerce-form-login{
  background:var(--cream);border-radius:var(--radius);padding:20px 22px;margin-bottom:22px
}
.woocommerce-form-coupon p:first-child,.woocommerce-form-login p:first-child{margin-bottom:14px;font-size:14.5px;color:#5b5c61}

/* ---------------------------------------------------------- Mijn account */

.woocommerce-account .woocommerce{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
@media(max-width:860px){.woocommerce-account .woocommerce{grid-template-columns:1fr;gap:24px}}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;background:var(--cream);border-radius:var(--radius);overflow:hidden}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid #fff}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation a{display:block;padding:13px 18px;font-size:14.5px;color:var(--ink);transition:.2s}
.woocommerce-MyAccount-navigation a:hover{background:#fff;color:var(--wine)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--wine);color:#fff}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content p{color:#5b5c61;margin-bottom:14px}

.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:0;border-radius:0;margin-bottom:24px}
.woocommerce table.shop_table th{
  text-align:left;font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:#8a8b90;
  padding:0 14px 10px 0;border-bottom:1px solid var(--sand)
}
.woocommerce table.shop_table td{padding:14px 14px 14px 0;border-bottom:1px solid var(--sand);font-size:14.5px;color:var(--title)}
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions{text-align:right}
.woocommerce .woocommerce-order-details,.woocommerce .woocommerce-customer-details{margin-bottom:30px}
.woocommerce address{font-style:normal;color:#5b5c61;line-height:1.7;border:0;padding:0}

@media(max-width:620px){
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block;border-bottom:1px solid var(--sand);padding:12px 0}
  .woocommerce table.shop_table td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 0}
  .woocommerce table.shop_table td::before{content:attr(data-title);color:#8a8b90;font-size:13.5px}
}

/* ------------------------------------------------------- Beoordelingen */

#reviews{padding-top:4px}
#reviews h2,#reviews h3{font-size:18px;margin-bottom:16px}
.woocommerce #reviews .commentlist{list-style:none;margin:0 0 26px;padding:0}
.woocommerce #reviews .comment{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--sand)}
.woocommerce #reviews .comment:last-child{border-bottom:0;margin-bottom:0}
.woocommerce #reviews .comment_container{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.woocommerce #reviews img.avatar{width:48px;height:48px;border-radius:50%;margin:0;border:0;padding:0}
.woocommerce #reviews .meta{font-size:13.5px;color:#8a8b90;margin-bottom:8px}
.woocommerce #reviews .meta strong{color:var(--title);font-family:var(--font-head);font-size:15px}
.woocommerce #reviews .description p{color:#5b5c61;font-size:14.5px}
.woocommerce .star-rating{color:var(--gold);font-size:14px;letter-spacing:.06em}
.woocommerce p.stars a{color:var(--gold)}
.woocommerce #review_form .comment-form-rating label{margin-bottom:6px}
.woocommerce #respond .comment-reply-title{display:block;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--title);margin-bottom:14px}
.woocommerce #respond .comment-form-cookies-consent label{display:inline;font-size:14px}
.woocommerce #respond .comment-form-cookies-consent input{width:auto;accent-color:var(--wine)}
.woocommerce .woocommerce-verification-required,.woocommerce-noreviews{font-size:14.5px}

/* ------------------------------------------------- Variabele producten */

.woocommerce .variations{width:100%;border-collapse:collapse;margin-bottom:16px}
.woocommerce .variations th,.woocommerce .variations td{text-align:left;padding:8px 0;vertical-align:middle}
.woocommerce .variations th{font-size:13.5px;color:#5b5c61;padding-right:14px;font-weight:400}
.woocommerce .single_variation_wrap{margin-top:14px}
.woocommerce .woocommerce-variation-price{margin-bottom:14px;font-family:var(--font-head);font-weight:700;font-size:24px;color:var(--wine)}
.woocommerce .reset_variations{font-size:13px;color:#8a8b90;text-decoration:underline}
.woocommerce div.product form.cart .quantity{display:inline-flex;margin-right:10px}
.woocommerce div.product form.cart .quantity input{width:70px;text-align:center;border-radius:var(--btn-radius)}

/* --------------------------------------------------- Wachtwoordformulier */

.post-password-form label{display:block;font-size:14px;color:#5b5c61;margin-bottom:8px}
.post-password-form input[type=password]{
  border:1px solid var(--sand);border-radius:var(--radius);padding:12px 14px;
  font-family:var(--font-body);font-size:15px;max-width:280px;width:100%
}
.post-password-form input[type=submit]{
  background:var(--wine);color:#fff;border:0;border-radius:var(--btn-radius);
  padding:13px 30px;font-family:var(--font-body);font-size:15px;cursor:pointer;margin-top:12px
}
.post-password-form input[type=submit]:hover{background:var(--wine-dark)}

/* De blok-loader van WooCommerce (blockUI) mag zichtbaar blijven: dat is de
   enige feedback dat er iets gebeurt. Wel in onze kleur. */
.blockUI.blockOverlay{background:#fff!important;opacity:.6!important}

/* Een <fieldset> heeft in elke browser standaard min-width:min-content. Daardoor
   kan hij niet kleiner worden dan zijn breedste inhoud, en op de afrekenpagina
   duwde een lange wijnnaam het overzicht 56 pixels buiten het scherm. min-width:0
   is de standaardoplossing hiervoor. */
fieldset{min-width:0}
.summary,.wvj-form{min-width:0;max-width:100%}
.woocommerce-checkout-review-order-table{table-layout:fixed;width:100%}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{overflow-wrap:anywhere}
/* WooCommerce zet "(inclusief x btw)" in een <small> met white-space:nowrap.
   Op een telefoon past dat niet naast het bedrag. */
.woocommerce-checkout-review-order-table .includes_tax{display:block;white-space:normal;max-width:100%}