/* =========================================
   TVW – Karten, Swatches & Größen (stabil)
   ========================================= */

/* Karten: Schatten, Border, Radius, Innenabstand 10px */
.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
  background:#f5f5f5;
  border:1px solid #ccc;
  border-radius:6px;
  box-shadow:0 0 18px rgba(59,59,59,.55);
  padding:10px;                 /* 10px wie gewünscht */
  box-sizing:border-box;
  overflow:hidden;
}

/* Produktbild neutral (KEINE negativen Margins) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block; margin:0;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  display:block; width:100%; height:auto;
  border-top-left-radius:6px; border-top-right-radius:6px;
}

/* Titel-Abstand */
.woocommerce ul.products li.product .woocommerce-loop-product__title{ margin:10px 0 8px; }

/* ---------- Swatches ---------- */
/* Wrapper mittig halten (zusätzlich zu inline-Styles aus PHP) */
.woocommerce ul.products li.product .wvs-archive-attribute{ margin-top:6px; text-align:center; }
.woocommerce ul.products li.product .wvs-archive-attribute .variable-items-wrapper{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  margin:0 auto !important;           /* sicher in der Mitte */
  gap:8px 10px;                        /* optische Luft innerhalb der Swatches */
}
.woocommerce ul.products li.product .wvs-archive-attribute .variable-items-wrapper .variable-item{
  display:inline-block !important;
  float:none !important;
  vertical-align:middle;
}

/* Eigene "+X weitere Farben"-Zeile – NÄHER an die Swatches */
.tvw-more-line{
  text-align:center;
  margin-top:-10px;                      /* vorher 8px -> jetzt 3px (wie Abstand Label→Größen) */
  font-size:14px;
  color:#666;
}

/* ---------- Größen ---------- */
.tvw-sizes-wrapper{ margin-top:10px; text-align:center; }
.tvw-sizes-label{ font-size:12px; font-weight:600; color:#666; margin-bottom:3px; }

/* etwas enger, Desktop ohne Umbruch */
.tvw-sizes{ 
  font-size:12px;
  line-height:1.35;
  color:#222;
  white-space:normal;                   /* Default */
}
.tvw-size-sep{ opacity:.45; padding:0 6px; }

/* Desktop-Feintuning: enger & ohne Umbruch */
@media (min-width: 981px){
  .tvw-sizes{ white-space:nowrap; }    /* kein Umbruch */
  .tvw-size-sep{ padding:0 4px; }      /* enger als 6px */
  .tvw-sizes{ font-size:11.6px; }      /* minimal kleiner, damit’s passt */
}

/* Letztes Element nie am Kartenrand kleben */
.woocommerce ul.products li.product > *:last-child{ margin-bottom:0; }

/* Mobile Feinschliff */
@media (max-width:480px){
  .tvw-sizes{ font-size:11.5px; white-space:normal; }
  .tvw-size-sep{ padding:0 4px; }
  .tvw-more-line{ margin-top:4px; }    /* auf Mobile minimal mehr Luft */
}

/* TVW – Typo & Farbe für Meta-Texte (dezentes Tuning) */
:root{
  /* <<< hier EINMAL die Wunschfarbe setzen >>> */
  --tvw-accent-text: #4b5963; /* z.B. ein kühles Grau-Blau */
}

/* TVW – Abstand "+X weitere Farben" näher an die Swatches (responsiv safe) */
.tvw-more-line{
  margin-top:-12px;          /* Desktop: dichter ran */
  font-weight:600;
  line-height:1.1;           /* kompaktere Zeilenhöhe */
  color:var(--tvw-accent-text);
}

/* Tablet: etwas weniger negativ, damit nichts kollidiert */
@media (max-width: 980px){
  .tvw-more-line{ margin-top:-8px; }
}

/* Phone: kein Negativabstand, maximal sicher */
@media (max-width: 480px){
  .tvw-more-line{ margin-top:0; }
}

/* "Verfügbare Größen" (Label) */
.tvw-sizes-label{
  color:var(--tvw-accent-text);
  font-weight:600;
}

/* Größenliste "XS | S | ..." */
.tvw-sizes{
  color:var(--tvw-accent-text);
}
.tvw-size-sep{
  color:var(--tvw-accent-text);   /* Separator erbt jetzt die Akzentfarbe */
  opacity:.55;                    /* bleibt etwas dezenter */
}

/* Falls später Attribut-Labels (z.B. "Farben") eingeblendet werden */
.wvs-archive-attribute .attribute-label,
.wvs-archive-attribute .wvs-label,
.variations .label label{
  color:var(--tvw-accent-text);
  font-weight:600;
}

/* ==========================================================================
   TVW – Größen/Mengen-Tabelle (Produktseite)
   Einfügen in Divi > Theme Options > Custom CSS
   ========================================================================== */

/* ---- Farb- & Layout-Variablen (einfach hier ändern) -------------------- */
#tvw-qty-table {
  --tvw-primary: #2C3D4C;     /* Primär (Buttons/Hervorhebungen) */
  --tvw-accent:  #9A8D84;     /* Hover/Secondary */
  --tvw-text:    #1b2430;     /* Grundtext */
  --tvw-muted:   #7a8694;     /* Dezente Labels */
  --tvw-bg:      #f7f8f9;     /* Zarter Flächenhintergrund */
  --tvw-line:    #e6eaee;     /* Linien/Border */
  --tvw-radius:  6px;         /* Ecken */
  --tvw-shadow:  0 8px 30px rgba(44,61,76,.08);
  --tvw-font:    "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --tvw-input-w: 66px;        /* Breite der Mengenfelder */
}

