/* VEREO · Product Detail Page CSS
   The store-block is intentionally prominent (Briefing: "Lokal vor Produkt"). */

.product-page { padding-bottom: var(--space-6); }
/* A-1: Sticky Reservieren-CTA, genug Platz lassen, damit Footer/Feed-CTA nicht darunter
   verschwinden (Bottom-Nav 64px + Bar ~73px, sie sitzt ÜBER der Nav). */
body.has-sticky-cta .product-page { padding-bottom: calc(var(--bottom-nav-height) + 84px + env(safe-area-inset-bottom)); }

/* A-1: EIN Primär-CTA pro Seite, sticky Bottom-Bar über der Bottom-Nav (safe-area beachtet),
   Inhalt auf die App-Breite zentriert (wie .bottom-nav .nav-inner). Links Preis, rechts CTA. */
.pdp-sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.pdp-sticky-cta .psc-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  box-sizing: border-box;
}
/* Desktop: Sticky-Bar-Inhalt an die verbreiterte Bottom-Nav angleichen (sonst schwebt der
   480px-Block über der 760/1040px-Nav darunter). (Verify z8) */
@media (min-width: 1024px) { .pdp-sticky-cta .psc-inner { max-width: 760px; } }
@media (min-width: 1280px) { .pdp-sticky-cta .psc-inner { max-width: 1040px; } }
.pdp-sticky-cta .psc-price {
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.pdp-sticky-cta .psc-price .price-old { font-size: var(--fs-sm); }
.pdp-sticky-cta .psc-btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--text);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pdp-sticky-cta .psc-btn svg { flex: 0 0 auto; }
.pdp-sticky-cta .psc-btn:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 3px; }
/* Ausgeblendet, solange ein Sheet/Overlay offen ist (nie zwei konkurrierende CTA-Flächen). */
.pdp-sticky-cta.psc-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }

.product-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 560px;
  background: var(--surface);
  overflow: hidden;
}
/* Horizontal swipe track (native scroll-snap = momentum + snap on mobile). */
.product-gallery .gallery-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.product-gallery .gallery-track::-webkit-scrollbar { display: none; }
.product-gallery .slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* contain (not cover): das ganze Produkt ist sichtbar, nichts wird abgeschnitten. */
.product-gallery .slide img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.product-gallery .gallery-nav {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  pointer-events: none;
}
/* Prev/Next, Navigation auf Desktop + klare Affordance, dass es mehr Bilder gibt. */
.product-gallery .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.product-gallery .gallery-arrow.prev { left: 10px; }
.product-gallery .gallery-arrow.next { right: 10px; }
.product-gallery .gallery-arrow:active { transform: translateY(-50%) scale(0.93); }
.product-gallery .gallery-dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 5px;
  /* dezenter Scrim → weiße Dots bleiben über hellen UND dunklen Bildern lesbar */
  padding: 5px 8px;
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius-pill);
  /* Nur Anzeige (29.09.2026): Punkte von 6 px sind keine Trefferflaeche, gewechselt wird
     per Wischen und mit den Pfeilen. Der Finger geht durch auf das Bild. */
  pointer-events: none;
}
.product-gallery .gallery-dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: width 200ms ease-out;
}
.product-gallery .gallery-dots .dot.active {
  width: 18px;
  border-radius: var(--radius-pill, 999px);
  background: #fff;
}
/* Sichtbarer Fokus für Tastatur-Nav (konsistent mit app.css) */
.product-gallery .gallery-arrow:focus-visible { outline: 2px solid var(--text, #0F0F0F); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .product-gallery .gallery-dots .dot { transition: none; }
}

.product-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
  background: var(--bg-card);
}
.product-header .brand {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  font-weight: 600;
}
.product-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin-top: 4px;
  color: var(--text);
}
.product-header .price {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin-top: var(--space-3);
}
.product-header .price-old { font-size: var(--fs-base); }

.product-section { padding: var(--space-4) var(--space-5); background: var(--bg-card); }
.product-section .section-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Size picker, Chips = der gemeinsame .sp-chip aus app.css (Diego 18.08.):
   exakt dieselbe Optik wie die Pills im Reservieren-Sheet. Hier nur der Container. */
