/*
------------------------------------------------------------
arsvenditio · CSS-Core · Ecwid

Version: 0.1.6
Stand: 2026-08-06

Zweck:
Gemeinsame, künstlerneutrale Regeln für Ecwid-Einbindungen.
------------------------------------------------------------
*/

/*
 * Technische Formularfelder bleiben für Ecwid und die Bestellung
 * im DOM erhalten, nehmen in der sichtbaren Produktansicht aber
 * keinerlei Platz ein. Die Klasse wird immer auf den vollständigen
 * Feldblock gesetzt – nicht nur auf das eigentliche Eingabeelement.
 */
.arsEcwidTechnikfeld--verborgen {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}


/*
 * Globale Rücknavigation aus Ecwid-Produktansichten zurück in die
 * jeweilige arsvenditio-Erlebniswelt. Normalerweise übernimmt der bereits
 * vorhandene Ecwid-Link seine eigene Gestaltung. Diese Regel greift nur
 * als Fallback, falls eine Storefront keinen solchen Link ausgibt.
 */
.arsEcwidRuecklink--fallback {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1rem;

    color: var(--ars-color-black, #000000) !important;
    font-family: var(--ars-font-body-bold, "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif) !important;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}

.arsEcwidRuecklink--fallback::before {
    content: "←";
    margin-right: 0.45em;
}

.arsEcwidRuecklink--fallback:hover,
.arsEcwidRuecklink--fallback:focus-visible {
    color: var(--ars-color-primary, #cf0e12) !important;
}

.arsEcwidRuecklink--fallback:focus-visible {
    outline: var(--ars-focus-width, 3px) solid var(--ars-color-primary, #cf0e12);
    outline-offset: 4px;
}


/* ==========================================================
   SHOP-KONTEXTNAVIGATION

   Gemeinsame Navigation für ausgelagerte Ecwid-Produktseiten.
   Die Komponente ist in MonsterBar-Shop und MonsterGalerie-Shop
   strukturell und gestalterisch identisch. Nur Text und Ziel
   unterscheiden sich.
========================================================== */
.ars-shop-context-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45em;
    margin: 0 0 1rem;

    color: var(--ars-color-grey, #666666);
    font-family: var(--ars-font-body-bold, "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}


/* Die HTML-Quelle wird nur zum stabilen Klonen nach Ecwid-Neurendern
   vorgehalten und nimmt im Seitenlayout keinen Platz ein. */
#arsShopContextNavSource[hidden] {
    display: none !important;
}

/* Innerhalb der Produktinformationsspalte steht die Navigation direkt
   oberhalb des Produkttitels. */
.ars-shop-context-nav[data-ars-context-nav="mounted"] {
    width: 100%;
}

.ars-shop-context-nav__link {
    color: inherit !important;
    text-decoration: none !important;
}

.ars-shop-context-nav__link:hover,
.ars-shop-context-nav__link:focus-visible {
    color: var(--ars-color-primary, #cf0e12) !important;
}

.ars-shop-context-nav__link:focus-visible {
    outline: var(--ars-focus-width, 3px) solid var(--ars-color-primary, #cf0e12);
    outline-offset: 4px;
}

.ars-shop-context-nav__delimiter {
    color: var(--ars-color-grey, #666666);
    user-select: none;
}

/* Auf den ausgelagerten Stufe-3-Seiten ersetzt die eigene
   Kontextnavigation den vollständigen Ecwid-Breadcrumb. */
.ars-shop-view .ec-size .ec-store .ec-breadcrumbs,
.ars-shop-view .ec-store .ec-breadcrumbs,
.ars-shop-view .ec-breadcrumbs {
    display: none !important;
}