/**
 * Storefront home section stack (compose shell wrappers).
 *
 * Used when HomePageComposer sets homeUseSectionShell (Multipurpose / manti pilot, Electronics).
 * Inner theme partials keep their legacy spacing until Phase 2 section refactors
 * move rhythm here via --storefront-home-section-gap.
 */

body[class*="storefront-theme-"] {
    --storefront-home-section-gap: 0;
    --storefront-home-section-first-scroll-margin: 96px;
    /*
     * Last composed block keeps its own original bottom padding (e.g. cta `py-0`, top rated
     * `pb-100`). No extra shell padding — original manti sits flush above the footer.
     */
    --storefront-home-section-last-padding: 0;
    --storefront-home-header-clearance: 24px;
}

body.storefront-theme-manti {
    --storefront-home-section-first-scroll-margin: 96px;
    --storefront-home-featuers-padding-bottom: 70px;
    --storefront-home-featuers-padding-top: 30px;
    --storefront-home-category-padding-bottom: 100px;
    --storefront-home-flash-padding-bottom: 100px;
    --storefront-home-featured-padding-bottom: 100px;
    --storefront-home-middle-banner-padding-bottom: 70px;
    --storefront-home-tab-padding-bottom: 100px;
    --storefront-home-tab-block-gap: 100px;
    --storefront-home-top-rated-padding-bottom: 100px;
}

body.storefront-theme-electronics {
    --storefront-home-section-first-scroll-margin: 96px;
    --storefront-home-slider-padding-top: 40px;
    --storefront-home-featuers-padding-top: 40px;
    --storefront-home-featuers-padding-bottom: 70px;
    --storefront-home-category-padding-bottom: 100px;
    --storefront-home-flash-padding-top: 20px;
    --storefront-home-flash-padding-bottom: 100px;
    --storefront-home-middle-banner-padding-bottom: 70px;
    --storefront-home-category-product-padding-bottom: 70px;
    --storefront-home-tab-padding-bottom: 100px;
    --storefront-home-latest-product-padding-bottom: 100px;
    --storefront-home-cta-padding-bottom: 100px;
}

/* Grocery (manifest key `vegetables`) — reuses the slider/first-scroll-margin tokens. */
body.storefront-theme-vegetables {
    --storefront-home-section-first-scroll-margin: 96px;
    --storefront-home-slider-padding-top: 40px;
}

/*
 * Furniture — inline Bootstrap padding utilities on each content partial (pb-70, ptb-100,
 * pt-100 pb-70, etc.) remain the source of truth for spacing; no per-section custom-property
 * migration needed since the utility classes already reproduce the original rhythm exactly
 * (grocery precedent). Only the shared scroll-margin + first-visible top-padding collapse are
 * needed here.
 */
body.storefront-theme-furniture {
    --storefront-home-section-first-scroll-margin: 96px;
}

/*
 * Fashion — same shape as furniture: inline Bootstrap padding utilities on each content
 * partial (pt-100 pb-70, pb-70, pb-100, etc.) remain the source of truth for spacing; only
 * the shared scroll-margin + first-visible top-padding collapse are needed here.
 */
body.storefront-theme-fashion {
    --storefront-home-section-first-scroll-margin: 96px;
}

/*
 * Kids — same shape as furniture/fashion: inline Bootstrap padding utilities on each content
 * partial remain the source of truth for spacing; only the shared scroll-margin + first-visible
 * top-padding collapse are needed here.
 */
body.storefront-theme-kids {
    --storefront-home-section-first-scroll-margin: 96px;
}

/*
 * Deal Of The Week decorative shapes sit at z-index:-1 globally; the compose shell's
 * flow-root stacking context clips them unless we lift the section out of it with
 * overflow:visible. The shape must stay BEHIND the product container (legacy look),
 * so the container gets its own explicit stacking level above the shape's -1.
 */
body.storefront-theme-kids .storefront-home-section--flash_section {
    position: relative;
    overflow: visible;
}

body.storefront-theme-kids .storefront-home-section--flash_section > section.products {
    position: relative;
    z-index: 0;
    overflow: visible;
}

body.storefront-theme-kids .storefront-home-section--flash_section > section.products > .container {
    position: relative;
    z-index: 1;
}

body.storefront-theme-kids .storefront-home-section--cta_section_status .newsletter .image-inner > img.bg-img {
    opacity: 1;
}

/* Shell wrapper: contain inner section margins; no layout shift when empty. */
body[class*="storefront-theme-"] .storefront-home-section {
    display: flow-root;
    margin: 0;
    padding: 0;
    border: 0;
}

body[class*="storefront-theme-"] .storefront-home-section:not(.storefront-home-section--last) {
    margin-bottom: var(--storefront-home-section-gap);
}

body[class*="storefront-theme-"] .storefront-home-section--last {
    padding-bottom: var(--storefront-home-section-last-padding);
}

