/* ==========================================================================
   RLStheme — Premium PLP (CSS-only)
   Autor: THEO  ·  Design-Vorgabe: AURA  ·  Stand 2026-07-22
   Benchmark: Dyson-Produktraster.
   AKTIV auf store1/deutsch (theme_id 7 seit 2026-07-22 zugewiesen).

   Welle 1 (2026-07-21): 3-Grid, Buehne, Typo, Preis, Chips-Slot, Hover, Fokus.
   Welle 2 (2026-07-22) — Kachel-Premium-Feinschliff (AURA-Plan §2, DNA #11):
     Move 1 Ghost-CTA (transparent+Hairline -> Hover fuellt blau) statt 5 blaue Balken.
     Move 2 2-stufiger Fluester-Schatten + Radius 16 + Border fast raus.
     Move 3 Preis-Hierarchie + Farb-Disziplin (Blau NUR CTA-Hover + Lead-Chip).
     Move 5 Chip-Hierarchie (Lead betont, Rest ruhig) — bleibt DATENABHAENGIG.
     Move 6 Name warmes Fast-Schwarz #1a2230.  Move 7 8er-Weissraum.
     Move 8 Motion-Signatur (Lift -4px/240ms, CTA-Fill 200ms, Pfeil).
   BEWUSST WEGGELASSEN: R1 Buehnen-Gradient + Kontaktschatten unter dem Produkt.
   Grund (am echten Render belegt 2026-07-22): die aktuellen Oxxify-Fotos haben
   OPAKE graue Hintergruende mit eingebranntem Text -> ein Gradient hinter dem
   opaken Foto ist unsichtbar, ein Kontaktschatten unter einem Foto-mit-eigenem-
   Hintergrund sieht falsch aus. -> Foto-Track PRISMA (Freisteller), NICHT Theme.

   Welle 3 (2026-07-22) — Mikro-Feinschliff "alles rund" (AURA kachel-mikro-
   feinschliff-plan, DNA #11, additiv, nur .rls-premium-grid):
     Mikro 1 Titel-Hoehe reserviert (min-height 46px) -> Preise/CTA fluchten grid-weit.
     Mikro 2 Chip-Cluster stabil (min-height 26px, nowrap, gap 7) + nbsp Einheit (phtml).
     Mikro 3 CTA 44px Touch-Ziel + Pfeil 3px/160ms.
     Mikro 4 ganze Karte klickbar (Name-Link ::after Overlay, EIN Haupt-Link/Tab-Stopp).
     Mikro 3+4 2-farbiger Fokus-Ring um die GANZE Karte (:has, Anker-Fallback) = BFSG.
     Mikro 5b Referenz-/Ab-Preis-Zeile reserviert -> Ist-Preise fluchten auch mit "Ab"/Streichpreis.
     Mikro 5  Steuerzeile #667085 -> #475467 (AAA-naeher).
   BORDER/SCHATTEN (Plan 5a-a): bereits durch Welle 2 geloest (Hairline + 2-stufiger
   Fluester-Schatten, am Render 22.07. verifiziert) -> NICHT re-getuned (kein Regress).

   SCOPE-DISZIPLIN (korrigiert 2026-07-21 nach store3-Render-Forensik):
   Die visuellen Regeln der Sektionen 2-13 haengen am Haupt-Listing-Wrapper
   ".products.wrapper.products-grid.rls-premium-grid" (vom Sparsh-list.phtml
   erzeugt). ACHTUNG: die weiteren Produkt-Raster tragen SEHR WOHL
   ".products.wrapper.products-grid" — die Isolation kommt NICHT durch das
   Fehlen von ".products.wrapper", sondern durch die je EINDEUTIGE Zusatzklasse:
     - Haupt-Grid  -> ".rls-premium-grid"        (Sektionen 2-13)
     - native PDP/Cart-Grids -> ".products-related/-upsell/-crosssell" (Sektion 14)
     - Magezon-Kacheln (mgz-element-single_product) -> NUR ".products-grid"
       OHNE Zusatzklasse -> von KEINER Sektion getroffen (MASON-Revier).
   0,4,0-Spezifitaet schlaegt Luma/custom.css (0,3,0) ohne !important;
   !important NUR dort, wo Magento inline-Styles am Bild setzt (Bild-Box).
   ========================================================================== */

