/* Shop – gemeinsame Basis (Shell, Layout) */
/* Shop-Bereich (WooCommerce) – Content-Layout */

body.ff-shop-shell {
    --ff-shop-header-gap: 100px;
    --ff-shop-hero-neuheiten-gap: 150px;
    --ff-shop-hero-min-height: 800px;
    /* Feste Header-Höhe (expanded) — darf nicht mit --ff-header-stack-h mitlaufen, sonst springt der Hero-Inhalt beim Scrollen */
    --ff-shop-hero-header-base: 200px;
}

/*
 * Shop + Advanced Ads (ff-ad-bg): wie Website — Wallpaper links/rechts,
 * schwarze Mittelsäule 1000px (ff-ads.css ::after), Details in ff-ads.css.
 * Ohne ff-ad-bg: Fallback komplett schwarz.
 */
html body.ff-shop-shell.ff-ad-bg {
    background-color: #e8e8e8 !important;
    scrollbar-color: #b43526 #e8e8e8;
}

html body.ff-shop-shell:not(.ff-ad-bg) {
    background: #000 !important;
    scrollbar-color: #b43526 #000;
}

html body.ff-shop-shell:not(.ff-ad-bg) .ff-content-wrap,
html body.ff-shop-shell:not(.ff-ad-bg) .site,
html body.ff-shop-shell:not(.ff-ad-bg) .site-content,
html body.ff-shop-shell:not(.ff-ad-bg) .content-area,
html body.ff-shop-shell:not(.ff-ad-bg) #main.site-main,
html body.ff-shop-shell:not(.ff-ad-bg) #main.site-main > article,
html body.ff-shop-shell:not(.ff-ad-bg) .inside-article,
html body.ff-shop-shell:not(.ff-ad-bg) #ff-shop-primary,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-wrap,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-neuheiten,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-ef-ausgaben,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-ef-hefte,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-favoriten,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-hero,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-archive,
html body.ff-shop-shell:not(.ff-ad-bg) .ff-shop-single {
    background-color: #000 !important;
}

/* Hero volle Breite schwarz (über Wallpaper in der Mitte) */
html body.ff-shop-shell.ff-ad-bg .ff-shop-hero {
    background-color: #000 !important;
}

body.ff-shop-shell #main.site-main {
    display: block !important;
    width: 100% !important;
    max-width: min(var(--ff-layout-max), calc(100% - 2 * var(--ff-layout-gutter))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.ff-shop-shell #main.site-main > article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}

body.ff-shop-shell #main.site-main > article .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}

body.ff-shop-main-page .inside-article > .entry-header,
body.ff-shop-main-page .entry-header .entry-title,
body.ff-shop-main-page h1.entry-title:not(.screen-reader-text),
body.woocommerce-shop .page-header,
body.woocommerce-shop .rank-math-breadcrumb,
body.woocommerce-shop .yoast-breadcrumb,
body.woocommerce-shop nav.woocommerce-breadcrumb {
    display: none !important;
}

body.ff-shop-main-page .woocommerce-products-header,
body.ff-shop-main-page .woocommerce-no-products-found,
body.ff-shop-main-page .woocommerce-result-count,
body.ff-shop-main-page .term-description {
    display: none !important;
}

body.ff-shop-main-page .site-main,
body.ff-shop-main-page .inside-article,
body.ff-shop-main-page .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

body.ff-shop-main-page #ff-shop-primary.ff-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    box-sizing: border-box;
}

body.ff-shop-main-page .ff-shop-wrap {
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    padding: 0;
    box-sizing: border-box;
}


/* ── Archiv / Wrap ── */
.ff-shop-archive,
.ff-shop-single {
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    background: #000;
    font-family: 'Barlow Semi Condensed', sans-serif;
}

.ff-shop-wrap {
    max-width: min(var(--ff-layout-max), calc(100% - 2 * var(--ff-layout-gutter)));
    width: 100%;
    margin: 0 auto;
    padding: 24px 0 0;
    box-sizing: border-box;
}

.ff-shop-archive-header {
    margin-bottom: 28px;
}

.ff-shop-archive-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #fff;
}

.ff-shop-archive .woocommerce-result-count,
.ff-shop-archive .woocommerce-ordering {
    margin-bottom: 20px;
    color: #fff;
}

.ff-shop-archive ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 3vw, 32px);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    clear: both;
}

.ff-shop-archive ul.products::before,
.ff-shop-archive ul.products::after {
    display: none;
}

.ff-shop-archive ul.products li.product {
    margin: 0;
    width: 100%;
    max-width: none;
    float: none;
}

@media (max-width: 782px) {
    .ff-shop-wrap {
        padding-left: max(12px, env(safe-area-inset-left, 0));
        padding-right: max(12px, env(safe-area-inset-right, 0));
    }

    body.ff-shop-main-page .ff-shop-wrap {
        padding-left: max(12px, env(safe-area-inset-left, 0));
        padding-right: max(12px, env(safe-area-inset-right, 0));
    }

    .ff-shop-archive ul.products {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    .ff-shop-archive ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive: Shell-Variablen ── */
@media (max-width: 1024px) {
    body.ff-shop-shell {
        --ff-shop-hero-header-base: 0;
        --ff-shop-hero-neuheiten-gap: 64px;
        --ff-shop-header-gap: 32px;
    }