/**
 * Vitrine – Light-DOM-Styles (Host-Wrapper + noscript-Fallback).
 * Die eigentliche Katalog-UI wird im Shadow DOM des <vitrine-catalog>-Elements
 * gerendert und ist daher vollständig vom Joomla-Template isoliert.
 */

/* Volle Breite wie der Hub-Katalog (der Shadow-DOM hat sein eigenes .wrap/1440). */
.vitrine-wrap { margin: 0; }

/* --- Template-Integration (nur auf Vitrine-Seiten geladen) ---------------------
   Viele Joomla-Templates (YOOtheme Pro u. a.) kappen den Inhalt über einen
   .uk-container (max-width ~1200) und setzen oben Abstand. Damit die Container-
   Breite der Komponente greift und der Header voll-bleed ist, wird der Container
   auf der Katalog-Seite aufgehoben; die Breite steuert dann die Komponente selbst
   (Shadow-.wrap = container_width). Zusätzlich der obere Abstand von #tm-main. */
#tm-main { padding-top: 0 !important; }
#tm-main .uk-container:has(.vitrine-wrap),
.uk-container:has(> .vitrine-wrap) {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* H1/Intro nur für SEO/Screenreader — sichtbar rendert der Shadow-DOM-Pagehead. */
.vitrine-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.vitrine-notice {
    padding: 1rem 1.25rem; border: 1px solid #e6e2da; border-radius: 12px;
    background: #faf9f7; color: #6b6b6b;
}

/* Host-Element: bis der Webcomponent aufwacht, kein Layout-Sprung */
vitrine-catalog { display: block; min-height: 120px; }

/* ---- noscript-Fallback (einfaches Raster ohne JS, für Crawler) ---- */
.vitrine-fallback {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 1rem;
}
.vitrine-fallback-card {
    border: 1px solid #e6e2da; border-radius: 12px; background: #fff;
    padding: 1rem; text-align: center;
}
.vitrine-fallback-card img {
    display: block; width: 100%; height: 220px; object-fit: contain; margin-bottom: .75rem;
}
.vitrine-fallback-card h3 {
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: #8a857c; margin: 0 0 .25rem;
}
.vitrine-fallback-card .vf-name { margin: 0 0 .35rem; font-weight: 600; }
.vitrine-fallback-card .vf-price { margin: 0; color: #9a7b3f; }