/* Zielaro Shop 4.2.6 – einheitliche App-Heros, stabiler Shop und WooCommerce-Konto */

/*
 * Der zentral verwaltete Navigationsblock wird in main.css nach den alten
 * Media Queries erneut auf display:flex gesetzt. Diese abschließende Regel
 * stellt sicher, dass Navigation, Logo und Aktionen auf kleineren Desktops
 * nicht mehr ineinanderlaufen.
 */
.zielaro-header-main{
    min-width:0;
}
.zielaro-brand-wrap,
.main-navigation,
.zielaro-header-actions{
    min-width:0;
}
.zielaro-brand-wrap{
    max-width:min(360px,31vw);
}
.zielaro-brand-wrap .custom-logo-link{
    max-width:100%;
}
.zielaro-brand-wrap .custom-logo{
    max-width:100%;
}
.zielaro-primary-menu{
    max-width:100%;
    white-space:nowrap;
}
.zielaro-header-actions{
    white-space:nowrap;
}

@media(max-width:1120px){
    body:not(.zielaro-header-app-style) .main-navigation,
    .zielaro-header-app-style .main-navigation{
        display:none!important;
    }
    .zielaro-menu-toggle{
        display:grid!important;
    }
    .zielaro-header-main,
    .zielaro-header-brand-center .zielaro-header-main,
    .zielaro-header-app-style .zielaro-header-main{
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-areas:none!important;
    }
    .zielaro-header-brand-center .zielaro-brand-wrap,
    .zielaro-header-brand-center .zielaro-header-actions{
        grid-area:auto!important;
    }
    .zielaro-brand-wrap{
        max-width:min(420px,60vw);
    }
}