/* --- 1. TOKEN-LAYER (global, reine CSS-Variablen — harmlos ausserhalb PLP) --- */
:root{
  --brand:#194383;
  --brand-hover:#12325f;
  --brand-tint:#eef2f8;
  --brand-border:#c9d6ea;          /* brand-getoenter Hover-Rand */
  --surface-page:#fafafa;
  --surface-card:#ffffff;
  --surface-media:#f4f6f8;         /* Freisteller-Buehne */
  --line:#e9ebee;
  --text-primary:#101828;          /* Preis/Primaer: warmes Anthrazit (Move 3/6) */
  --text-name:#1a2230;             /* Produktname: warmes Fast-Schwarz (Move 6) */
  --text-secondary:#4b5563;
  --text-muted:#6b7280;
  --price-ref:#667085;             /* "ab"-Referenz + Steuerzeile, NICHT blau (Move 3) */
  --uvp-strike:#9ca3af;
  --card-border:rgba(16,24,40,.06);/* Border fast raus -> Schatten traegt Tiefe (Move 2) */
  --radius-card:16px;              /* 12 -> 16 (Move 2) */
  --radius-btn:8px;
  --shadow-rest:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.06);   /* 2-stufiger Fluester-Schatten (Move 2) */
  --shadow-hover:0 2px 4px rgba(16,24,40,.05),0 18px 34px rgba(16,24,40,.12); /* (Move 2) */
  --ease-premium:cubic-bezier(.4,0,.2,1);
  --ease-lift:cubic-bezier(.2,.7,.2,1);   /* Karten-Lift-Signatur (Move 8) */
}

/* --- 2. GRID: 4 -> 3 Desktop, 2 Tablet/Mobile-gross, 1 Phone --- */
.products.wrapper.products-grid.rls-premium-grid .product-items{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* Desktop: premium 3-spaltig */
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
}
.products.wrapper.products-grid.rls-premium-grid .product-items > .product-item{
  width:auto;         /* neutralisiert Lumas calc()-Breiten */
  margin:0;           /* neutralisiert Lumas margin-left:2% */
  padding:0;
  float:none;
  display:flex;       /* Karte fuellt Zelle voll aus */
}

/* --- 3. KARTE (Flaeche = .product-item-info) --- */
.products.wrapper.products-grid.rls-premium-grid .product-item-info{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  background:var(--surface-card);
  border:1px solid var(--card-border);           /* Border fast raus (Move 2) */
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-rest);
  overflow:hidden;
  transition:transform .24s var(--ease-lift),     /* 240ms Lift-Signatur (Move 8) */
             box-shadow .24s var(--ease-lift),
             border-color .24s var(--ease-lift);
}
.products.wrapper.products-grid.rls-premium-grid .product-item-info:hover{
  transform:translateY(-4px);                     /* -2 -> -4 (Move 8) */
  box-shadow:var(--shadow-hover);
  border-color:var(--brand-border);
}

/* --- 4. BILD-BOX: feste Ratio + object-fit:contain auf Buehne ---
   Behebt springendes Raster (uneinheitliche Kachelhoehen).
   !important, weil Magento container-Breite + wrapper padding-bottom + img
   position INLINE setzt (nur so uebersteuerbar). */