/* ---- Wrapper/Block ------------------------------------------------------ */
.single-product #tvw-qty-table {
  width: 100%;
  font-family: var(--tvw-font);
  color: var(--tvw-text);
  background: #fff;
  border: 1px solid var(--tvw-line);
  border-radius: var(--tvw-radius);
  box-shadow: var(--tvw-shadow);
  padding: clamp(16px, 2vw, 24px);
  margin-block: clamp(16px, 2vw, 28px);
}

/* Optional: kleine Überschrift im Block */
#tvw-qty-table .tvw-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--tvw-primary);
}

/* ---- Zweispaltiges Layout (links Thumbnail | rechts Tabelle) ------------ */
/* Gib dem Bild links die Klasse .tvw-qty-thumb, die rechte Spalte .tvw-qty-main */
#tvw-qty-table .tvw-qty-wrap {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

#tvw-qty-table .tvw-qty-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tvw-line);
  border-radius: var(--tvw-radius);
  background: #fff;
}

/* ---- Tabelle ------------------------------------------------------------ */
#tvw-qty-table .tvw-qty-grid {
  width: 100%;
  border-collapse: collapse;
}

#tvw-qty-table .tvw-qty-grid thead th {
  font-weight: 700;
  text-align: center;
  padding: 12px 8px;
  background: var(--tvw-bg);
  border: 1px solid var(--tvw-line);
  color: var(--tvw-primary);
}

#tvw-qty-table .tvw-qty-grid tbody th[scope="row"] {
  text-align: left;
  white-space: nowrap;
  padding: 12px 10px;
  color: var(--tvw-muted);
  border: 1px solid var(--tvw-line);
  background: #fff;
}

#tvw-qty-table .tvw-qty-grid td {
  text-align: center;
  padding: 10px 6px;
  border: 1px solid var(--tvw-line);
  background: #fff;
}

/* ---- Eingabefelder (Mengen) -------------------------------------------- */
#tvw-qty-table .tvw-qty {
  width: var(--tvw-input-w);
  max-width: 100%;
  text-align: center;
  padding: 10px 8px;
  border: 1px solid var(--tvw-line);
  border-radius: var(--tvw-radius);
  background: #fff;
  color: var(--tvw-text);
  font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease, transform .04s ease;
  -moz-appearance: textfield;
}
#tvw-qty-table .tvw-qty:focus {
  outline: none;
  border-color: var(--tvw-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvw-accent) 25%, transparent);
}
#tvw-qty-table .tvw-qty:hover { border-color: color-mix(in srgb, var(--tvw-accent) 55%, var(--tvw-line)); }
#tvw-qty-table .tvw-qty:active { transform: scale(.98); }