/* Einheitliche, appnahe Unterseitenbühne für WordPress und WooCommerce. */
.zielaro-page-hero{
    min-height:clamp(210px,25vw,330px);
    display:flex;
    align-items:center;
}
.zielaro-page-hero .zielaro-kicker{
    margin-bottom:14px;
}
.zielaro-page-hero h1{
    text-wrap:balance;
}
.zielaro-page-hero--commerce{
    background:
        radial-gradient(circle at 84% 12%,color-mix(in srgb,var(--za-primary) 17%,transparent),transparent 30%),
        radial-gradient(circle at 18% 105%,color-mix(in srgb,var(--za-accent) 10%,transparent),transparent 28%),
        linear-gradient(180deg,#f8fbfa 0%,color-mix(in srgb,var(--za-bg) 91%,#dff3ee) 100%);
}
.zielaro-page-hero--woocommerce .zielaro-kicker{
    color:var(--za-primary);
}
.zielaro-subpage-shell--commerce{
    padding-top:clamp(30px,5vw,64px);
}
.zielaro-commerce-content{
    min-width:0;
}

/* Rechtstexte folgen demselben Aufbau: Hero, danach eine breite Dokumentkarte. */
.zielaro-legal-layout{
    display:block;
    width:min(100%,1160px);
    max-width:1160px;
}
.zielaro-legal-content{
    width:100%;
    max-width:none!important;
    margin:0;
}
.zielaro-legal-document-meta{
    display:flex;
    align-items:center;
    gap:13px;
    margin:-6px 0 clamp(28px,5vw,48px);
    padding:14px 16px;
    border:1px solid var(--za-border);
    border-radius:16px;
    background:linear-gradient(145deg,#f7fbfa,#edf7f4);
}
.zielaro-legal-document-meta__icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:13px;
    background:var(--za-secondary);
    color:#fff;
}
.zielaro-legal-document-meta span:last-child{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.zielaro-legal-document-meta strong{
    color:var(--za-secondary);
    line-height:1.3;
}
.zielaro-legal-document-meta small{
    color:var(--za-muted);
    font-size:.78rem;
}

/* WooCommerce-Archiv: native Titel und Legacy-Sidebars dürfen das Layout nicht mehr zerlegen. */
.zielaro-commerce-main{
    padding:0!important;
}
.zielaro-commerce-main .woocommerce-products-header,
.zielaro-commerce-main .widget-area,
.zielaro-commerce-main #secondary,
.woocommerce-page .site-main + .widget-area{
    display:none!important;
}
.zielaro-commerce-content > .woocommerce-breadcrumb{
    margin:0 0 clamp(24px,4vw,38px)!important;
    padding:10px 14px;
    width:max-content;
    max-width:100%;
    border:1px solid var(--za-border);
    border-radius:999px;
    background:color-mix(in srgb,var(--za-surface) 90%,transparent);
    box-shadow:0 8px 26px rgba(16,40,45,.05);
}
.zielaro-commerce-content .woocommerce-notices-wrapper:empty{
    display:none;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
    float:none!important;
    margin:0!important;
}
.woocommerce .woocommerce-ordering select{
    min-height:46px;
    padding:8px 42px 8px 14px;
    border:1px solid var(--za-border);
    border-radius:14px;
    background-color:var(--za-surface);
    color:var(--za-text);
}
.woocommerce .woocommerce-result-count{
    display:flex;
    align-items:center;
    min-height:46px;
    color:var(--za-muted);
}
.woocommerce .woocommerce-result-count + .woocommerce-ordering{
    margin-left:auto!important;
}
.zielaro-commerce-content:has(> .woocommerce-result-count){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 18px;
}
.zielaro-commerce-content:has(> .woocommerce-result-count) > .woocommerce-breadcrumb,
.zielaro-commerce-content:has(> .woocommerce-result-count) > .woocommerce-notices-wrapper,
.zielaro-commerce-content:has(> .woocommerce-result-count) > ul.products,
.zielaro-commerce-content:has(> .woocommerce-result-count) > nav.woocommerce-pagination{
    flex:0 0 100%;
    width:100%;
}
.woocommerce ul.products{
    clear:both;
    width:100%;
}
.woocommerce nav.woocommerce-pagination{
    margin-top:clamp(30px,5vw,52px);
}
.woocommerce nav.woocommerce-pagination ul{
    display:inline-flex;
    gap:7px;
    padding:7px!important;
    border:1px solid var(--za-border)!important;
    border-radius:16px;
    background:var(--za-surface);
}
.woocommerce nav.woocommerce-pagination ul li{
    border:0!important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
    display:grid;
    place-items:center;
    min-width:38px;
    min-height:38px;
    padding:7px!important;
    border-radius:11px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
    background:var(--za-primary)!important;
    color:#fff!important;
}

/* Produkttitel stehen im Hero; die Zusammenfassung beginnt sauber mit Tarifdaten und Preis. */
.single-product div.product{
    align-items:start;
}
.single-product div.product .summary{
    margin-top:0!important;
}
.single-product div.product .summary > :first-child{
    margin-top:0!important;
}
.single-product .zielaro-product-access-meta{
    margin-top:0;
}
.single-product .woocommerce-product-gallery,
.single-product .summary,
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .upsells{
    min-width:0;
}

/*
 * Mein Konto: WooCommerce setzt weiterhin float- und Prozentbreiten. Die
 * folgenden Resets sorgen für ein echtes zweispaltiges App-Dashboard.
 */
.woocommerce-account .zielaro-content-card--commerce{
    max-width:1240px;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{
    display:none!important;
    content:none!important;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
    float:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    min-width:0;
}
body.logged-in.woocommerce-account .woocommerce{
    display:grid!important;
    grid-template-columns:minmax(220px,260px) minmax(0,1fr)!important;
    align-items:start;
    gap:clamp(20px,3vw,34px)!important;
}
.woocommerce-MyAccount-navigation ul{
    position:sticky;
    top:calc(var(--za-header-height) + 24px);
    gap:7px;
    padding:12px!important;
    border-radius:20px!important;
    box-shadow:0 12px 38px rgba(16,40,45,.07);
}
.woocommerce-MyAccount-navigation li{
    margin:0!important;
    padding:0!important;
    list-style:none!important;
}
.woocommerce-MyAccount-navigation a{
    display:flex!important;
    align-items:center;
    min-height:46px;
    padding:11px 14px!important;
    border-radius:13px!important;
}
.woocommerce-MyAccount-content{
    min-height:260px;
    padding:clamp(24px,4vw,42px)!important;
    border-radius:22px!important;
    box-shadow:0 18px 52px rgba(16,40,45,.08)!important;
}
.woocommerce-MyAccount-content > :first-child{
    margin-top:0!important;
}
.woocommerce-MyAccount-content > :last-child{
    margin-bottom:0!important;
}
.woocommerce-MyAccount-content p{
    max-width:78ch;
}
.woocommerce-MyAccount-content mark{
    padding:2px 6px;
    border-radius:7px;
    background:#e6f5f1;
    color:var(--za-secondary);
}
.woocommerce-MyAccount-content .woocommerce-Addresses{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.woocommerce-MyAccount-content .woocommerce-Address{
    float:none!important;
    width:auto!important;
    padding:20px;
    border:1px solid var(--za-border);
    border-radius:18px;
    background:#f9fcfb;
}
body:not(.logged-in).woocommerce-account .woocommerce{
    display:block!important;
}
body:not(.logged-in).woocommerce-account .u-columns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--za-grid-gap);
}
body:not(.logged-in).woocommerce-account .u-column1,
body:not(.logged-in).woocommerce-account .u-column2{
    float:none!important;
    width:auto!important;
}

/* Cart, Checkout und Kontoseiten füllen die Inhaltskarte ohne Fremdbreiten. */
.zielaro-content-card--commerce .woocommerce,
.zielaro-content-card--commerce .wc-block-cart,
.zielaro-content-card--commerce .wc-block-checkout{
    width:100%;
    max-width:none!important;
}
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review{
    min-width:0;
}

/* Archive, Suche, 404 und Beiträge nutzen denselben Inhaltsrhythmus. */
.zielaro-archive-page .zielaro-content-layout,
.zielaro-search-page .zielaro-content-layout{
    padding-block:0;
}
.zielaro-single-content .zielaro-single-image{
    margin-top:0;
}
.zielaro-not-found-page .zielaro-error-page{
    text-align:center;
}
.zielaro-not-found-page .zielaro-error-page .zielaro-hero-actions{
    justify-content:center;
}

@media(max-width:900px){
    body.logged-in.woocommerce-account .woocommerce{
        grid-template-columns:1fr!important;
    }
    .woocommerce-MyAccount-navigation ul{
        position:static;
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        scrollbar-width:thin;
    }
    .woocommerce-MyAccount-navigation li{
        flex:0 0 auto;
        scroll-snap-align:start;
    }
    .woocommerce-MyAccount-navigation a{
        white-space:nowrap;
    }
    .woocommerce-MyAccount-content .woocommerce-Addresses{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .zielaro-page-hero{
        min-height:190px;
    }
    .zielaro-commerce-content > .woocommerce-breadcrumb{
        width:100%;
        border-radius:14px;
    }
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering,
    .woocommerce .woocommerce-ordering select{
        width:100%;
    }
    .woocommerce .woocommerce-result-count + .woocommerce-ordering{
        margin-left:0!important;
    }
    .zielaro-content-card--commerce{
        padding:20px 16px!important;
    }
    .woocommerce-MyAccount-content{
        padding:20px 17px!important;
    }
    body:not(.logged-in).woocommerce-account .u-columns{
        grid-template-columns:1fr;
    }
    .zielaro-legal-document-meta{
        align-items:flex-start;
        padding:13px;
    }
}