.products.wrapper.products-grid.rls-premium-grid .product-item-photo{
  display:block;
  margin:0;
  background:var(--surface-media);
  aspect-ratio:1 / 1;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.products.wrapper.products-grid.rls-premium-grid .product-item-photo .product-image-container{
  width:100% !important;
  height:100%;
  display:block;
}
.products.wrapper.products-grid.rls-premium-grid .product-item-photo .product-image-wrapper{
  padding-bottom:0 !important;   /* toetet Lumas inline Ratio-Padding */
  height:100% !important;
  position:static !important;
  display:block;
  overflow:hidden;
}
.products.wrapper.products-grid.rls-premium-grid .product-item-photo img,
.products.wrapper.products-grid.rls-premium-grid .product-item-photo .product-image-photo{
  position:static !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  padding:16px;
  box-sizing:border-box;
}

/* --- 4b. VERKAUFS-/TRUST-MARKER (freier Text aus Attribut `verkaufsmarker`) --
   Ersetzt den frueheren "Empfohlen"-Marker. Zeigt einen FREIEN Text (z.B. eine
   Verkaufszahl / ein Trust-Signal, "ueber 8.000x verkauft") als dezente Pille
   oben-links auf der freien Bild-Buehne. Anker = .product-item-info
   (position:relative, Sektion 3) -> oberes linkes Karten-/Bild-Eck.
   STATISCH: kein Hover, keine Motion. Rendert nur, wenn das Template den Marker
   ausgibt (verkaufsmarker != ''). Max EIN Marker/Karte.
   Bewusst ABGESETZT von den neutralen Spec-Chips (unten): die Fakten-Chips sind
   FLACH (grau bzw. --brand-tint, ohne Schatten); dieser Trust-Marker ist eine
   GEFUELLTE Navy-Pille (--brand als Flaeche) mit WEISSEM Text -> hebt sich klar
   als Trust-Highlight ab, ohne schreierisch zu sein (aeltere, vertrauens-
   orientierte Zielgruppe). Icon-los (Premium-Ruhe). Navy-Fuellung + weisser Text
   = AAA-Kontrast, auch auf grau-eingebranntem Produktfoto lesbar.
   pointer-events:none -> Klick faellt auf den darunterliegenden Bild-Link durch.
   EINZIGE Marker-Optik: der fruehere .rls-top-modell-Zweig wurde entfernt
   (Konsolidierung auf EINEN Marker) -> eine Optik-Wahrheit, kein zweiter Stil. */
.products.wrapper.products-grid.rls-premium-grid .product-item-info .rls-verkaufsmarker{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  display:inline-block;
  max-width:calc(100% - 24px);                   /* nie ueber die Bild-Buehne hinaus */
  padding:5px 11px;
  border-radius:999px;
  background:var(--brand);                       /* #194383 gefuellte Marken-Flaeche */
  color:#ffffff;                                /* weisser Text -> AAA-Kontrast auf Navy */
  border:1px solid var(--brand);                /* Rand = Fuellfarbe -> transparente Kante, 1px-Geometrie bleibt */
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:.005em;
  font-variant-numeric:tabular-nums;            /* Zahlen ("8.000") ruhig ausgerichtet */
  box-shadow:0 1px 3px rgba(16,32,64,.12);      /* Fluester-Schatten -> hebt von flachen Chips ab */
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;                       /* zu langer Text schneidet dezent ab, sprengt nie */
}

/* --- 5. DETAILS-BEREICH (8er-Spacing, Flex fuer bodenbuendige CTA) --- */
.products.wrapper.products-grid.rls-premium-grid .product-item-details{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:16px 20px 20px;            /* Buehne -> Name = 16 (Move 7, 8er) */
  margin:0;
}

/* Name: 18/600, -.01em, lh1.3, max 2 Zeilen, Body-Sans (nicht Oswald) */
.products.wrapper.products-grid.rls-premium-grid .product-item-name{
  min-height:46px;                   /* Mikro 1: 2 Namenszeilen RESERVIERT (18*1.3*2) -> Preis/Meta/CTA fluchten grid-weit, egal ob 1- oder 2-zeilig */
  margin:0 0 8px;
  display:block;
}
.products.wrapper.products-grid.rls-premium-grid .product-item-name a,
.products.wrapper.products-grid.rls-premium-grid .product-item-link{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--text-name);            /* warmes Fast-Schwarz #1a2230 (Move 6) */
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;              /* AURA: max 2 Zeilen (custom.css war 3) */
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  width:100%;
  text-transform:none;               /* keine Oswald-Versalien */
}
.products.wrapper.products-grid.rls-premium-grid .product-item-name a:hover,
.products.wrapper.products-grid.rls-premium-grid .product-item-link:hover{
  color:var(--brand);
}

/* Bewertungs-Summary: dezent, nur wenn vorhanden (Katalog hat i.d.R. keine) */
.products.wrapper.products-grid.rls-premium-grid .product-reviews-summary{
  margin:0 0 8px;
}
.products.wrapper.products-grid.rls-premium-grid .product-reviews-summary.no-rating{
  display:none;
}

/* --- 6. SPEC-CHIPS-SLOT (leer -> versteckt; wartet auf Attribut-Daten) --- */
.products.wrapper.products-grid.rls-premium-grid .premium-spec-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;                           /* Mikro 2: 6 -> 7 (ruhigere Chip-Kante) */
  min-height:26px;                   /* Mikro 2: eine Chip-Reihe reserviert -> keine 1-/2-Reihen-Spruenge (Slot bleibt bei :empty ausgeblendet) */
  margin:12px 0 0;
}
.products.wrapper.products-grid.rls-premium-grid .premium-spec-chips:empty{
  display:none;                      /* KEINE leere Zeile ohne Daten */
}
.products.wrapper.products-grid.rls-premium-grid .premium-spec-chips .spec-chip{
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1;
  white-space:nowrap;                /* Mikro 2: Chip nie intern umbrechen ("bis zu 50 m³" / "mit Wärmerückgewinnung" bleiben ganz) */
  padding:5px 10px;
  border-radius:999px;               /* Pill */
  background:#f2f4f7;                 /* Sekundaer-Chips ruhig/neutral (Move 5) */
  color:var(--text-secondary);
  border:1px solid var(--card-border);
}
/* Lead-Chip (1. = Waermerueckgewinnung = Kaufgrund) betont brand (Move 5).
   Bleibt DATENABHAENGIG: existiert nur, wenn das phtml einen Chip rendert. */
