/*
 * Shop-Motion — Choreografie für Shop-Archiv & Produktseite.
 *
 * Ergänzt assets/css/motion.css (eine Handschrift!): keine eigenen Easings
 * oder Dauern, ausschließlich die zentralen Tokens (--ease-expo, --ease-soft,
 * --dur-s/m/l). Eingebunden von woocommerce/archive-product.php und
 * woocommerce/single-product.php (wp_enqueue_style vor get_header()).
 *
 * Sicherheitsregeln (siehe motion.css):
 * 1. Versteckende Startzustände liegen NUR unter html.motion-ok.
 * 2. prefers-reduced-motion:reduce → keine Bewegung, nur schnelle Opacity.
 * 3. Animiert werden nur transform / opacity / clip-path.
 */

/* =============================================
   1. SHOP-ARCHIV — Karten-Hover: sanfter Lift
   Der bestehende Bildwechsel (Lifestyle-Ebene) und der Schatten aus
   main.css bleiben unangetastet — hier kommt nur der Lift auf den
   inneren Link dazu (nicht auf dem li, das gehört dem .rv-Reveal).
   ============================================= */
@media (hover: hover) and (pointer: fine){
  .rompe-loop-card{transition:transform var(--dur-s) var(--ease-expo)}
  .rompe-loop-product:hover .rompe-loop-card{transform:translateY(-6px)}
}

/* =============================================
   1a. SHOP-ARCHIV — Grid-Loch-Fix (leere erste Zelle)
   woocommerce-layout.css lädt NACH main.css und nach diesem Sheet und
   setzt den Float-Clearfix ul.products::before/::after{content:" ";
   display:table}. Im display:grid-Kontext (main.css) wird das ::before
   zum anonymen Grid-Item → leere erste Grid-Zelle vor der ersten Karte.
   main.css Z. 1369 (display:none) verliert per Load-Order bei gleicher
   Spezifität — deshalb hier bewusst !important; der Float-Clearfix hat
   im Grid ohnehin keine Funktion.
   ============================================= */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{content:none !important;display:none !important}

/* =============================================
   1b. SHOP-ARCHIV — Reveal-Race-Fix im Produkt-Grid
   content-product.php vergibt Spalten-Delays (0/.09/.18/.27s), der
   IntersectionObserver feuert aber pro Karte einzeln — beim Scrollen
   konnte so die erste Karte einer Reihe noch unsichtbar sein, während
   Nachbarn schon standen (wirkte wie ein Loch im Grid).
   OVERRIDE (schlägt motion.css per Spezifität): Stagger-Abstand
   halbieren und transition-delay bei .18s deckeln, damit eine Reihe
   praktisch gemeinsam erscheint.
   ============================================= */
html.motion-ok .products :is(.rv,.motion-in).is-in{
  transition-delay:min(calc(var(--rv-delay,0s) / 2),.18s);
}

/* =============================================
   1c. SHOP-ARCHIV — Toolbar editorial (Ergebnis-Zeile + Sortier-Select)
   Kein Motion, aber archive-product.php gehört zu diesem Sheet.
   Die WC-Core-Styles laden NACH diesem Sheet — die Overrides brauchen
   deshalb 3 Klassen Spezifität (schlägt .woocommerce .woocommerce-…).
   ============================================= */
/* Ergebnis-Zeile als Micro-Typo (Handschrift von .eyebrow) */
.shop-toolbar .shop-toolbar__count .woocommerce-result-count{
  float:none;
  margin:0;
  font-family:var(--font-b);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-light);
}
/* Uppercase-Micro-Label vor dem Select */
.shop-toolbar__sort-label{
  font-family:var(--font-b);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-light);
}
.shop-toolbar .shop-toolbar__sort .woocommerce-ordering{float:none;margin:0}
/* Select rahmenlos mit feiner Unterstreichung + eigenem Pfeil (SVG data-URI) */
.shop-toolbar .shop-toolbar__sort select.orderby{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(13,13,15,.35); /* feine Hairline, --primary bei Hover/Fokus */
  border-radius:0;
  background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230D0D0F' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right .1rem center/10px auto;
  padding:.4rem 1.4rem .45rem 0;
  font-family:var(--font-b);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  cursor:pointer;
  transition:border-color .2s ease;
}
.shop-toolbar .shop-toolbar__sort select.orderby:hover{border-bottom-color:var(--primary)}
.shop-toolbar .shop-toolbar__sort select.orderby:focus-visible{
  border-bottom-color:var(--primary);
  outline:2px solid var(--primary);
  outline-offset:4px;
}

/* =============================================
   2. PRODUKTSEITE — Pre-Hide für die Eingangs-Choreografie
   Das Inline-Script in single-product.php vergibt die Motion-Klassen an
   das per Hook gerenderte Markup und setzt danach .pdp-entrance--armed.
   Bis dahin hält diese Regel Summary-Kinder und Galerie-Hauptbild
   unsichtbar (NUR mit motion-ok) — kein Aufblitzen vor dem Reveal.
   Ohne JS gibt es weder motion-ok noch das Script: alles bleibt sichtbar.
   ============================================= */
