/* ==========================================================================
   PRODUKT-ÜBERSICHT (tabellarisch) –
   Nutzt Projekt-Variablen:
   --primary-color, --secondary-color, --accent-color, --danger-color,
   --light-grey, --dark-grey, --font-color, --bg-color-light
   ========================================================================== */

/* --- Seite / Wrapper ---------------------------------------------------- */

.product-overview{
  width: 93%;
  max-width: 1440px;
  margin: 40px auto 0;
}

.scroll-hint{
  text-align: right;
  font-size: .9rem;
  color: var(--dark-grey);
  margin: 0 0 8px;
}

/* --- Gruppe (Kopf + Varianten) ----------------------------------------- */

.product-group-table{
  background: color-mix(in srgb, var(--bg-color-light) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--dark-grey) 18%, transparent);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(6px);
  padding: 20px;
  margin-bottom: 40px;
}

/* Kopfbereich */
.product-group-header{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.product-group-header img{
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--bg-color-ligh);
}
.product-group-header h2{
  margin: 0 0 6px;
  color: var(--primary-color);
  font-weight: 700;
}
.product-group-header p{
  margin: 0;
  color: var(--dark-grey);
}

/* --- „Tabelle“ als Stack von Zeilen ------------------------------------ */

.variant-table{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--dark-grey) 10%, transparent);
  position: relative;
}

/* Tabellenkopf (3 Spalten) */
.variant-header .variant-title-card{
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  gap: 0;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--secondary-color) 92%, transparent);
  color: var(--primary-color);
  font-weight: 700;
  font-size: .95rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--dark-grey) 15%, transparent);
  z-index: 2;
}

/* Tabellenkopf sticky innerhalb der Gruppe */
.variant-table .variant-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* sanfter Schatten unter dem Kopf, wenn gescrollt wird */
.variant-table::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 0;
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* Datenzeile */
.variant-card{
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;  /* Produkt | Preis | Lieferzeit */
  grid-auto-rows: auto;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bg-color-light) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--dark-grey) 10%, transparent);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.variant-card:last-child{ border-bottom: 0; }

/* Zeilen-Hover: zarter Lichtschein */
.variant-row:hover .variant-card{
  background: color-mix(in srgb, var(--secondary-color) 84%, transparent);
  box-shadow: 0 8px 20px rgba(0,0,0,.08), inset 0 0 0 9999px rgba(255,255,255,.03);
  border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/* Linkfläche der Zeile – Kinder bleiben Grid-Items */
.variant-linkarea{ display: contents; }
.variant-card a, .variant-card a *{ color: inherit; text-decoration: none; }

/* --- Spalten-Inhalte ---------------------------------------------------- */

.cell-main{
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.variant-thumb{
  width: 70px;
  height: 60px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  opacity: .95;
  transition: opacity .2s ease, filter .2s ease;
}
.variant-row:hover .variant-thumb{ opacity: 1; filter: brightness(1.02); }

.cell-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.variant-title{
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.cell-size{
  color: var(--dark-grey);
  font-size: .95rem;
}

/* Preis-Spalte */
.cell-price{
  grid-column: 2;
  justify-self: start;
}
.price{
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.price-current{
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--danger-color); /* Aktions-/Endpreis betonen */
}
.price-old{
  font-size: .9rem;
  color: var(--dark-grey);
  opacity: .8;
  text-decoration: line-through !important;
}

/* Lieferzeit (Chip) */
.cell-delivery{
  grid-column: 3;
  justify-self: start;
}
.cell-delivery .delivery{
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  background: color-mix(in srgb, var(--secondary-color) 88%, transparent);
  color: var(--dark-grey);
}
.delivery.orange{ color:#E37F28; }
.delivery.green{ color:green; }
.delivery.black{ color:var(--primary-color); }

/* Art.-Nr. – bleibt markierbar, nicht verlinkt */
.sku-inline{
  grid-column: 1 / 4;
  margin-top: 2px;
  margin-left: calc(70px + 14px); /* bündig unter Titel/Größe */
  font-size: .9rem;
  color: var(--dark-grey);
  user-select: text;
  cursor: text;
}

/* --- Fokus-/A11y-Styling ----------------------------------------------- */

.variant-row:focus-within .variant-card{
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* --- Mobile / Scroll ---------------------------------------------------- */

@media (max-width: 1024px){
  .product-group-header{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px){
  /* horizontales Scrollen für breite Tabellen */
  .variant-table{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .variant-header .variant-title-card,
  .variant-card{
    grid-template-columns: 2fr 1fr 1fr;
    min-width: 640px; /* ergonomische Mindestbreite */
  }
  .scroll-hint{ text-align: left; }
}
@media (max-width: 420px){
  .sku-inline{font-size: .7rem;; }
  .product-overview{ width: 98%; }
  .price-current{ font-size: 1rem; }
  .price-old{ font-size: .86rem; }
}

/* --- Darkmode ----------------------------------------------------------- */

body.darkmode .product-group-table{
  background: rgba(28,28,28,.9);
  border-color: #2a2a2a;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
body.darkmode .product-group-header img{ background:#222; }
body.darkmode .variant-table{ border-color:#2a2a2a; }
body.darkmode .variant-header .variant-title-card{
  background: rgba(40,40,40,.85);
  color: var(--font-color-dark);
  border-bottom-color:#2a2a2a;
}
body.darkmode .variant-card{
  background: rgba(34,34,34,.85);
  border-bottom-color:#2a2a2a;
}
body.darkmode .variant-row:hover .variant-card{
  background: rgba(46,46,46,.9);
}
body.darkmode .variant-title{ color: var(--font-color-dark); }
body.darkmode .cell-size,
body.darkmode .sku-inline{ color:#cfcfcf; }
body.darkmode .cell-delivery .delivery{
  background: rgba(60,60,60,.6);
  color:#e8e8e8;
}

/* --- Bewegungspräferenz ------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .variant-card,
  .variant-thumb{ transition: none; }
}

/* --- Druck (kompakt & kontrastreich) ----------------------------------- */
@media print{
  .product-overview{ width: 100%; max-width: none; margin: 0; }
  .product-group-table{ box-shadow: none; border: 1px solid #000; }
  .variant-card{ background: #fff; box-shadow: none; border-color: #000; }
  .variant-header .variant-title-card{ background: #fff; border-color: #000; }
  .cell-delivery .delivery{ background: none; padding: 0; }
}


/* --- Sticky Kopf für Variantentabelle ---------------------------------- */
:root{ --sticky-offset: 72px; }

.product-group-table,
.variant-table{ overflow: visible; }

.variant-header .variant-title-card{
  position: sticky;
  top: var(--sticky-offset);
  z-index: 5;
  background: color-mix(in srgb, var(--secondary-color) 92%, transparent);
}

.variant-header .variant-title-card::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  box-shadow: 0 8px 12px -8px rgba(0,0,0,.12);
  pointer-events: none;
}

@media (max-width: 900px){
  .variant-table{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
}