.products.wrapper.products-grid.rls-premium-grid .premium-spec-chips .spec-chip:first-child{
  background:var(--brand-tint);      /* #eef2f8 */
  color:var(--brand);                /* #194383 */
  font-weight:600;
  border-color:var(--brand-border);
}

/* --- 7. PREIS: 20/700 tabular; UVP 14/#9ca3af durchgestrichen ---
   custom.css setzt .price-box column-reverse (Aktionspreis gross unten) —
   das bleibt erhalten, hier nur Groesse/Farbe premium. */
.products.wrapper.products-grid.rls-premium-grid .price-box{
  margin:12px 0 0;                   /* Name/Meta -> Preis = 12 (Move 7) */
  /* Mikro 5b: Referenz-/Ab-Zeile IMMER reservieren -> Ist-Preise fluchten grid-weit.
     column-reverse (wie custom.css) = grosser Ist-Preis unten, Referenz oben;
     justify-content:flex-start = Inhalt bodenbuendig, freier Platz oben.
     -> Karte mit "Ab"/Streichpreis und Karte ohne haben Ist-Preis auf gleicher Zeile. */
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-start;
  min-height:50px;
}
/* Hauptpreis: 22/700 tabular, -.02em, warmes Anthrazit #101828 (Move 3) */
.products.wrapper.products-grid.rls-premium-grid .price-box .price{
  font-size:22px;
  font-weight:700;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
/* "ab"-Referenzpreis (a.minimal-price-link) = klein/grau, KEIN Link-Blau (Move 3, Farb-Disziplin) */
.products.wrapper.products-grid.rls-premium-grid .price-box .minimal-price-link,
.products.wrapper.products-grid.rls-premium-grid .price-box .minimal-price-link:hover,
.products.wrapper.products-grid.rls-premium-grid .price-box .minimal-price-link .price-label,
.products.wrapper.products-grid.rls-premium-grid .price-box .minimal-price-link .price-wrapper,
.products.wrapper.products-grid.rls-premium-grid .price-box .minimal-price-link .price{
  font-size:12.5px;
  font-weight:500;
  color:var(--price-ref);            /* #667085 statt blau */
  text-decoration:none;
  letter-spacing:0;
}
.products.wrapper.products-grid.rls-premium-grid .price-box .minimal-price-link .price-label{
  margin-right:3px;
}
/* UVP durchgestrichen (falls vorhanden) */
.products.wrapper.products-grid.rls-premium-grid .price-box .old-price .price,
.products.wrapper.products-grid.rls-premium-grid .price-box .old-price .price-wrapper .price{
  font-size:14px;
  font-weight:400;
  color:var(--uvp-strike);
  text-decoration:line-through;
}
/* Steuerzeile "inkl. MwSt., exkl. Versand": 11.5/400 grau; Versand-Link entblaut (Move 3) */
.products.wrapper.products-grid.rls-premium-grid .price-details{
  font-size:11.5px;
  font-weight:400;
  color:#475467;                     /* Mikro 5: Steuerzeile #667085 -> #475467 (AAA-naeher, aeltere Zielgruppe). Ab-Referenz bleibt bewusst #667085 (Entkopplung) */
  margin-top:4px;
}
.products.wrapper.products-grid.rls-premium-grid .price-details a{
  color:var(--text-secondary);
  text-decoration:underline;
}
.products.wrapper.products-grid.rls-premium-grid .price-details a:hover{
  color:var(--brand);
}

/* --- 8. NATIVE GRID-ACTIONS ausblenden (Design-Entscheidung, s. Doku) ---
   AURA-Karten-CTA = "Details ansehen ->" (unten). Der native Warenkorb-/
   Wunschliste-/Vergleich-Block bleibt im DOM (kein Funktionsbruch), ist aber
   im Premium-Raster verborgen. store3-Test only; 1-Zeilen-Reaktivierung. */
.products.wrapper.products-grid.rls-premium-grid .product-item-inner{
  display:none;
}

/* --- 9. CTA "Details ansehen ->" (Link zur PDP, Pfeil wandert bei Hover) --- */
.products.wrapper.products-grid.rls-premium-grid .premium-cta{
  margin-top:auto;                   /* an Kartenboden -> gleiche Kachelhoehe */
  padding-top:16px;                  /* Preis <-> CTA 16 */
  display:flex;
}
.products.wrapper.products-grid.rls-premium-grid .premium-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:44px;                              /* Mikro 3: 44px Touch-/Klick-Ziel (WCAG 2.5.8, aeltere Haende) */
  padding:9px 16px;                             /* Ghost: schlanker (Move 1) */
  border-radius:var(--radius-btn);
  background:transparent;                        /* Ghost-Ruhe: 1 Primaersignal statt 5 blaue Balken (Move 1) */
  color:var(--brand);
  border:1.5px solid rgba(25,67,131,.28);        /* Hairline brand-Rand */
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  transition:background .2s var(--ease-premium), /* CTA-Fill 200ms (Move 8) */
             color .2s var(--ease-premium),
             border-color .2s var(--ease-premium);
}
.products.wrapper.products-grid.rls-premium-grid .product-item-info:hover .premium-cta a{
  background:var(--brand);                        /* Hover fuellt blau (Move 1) */
  color:#fff;
  border-color:var(--brand);
}
.products.wrapper.products-grid.rls-premium-grid .premium-cta__arrow{
  display:inline-block;
  transition:transform .16s var(--ease-premium);   /* Mikro 3: 160ms */
}
.products.wrapper.products-grid.rls-premium-grid .product-item-info:hover .premium-cta__arrow{
  transform:translateX(3px);                        /* Mikro 3: +4 -> +3 (dezenter Nudge) */
}