/*
 * First visible block is not the hero: anchor / scroll offset for composed stack.
 * page-inner class is set from compose stack (homeNeedsStartClearance), not hero flag alone.
 */
body[class*="storefront-theme-"] .page-inner.storefront-home-needs-start-clearance .storefront-home-section--first {
    scroll-margin-top: var(--storefront-home-section-first-scroll-margin);
}

/*
 * Non-hero first block: drop redundant inner top padding;
 * script.js applyHomeStartClearance() adds dynamic margin-top on the shell.
 */
body.storefront-theme-manti .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > section:first-child {
    padding-top: 0 !important;
}

body.storefront-theme-electronics .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > section:first-child,
body.storefront-theme-electronics .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > .banner-collection:first-child,
body.storefront-theme-electronics .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > .product-with-border:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.storefront-theme-vegetables .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > section:first-child,
body.storefront-theme-vegetables .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > .banner-collection:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.storefront-theme-furniture .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > section:first-child,
body.storefront-theme-furniture .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > .banner-collection:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.storefront-theme-fashion .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > section:first-child,
body.storefront-theme-fashion .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > .banner-collection:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.storefront-theme-kids .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > section:first-child,
body.storefront-theme-kids .page-inner.storefront-home-needs-start-clearance
    .storefront-home-section--first:not(.storefront-home-section--slider_section)
    > .banner-collection:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/*
 * Features (featuers_section): reproduce original inline `pt-30 pb-70` on the shell.
 * Original manti keeps the 30px gap below the hero slider, so top padding is NOT
 * collapsed when features follows the hero — that was a regression.
 */
body.storefront-theme-manti .storefront-home-section--featuers_section {
    padding-top: var(--storefront-home-featuers-padding-top);
    padding-bottom: var(--storefront-home-featuers-padding-bottom);
}

/* First visible block (hero disabled): drop top padding; JS start-clearance adds the header offset. */
body.storefront-theme-manti .storefront-home-section--featuers_section.storefront-home-section--first {
    padding-top: 0;
}

/* Categories (category_section): bottom rhythm on shell (legacy pb-100). */
body.storefront-theme-manti .storefront-home-section--category_section {
    padding-bottom: var(--storefront-home-category-padding-bottom);
}

/* Flash sale (flash_section): bottom rhythm on shell (legacy pb-100). */
body.storefront-theme-manti .storefront-home-section--flash_section {
    padding-bottom: var(--storefront-home-flash-padding-bottom);
}

/* Featured products (featured_section): bottom rhythm on shell (legacy pb-100). */
body.storefront-theme-manti .storefront-home-section--featured_section {
    padding-bottom: var(--storefront-home-featured-padding-bottom);
}

/* Middle banner (middle_banner_section): bottom rhythm on shell (legacy pb-70). */
body.storefront-theme-manti .storefront-home-section--middle_banner_section {
    padding-bottom: var(--storefront-home-middle-banner-padding-bottom);
}

/* Product tabs (tab_section): one composed shell; gap between tab blocks; bottom on shell only. */
body.storefront-theme-manti .storefront-home-section--tab_section {
    padding-bottom: var(--storefront-home-tab-padding-bottom);
}

body.storefront-theme-manti .storefront-home-section--tab_section .manti-tab-block:not(.manti-tab-block--last) {
    margin-bottom: var(--storefront-home-tab-block-gap);
}

/*
 * Top rated (top_rated_section): bottom rhythm on shell (legacy pb-100).
 *
 * Paired top rated + bottom-right banner: when both are enabled and populated, the banner is
 * rendered as `col-xl-5` inside this section's own `.row gx-xl-4` (see rated-content.blade.php),
 * exactly reproducing the original single `.products` section — no flex/column overrides needed.
 * When the banner is off/empty, top rated renders full width (`col-12`).
 */
body.storefront-theme-manti .storefront-home-section--top_rated_section {
    padding-bottom: var(--storefront-home-top-rated-padding-bottom);
}

/*
 * CTA (cta_section_status): inner section stays py-0; bottom spacing comes from
 * compose shell --last (--storefront-home-section-last-padding) when last visible block.
 */
body.storefront-theme-manti .storefront-home-section--cta_section_status > .newsletter {
    margin-bottom: 0;
}

body.storefront-theme-electronics .storefront-home-section--slider_section {
    padding-top: var(--storefront-home-slider-padding-top);
}

body.storefront-theme-electronics .storefront-home-section--slider_section.storefront-home-section--first {
    padding-top: var(--storefront-home-slider-padding-top);
}