.size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* STORE BLOCK, Tier-1 prominent, "Lokal vor Produkt" */
.store-block {
  margin: var(--space-3) var(--space-5);
  background: var(--text);
  color: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.store-block .store-block-head {
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* „Wo ist das?" (Diego 26.08. nach eigenem Nutzertest): Bisher konnte man einen Artikel nur
   merken, aber nicht verorten. Bewusst als dezente Fusszeile IN der Store-Box, nicht als
   zweiter Knopf, der eine Primaer-CTA der Seite bleibt „Jetzt reservieren" unten. Fuehrt auf
   UNSERE Karte (Laden im Stadtkontext); die echte Navigation ist von dort der zweite Tap. */
.store-block .store-block-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.store-block .store-block-map svg { width: 16px; height: 16px; flex: 0 0 auto; }
.store-block .store-block-map:hover { background: rgba(255,255,255,0.07); }

/* Öffnungs-Status als kleine Uhr-Zeile unter dem Store-Namen (Diego 18.07.: Box reduziert). */
.store-block .store-open {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: var(--fs-sm); color: rgba(255,255,255,0.7);
}
.store-block .store-open svg { width: 14px; height: 14px; flex: 0 0 auto; }
.store-block .store-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Entfernung rechts, Chevron ganz rechts. */
.store-block .store-dist {
  flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap;
}
.store-block .store-chev { flex: 0 0 auto; opacity: 0.45; }
.store-block .store-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-md);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.store-block .store-avatar img { width: 100%; height: 100%; object-fit: cover; }
.store-block .store-info { flex: 1; min-width: 0; }
.store-block .pre-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: rgba(255,255,255,0.6);
  margin-bottom: 2px;
}
.store-block .store-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
}
/* Meta = kompakte Icon-Zeilen (Pin/Uhr) statt Label-Wortketten (Diego 2026-07-11). */
.store-block .store-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  color: #fff;
}
.store-block .store-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.store-block .store-meta .meta-item svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: rgba(255,255,255,0.6);
}
.store-block .store-meta .meta-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-block .store-cta-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
/* (.store-block .btn-call/.btn-directions am 18.08. entfernt, product.js rendert seit
   18.07. nur noch .store-block-head, das CSS war ohne Markup.) */

/* Product description / highlights */
.product-description {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-soft);
}
/* Keine Bullet-Punkte (Diego 2026-07-11: kein AI-Slop), schlichte Zeilen, max. 3 (JS capped). */
.product-highlights { margin: var(--space-3) 0 0; padding-left: 0; list-style: none; }
.product-highlights li {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: 6px;
  line-height: var(--lh-snug);
}

.product-meta-rows { margin-top: var(--space-3); }
.product-meta-rows .meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
}
.product-meta-rows .meta-row .lbl { color: var(--text-muted); }
.product-meta-rows .meta-row .val { color: var(--text); }

/* "Weitere von [Store]" */
.related-section { padding: var(--space-5) 0 var(--space-6); }
.related-section .related-head {
  padding: 0 var(--space-5) var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.related-section .related-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
}
.related-section .related-head a { font-size: var(--fs-xs); color: var(--text-muted); }
/* E-8: „alle ansehen"-Anker ist bis zum Wiring (product.js setzt die echte href) tot →
   nicht klickbar + gedimmt, damit href="#" nirgends nach oben scrollt. */
.related-section .related-head a[aria-disabled="true"] { pointer-events: none; opacity: 0.45; }
/* Related-Reihen ("Weitere von …", "Mehr aus Bielefeld"): horizontale Swipe-Reihe statt Raster. */
.related-section .product-grid {
  display: flex; flex-wrap: nowrap; gap: var(--space-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0 var(--space-5) 4px; scroll-snap-type: x proximity;   /* gleicher Seitenrand wie die Seite (26.08.) */
}
.related-section .product-grid::-webkit-scrollbar { display: none; }
.related-section .product-grid > .product-card { flex: 0 0 44%; max-width: 200px; scroll-snap-align: start; }

/* === Desktop / laptop: two-column product detail (gallery left, info right) === */
@media (min-width: 1000px) {
  .product-page { max-width: 1180px; margin: 0 auto; }
  .pdp-top {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-5) var(--space-5) 0;
  }
  .pdp-top .product-gallery {
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 4;
    max-height: 72vh;
    position: sticky;
    top: 76px;
  }
  .pdp-info { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .pdp-info .product-header { padding: 0 0 var(--space-2); background: transparent; }
  .pdp-info .store-block { margin: var(--space-2) 0; }
  .pdp-info .product-section { padding: var(--space-3) 0; background: transparent; }
  .related-section { max-width: 1180px; margin: 0 auto; }
  .related-section .product-grid > .product-card { flex-basis: 200px; }
}