/*
 Theme Name: Textilveredelung Child
 Template: Divi
 Description: Eine CSS für alles – Branding, Swatches, Größen, Upload-UI (UNESCO), Karten & Buttons
 Author: Oinkelman
 Version: 1.1.0
 Text Domain: textilveredelung-child
*/

/* ==============================
   0) Design-Variablen
   ============================== */
:root{
  --color-primary:#2C3D4C;     /* Hauptfarbe */
  --color-secondary:#9A8D84;   /* Sekundär */
  --color-muted:#777;
  --color-border:#e5e5e5;
  --color-bg:#fff;
  --color-hover:#e9e9e9;       /* heller Grauton für Hover */
  --radius:6px;
  --shadow:0 2px 6px rgba(0,0,0,0.08);
  --shadow-strong:0 4px 12px rgba(0,0,0,0.12);
}

/* ==============================
   1) Global & Typografie
   ============================== */
body, button, input, select, textarea{
  font-family:Lato, Arial, sans-serif;
  color:var(--color-primary);
  line-height:1.5;
}
a{ color:var(--color-primary); text-decoration:none; }
a:hover{ color:var(--color-secondary); }
h1,h2,h3,h4,h5,h6{ color:var(--color-primary); font-weight:700; line-height:1.25; }

/* ==============================
   2) Boxen / Karten / Layout
   ============================== */
.box,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.woocommerce ul.products{
  gap:16px;
}
.woocommerce ul.products li.product{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:10px; min-height:100%;
}
.woocommerce ul.products li.product:hover{
  box-shadow:var(--shadow-strong);
}

/* Titel/Preis auf Karten */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight:600; color:var(--color-primary);
}
.woocommerce ul.products li.product .price{
  color:var(--color-secondary); font-weight:700;
}

/* ==============================
   3) Buttons & Formulare
   ============================== */
button,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--color-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:10px 14px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:var(--color-hover);
  color:var(--color-primary);
}

input[type="text"], input[type="email"], input[type="number"],
input[type="password"], textarea, select{
  border:1px solid #ccc;
  border-radius:var(--radius);
  padding:8px; width:100%;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--color-secondary);
  outline:none;
  box-shadow:0 0 0 2px rgba(154,141,132,0.15);
}

/* ==============================
   4) Swatches & Größen (Optik + Hinweis)
   ============================== */