body.storefront-theme-electronics .storefront-home-section--featuers_section {
    padding-top: var(--storefront-home-featuers-padding-top);
    padding-bottom: var(--storefront-home-featuers-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--featuers_section.storefront-home-section--first {
    padding-top: 0;
}

body.storefront-theme-electronics .storefront-home-section--category_section {
    padding-bottom: var(--storefront-home-category-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--flash_section {
    padding-top: var(--storefront-home-flash-padding-top);
    padding-bottom: var(--storefront-home-flash-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--flash_section.storefront-home-section--first {
    padding-top: 0;
}

body.storefront-theme-electronics .storefront-home-section--middle_banner_section {
    padding-bottom: var(--storefront-home-middle-banner-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--categoryProduct_section {
    padding-bottom: var(--storefront-home-category-product-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--tab_section {
    padding-bottom: var(--storefront-home-tab-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--latest_product_section {
    padding-bottom: var(--storefront-home-latest-product-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--cta_section_status {
    padding-bottom: var(--storefront-home-cta-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--cta_section_status.storefront-home-section--last {
    padding-bottom: var(--storefront-home-cta-padding-bottom);
}

body.storefront-theme-electronics .storefront-home-section--cta_section_status > .newsletter {
    margin-bottom: 0;
}

/* Paired with hideEmptyStorefrontSections() + StorefrontLazyPairing in script.js. */
body[class*="storefront-theme-"] .is-empty-storefront-section,
body[class*="storefront-theme-"] .lazy.is-empty-storefront-section {
    display: none !important;
}

@media (max-width: 1199.98px) {
    body.storefront-theme-manti {
        --storefront-home-section-first-scroll-margin: 72px;
    }
}

@media (max-width: 991.98px) {
    body.storefront-theme-manti {
        --storefront-home-featuers-padding-bottom: 50px;
        --storefront-home-featuers-padding-top: 20px;
        --storefront-home-category-padding-bottom: 70px;
        --storefront-home-flash-padding-bottom: 70px;
        --storefront-home-featured-padding-bottom: 70px;
        --storefront-home-middle-banner-padding-bottom: 50px;
        --storefront-home-tab-padding-bottom: 70px;
        --storefront-home-tab-block-gap: 60px;
        --storefront-home-top-rated-padding-bottom: 70px;
    }

    body.storefront-theme-electronics {
        --storefront-home-slider-padding-top: 30px;
        --storefront-home-featuers-padding-top: 30px;
        --storefront-home-featuers-padding-bottom: 50px;
        --storefront-home-category-padding-bottom: 70px;
        --storefront-home-flash-padding-top: 16px;
        --storefront-home-flash-padding-bottom: 70px;
        --storefront-home-middle-banner-padding-bottom: 50px;
        --storefront-home-category-product-padding-bottom: 50px;
        --storefront-home-tab-padding-bottom: 70px;
        --storefront-home-latest-product-padding-bottom: 70px;
        --storefront-home-cta-padding-bottom: 70px;
    }
}

@media (max-width: 767.98px) {
    body.storefront-theme-manti {
        --storefront-home-featuers-padding-bottom: 40px;
        --storefront-home-featuers-padding-top: 16px;
        --storefront-home-category-padding-bottom: 50px;
        --storefront-home-flash-padding-bottom: 50px;
        --storefront-home-featured-padding-bottom: 50px;
        --storefront-home-middle-banner-padding-bottom: 40px;
        --storefront-home-tab-padding-bottom: 50px;
        --storefront-home-tab-block-gap: 40px;
        --storefront-home-top-rated-padding-bottom: 50px;
    }

    body.storefront-theme-electronics {
        --storefront-home-slider-padding-top: 24px;
        --storefront-home-featuers-padding-top: 24px;
        --storefront-home-featuers-padding-bottom: 40px;
        --storefront-home-category-padding-bottom: 50px;
        --storefront-home-flash-padding-top: 12px;
        --storefront-home-flash-padding-bottom: 50px;
        --storefront-home-middle-banner-padding-bottom: 40px;
        --storefront-home-category-product-padding-bottom: 40px;
        --storefront-home-tab-padding-bottom: 50px;
        --storefront-home-latest-product-padding-bottom: 50px;
        --storefront-home-cta-padding-bottom: 50px;
    }
}

/*
 * RTL home pass (P-02): logical spacing for composed manti sections.
 * html[dir] comes from layout when merchant language has rtl=1.
 */
body.storefront-theme-manti .section-title.title-inline .nav-tabs .nav-item .nav-link {
    margin: 0;
    margin-bottom: 10px;
    margin-inline-end: 15px;
}

body.storefront-theme-manti .section-title.title-inline .nav-tabs .nav-item:last-child .nav-link {
    margin-inline-end: 0;
}

html[dir="rtl"] body.storefront-theme-manti .storefront-home-section .slick-slide {
    margin-inline: calc(0.5 * 1.5rem);
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] body.storefront-theme-manti .storefront-home-section .slick-slider {
    margin-inline: calc(-0.5 * 1.5rem);
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] body.storefront-theme-manti .storefront-home-section .section-title.title-inline {
    flex-direction: row;
}

html[dir="rtl"] body.storefront-theme-manti .storefront-home-section .tabs-navigation-scroll .nav {
    direction: rtl;
}