/*
 Theme Name:   Shoptimizer Child
 Template:     shoptimizer
 Version:      1.0
 Author:       CommerceGurus
 Description:  Custom lightweight Richway child theme
*/


/*fixt dat het menu een scroll krijgt*/

/* Alleen layered-nav widgets (ongeacht het ID) */
.widget.woocommerce.widget_layered_nav {
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px 0 6px;
  border-radius: 8px;
  background: #fff; /* of inherit */
}

/* Titel */
.widget.woocommerce.widget_layered_nav .widget-title {
  padding: 6px 12px;
}

/* Scroll alleen in de lijst */
.widget.woocommerce.widget_layered_nav .woocommerce-widget-layered-nav-list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.25) transparent;
}
.widget.woocommerce.widget_layered_nav 
.woocommerce-widget-layered-nav-list::-webkit-scrollbar { width: 8px; }
.widget.woocommerce.widget_layered_nav 
.woocommerce-widget-layered-nav-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2); border-radius: 6px;
}

/* Items */
.widget.woocommerce.widget_layered_nav 
.woocommerce-widget-layered-nav-list__item{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:8px; padding:6px 12px;
  border-bottom:1px dashed rgba(0,0,0,.06);
}
.widget.woocommerce.widget_layered_nav 
.woocommerce-widget-layered-nav-list__item:last-child{ border-bottom:none; }
.widget.woocommerce.widget_layered_nav 
.woocommerce-widget-layered-nav-list__item a{
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Mobiel iets lager */
@media (max-width: 767px){
  .widget.woocommerce.widget_layered_nav .woocommerce-widget-layered-nav-list{ max-height:220px; }
}





/* ================================
   WooVR – Radio variaties (clean)
   ================================ */

/* Wrapper (geen eigen borders; badge mag buiten vallen) */
.woovr-variations.woovr-variations-default{
  display:flex;
  flex-direction:column;
  gap:0;
  border:none;
  overflow:visible;
  background:#fff;
  margin-bottom:20px;
  position:relative;
}

/* Rij-opmaak + separators */
.woovr-variation{
  position:relative;
  display:flex;
  align-items:center;
  padding:15px 16px 15px 56px; /* ruimte voor custom radio */
  background:#fff;
  transition:background .2s ease;
  border-left:1px solid #d4d8dd;
  border-right:1px solid #d4d8dd;
  border-top:1px solid #d4d8dd;
}
.woovr-variation:first-child{ border-top:1px solid #d4d8dd; }
.woovr-variation:last-child{  border-bottom:1px solid #d4d8dd; }
.woovr-variation:hover{ background:#fafbfc; }
.woovr-variation:active{ background:#f1f2f3; }

/* Hele rij klikbaar + focus ring */
.woovr-variation-selector{ position:absolute; inset:0; }
.woovr-variation-selector input[type="radio"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.woovr-variation:focus-within{ outline:2px solid #1e1e1e22; outline-offset:2px; }

/* Custom radio links */
.woovr-variation::before{
  content:"";
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px;
  border:2px solid #000; border-radius:50%;
  background:#fff;
}
.woovr-variation:has(input:checked)::before{ background:#000; }

/* Inhoud twee kolommen */
.woovr-variation-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  gap:16px;
  min-width:0; /* laat kinderen krimpen i.p.v. overlopen */
}
.woovr-variation-name{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.woovr-variation-name label{
  font-weight:700; font-size:18px; color:#1e1e1e; margin:0; line-height:1.2;
}

/* Subtitel onder de naam */
.woovr-variation-name::after{
  content:"Nu besteld, morgen in huis!";
  font-size:14px; color:#6d717a; line-height:1.2;
}

/* Plugin-availability verbergen */
.woovr-variation-availability{ display:none !important; }

/* Out-of-stock toestand */
.woovr-variation:has(.stock.out-of-stock) .woovr-variation-name::after{ content:"Uitverkocht"; }
.woovr-variation:has(.stock.out-of-stock){ opacity:.6; cursor:not-allowed; }

/* =========================
   Prijs (desktop & mobiel)
   ========================= */

/* Desktop: naast elkaar, netjes uitgelijnd */
.woovr-variation-price{
  margin-left:auto;
  text-align:right;
  display:flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;              /* desktop: op één regel ok */
  font-variant-numeric: tabular-nums;
  flex:0 1 auto;                   /* mag krimpen als nodig */
}
.woovr-variation-price .amount{
  font-size:20px; font-weight:700; color:#1e1e1e; line-height:1.1;
}
.woovr-variation-price del{
  opacity:.55;
}
.woovr-variation-price del .amount{
  font-weight:600;
	font-size:14px; 
}
.woovr-variation-price ins{
  text-decoration:none;            /* visueel schoon; del heeft de streep */
}
/* Zorg dat € en bedrag samen blijven */
.woovr-variation-price bdi{
  display:inline-flex;
}
/* Screenreader-tekstjes echt verbergen (soms laat een thema ze zien) */
.woovr-variation-price .screen-reader-text{
  position:absolute!important; width:1px!important; height:1px!important;
  overflow:hidden!important; clip:rect(1px,1px,1px,1px)!important; white-space:nowrap!important;
}

/* ==============================
   Beste Keus badge (50ML)
   ============================== */
.woovr-variation[data-attrs*="50ml"]{
  background:#f5f6f7;
  z-index:1; /* boven randen van buren */
}
.woovr-variation[data-attrs*="50ml"]::after{
  content:"Beste Keus";
  position:absolute;
  left:-33px; top:0;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 7px;
  font-size:12px; font-weight:600; color:#fff;
  background:#4A6D1F;
  border-radius:0 6px 6px 0;
  writing-mode:vertical-lr; transform:rotate(180deg);
  pointer-events:none;
  z-index:2;
}

/* ===============
   Mobile tweaks
   =============== */
@media (max-width:768px){

  .woovr-variation-name label{ font-size:15px; }
  .woovr-variation-name::after{ font-size:12px; }

  /* Belangrijk: GEEN vaste width voor de prijs */
  .woovr-variation-price{
    width:auto;
    white-space:normal;        /* mag afbreken */
    flex-direction:column;     /* oud boven nieuw */
    align-items:flex-end;
    gap:2px;
  }
  .woovr-variation-price ins .amount{
    font-size:18px;
    font-weight:800;
    line-height:1.1;
  }
  .woovr-variation-price del .amount{
    font-size:13px;
    font-weight:600;
    line-height:1;
  }

  /* Badge horizontaal onder de linkerrand */
  .woovr-variation[data-attrs*="50ml"]::after{
    left:0;
    writing-mode:horizontal-tb;
    transform:none;
    padding:3px 10px;
    height:auto;
    border-radius:0 0 6px 6px;
    font-size:9px !important;
    margin-left:5px !important;
  }
}





/* Fix Discovery Set */
/* CSS specifiek voor productpagina's met ID 22540, 27332, 27395, 27393 */
body.product-template-default.single.single-product.postid-22540 .wooco_component_product_selection_list,
body.product-template-default.single.single-product.postid-27332 .wooco_component_product_selection_list,
body.product-template-default.single.single-product.postid-27395 .wooco_component_product_selection_list,
body.product-template-default.single.single-product.postid-29617 .wooco_component_product_selection_list,
body.product-template-default.single.single-product.postid-29618 .wooco_component_product_selection_list,
body.product-template-default.single.single-product.postid-27393 .wooco_component_product_selection_list {
    max-height: 350px;
    overflow-y: auto;  
}

/* Achtergrondkleur voor alert-max en alert-min */
.postid-29617 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-max,
.postid-29618 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-max,
.postid-22540 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-max,
.postid-27332 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-max,
.postid-27395 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-max,
.postid-27393 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-max,
.postid-22540 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-min,
.postid-27332 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-min,
.postid-27395 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-min,
.postid-27393 .wooco_alert.wooco-alert.wooco-text.alert-active.alert-min {
    background-color: #fff1f1;
    color: black;
    border-left: 4px solid #ff4545;
}

/* Verberg knoppen met de klasse 'minus' en 'plus' alleen binnen de specifieke structuur */
.postid-22540 .wooco_component_product_selection_list .minus,
.postid-27332 .wooco_component_product_selection_list .minus,
.postid-27395 .wooco_component_product_selection_list .minus,
.postid-27393 .wooco_component_product_selection_list .minus,
.postid-22540 .wooco_component_product_selection_list .plus,
.postid-27332 .wooco_component_product_selection_list .plus,
.postid-29617 .wooco_component_product_selection_list .plus,
.postid-29618 .wooco_component_product_selection_list .plus,
.postid-27395 .wooco_component_product_selection_list .plus,
.postid-27393 .wooco_component_product_selection_list .plus {
    display: none !important;
}

/* Verberg de hoeveelheid label alleen binnen de specifieke structuur */
.postid-29617 .wooco_component_product_selection_list .wooco-qty-label,
.postid-29618 .wooco_component_product_selection_list .wooco-qty-label,
.postid-22540 .wooco_component_product_selection_list .wooco-qty-label,
.postid-27332 .wooco_component_product_selection_list .wooco-qty-label,
.postid-27395 .wooco_component_product_selection_list .wooco-qty-label,
.postid-27393 .wooco_component_product_selection_list .wooco-qty-label {
    display: none !important;
}
/* END */