/* Produkt-Detailseite – Bild dominiert, Typo wie die Editorial-Seiten. */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 4.5rem) var(--pad-x) var(--section);
}
/* Höhe deckeln, damit Hochformate nicht überdimensioniert werden. */
.slideshow-viewport, .product-media > img, .product-no-image { max-height: 82vh; }
/* Einzelbild: natürliche Breite (kein grauer Streifen durch Letterboxing). */
.product-media > img { width: auto; max-width: 100%; object-fit: contain; background: none; }
.product-title {
  font-size: var(--fs-h1);
  line-height: 1.05;
}

/* --- Medien / Slideshow ------------------------------------------------- */
.product-no-image { width: 100%; background: var(--bg-soft); }
.product-no-image {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  color: var(--muted); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Horizontaler Slide-Track (kein Fade). */
.slideshow-viewport {
  position: relative; overflow: hidden; background: var(--bg-soft);
  touch-action: pan-y;          /* vertikales Scrollen erlaubt, horizontal = Drag */
  cursor: grab;
}
.slideshow-viewport.is-dragging { cursor: grabbing; }
.slideshow-track {
  display: flex; height: 100%;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}
.slideshow-slide { flex: 0 0 100%; height: 100%; }
.slideshow-slide img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .slideshow-track { transition: none; }
}

/* Thumbnail-Leiste unter dem Bild – keine Überlagerung mehr. */
.slideshow-thumbs {
  display: flex; gap: 0.6rem; margin-top: 0.85rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slideshow-thumbs::-webkit-scrollbar { display: none; }
.slideshow-thumb {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  width: 4.5rem; opacity: 0.4; transition: opacity 0.25s;
}
.slideshow-thumb img { width: 100%; height: 4.5rem; object-fit: cover; display: block; background: var(--bg-soft); }
.slideshow-thumb:hover { opacity: 0.75; }
.slideshow-thumb.is-active { opacity: 1; }
.slideshow-thumb.is-active img { outline: 2px solid var(--ink); outline-offset: -2px; }

/* --- Panel – auf die globalen Tokens standardisiert --------------------- */
.product-panel {
  position: sticky; top: 6rem;
  display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-base);
}
.product-text { font-size: var(--fs-base); line-height: 1.5; }
.product-text p { margin-bottom: 0.6em; }

/* Größe-Label, Dropdown-Text und Material-Text einheitlich. */
.product-panel .field { display: flex; flex-direction: column; gap: 0.5rem; }
.product-panel label,
.product-panel .field-label,
.product-panel select,
.product-material,
.product-size {
  font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink);
  text-transform: none; letter-spacing: 0; margin: 0;
}
/* Dropdown identisch zum Checkout (Pfeil-Platz rechts, gleiche Polsterung). */
.product-panel select { padding: 0.95rem 2.4rem 0.95rem 1rem; }
/* Einzelne, nicht wählbare Variante: Label schwarz wie bei den Dropdowns. */
.product-panel .field-static .field-label { color: var(--ink); }
.product-panel .field-static .product-size,
.product-panel .field-static .product-material { font-weight: var(--fw-bold); }

.price-block { display: flex; flex-direction: column; gap: 0.4rem; }
.price-block .price { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.price-block .price-notice { margin: 0; }

.product-panel .button { font-size: var(--fs-base); padding: 1.15rem 1.5rem; }
.product-stock { font-size: var(--fs-sm); color: var(--muted); }
.product [data-slot="error"] { font-size: var(--fs-sm); }
.product [data-slot="error"][hidden] { display: none; }

@media (max-width: 56rem) {
  .product { grid-template-columns: 1fr; gap: 2rem; }
  .product-panel { position: static; }
}