/* --- 9b. GANZE KARTE KLICKBAR (Mikro 4) ---
   Der Produktname-Link (.product-item-link) ist der EINE Haupt-Link/Tab-Stopp
   (Bild-Link + Ghost-CTA sind im Template tabindex="-1"). Sein ::after spannt
   ueber die GANZE Karte -> Karte komplett klickbar, KEINE doppelten Tab-Stopps,
   groesseres Ziel (aeltere Haende/Touch). Ghost-CTA bleibt sichtbare Affordanz;
   CTA/Sparsh-Label per z-index ueber dem Overlay (klick-/hoverbar). */
.products.wrapper.products-grid.rls-premium-grid .product-item-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.products.wrapper.products-grid.rls-premium-grid .premium-cta a,
.products.wrapper.products-grid.rls-premium-grid .price-details a,
.products.wrapper.products-grid.rls-premium-grid .sparsh-product-label,
.products.wrapper.products-grid.rls-premium-grid .sparsh-product-label-image{
  position:relative;
  z-index:2;                         /* ueber dem Overlay klickbar: Ghost-CTA, Sparsh-Label
                                        UND der Versandkosten-Link (/lieferung != PDP, PAngV) */
}

/* --- 10. FOKUS-RING (2px Weiss + 3px Brand) --- */
.products.wrapper.products-grid.rls-premium-grid a:focus-visible,
.products.wrapper.products-grid.rls-premium-grid .premium-cta a:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
  border-radius:var(--radius-btn);
}
/* Mikro 3+4: Bei Tastatur-Fokus des Haupt-Links Ring um die GANZE Karte
   (2-farbig weiss+brand, AAA-sichtbar). :has() = Progressive Enhancement;
   Fallback ohne :has() = Anker-Ring oben. overflow:hidden der Karte clippt
   den EIGENEN outline/box-shadow NICHT (nur Kinder). */
@supports selector(:has(*)){
  .products.wrapper.products-grid.rls-premium-grid .product-item-info:has(.product-item-link:focus-visible){
    outline:3px solid var(--brand);
    outline-offset:3px;
    box-shadow:0 0 0 3px #fff, var(--shadow-hover);
  }
  .products.wrapper.products-grid.rls-premium-grid .product-item-link:focus-visible{
    outline:none;
    box-shadow:none;                 /* Doppel-Ring vermeiden: Karten-Ring uebernimmt */
  }
}

/* --- 11. TOOLBAR: Ergebniszahl prominent, Sortier-Dropdown sauber --- */
.toolbar-products .toolbar-amount{
  font-size:15px;
  font-weight:600;
  color:var(--text-primary);
  padding-top:9px;
}
.toolbar-products .toolbar-sorter .sorter-label{
  color:var(--text-secondary);
  font-size:14px;
}
.toolbar-products .sorter-options{
  border:1px solid var(--line);
  border-radius:var(--radius-btn);
  padding:8px 34px 8px 12px;
  background:var(--surface-card);
  color:var(--text-primary);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s var(--ease-premium);
}
.toolbar-products .sorter-options:hover,
.toolbar-products .sorter-options:focus{
  border-color:var(--brand-border);
  outline:none;
}
.toolbar-products .sorter-action{
  color:var(--text-secondary);
}
.toolbar-products .sorter-action:hover{
  color:var(--brand);
}

