/*
Theme Name: Miss Mole Child
Template: kadence
*/

/* ================================
    🎨 CSS Variablen für Konsistenz
    ================================ */
:root {
    --primary-pink: #e94e97;
    --primary-pink-hover: #e91e63;
    --light-pink: #F48FB1;
    --cream-bg: #F9EFD9;
    --header-spacing: 20px;
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --transition: 0.3s ease;
}

/* ================================
    🖼️ Hintergrundbilder
    ================================ */
body {
    background-image: url('https://pinup-fashion.de/wp-content/uploads/2025/05/back-body.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Navigations-Hintergrundbild */

ul#primary-menu.menu {
    background-image: url('https://pinup-fashion.de/wp-content/uploads/2025/05/navigation.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ================================
    🏗️ Header & Layout
    ================================ */
.site-header {
    margin-bottom: var(--header-spacing) !important;
}

/* Header transparent machen */
.site-header-row-container.site-header-top-wrap,
.site-header-row-container.site-header-main-wrap,
.site-header-inner-wrap {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Header-Text-Farben für Lesbarkeit */
.site-header .site-title a,
.site-header .site-description {
    color: #333 !important;
}

/* Suchleiste Styling */
.site-header .search-toggle,
.site-header-row-container.site-header-top-wrap .components-search__search-form-input,
.site-header-row-container.site-header-top-wrap .components-search__search-button {
    color: #333 !important;
}

.site-header-row-container.site-header-top-wrap .components-search__search-form-input {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
}

/* Hauptnavigation Styling */
.site-header-row-container.site-header-main-wrap .main-navigation a,
.site-header-row-container.site-header-main-wrap .main-navigation .menu-item > a {
    color: #333 !important;
}

.site-header-row-container.site-header-main-wrap .main-navigation a:hover,
.site-header-row-container.site-header-main-wrap .main-navigation .menu-item > a:hover {
    color: var(--primary-pink-hover) !important;
}

.site-header-row-container.site-header-main-wrap .main-navigation ul.sub-menu {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.site-header-row-container.site-header-main-wrap .main-navigation ul.sub-menu a {
    color: #333 !important;
}

.site-header-row-container.site-header-main-wrap .main-navigation ul.sub-menu a:hover {
    background-color: rgba(233, 30, 99, 0.1) !important;
}

/* ================================
    📄 Content Layout
    ================================ */
#inner-wrap #primary {
    padding-top: var(--header-spacing) !important;
}

.site-main,
.content-area {
    padding-top: var(--header-spacing) !important;
}

/* Homepage spezifische Anpassungen */
body.home .site-main,
body.home .content-area,
body.home #primary {
    padding-top: var(--header-spacing) !important;
}

body.home.woocommerce-shop #inner-wrap #primary {
    padding-top: var(--header-spacing) !important;
    margin-top: 0 !important;
}

body.home.woocommerce-shop #inner-wrap #primary .content-area,
body.home.woocommerce-shop #inner-wrap .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Weitere spezifische Homepage-Selektoren */
body.home .site-main > .entry-content,
body.home .content-area > .site-main,
body.home #content > .content-area {
    margin-top: 10px !important;
}

/* ================================
    🚫 WooCommerce & Kadence Titel ausblenden
    ================================ */
body.archive.woocommerce h1.page-title,
body.archive.woocommerce .page-header,
.woocommerce-products-header,
.woocommerce .page-title,
.woocommerce-products-header__title,
h1.entry-title,
.entry-header h1,
.woocommerce .entry-header .entry-title,
.woocommerce-archive-description,
.product-archive-title,
.woocommerce-products-header h1,
.page-title-section,
.kadence-title-bar-inner,
.kadence-title-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ================================
    🛒 WooCommerce Produkt-Grid
    ================================ */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

/* ================================
    🎨 Beschreibungs-Bereiche
    ================================ */
body.home div.shop-description,
body.archive div.term-description,
.woocommerce-archive-description.term-description,
.woocommerce-archive-description.shop-description {
    background-color: var(--cream-bg) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* ================================
    🔤 Text-Farben (Cream Theme)
    ================================ */
.custom-category-title h1 {
    color: var(--cream-bg);
}

.kadence-shop-top-row .woocommerce-result-count,
.kadence-shop-top-row p,
.kadence-shop-top-row span,
.kadence-shop-top-row div,
.kadence-shop-top-row .orderby-wrapper label,
.kadence-shop-top-row .woocommerce-ordering label,
.kadence-shop-top-row label,
.kadence-shop-top-row .sort-text,
.kadence-shop-top-row a {
    color: var(--cream-bg) !important;
}

/* Pagination */
ul.page-numbers,
ul.page-numbers li a,
ul.page-numbers li span,
ul.page-numbers li span.current {
    color: var(--cream-bg);
}

ul.page-numbers li a:hover {
    color: #F0F0F0;
}

/* Sidebar Text-Farben */
div.sidebar-inner-wrap,
div.sidebar-inner-wrap p,
div.sidebar-inner-wrap span,
div.sidebar-inner-wrap li,
div.sidebar-inner-wrap a,
div.sidebar-inner-wrap label,
div.sidebar-inner-wrap h2 {
    color: var(--cream-bg) !important;
}

/* ================================
    📱 MOBILE FILTER SYSTEM
    ================================ */

/* Standardmäßig auf Desktop verstecken */
.mobile-filter-container {
    display: none !important;
}

/* Mobile Filter Styling */
@media (max-width: 768px) {
    .mobile-filter-container {
        display: flex !important;
        gap: 10px;
        margin: 20px 0;
        padding: 0 15px;
    }

    /* Mobile Filter Layout - Nebeneinander */
    .mobile-filter-boxes {
        display: flex !important;
        gap: 10px;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    /* Filter Box Styling */
    .filter-box {
        flex: 1;
        min-width: 0;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        overflow: hidden;
    }
    
    /* Filter Box Header */
    .filter-box-header {
        background: var(--light-pink);
        color: white;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding: 12px 15px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        transition: background-color var(--transition);
    }
    
    .filter-box-header:hover,
    .filter-box-header.active {
        background: var(--primary-pink-hover);
    }
    
    /* Toggle Icon */
    .filter-toggle {
        font-size: 12px;
        transition: transform var(--transition);
        color: white;
    }
    
    .filter-box-header.active .filter-toggle {
        transform: rotate(180deg);
    }
    
    /* Filter Box Content */
    .filter-box-content {
        display: none;
        padding: 15px;
        max-height: 300px;
        overflow-y: auto;
        background: #fff;
    }
    
    /* WooCommerce Filter Styling */
    .filter-box-content .widget {
        margin-bottom: 0;
    }
    
    .filter-box-content .widget_layered_nav ul,
    .filter-box-content .yith-wcan-filters ul,
    .filter-box-content .yith-wcan-filter ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .filter-box-content .widget_layered_nav li,
    .filter-box-content .yith-wcan-filters li,
    .filter-box-content .yith-wcan-filter li {
        margin-bottom: 8px;
        padding: 5px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .filter-box-content .widget_layered_nav li:last-child,
    .filter-box-content .yith-wcan-filters li:last-child,
    .filter-box-content .yith-wcan-filter li:last-child {
        border-bottom: none;
    }
    
    /* YITH Farbfilter */
    .filter-box-content .yith-wcan-color-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    
    .filter-box-content .yith-wcan-color {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #ddd;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .filter-box-content .yith-wcan-color:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    .filter-box-content .yith-wcan-color.selected {
        border-color: var(--light-pink);
        box-shadow: 0 0 0 2px rgba(255, 20, 147, 0.3);
    }
    
    /* Preis Filter */
    .filter-price .filter-box-content .price_slider_wrapper {
        padding: 10px 0;
    }
    
    .filter-price .filter-box-content .price_slider {
        margin-bottom: 15px;
    }
    
    .filter-price .filter-box-content .price_slider_amount {
        text-align: center;
        margin-top: 10px;
    }
    
    /* Button Styling */
    .filter-box-content .button,
    .filter-box-content input[type="submit"] {
        background-color: var(--primary-pink);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        width: 100%;
        margin-top: 10px;
        transition: background-color var(--transition);
    }
    
    .filter-box-content .button:hover,
    .filter-box-content input[type="submit"]:hover {
        background-color: var(--primary-pink-hover);
    }
}

/* ================================
    📱 RESPONSIVE BREAKPOINTS
    ================================ */

/* Large Desktop */
@media (min-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    /* Sidebar ausblenden */
    .sidebar-primary,
    .widget-area-sidebar,
    aside#secondary.primary-sidebar.widget-area.sidebar-slug-primary-sidebar {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .mobile-filter-container {
        padding: 0 10px;
    }
}

/* Very Small Mobile - Filter untereinander */
@media (max-width: 400px) {
    .mobile-filter-boxes {
        flex-direction: column !important;
        gap: 15px;
    }
    
    .filter-box {
        min-width: 100%;
    }
}




/* ================================
    🏠 STARTSEITEN-SPEZIFISCHE HINTERGRUND-FIXES
    ================================ */

/* Hauptcontainer auf der Startseite transparent machen */
body.home #wrapper,
body.home #inner-wrap,
body.home .site,
body.home .site-container,
body.home .content-wrap,
body.home .site-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Startseiten-spezifische Container */
body.home .wp-site-blocks,
body.home .entry-content,
body.home .page-content,
body.home .site-main,
body.home .content-area,
body.home #primary,
body.home #content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Kadence spezifische Container */
body.home .kadence-blocks-row,
body.home .kb-row-layout-wrap,
body.home .wp-block-kadence-rowlayout,
body.home .kadence-blocks-column,
body.home .kb-inner-column-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* WooCommerce Startseiten-Container */
body.home.woocommerce .woocommerce,
body.home.woocommerce .woocommerce-page,
body.home.woocommerce .site-main,
body.home.woocommerce #primary {
    background: transparent !important;
    background-color: transparent !important;
}

/* Gutenberg/Block Editor Container */
body.home .wp-block-group,
body.home .wp-block-group__inner-container,
body.home .wp-block-cover,
body.home .wp-block-columns,
body.home .wp-block-column {
    background: transparent !important;
    background-color: transparent !important;
}

/* Weitere mögliche Container */
body.home .container,
body.home .container-fluid,
body.home .main-content,
body.home .page-wrapper,
body.home .content-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* ================================
    🎨 ALTERNATIVE: Hintergrund direkt auf Startseiten-Container
    ================================ */

/* Falls das obige nicht funktioniert, verwenden Sie diese Alternative: */

body.home #wrapper {
    background-image: url('https://pinup-fashion.de/wp-content/uploads/2025/05/back-body.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}



/* ================================
    🛒 KATEGORIESEITEN-SPEZIFISCHE HINTERGRUND-FIXES
    ================================ */

/* WooCommerce Kategorieseiten Container transparent machen */
body.archive.woocommerce #wrapper,
body.archive.woocommerce #inner-wrap,
body.archive.woocommerce .site,
body.archive.woocommerce .site-container,
body.archive.woocommerce .content-wrap,
body.archive.woocommerce .site-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* WooCommerce Archive spezifische Container */
body.archive.woocommerce .woocommerce,
body.archive.woocommerce .woocommerce-page,
body.archive.woocommerce .site-main,
body.archive.woocommerce #primary,
body.archive.woocommerce #content,
body.archive.woocommerce .content-area {
    background: transparent !important;
    background-color: transparent !important;
}

/* Produktkategorien Container */
body.tax-product_cat #wrapper,
body.tax-product_cat #inner-wrap,
body.tax-product_cat .site,
body.tax-product_cat .site-container,
body.tax-product_cat .content-wrap,
body.tax-product_cat .site-content,
body.tax-product_cat .woocommerce,
body.tax-product_cat .site-main,
body.tax-product_cat #primary {
    background: transparent !important;
    background-color: transparent !important;
}

/* Shop-Seite Container */
body.woocommerce-shop #wrapper,
body.woocommerce-shop #inner-wrap,
body.woocommerce-shop .site,
body.woocommerce-shop .site-container,
body.woocommerce-shop .content-wrap,
body.woocommerce-shop .site-content,
body.woocommerce-shop .woocommerce,
body.woocommerce-shop .site-main,
body.woocommerce-shop #primary {
    background: transparent !important;
    background-color: transparent !important;
}

/* Kadence spezifische Container für Archive */
body.archive .kadence-blocks-row,
body.archive .kb-row-layout-wrap,
body.archive .wp-block-kadence-rowlayout,
body.woocommerce-shop .kadence-blocks-row,
body.woocommerce-shop .kb-row-layout-wrap,
body.tax-product_cat .kadence-blocks-row,
body.tax-product_cat .kb-row-layout-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* Weitere mögliche Archive Container */
body.archive .container,
body.archive .container-fluid,
body.archive .main-content,
body.archive .page-wrapper,
body.archive .content-wrapper,
body.woocommerce-shop .container,
body.woocommerce-shop .container-fluid,
body.tax-product_cat .container,
body.tax-product_cat .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
}

/* ================================
    🎨 ALTERNATIVE: Hintergrund direkt auf Archive-Container
    ================================ */

/* Falls das obige nicht funktioniert, verwenden Sie diese Alternative: */

body.archive.woocommerce #wrapper,
body.tax-product_cat #wrapper,
body.woocommerce-shop #wrapper {
    background-image: url('https://pinup-fashion.de/wp-content/uploads/2025/05/back-body.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* ================================
    🔍 DEBUG: Archive Container sichtbar machen (temporär)
    ================================ */

/* Entfernen Sie die Kommentare unten, um alle Container auf Kategorieseiten zu sehen */
/*
body.archive.woocommerce *,
body.tax-product_cat *,
body.woocommerce-shop * {
    border: 1px solid blue !important;
    background: rgba(0,0,255,0.05) !important;
}
*/