/* =====================================================================
   Torven Cart Content — styling
   Alles is gescopet onder .torven-cart. Kleuren en fonts komen uit je
   eigen CSS-variabelen (var(--gold) etc.); de Torven-waarden staan als
   fallback, dus standalone ziet het er meteen goed uit.
   Wil je zelf volledig stylen? add_filter('torven_cart_enqueue_styles','__return_false');
   ===================================================================== */

.torven-cart{
  /* tokens: gekoppeld aan je Divi 5 globals, met Torven-hex als fallback */
  --tc-bg:        var(--smvp-bg, var(--gcid-dd8d28ubmg, #FFFFFF));
  --tc-tint:      var(--smvp-tint, var(--gcid-z1y5el32g9, #F4F1EB));
  --tc-soft:      var(--smvp-soft, var(--gcid-ula5tq49su, #F7F5F0));
  --tc-ink:       var(--smvp-ink, var(--gcid-bf2ea05c-8b87-4e55-928d-ab53f9fc3137, var(--gcid-heading-color, #1A1A18)));
  --tc-ink-soft:  var(--smvp-ink-soft, var(--gcid-body-color, #46443D));
  --tc-ink-mute:  var(--smvp-ink-mute, var(--gcid-r0e2vgfcmi, #6F6E66));
  --tc-line:      var(--smvp-line, var(--gcid-kyrvjzk247, rgba(26,26,24,.12)));
  --tc-line-2:    var(--smvp-line-2, rgba(26,26,24,.07));
  --tc-gold:      var(--smvp-accent, var(--gcid-primary-color, #BFA468));
  --tc-olive:     var(--smvp-secondary, var(--gcid-secondary-color, #5C5D45));
  --tc-on-dark:   var(--smvp-on-dark, var(--gcid-7y4rtc32k5, #F4F1EB));
  --tc-display:   var(--smvp-display-font, var(--et_global_heading_font, "Science Gothic"), "Arial Narrow", system-ui, sans-serif);
  --tc-body:      var(--smvp-body-font, var(--et_global_body_font, "Barlow"), system-ui, -apple-system, "Segoe UI", sans-serif);
  --tc-pad: 1.5rem;
  --tc-pad-2: 1rem;

  font-family: var(--tc-body);
  color: var(--tc-ink);
  line-height: 1.6;
  transition: opacity .2s ease;
}
.torven-cart *{ box-sizing: border-box; }

/* laadstaat tijdens AJAX */
.torven-cart.is-loading{ opacity: .55; pointer-events: none; }

/* ---------- gratis-verzending balk ---------- */
.torven-cart__shipping{
  padding: var(--tc-pad-2);
  background: var(--tc-tint);
  border-radius: var(--smvp-radius, 4px);
}
.torven-cart__shipping-msg{ font-size: .82rem; color: var(--tc-ink-soft); margin: 0 0 .6rem; }
.torven-cart__shipping-msg .woocommerce-Price-amount{ font-weight: 600; color: var(--tc-ink); }
.torven-cart__shipping-track{ height: 4px; border-radius: var(--smvp-radius, 4px); background: rgba(26,26,24,.1); overflow: hidden; }
.torven-cart__shipping-fill{ display: block; height: 100%; border-radius: var(--smvp-radius, 4px); background: var(--tc-gold); transition: width .5s ease; }

/* ---------- regels ---------- */
.torven-cart__lines{ list-style: none; margin: 0; padding: 0 var(--tc-pad) !important; }
.torven-cart__line{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--tc-line-2);
}
.torven-cart__line:last-child{ border-bottom: 0; }

.torven-cart__line-media{ width: 64px; height: 64px; border-radius: var(--smvp-radius-small, 3px); overflow: hidden; background: var(--tc-soft); }
.torven-cart__line-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.torven-cart__line-info{ min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.torven-cart__line-name{
  font-family: var(--tc-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 1.1;
}
.torven-cart__line-variant{ display: block; font-size: .76rem; color: var(--tc-ink-mute); margin-top: .22rem; }
.torven-cart__line-variant + .torven-cart__line-variant{ margin-top: 0; }

.torven-cart__qty{
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: .6rem;
  border: 1px solid var(--tc-line);
  border-radius: var(--smvp-radius-small, 2px);
}
.torven-cart__qty-btn{
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--tc-ink-soft);
  font-size: 1rem; line-height: 1;
  transition: background .2s, color .2s;
}
.torven-cart__qty-btn:hover{ background: var(--tc-tint); color: var(--tc-ink); }
.torven-cart__qty-value{ min-width: 32px; text-align: center; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.torven-cart__line-right{ display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.torven-cart__line-price{ font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.torven-cart__line-remove{
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tc-ink-mute); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.torven-cart__line-remove:hover{ color: var(--tc-ink); border-bottom-color: var(--tc-ink); }

/* ---------- lege staat ---------- */
.torven-cart__empty{
  padding: calc(var(--tc-pad) * 1.8) var(--tc-pad);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.torven-cart__empty-icon{
  width: 78px; height: 78px; margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--tc-tint); border-radius: 50%;
}
.torven-cart__empty-icon svg{
  width: 34px; height: 34px;
  stroke: var(--tc-ink-mute); fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.torven-cart__empty-title{
  margin: 0; color: var(--tc-ink);
  font-family: var(--tc-display); text-transform: uppercase; font-weight: 400;
  font-size: 1.5rem; letter-spacing: .03em; line-height: 1.05;
}
.torven-cart__empty-text{ font-size: .95rem; color: var(--tc-ink-soft); margin: .7rem 0 1.6rem; }
.torven-cart__empty-link,
.torven-cart__checkout{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--tc-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--tc-ink); color: var(--tc-on-dark);
  border-radius: var(--smvp-radius-small, 2px); transition: background .25s;
}
.torven-cart__empty-link{ padding: 1rem 2rem; }
.torven-cart__empty-guide{
  display: inline-block; margin-top: 1.1rem;
  font-family: var(--tc-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--tc-gold);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: opacity .2s;
}
.torven-cart__empty-guide:hover{ opacity: .7; }
.torven-cart__empty-link:hover,
.torven-cart__checkout:hover{ background: #000; }
.torven-cart__empty-link::after,
.torven-cart__checkout::after{ content: "→"; transition: transform .25s; }
.torven-cart__empty-link:hover::after,
.torven-cart__checkout:hover::after{ transform: translateX(4px); }

/* ---------- footer ---------- */
.torven-cart__footer{ padding: var(--tc-pad); border-top: 1px solid var(--tc-line); background: var(--tc-bg); }
.torven-cart__row{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .85rem; color: var(--tc-ink-soft); padding: .2rem 0;
}
.torven-cart__row span:last-child{ font-variant-numeric: tabular-nums; }
.torven-cart__row--discount span:last-child{ color: var(--tc-olive); }
.torven-cart__shipping-value.is-free{ color: var(--tc-olive); font-weight: 600; }
.torven-cart__row--total{
  font-size: 1.05rem; color: var(--tc-ink); font-weight: 600;
  margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--tc-line);
}
.torven-cart__tax-note{
  font-family: var(--tc-body); font-size: .66rem; font-weight: 500;
  color: var(--tc-ink-mute); letter-spacing: .03em; margin-left: .4rem;
}
.torven-cart__checkout{ width: 100%; margin-top: .95rem; padding: 1.05rem; }

/* ---------- teller in de bar (alleen als je deze class gebruikt) ---------- */
.torven-cart-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--gcid-primary-color, #BFA468);
  color: var(--gcid-bf2ea05c-8b87-4e55-928d-ab53f9fc3137, #1A1A18);
  font-family: var(--et_global_body_font, "Barlow"), sans-serif; font-weight: 600;
  font-size: .62rem; line-height: 1; border-radius: 9px;
}
.torven-cart-count[data-count="0"]{ display: none; }

/* ---------- cross-sells ([torven_cross_sells]) ----------
   Eigen wrapper (.torven-cross), dus eigen token-blok: de shortcode kan los
   van .torven-cart in de Canvas staan. */
.torven-cross{
  --tc-bg:        var(--smvp-bg, var(--gcid-dd8d28ubmg, #FFFFFF));
  --tc-tint:      var(--smvp-tint, var(--gcid-z1y5el32g9, #F4F1EB));
  --tc-soft:      var(--smvp-soft, var(--gcid-ula5tq49su, #F7F5F0));
  --tc-ink:       var(--smvp-ink, var(--gcid-bf2ea05c-8b87-4e55-928d-ab53f9fc3137, var(--gcid-heading-color, #1A1A18)));
  --tc-ink-soft:  var(--smvp-ink-soft, var(--gcid-body-color, #46443D));
  --tc-ink-mute:  var(--smvp-ink-mute, var(--gcid-r0e2vgfcmi, #6F6E66));
  --tc-line:      var(--smvp-line, var(--gcid-kyrvjzk247, rgba(26,26,24,.12)));
  --tc-gold:      var(--smvp-accent, var(--gcid-primary-color, #BFA468));
  --tc-on-dark:   var(--smvp-on-dark, var(--gcid-7y4rtc32k5, #F4F1EB));
  --tc-display:   var(--smvp-display-font, var(--et_global_heading_font, "Science Gothic"), "Arial Narrow", system-ui, sans-serif);
  --tc-body:      var(--smvp-body-font, var(--et_global_body_font, "Barlow"), system-ui, -apple-system, "Segoe UI", sans-serif);
  --tc-pad: 1.5rem;

  font-family: var(--tc-body);
  color: var(--tc-ink);
  padding: 1rem var(--tc-pad) 1.1rem;
  border-top: 1px solid var(--tc-line);
  background: var(--tc-bg);
}
.torven-cross *{ box-sizing: border-box; }
.torven-cross[hidden]{ display: none !important; }

.torven-cross__title{
  margin: 0 0 .6rem;
  text-align: center !important;
  font-family: var(--et_global_heading_font); font-weight: 400;
  font-size: 0.875rem; line-height: 1.1;
	text-transform:uppercase;
}
.torven-cross__grid{
  list-style: none; margin: 0; padding: 0 !important;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem;
}

/* Kaartinhoud horizontaal: beeld | titel+prijs | +knop. Zelfde beeldmaat als
   een cart-regel (64px), dus het blok blijft laag. */
.torven-cross__item{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
}

.torven-cross__media{ display: block; width: 64px; height: 64px; border-radius: var(--smvp-radius-small, 3px); overflow: hidden; background: var(--tc-soft); }
.torven-cross__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.torven-cross__info{ min-width: 0; display: flex; flex-direction: column; }

.torven-cross__name{
  font-family: var(--tc-display); text-transform: uppercase;
  font-size: .72rem; letter-spacing: .02em; line-height: 1.15;
  color: var(--tc-ink); text-decoration: none; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s;
}
.torven-cross__name:hover{ color: var(--tc-gold); }

.torven-cross__price{ margin-top: .15rem; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tc-ink-soft); }
.torven-cross__price del{ font-weight: 400; color: var(--tc-ink-mute); margin-right: .3rem; }

.torven-cross__add{
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--tc-ink);
  border: 1px solid var(--tc-line); border-radius: var(--smvp-radius, 4px);
  transition: background .2s, color .2s, border-color .2s;
}
/* SVG-plus i.p.v. een +-teken: die hangt door font-metrics nooit exact in het
   optische midden, een pad wel. Kleurt mee via currentColor (ook op hover). */
.torven-cross__add svg{ display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.torven-cross__add:hover{ background: var(--tc-ink); color: var(--tc-on-dark); border-color: var(--tc-ink); }
.torven-cross__add.is-busy{ opacity: .5; pointer-events: none; }

/* ---------- mobiel + reduced motion ---------- */
@media (max-width: 600px){
  .torven-cart,
  .torven-cross{ --tc-pad: 1.15rem; }
  /* In de smalle drawer stapelen: 3 kolommen van ~100px laten geen ruimte
     voor naam + prijs + knop. */
  .torven-cross__grid{ grid-template-columns: 1fr; gap: .55rem; }
}
@media (prefers-reduced-motion: reduce){
  .torven-cart,
  .torven-cart__shipping-fill,
  .torven-cart__qty-btn,
  .torven-cart__checkout,
  .torven-cart__empty-link,
  .torven-cross__name,
  .torven-cross__add{ transition: none; }
}