/* Zahlspin-Buttons in WebKit ausblenden (sauberere Optik) */
#tvw-qty-table .tvw-qty::-webkit-outer-spin-button,
#tvw-qty-table .tvw-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- CTA unten: Zur Anfrageliste --------------------------------------- */
.single-product .tvw-batch-add {
  display: inline-block;
  margin-top: clamp(12px, 2vw, 18px);
  padding: 12px 18px;
  border-radius: var(--tvw-radius);
  border: 1px solid color-mix(in srgb, var(--tvw-primary) 90%, black 0%);
  background: var(--tvw-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .04s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 6px 18px rgba(44,61,76,.18);
}
.single-product .tvw-batch-add:hover {
  background: var(--tvw-accent);
  border-color: var(--tvw-accent);
  box-shadow: 0 8px 26px rgba(154,141,132,.28);
  transform: translateY(-1px);
}
.single-product .tvw-batch-add:active { transform: translateY(0); }
.single-product .tvw-batch-add[disabled] {
  opacity: .55; cursor: not-allowed; box-shadow: none;
}

/* Optional: Anker-Button oben (falls du ihn mit Klasse .tvw-anchor-to-table versiehst) */
.single-product .tvw-anchor-to-table {
  border-radius: var(--tvw-radius);
  border: 1px solid var(--tvw-line);
  background: #fff;
  color: var(--tvw-primary);
  padding: 8px 12px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.single-product .tvw-anchor-to-table:hover {
  border-color: var(--tvw-accent);
  background: var(--tvw-bg);
  color: var(--tvw-accent);
}

/* ---- Responsiv ---------------------------------------------------------- */
@media (max-width: 980px) {
  #tvw-qty-table .tvw-qty-wrap {
    grid-template-columns: 1fr;        /* Bild oben, Tabelle darunter */
  }
  #tvw-qty-table .tvw-qty-thumb { max-width: 220px; }
  #tvw-qty-table .tvw-qty-grid thead th { position: sticky; top: 0; z-index: 1; }
  /* Für sehr schmale Screens erlauben wir horizontales Scrollen der Tabelle */
  #tvw-qty-table .tvw-qty-grid { display: block; overflow-x: auto; }
  #tvw-qty-table .tvw-qty-grid table, 
  #tvw-qty-table .tvw-qty-grid thead, 
  #tvw-qty-table .tvw-qty-grid tbody, 
  #tvw-qty-table .tvw-qty-grid th, 
  #tvw-qty-table .tvw-qty-grid td, 
  #tvw-qty-table .tvw-qty-grid tr { white-space: nowrap; }
}

/* ---- Mikro-Feinschliff -------------------------------------------------- */
#tvw-qty-table .tvw-muted { color: var(--tvw-muted); font-size: .92rem; }

/* =========================================================
   TVW – Cart/Checkout „Goldener Schnitt“ (Override CSS)
   Ziel:
   - Produktbild 130x130 (Spiegel zum Upload-Block)
   - Produktname/Desc kompakt, mehrzeilig
   - Uploads: 2x2 Thumbs à 60px + dezente Badge (#2C3D4C)
   - Menge als Fake-Input-Box (fix, nicht editierbar)
   - Kompatibel mit Cart & Checkout (Divi + Woo)
   ========================================================= */

/* =========================================================
   TVW – Cart/Checkout (Gold) Styles
   Version: 3.2.2
   ========================================================= */

:root{
  --tvw-blue: #2C3D4C;
  --tvw-thumb: 130px;          /* Gesamtfläche Upload-Block */
  --tvw-slot: 62.5px;          /* 2 Slots + 5px Gap = 130px → (130-5)/2 */
  --tvw-gap: 5px;              /* gewünschter Abstand zwischen Thumbs */
  --tvw-radius: 6px;           /* globaler Radius */
  --tvw-font: 'Lato', Arial, sans-serif;
}

/* Produktbild 130x130, mit Radius 6 */
.shop_table.cart td.product-thumbnail img,
.shop_table.cart td.product-name img.attachment-woocommerce_thumbnail,
.woocommerce-checkout-review-order-table td.product-name img,
.woocommerce table.shop_table td.product-thumbnail img{
  width: 130px !important;
  height: 130px !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  border-radius: var(--tvw-radius);
  background: #fff;
}

/* Produktnamen-Zelle (Beschreibung – Uploads wandern per JS raus) */
.shop_table.cart td.product-name .tvw-row-grid,
.woocommerce-checkout-review-order-table td.product-name .tvw-row-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 20px;
  align-items: start;
}

/* Beschreibung kompakt */
.shop_table.cart td.product-name .tvw-col-desc,
.woocommerce-checkout-review-order-table td.product-name .tvw-col-desc{
  font-family: var(--tvw-font);
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  max-width: 48ch;
}

/* Header/Spalte Uploads exakt ausrichten */
.tvw-th-uploads{
  text-align: center !important;
  width: var(--tvw-thumb) !important;
  padding: 6px 8px !important;
}
.tvw-uploads-td{
  vertical-align: top !important;
  width: var(--tvw-thumb) !important;
  padding: 6px 8px !important;
}

/* Upload-Block in der Spalte */
.tvw-col-uploads{ width: var(--tvw-thumb); margin: 0 auto; }
.tvw-upload-wrap{ display: flex; flex-direction: column; gap: 6px; }
/* In der Zeile nicht noch mal „Uploads“ zeigen – Header übernimmt */
.tvw-col-uploads .tvw-upload-title{ display: none !important; }

