/**
 * Merchant 36 – WARKINGS (shop.warkings.rocks / devshop)
 * Komponenten: public/tailwind/css/theme-components.css
 * Marken: Gold + Blutrot, Medieval Sharp (Menü/Display), Amon-ähnlicher Full-Page-Hero-BG
 */

:root,
[data-theme="light"],
[data-theme="dark"] {
    --tw-font-display: "Medieval Sharp", "Times New Roman", serif;
    --tw-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tw-font-price: var(--tw-font-body);
    --tw-font-product-title: var(--tw-font-body);

    --tw-color-ink: #f3ece0;
    --tw-color-moss: #0a0908;
    --tw-color-leaf: #c9a227;
    --tw-color-sand: #14110e;
    --tw-color-mist: #100e0c;
    --tw-color-ember: #9b1c1c;

    --color-base-100: #0c0b0a;
    --color-base-200: rgba(12, 11, 10, 0.92);
    --color-base-300: rgba(201, 162, 39, 0.22);
    --color-base-content: #f3ece0;
    --color-primary: #c9a227;
    --color-primary-content: #0a0908;
    --color-secondary: #f3ece0;
    --color-secondary-content: #0c0b0a;
    --color-accent: #9b1c1c;
    --color-accent-content: #ffffff;
    --color-neutral: #0a0908;
    --color-neutral-content: #f3ece0;

    --tw-cta: #c9a227;
    --tw-cta-hover: #e0bc4a;
    --tw-cta-content: #0a0908;
    --tw-header-fixed-bg: rgba(10, 9, 8, 0.9);
    --tw-header-border-color: rgba(201, 162, 39, 0.15);
    --tw-header-fixed-blur: 10px;
    --tw-header-link-color: #f3ece0;
    --tw-header-link-hover: #ffffff;
    --tw-ink-bright: #ffffff;
    --tw-price-color: #ffffff;

    --tw-logo-max: 260px;
    --tw-logo-max-mobile: 140px;
    /* Wenige Menüpunkte – großzügiger als Standard-Merch */
    --tw-nav-link-size: 1.3rem;
    --tw-wk-header-logo-above-h: 11.5rem;

    --tw-product-card-surface: rgba(255, 255, 255, 0.96);
    --tw-product-card-pad: 0.65rem;
    --tw-product-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

body {
    background-color: #0c0b0a;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.95) 100%),
        url("/daten/merchant/36/img/2026/shop-hero-bg.webp"),
        url("/daten/merchant/36/img/2026/shop-hero-bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    color: var(--color-base-content);
    font-family: var(--tw-font-body);
}

@media (max-width: 767px) {
    body {
        background-attachment: scroll;
    }
}

.font-display,
.site-nav-link,
.site-header .btn-ghost,
.site-header .btn-primary,
.shop-home-intro__title,
.shop-banner-slider__title,
.shop-banner-slider__eyebrow {
    font-family: var(--tw-font-display) !important;
    font-weight: 400 !important;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.product-card__title {
    font-family: var(--tw-font-product-title) !important;
}

.product-card__price,
.product-detail__price {
    font-family: var(--tw-font-price) !important;
}

.shop-home-intro__eyebrow {
    color: var(--color-primary) !important;
    letter-spacing: 0.28em;
}

.shop-home-intro__cta {
    border-color: color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
    color: var(--color-primary) !important;
}

.shop-home-intro__cta:hover {
    border-color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Home: deckender Streifen (#0c0b0a) zwischen Menü und Slider – kein durchscheinender Body-Hero */
body[data-page="home"]:has(.shop-banner-slider) .shop-banner-slider {
    margin-top: 0;
    padding-top: 1rem;
    background-color: #0c0b0a;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    body[data-page="home"]:has(.shop-banner-slider) .shop-banner-slider {
        padding-top: 1.35rem;
    }
}

@media (min-width: 1024px) {
    /* Header höher als Standard logo-above (9.25rem) → Spacer auf allen Seiten anpassen */
    body:has(.site-header--logo-above) .site-header-spacer {
        height: calc(var(--tw-wk-header-logo-above-h) + env(safe-area-inset-top, 0px));
    }

    .site-header.site-header--logo-above:not(.nav-fixed):not([data-nav-fixed="true"]) {
        height: var(--tw-wk-header-logo-above-h);
    }

    .site-header--logo-above:not(.nav-fixed):not([data-nav-fixed="true"]) .site-header__inner {
        min-height: var(--tw-wk-header-logo-above-h);
        height: var(--tw-wk-header-logo-above-h);
        gap: 0.55rem;
        padding-top: 0.75rem;
        padding-bottom: 1.1rem;
    }

    .site-header--logo-above:not(.nav-fixed):not([data-nav-fixed="true"]) .site-nav-desktop {
        padding-left: 0.75rem;
        padding-right: clamp(8.5rem, 12vw, 11rem);
        row-gap: 0.25rem;
    }

    .site-header--logo-above .site-nav-link {
        font-size: var(--tw-nav-link-size);
        padding: 0.45rem 0.7rem;
        letter-spacing: 0.06em;
    }
}

@media (min-width: 1280px) {
    .site-header--logo-above .site-nav-link {
        font-size: 1.42rem !important;
        padding: 0.5rem 0.85rem !important;
    }
}

@media (min-width: 1536px) {
    .site-header--logo-above .site-nav-link {
        font-size: 1.58rem !important;
        padding: 0.55rem 0.95rem !important;
    }
}

@media (min-width: 1024px) {
    .site-header--logo-above:not(.nav-fixed):not([data-nav-fixed="true"]) img.logo-merchant {
        max-width: 338px;
    }

    .site-header--logo-above.nav-fixed img.logo-merchant,
    .site-header--logo-above[data-nav-fixed="true"] img.logo-merchant {
        max-width: 150px;
    }

    .site-header.site-header--logo-above.nav-fixed,
    .site-header.site-header--logo-above[data-nav-fixed="true"] {
        background-color: transparent !important;
        border-bottom-color: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}

/*
 * Unterseiten: Breadcrumb schließt an den Header an (gleiche dunkle Schicht).
 * Logo im Breadcrumb bleibt aus.
 */
body:has(.site-header--logo-above) .site-breadcrumb {
    margin-top: 0;
    background: linear-gradient(
        180deg,
        rgba(12, 11, 10, 0.9) 0%,
        rgba(12, 11, 10, 0.55) 62%,
        transparent 100%
    ) !important;
    border: none !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.07) !important;
    box-shadow: none !important;
    backdrop-filter: blur(6px);
}

body:has(.site-header--logo-above) .site-breadcrumb__logo,
body:has(.site-header--logo-above) .site-breadcrumb__title {
    display: none !important;
}

/* Pfadzeile: kompakt, rechts in der Content-Spalte (max-w-6xl) */
body:has(.site-header--logo-above) .site-breadcrumb__inner {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    padding-top: 0.35rem;
    padding-bottom: 0.65rem;
}

body:has(.site-header--logo-above) .site-breadcrumb__row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end !important;
    width: 100%;
    gap: 0;
}

body:has(.site-header--logo-above) .site-breadcrumb__row > nav {
    display: block;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

body:has(.site-header--logo-above) .site-breadcrumb__trail {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    align-items: baseline;
    width: auto;
    max-width: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    text-align: right;
    font-family: var(--tw-font-body) !important;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: none;
    gap: 0.15rem 0.4rem;
}

@media (min-width: 640px) {
    body:has(.site-header--logo-above) .site-breadcrumb__trail {
        font-size: 0.8125rem;
    }
}

body:has(.site-header--logo-above) .site-breadcrumb__trail li {
    display: inline-flex;
    align-items: baseline;
    flex: 0 1 auto;
    max-width: 100%;
}

body:has(.site-header--logo-above) .site-breadcrumb__trail li:not(:last-child)::after {
    opacity: 0.3;
    margin-left: 0.4rem;
}

body:has(.site-header--logo-above) .site-breadcrumb__trail a {
    color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
    text-shadow: none;
    transition: color 0.2s ease;
}

body:has(.site-header--logo-above) .site-breadcrumb__trail a:hover {
    color: color-mix(in srgb, var(--color-base-content) 85%, transparent);
}

body:has(.site-header--logo-above) .site-breadcrumb__trail li[aria-current="page"] a {
    color: color-mix(in srgb, var(--color-primary) 70%, var(--color-base-content)) !important;
    font-weight: 400;
}

body:has(.site-breadcrumb) .product-detail__shell {
    padding-top: 0.5rem;
}

footer,
.site-footer {
    background-color: rgba(0, 0, 0, 0.78) !important;
    border-top: 1px solid rgba(201, 162, 39, 0.12);
}

/* Slider: oben (unter Header) + unten abdunkeln wie Body #0c0b0a; links Text lesbar */
.shop-banner-slider {
    isolation: isolate;
}

.shop-banner-slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: min(38%, 14rem);
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(12, 11, 10, 0.94) 0%,
        rgba(12, 11, 10, 0.72) 55%,
        transparent 100%
    );
}

.shop-banner-slider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 5rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(12, 11, 10, 0.88) 100%);
}