/* --- 12. RESPONSIVE --- */
@media (max-width:1023px){
  .products.wrapper.products-grid.rls-premium-grid .product-items{
    grid-template-columns:repeat(2,1fr);   /* Tablet: 2 */
    gap:16px;
  }
}
@media (max-width:479px){
  .products.wrapper.products-grid.rls-premium-grid .product-items{
    grid-template-columns:1fr;             /* Phone: 1 */
    gap:16px;
  }
  .products.wrapper.products-grid.rls-premium-grid .product-item-details{
    padding:16px;
  }
}

/* --- 13. prefers-reduced-motion: alles statisch (Pflicht) --- */
@media (prefers-reduced-motion:reduce){
  .products.wrapper.products-grid.rls-premium-grid .product-item-info,
  .products.wrapper.products-grid.rls-premium-grid .premium-cta a,
  .products.wrapper.products-grid.rls-premium-grid .premium-cta__arrow,
  .toolbar-products .sorter-options{
    transition:none !important;
  }
  .products.wrapper.products-grid.rls-premium-grid .product-item-info:hover{
    transform:none;
  }
  .products.wrapper.products-grid.rls-premium-grid .product-item-info:hover .premium-cta__arrow{
    transform:none;
  }
}

/* ==========================================================================
   14. NATIVE PDP-/WARENKORB-GRIDS: related / upsell / crosssell (Welle 2)
   ------------------------------------------------------------------------
   BELEGT (store3-Render 2026-07-21): Diese Grids sind NATIVE Magento-Bloecke
   (catalog.product.related -> .products-related; product.info.upsell ->
   .products-upsell; checkout.cart.crosssell -> .products-crosssell). Die 4
   Kategorie- + 6 PDP-Empfehlungs-Kacheln sind dagegen Magezon-Elemente
   (mgz-element-single_product, Container nur ".products-grid" OHNE Suffix) und
   werden hier NICHT getroffen -> bleiben MASON-Revier.

   Scope = eindeutige native Suffix-Klasse (.products-related/-upsell/-crosssell).
   Kein ".rls-premium-grid" noetig, keine Kollision mit Magezon/Haupt-Grid.
   Spezifitaet 0,4,0 (Wrapper) wie Haupt-Grid -> schlaegt Luma/custom.css.

   UNTERSCHIED zum Haupt-Grid (bewusst): KEINE ".premium-cta"-Injektion und
   KEIN Ausblenden nativer Aktionen — die Related-Checkbox ("In den Warenkorb"),
   der "alle auswaehlen"-Button und der Vergleichs-Link bleiben FUNKTIONAL
   sichtbar (reines CSS, kein Template-Eingriff, kein Funktionsbruch).
   ========================================================================== */

/* 14.1 GRID: gleiche Optik/Spaltigkeit wie Haupt-Grid (3 Desktop / 2 / 1) */
.products.wrapper.products-grid.products-related .product-items,
.products.wrapper.products-grid.products-upsell .product-items,
.products.wrapper.products-grid.products-crosssell .product-items{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;                     /* toetet ol-Nummerierung "1. 2. 3." */
}
.products.wrapper.products-grid.products-related .product-items > .product-item,
.products.wrapper.products-grid.products-upsell .product-items > .product-item,
.products.wrapper.products-grid.products-crosssell .product-items > .product-item{
  width:auto;
  margin:0;
  padding:0;
  float:none;
  display:flex;
}
/* ol-Zaehler zusaetzlich hart aus (falls Theme counter-reset setzt) */
.products.wrapper.products-grid.products-related .product-items > .product-item::before,
.products.wrapper.products-grid.products-upsell .product-items > .product-item::before,
.products.wrapper.products-grid.products-crosssell .product-items > .product-item::before{
  content:none;
}

/* 14.2 KARTE */
.products.wrapper.products-grid.products-related .product-item-info,
.products.wrapper.products-grid.products-upsell .product-item-info,
.products.wrapper.products-grid.products-crosssell .product-item-info{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  background:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-rest);
  overflow:hidden;
  transition:transform .15s var(--ease-premium),
             box-shadow .15s var(--ease-premium),
             border-color .15s var(--ease-premium);
}
.products.wrapper.products-grid.products-related .product-item-info:hover,
.products.wrapper.products-grid.products-upsell .product-item-info:hover,
.products.wrapper.products-grid.products-crosssell .product-item-info:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand-border);
}