.tvw-cart-uploads{
  width: var(--tvw-thumb);
  height: var(--tvw-thumb);
  display: grid;
  grid-template-columns: var(--tvw-slot) var(--tvw-slot);
  grid-template-rows: var(--tvw-slot) var(--tvw-slot);
  gap: var(--tvw-gap);
}

/* Slot – leer = Rahmen/Grau, mit Radius 6 */
.tvw-cart-uploads .slot{
  position: relative;
  width: var(--tvw-slot);
  height: var(--tvw-slot);
  border: 1px solid #ddd;
  border-radius: var(--tvw-radius);
  overflow: hidden;
  background: #fafafa;
  display: flex; align-items: center; justify-content: center;
}
/* Belegt = randlos & ohne Hintergrund, Radius bleibt sichtbar durch IMG */
.tvw-cart-uploads .slot.has-image,
.tvw-cart-uploads .slot:has(img){
  border: none !important;
  background: none !important;
}

/* Bild füllt komplett, übernimmt Radius */
.tvw-cart-uploads .slot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: var(--tvw-radius) !important;
}

/* Platzhalter */
.tvw-cart-uploads .slot .noimg{ width:100%; height:100%; background:#eee; display:block; }

/* Badge oben mit leichten Rundungen */
.tvw-cart-uploads .slot .badge{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 16px; line-height: 16px;
  font-size: 11px; font-weight: 400;
  font-family: var(--tvw-font);
  text-align: center; color: #fff;
  background: rgba(44,61,76,.55);
  pointer-events: none; z-index: 1;
  border-top-left-radius: var(--tvw-radius);
  border-top-right-radius: var(--tvw-radius);
}

/* Menge als Box (sichtbar & zentriert) */
.shop_table.cart td.product-quantity .tvw-qty-box,
.woocommerce-checkout-review-order-table td.product-quantity .tvw-qty-box,
.shop_table.cart .tvw-qty-box{
  display: inline-block !important;
  width: 40px; height: 40px; line-height: 40px;
  text-align: center;
  font-family: var(--tvw-font); font-weight: 600; font-size: 16px;
  color: var(--tvw-blue);
  border: 1px solid var(--tvw-blue);
  border-radius: var(--tvw-radius);
  background: #fff;
}
td.product-quantity{ text-align: center !important; }

/* Zeilenlinie beibehalten */
.shop_table.cart tbody tr,
.woocommerce-checkout-review-order-table tbody tr{ border-bottom: 1px solid #eaeaea; }

/* Mobile: Uploads unter Beschreibung, zentriert */
@media (max-width: 600px){
  .tvw-uploads-td{ width:auto !important; display:block; }
  .tvw-col-uploads{ width:100%; }
  .tvw-cart-uploads{ margin-inline:auto; }
}

/* --- Subpixel weg: glatte Maße --- */
:root{
  --tvw-slot: 62px;   /* vorher 62.5px */
  --tvw-gap: 6px;     /* vorher 5px; 62*2 + 6 = 130 -> perfekt */
}

/* --- Badge nie umbrechen & nicht zwangs-Uppercase --- */
.tvw-cart-uploads .slot .badge{
  white-space: nowrap !important;
  text-transform: none !important;     /* falls Theme uppercase erzwingt */
  overflow: hidden;
  text-overflow: clip;
  height: 16px;                         /* 1 Zeile fix */
  line-height: 16px;
  padding: 0 2px;                       /* etwas Luft links/rechts */
}

/* --- Rundungen konsistent bis ins Bild --- */
.tvw-cart-uploads .slot,
.tvw-cart-uploads .slot.has-image,
.tvw-cart-uploads .slot:has(img){
  border-radius: 6px !important;
}
.tvw-cart-uploads .slot img{
  border-radius: inherit !important;    /* Bild folgt Slot-Radius */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Badge nie umbrechen */
.tvw-cart-uploads .slot .badge{
  white-space: nowrap !important;
  text-transform: none !important;
  height: 16px; line-height: 16px;
  padding: 0 2px;
}

/* Slot & Bild immer mit 6px Radius */
.tvw-cart-uploads .slot{ border-radius: 6px !important; }
.tvw-cart-uploads .slot img{ border-radius: inherit !important; }

/* Alt-Text in <img> niemals sichtbar (Sicherheitsnetz) */
.tvw-cart-uploads .slot img{
  font-size: 0 !important;
  color: transparent !important;
  text-indent: 0 !important;  /* falls Themes tricksen */
  line-height: 0 !important;
}

/* Badge bleibt 1-zeilig */
.tvw-cart-uploads .slot .badge{
  white-space: nowrap !important;
  text-transform: none !important;
  height: 16px; line-height: 16px;
  padding: 0 2px;
}