.shop-banner-slider__shade {
    background:
        linear-gradient(
            105deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.65) 42%,
            rgba(0, 0, 0, 0.35) 100%
        ) !important;
}

/* Dunkler Header mit leichter Transparenz – Home + alle Unterseiten (logo-above) */
body:has(.site-header--logo-above) .site-header.nav-top:not(.nav-fixed):not([data-nav-fixed="true"]) {
    background: linear-gradient(
        180deg,
        rgba(12, 11, 10, 0.96) 0%,
        rgba(12, 11, 10, 0.78) 72%,
        rgba(12, 11, 10, 0.35) 100%
    ) !important;
    border-bottom-color: rgba(201, 162, 39, 0.08) !important;
}

@media (min-width: 1024px) {
    body:has(.site-header--logo-above) .site-header.site-header--logo-above.nav-top:not(.nav-fixed):not([data-nav-fixed="true"]) {
        background: transparent !important;
    }

    body:has(.site-header--logo-above) .site-header.site-header--logo-above.nav-top:not(.nav-fixed):not([data-nav-fixed="true"])::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(12, 11, 10, 0.97) 0%,
            rgba(12, 11, 10, 0.92) 55%,
            rgba(12, 11, 10, 0.88) 100%
        );
        border-bottom: 1px solid rgba(201, 162, 39, 0.1);
    }

    /* Unterseiten: Header ohne eigene Kante – Breadcrumb setzt direkt darauf */
    body:has(.site-header--logo-above):has(.site-breadcrumb) .site-header.site-header--logo-above.nav-top:not(.nav-fixed):not([data-nav-fixed="true"])::before {
        border-bottom: none;
    }

    /* Home: Unterkante deckend zum Slider-Streifen */
    body[data-page="home"]:has(.shop-banner-slider) .site-header.site-header--logo-above.nav-top:not(.nav-fixed):not([data-nav-fixed="true"])::before {
        background: linear-gradient(
            180deg,
            rgba(12, 11, 10, 0.97) 0%,
            rgba(12, 11, 10, 0.92) 55%,
            #0c0b0a 88%,
            #0c0b0a 100%
        );
    }

    body:has(.site-header--logo-above) .site-header.site-header--logo-above.nav-top:not(.nav-fixed):not([data-nav-fixed="true"]) .site-header__inner {
        position: relative;
        z-index: 1;
    }
}

.shop-banner-slider__eyebrow {
    color: var(--color-primary) !important;
}

.product-list-grid .product-card__media {
    background-color: var(--tw-product-card-surface) !important;
    box-shadow: var(--tw-product-card-shadow);
}

.product-card--sold-out .product-card__badge {
    font-family: var(--tw-font-display) !important;
    letter-spacing: 0.12em;
}

.user-auth__submit {
    background: linear-gradient(180deg, #e0bc4a 0%, #c9a227 100%) !important;
    color: #0a0908 !important;
}

.footer-payment-icons,
.product_share,
.product_sort_info {
    display: none !important;
}
.plus-hero-slide__media-frame {
    background: rgba(255, 255, 255, 0.15);
}