html.motion-ok [data-pdp-entrance]:not(.pdp-entrance--armed) .summary > *,
html.motion-ok [data-pdp-entrance]:not(.pdp-entrance--armed) .rompe-product-gallery__main{opacity:0}

/* =============================================
   3. PRODUKTSEITE — sanfter Dip-Crossfade beim Hauptbild-Wechsel
   (Thumb-Klick und Farb-Swatch). Die Klasse .rompe-img-fading setzt das
   Inline-Script in single-product.php — main.js bleibt unangetastet.
   ============================================= */
html.motion-ok .rompe-product-gallery__main img{transition:opacity .3s var(--ease-soft)}
/* motion.css setzt auf .rv-img.is-in img eine eigene transform-Transition —
   hier mit höherer Spezifität beide Properties kombinieren, damit weder der
   Clip-Reveal noch der Crossfade verloren geht. */
html.motion-ok .rompe-product-gallery__main.rv-img.is-in img{
  transition:transform var(--dur-l) var(--ease-expo),opacity .3s var(--ease-soft);
  transition-delay:var(--rv-delay,0s);
}
html.motion-ok .rompe-product-gallery__main img.rompe-img-fading{opacity:0}

/* =============================================
   4. MOBILE STICKY-KAUFLEISTE — Einblendung verfeinern
   Basis (Markup, Verhalten, Layout): inc/conversion.php + conversion.js +
   conversion.css (transform:translateY(105%) ↔ .is-visible). Hier nur die
   Motion-Verfeinerung: Expo-Kurve plus Opacity statt hartem ease.
   ============================================= */
@media (max-width: 999.98px){
  html.motion-ok .rompe-sticky-buy{
    opacity:0;
    transition:transform var(--dur-s) var(--ease-expo),opacity .35s var(--ease-soft);
  }
  html.motion-ok .rompe-sticky-buy.is-visible{opacity:1}
}

/* =============================================
   5. PRODUKTSEITE — Größenraster-Blocker-Fix (kein Motion, aber PDP-Sheet)
   main.css Z. 1402 setzt auf .rompe-size-picker__grid max-height:180px +
   overflow:auto. Mobil (390px, 2 Spalten) passen so nur 8 von 14 Größen
   in den sichtbaren Ausschnitt — EU 48–58 verschwinden hinter einem
   praktisch unsichtbaren Scrollbereich und sind faktisch nicht wählbar.
   main.css wird nicht angefasst → OVERRIDE hier (lädt nach main.css,
   gleiche Spezifität, Load-Order gewinnt): Kappung raus, das Raster
   wächst frei und ALLE Größen sind direkt sichtbar + wählbar.
   ============================================= */
.rompe-size-picker__grid{max-height:none;overflow:visible;padding-right:0}
/* Mobil mindestens 2, meist 3 Spalten: kleineres Spalten-Minimum, damit
   das Raster kompakt bleibt, obwohl es jetzt in die Höhe wachsen darf. */
@media (max-width: 480px){
  .rompe-size-picker__grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* =============================================
   REDUCED MOTION — keine Bewegung, nur schnelle Opacity (≤.2s).
   Greift auch, wenn der User die Einstellung NACH dem Laden umschaltet
   (motion-ok ist dann schon gesetzt → alles explizit neutralisieren).
   ============================================= */
@media (prefers-reduced-motion: reduce){
  .rompe-loop-card,
  .rompe-loop-product:hover .rompe-loop-card{transform:none;transition:none}

  /* Grid-Stagger-Cap (1b) neutralisieren — Reveals ohne Verzögerung */
  html.motion-ok .products :is(.rv,.motion-in).is-in{transition-delay:0s}

  html.motion-ok [data-pdp-entrance]:not(.pdp-entrance--armed) .summary > *,
  html.motion-ok [data-pdp-entrance]:not(.pdp-entrance--armed) .rompe-product-gallery__main{opacity:1}

  html.motion-ok .rompe-product-gallery__main img,
  html.motion-ok .rompe-product-gallery__main.rv-img.is-in img{transition:none}
  html.motion-ok .rompe-product-gallery__main img.rompe-img-fading{opacity:1}

  html.motion-ok .rompe-sticky-buy{opacity:1;transition:none}
}

/* Finishing 07/2026: Größen-Chips nie mitten im Label umbrechen
   ("EU 48 / UK 20" brach mobil zweizeilig und machte die Zeile ungleich hoch). */
.rompe-size-option { white-space: nowrap; }
@media (max-width: 420px) {
  .rompe-size-option { font-size: .78rem; padding-inline: .4rem; }
}