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

/* ================================
   WooVR – Variaties (strak + gelijke hoogte)
   ================================ */

/* Wrapper */
.woovr-variations.woovr-variations-default{
  display:flex; flex-direction:column; gap:0;
  border:none; overflow:visible; background:#fff;
  margin-bottom:20px; position:relative;
}

/* Rij */
.woovr-variation{
  position:relative; display:flex; align-items:center;
  padding:14px 16px 14px 56px;
  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; }

/* Klikbaar + focus */
.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; }

/* ================================
   Layout: 2-rijen grid (vaste tweede rij)
   ================================ */
.woovr-variation-info{
  display:grid !important;
  grid-template-columns: 1fr auto;   /* links content, rechts prijs */
  grid-template-rows: auto 18px;      /* tweede rij altijd ~1 regel */
  column-gap:16px;
  align-items:center;
}

/* Naam links */
.woovr-variation-name{
  grid-column:1; grid-row:1;          /* bovenste rij */
  display:flex; flex-direction:column; gap:2px;
  align-self:center;                   /* standaard: centreer verticaal over 2 rijen */
}
.woovr-variation:has(.stock.low-stock) .woovr-variation-name,
.woovr-variation:has(.stock.out-of-stock) .woovr-variation-name{
  align-self:start;                    /* als er tekst onder komt: label naar boven */
}
.woovr-variation-name label{
  font-weight:700; font-size:18px; color:#1e1e1e; margin:0; line-height:1.2;
}

/* GEEN extra subregel via ::after meer; we gebruiken altijd de availability-rij */
.woovr-variation-name::after{ content:none; }

/* Availability-plaats (altijd aanwezig op rij 2 voor gelijke hoogte) */
.woovr-variation-availability{
  grid-column:1; grid-row:2;
  display:block !important;           /* altijd renderen voor vaste hoogte */
  min-height:18px;                    /* exact de hoogte van rij 2 */
  margin:2px 0 0 0; padding:0; border:0;
}

/* Teksten binnen availability altijd op één regel houden (hoogte fix) */
.woovr-variation-availability p.stock{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin:0;
  font-size:14px; line-height:18px;   /* match grid-rij hoogte */
  font-weight:600;
  color:#6d717a;                      /* grijs als basis */
  display:none;                       /* standaard niets tonen */
}

/* Low stock: toon gele bol + grijze tekst */
.woovr-variation-availability p.stock.low-stock{
  display:inline-flex; align-items:center; gap:8px;
}
.woovr-variation-availability p.stock.low-stock::before{
  content:""; width:10px; height:10px; border-radius:50%;
  display:inline-block; background:#F4A100;   /* geel bolletje */
}

/* Uitverkocht: grijze tekst, geen bolletje */
.woovr-variation-availability p.stock.out-of-stock{
  display:block;
}
.woovr-variation-availability p.stock.out-of-stock::before{
  content:none;
}

/* Op voorraad: niets tonen */
.woovr-variation-availability p.stock.in-stock{
  display:none !important;
}

/* Prijs rechts, gecentreerd over beide rijen */
.woovr-variation-price{
  grid-column:2; grid-row:1 / span 2;
  align-self:center; text-align:right;
  display:flex; align-items:baseline; gap:8px;
  white-space:nowrap; font-variant-numeric: tabular-nums;
}
.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; }
.woovr-variation-price bdi{ display:inline-flex; }

/* Waitlist rommel weg (voorkomt verborgen hoogte) */
.woovr-variation-availability .ckwtl-button2,
.woovr-variation-availability #commercekit-waitlist-popup,
.woovr-variation-availability .commercekit-waitlist,
.woovr-variation-availability .commercekit-waitlist-head{
  display:none !important;
}

/* ================================
   Badge 50ML (ongewijzigd)
   ================================ */
.woovr-variation[data-attrs*="50ml"]{ background:#f5f6f7; z-index:1; }
.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;
}

/* WooCommerce stock-lijntje/padding overal weg */
.product p.stock{
  clear:none !important; margin:0 !important; padding:0 !important; border:0 !important;
  font-size:14px !important; position:static !important;
}

/* ================================
   Mobile
   ================================ */
@media (max-width:768px){
  .woovr-variation{ padding:18px 14px 18px 56px; }
  .woovr-variation-name label{ font-size:15px; }
  .woovr-variation-availability p.stock{ font-size:12px; line-height:18px; }
  .woovr-variation-price{
    flex-direction:column; align-items:flex-end; gap:2px; white-space:normal;
  }
  .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; }
  .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;
  }
}