/* Kompatibel zu gängigen Swatch-Plugins (Woo Variation Swatches / Variable Items) */
.variable-items-wrapper .variable-item,
.woo-variation-items .variable-item,
.variations .swatch,
.variations .swatches .swatch{
  border:1px solid var(--color-border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.variable-items-wrapper .variable-item:hover,
.woo-variation-items .variable-item:hover,
.variations .swatch:hover,
.variations .swatches .swatch:hover{
  box-shadow:var(--shadow-strong);
  transform:translateY(-1px);
}
.variable-items-wrapper .variable-item.selected,
.woo-variation-items .variable-item.selected,
.variations .swatch.selected,
.variations .swatches .swatch.selected{
  border-color:var(--color-secondary) !important;
  box-shadow:0 0 0 2px rgba(154,141,132,0.25);
}

/* Hinweis „weitere Farben …“ */
.oinkelman-swatch-notice{
  display:block;
  text-align:center;
  margin-top:8px;
  font-size:13px;
  color:var(--color-muted);
}

/* Größen-Info-Zeile unter den Swatches (falls genutzt) */
.oinkelman-sizes{
  display:block;
  text-align:center;
  margin-top:6px;
  font-size:13px;
  color:var(--color-muted);
}

/* ==============================
   5) UNESCO – Upload UI (Deckungsgleich mit JS)
   ============================== */
/* Wrapper kann als ID oder Klasse existieren, beides abdecken */
#tvwux-upload-wrapper.tvwux-upload-wrapper,
.tvwux-upload-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:10px 0 14px;
}
.tvwux-upload-item{
  position:relative;
  padding:10px;
  border:1px dashed #cfd6df;
  border-radius:var(--radius);
  background:#f9fbfc;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.tvwux-upload-item label{
  display:block; font-weight:600; color:var(--color-primary); margin-bottom:6px;
}
/* Button */
.tvwux-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:10px 12px;
  border-radius:var(--radius);
  border:1px solid var(--color-primary);
  background:var(--color-primary);
  color:#fff; cursor:pointer;
  transition:all .15s ease;
}
.tvwux-btn:hover{ background:var(--color-secondary); }
/* Dateiname & Preview */
.tvwux-file-name{ display:block; margin-top:6px; font-size:12px; color:var(--color-primary); word-break:break-all; }
.tvwux-file-preview{
  display:none; width:100%; max-width:160px; height:auto; object-fit:cover;
  border:1px solid #e1e6ec; border-radius:var(--radius);
  margin-top:8px; box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.tvwux-upload-item.has-file .tvwux-file-preview{ display:block; }
/* Delete-X */
.tvwux-delete-x{
  position:absolute; top:8px; right:8px; width:20px; height:20px;
  background:#c62828; color:#fff; border:none; border-radius:50%;
  font-size:14px; font-weight:bold; line-height:18px; text-align:center;
  cursor:pointer; display:none; z-index:2;
}
.tvwux-upload-item.has-file .tvwux-delete-x{ display:block; }
/* Native file input verstecken */
.tvwux-upload-item input[type="file"]{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0;
}

/* ==============================
   6) Abstände/Trennung Add-to-Cart vs Upload
   ============================== */
.single-product .entry-summary form.variations_form{ margin-bottom:24px; }
.single-product .entry-summary .tvw-upload-area{ display:block; margin-top:12px; }

/* ==============================
   7) Responsive
   ============================== */
@media (max-width:1200px){
  .woocommerce ul.products{ gap:14px; }
}
@media (max-width:900px){
  .woocommerce ul.products{ gap:12px; }
  /* UNESCO Grid auf 1 Spalte */
  #tvwux-upload-wrapper.tvwux-upload-wrapper,
  .tvwux-upload-wrapper{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .woocommerce ul.products{ gap:10px; }
}

/*-------------------------------------------------------------------------------------------------------------------------------------*/

/* ===== SWATCHES – Optik, Zustände, Kollisionen killen ===================== */
/* Deckt die gängigen Markups ab (Woo Variation Swatches, Variation Swatches, rtwpvg, etc.) */
.single-product .variable-items-wrapper .variable-item,
.single-product .woo-variation-items .variable-item,
.single-product .variations .swatch,
.single-product .variations .swatches .swatch,
.shop .variable-items-wrapper .variable-item,
.shop .woo-variation-items .variable-item,
.shop .variations .swatch,
.shop .variations .swatches .swatch {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

/* Hover / Focus */
.single-product .variable-items-wrapper .variable-item:hover,
.single-product .woo-variation-items .variable-item:hover,
.single-product .variations .swatch:hover,
.shop .variable-items-wrapper .variable-item:hover,
.shop .woo-variation-items .variable-item:hover,
.shop .variations .swatch:hover {
  box-shadow: var(--shadow-strong) !important;
  transform: translateY(-1px) !important;
}

/* Selected-Zustand */
.single-product .variable-items-wrapper .variable-item.selected,
.single-product .woo-variation-items .variable-item.selected,
.single-product .variations .swatch.selected,
.shop .variable-items-wrapper .variable-item.selected,
.shop .woo-variation-items .variable-item.selected,
.shop .variations .swatch.selected {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 2px rgba(154,141,132,0.25) !important;
}

/* Einheitliche Größe (falls das Plugin frei skaliert) – gern anpassen */
.variable-item:not(.button-variable-item),
.variations .swatch {
  min-width: 34px !important;
  min-height: 34px !important;
}

/* Abstand zwischen Swatches */
.variable-items-wrapper,
.variations .swatches {
  gap: 8px !important;
}

/* Hinweis unter den Swatches */
.oinkelman-swatch-notice {
  display: block !important;
  text-align: center !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  color: var(--color-muted) !important;
}

/* Größen-Zeile (falls vom Script gesetzt) */
.oinkelman-sizes {
  display: block !important;
  text-align: center !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  color: var(--color-muted) !important;
}

/* ===== SWATCH-FALLBACK: Optik angleichen + nach 6 kappen ===== */

/* Optik (breit gefasst, deckt die üblichen Plugins ab) */
.variable-items-wrapper .variable-item,
.woo-variation-items .variable-item,
.variations .swatch, .variations .swatches .swatch,
.rtwpvg .rtwpvg-terms-wrapper .rtwpvg-term {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.variable-items-wrapper .variable-item:hover,
.woo-variation-items .variable-item:hover,
.variations .swatch:hover,
.rtwpvg .rtwpvg-terms-wrapper .rtwpvg-term:hover {
  box-shadow: var(--shadow-strong) !important;
  transform: translateY(-1px) !important;
}
.variable-items-wrapper .variable-item.selected,
.woo-variation-items .variable-item.selected,
.variations .swatch.selected,
.rtwpvg .rtwpvg-terms-wrapper .rtwpvg-term.selected {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 2px rgba(154,141,132,0.25) !important;
}

/* Kappen nach 6 – rein per CSS für die gängigen Container */
.variable-items-wrapper > *:nth-child(n+7),
.woo-variation-items > *:nth-child(n+7),
.variations .swatches > *:nth-child(n+7),
.rtwpvg .rtwpvg-terms-wrapper > *:nth-child(n+7) { display: none !important; }

/* Hinweiszeile (wird gleich dynamisch befüllt, hier nur Stil) */
.oinkelman-swatch-notice {
  display: block !important; text-align: center !important; margin-top: 8px !important;
  font-size: 13px !important; color: var(--color-muted) !important;
}

/* Größenzeile (Single) */
.oinkelman-sizes {
  display: block !important; text-align: center !important; margin-top: 6px !important;
  font-size: 13px !important; color: var(--color-muted) !important;
}