/* 14.3 BILD-BOX: feste 1:1-Buehne, contain (wie Haupt-Grid) */
.products.wrapper.products-grid.products-related .product-item-photo,
.products.wrapper.products-grid.products-upsell .product-item-photo,
.products.wrapper.products-grid.products-crosssell .product-item-photo{
  display:block;
  margin:0;
  background:var(--surface-media);
  aspect-ratio:1 / 1;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.products.wrapper.products-grid.products-related .product-item-photo .product-image-container,
.products.wrapper.products-grid.products-upsell .product-item-photo .product-image-container,
.products.wrapper.products-grid.products-crosssell .product-item-photo .product-image-container{
  width:100% !important;
  height:100%;
  display:block;
}
.products.wrapper.products-grid.products-related .product-item-photo .product-image-wrapper,
.products.wrapper.products-grid.products-upsell .product-item-photo .product-image-wrapper,
.products.wrapper.products-grid.products-crosssell .product-item-photo .product-image-wrapper{
  padding-bottom:0 !important;
  height:100% !important;
  position:static !important;
  display:block;
  overflow:hidden;
}
.products.wrapper.products-grid.products-related .product-item-photo img,
.products.wrapper.products-grid.products-related .product-item-photo .product-image-photo,
.products.wrapper.products-grid.products-upsell .product-item-photo img,
.products.wrapper.products-grid.products-upsell .product-item-photo .product-image-photo,
.products.wrapper.products-grid.products-crosssell .product-item-photo img,
.products.wrapper.products-grid.products-crosssell .product-item-photo .product-image-photo{
  position:static !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  padding:16px;
  box-sizing:border-box;
}

/* 14.4 DETAILS */
.products.wrapper.products-grid.products-related .product-item-details,
.products.wrapper.products-grid.products-upsell .product-item-details,
.products.wrapper.products-grid.products-crosssell .product-item-details{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:20px;
  margin:0;
}

/* Name: 18/600, Body-Sans, brand-Hover (statt Luma-Blau/Unterstrich) */
.products.wrapper.products-grid.products-related .product-item-name,
.products.wrapper.products-grid.products-upsell .product-item-name,
.products.wrapper.products-grid.products-crosssell .product-item-name{
  min-height:0;
  margin:0 0 8px;
  display:block;
}
.products.wrapper.products-grid.products-related .product-item-name a,
.products.wrapper.products-grid.products-related .product-item-link,
.products.wrapper.products-grid.products-upsell .product-item-name a,
.products.wrapper.products-grid.products-upsell .product-item-link,
.products.wrapper.products-grid.products-crosssell .product-item-name a,
.products.wrapper.products-grid.products-crosssell .product-item-link{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--text-primary);
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  width:100%;
  text-transform:none;
}
.products.wrapper.products-grid.products-related .product-item-name a:hover,
.products.wrapper.products-grid.products-related .product-item-link:hover,
.products.wrapper.products-grid.products-upsell .product-item-name a:hover,
.products.wrapper.products-grid.products-upsell .product-item-link:hover,
.products.wrapper.products-grid.products-crosssell .product-item-name a:hover,
.products.wrapper.products-grid.products-crosssell .product-item-link:hover{
  color:var(--brand);
}

/* 14.5 PREIS: 18/700 tabular (etwas kleiner als Haupt-Grid = sekundaerer Kontext) */
.products.wrapper.products-grid.products-related .price-box,
.products.wrapper.products-grid.products-upsell .price-box,
.products.wrapper.products-grid.products-crosssell .price-box{
  margin:8px 0 0;
}
.products.wrapper.products-grid.products-related .price-box .price,
.products.wrapper.products-grid.products-upsell .price-box .price,
.products.wrapper.products-grid.products-crosssell .price-box .price{
  font-size:18px;
  font-weight:700;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.products.wrapper.products-grid.products-related .price-box .old-price .price,
.products.wrapper.products-grid.products-upsell .price-box .old-price .price,
.products.wrapper.products-grid.products-crosssell .price-box .old-price .price{
  font-size:13px;
  font-weight:400;
  color:var(--uvp-strike);
  text-decoration:line-through;
}
.products.wrapper.products-grid.products-related .price-details,
.products.wrapper.products-grid.products-upsell .price-details,
.products.wrapper.products-grid.products-crosssell .price-details{
  font-size:11px;
  color:var(--text-muted);
  margin-top:2px;
}
.products.wrapper.products-grid.products-related .price-details a,
.products.wrapper.products-grid.products-upsell .price-details a,
.products.wrapper.products-grid.products-crosssell .price-details a{
  color:var(--text-secondary);
  text-decoration:underline;
}

/* 14.6 NATIVE AKTIONEN sichtbar + dezent (Related-Checkbox / Vergleich) --
   an den Kartenboden, oberhalb 12px Abstand. Funktion bleibt unberuehrt. */
.products.wrapper.products-grid.products-related .field.choice.related{
  margin:12px 0 0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-secondary);
}
.products.wrapper.products-grid.products-related .field.choice.related .checkbox.related{
  width:16px;
  height:16px;
  accent-color:var(--brand);
  margin:0;
  cursor:pointer;
}
.products.wrapper.products-grid.products-related .field.choice.related .label{
  cursor:pointer;
}
.products.wrapper.products-grid.products-related .product-item-actions,
.products.wrapper.products-grid.products-upsell .product-item-actions,
.products.wrapper.products-grid.products-crosssell .product-item-actions{
  margin:8px 0 0;
}
.products.wrapper.products-grid.products-related .product-item-actions .action.tocompare,
.products.wrapper.products-grid.products-related .product-item-actions .action.tocart,
.products.wrapper.products-grid.products-upsell .product-item-actions .action.tocompare,
.products.wrapper.products-grid.products-upsell .product-item-actions .action.tocart,
.products.wrapper.products-grid.products-crosssell .product-item-actions .action.tocompare,
.products.wrapper.products-grid.products-crosssell .product-item-actions .action.tocart{
  font-size:12px;
  color:var(--text-muted);
}
.products.wrapper.products-grid.products-related .product-item-actions .action.tocompare:hover,
.products.wrapper.products-grid.products-related .product-item-actions .action.tocart:hover,
.products.wrapper.products-grid.products-upsell .product-item-actions .action.tocompare:hover,
.products.wrapper.products-grid.products-upsell .product-item-actions .action.tocart:hover,
.products.wrapper.products-grid.products-crosssell .product-item-actions .action.tocompare:hover,
.products.wrapper.products-grid.products-crosssell .product-item-actions .action.tocart:hover{
  color:var(--brand);
}

/* 14.7 Block-Kopf: "alle auswaehlen"-Button dezent brand */
.block.related .block-actions .action.select,
.block.upsell .block-actions .action.select{
  color:var(--brand);
}
.block.related .block-actions .action.select:hover,
.block.upsell .block-actions .action.select:hover{
  color:var(--brand-hover);
}

/* 14.8 FOKUS-RING (A11y, wie Haupt-Grid) */
.products.wrapper.products-grid.products-related a:focus-visible,
.products.wrapper.products-grid.products-upsell a:focus-visible,
.products.wrapper.products-grid.products-crosssell a:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
  border-radius:var(--radius-btn);
}

/* 14.9 RESPONSIVE (identisch zum Haupt-Grid) */
@media (max-width:1023px){
  .products.wrapper.products-grid.products-related .product-items,
  .products.wrapper.products-grid.products-upsell .product-items,
  .products.wrapper.products-grid.products-crosssell .product-items{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
}
@media (max-width:479px){
  .products.wrapper.products-grid.products-related .product-items,
  .products.wrapper.products-grid.products-upsell .product-items,
  .products.wrapper.products-grid.products-crosssell .product-items{
    grid-template-columns:1fr;
    gap:16px;
  }
  .products.wrapper.products-grid.products-related .product-item-details,
  .products.wrapper.products-grid.products-upsell .product-item-details,
  .products.wrapper.products-grid.products-crosssell .product-item-details{
    padding:16px;
  }
}

/* 14.10 prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .products.wrapper.products-grid.products-related .product-item-info,
  .products.wrapper.products-grid.products-upsell .product-item-info,
  .products.wrapper.products-grid.products-crosssell .product-item-info{
    transition:none !important;
  }
  .products.wrapper.products-grid.products-related .product-item-info:hover,
  .products.wrapper.products-grid.products-upsell .product-item-info:hover,
  .products.wrapper.products-grid.products-crosssell .product-item-info:hover{
    transform:none;
  }
}



/* Nav-Bereich Hintergrund #4d4c4b (Meini 26.07.2026) */
.nav-sections .nav-sections-item-content{background-color:#4d4c4b;}

/* Megamenue-z-index-Fix: konsolidiert in web/css/premium-global.css (THEO 2026-07-27).
   Frueher hier .catalog-category-view .navigation{ z-index:90 } — jetzt EINE globale Regel
   .navigation{ z-index:90 } @min-width:768px, sitewide (default_head_blocks.xml). */