/**
 * CEF Shop — Divi + AGS + Mobile Fixes
 *
 * Targets:
 *  1. AGS Divi WooCommerce plugin (.ags-divi-wc-layout-grid, .product-columns-phone-1)
 *  2. Divi product module columns (.columns-3, .columns-4)
 *  3. Mobile header / drawer
 *  4. Mobile footer
 *  5. All screen responsive
 *
 * @package CEF_Shop_Child
 */

/* ====================================================================
   MOBILE DRAWER ELEMENTS: hidden by default (desktop)
   ==================================================================== */
.cef-mobile-drawer-actions,
.cef-mobile-drawer-social,
.cef-drawer-top,
.cef-drawer-brand { display: none; }

/* Drawer close button: only inside open mobile drawer */
.cef-drawer-close {
    display: none;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    color: var(--cef-primary);
    line-height: 1;
    z-index: 10;
}
/* Red circular white X — matches annotated mobile menu mock */
.cef-header__nav.is-mobile-open .cef-drawer-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: #e53935 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(229, 57, 53, .35);
}
.cef-header__nav.is-mobile-open .cef-drawer-close svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

/* ====================================================================
   HIDE REDUNDANT DIVI "BRAND HEADER" SECTIONS (non-home pages only)
   Old Divi pages often had a logo block as the first/last section.
   Our header.php / footer.php replace those. Home page content is
   fully Divi/shortcode-driven (v1.2+) — never hide .et_pb_* there.
   ==================================================================== */

/* ── Fullwidth Header module — hidden everywhere (our header.php replaces it) ── */
.et_pb_fullwidth_header,
.et_pb_fullwidth_header_inner { display: none !important; }

/* ── Front page: Divi Builder content is NOW the live homepage
   (v1.2.0+). Do NOT hide .et_pb_section on .home / .front-page —
   that was for the old hard-coded front-page.php and was blanking
   the entire migrated homepage. ── */

/* ── Non-front pages: hide FIRST + LAST Divi sections only when the
   page has 3+ sections (old logo header + footer chrome).
   Cart / My Account / Refund / thin pages often have only 1–2 sections —
   hiding first AND last blanked the entire page. WooCommerce pages are
   never stripped. Add class cef-keep on a section to always keep it. */
body:not(.front-page):not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
#et-main-area .et_builder_inner_content:has(> .et_pb_section:nth-child(3)) > .et_pb_section:first-child:not(.cef-keep),
body:not(.front-page):not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
#et-main-area .et_builder_inner_content:has(> .et_pb_section:nth-child(3)) > .et_pb_section_0:not(.cef-keep) {
    display: none !important;
}
body:not(.front-page):not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
#et-main-area .et_builder_inner_content:has(> .et_pb_section:nth-child(3)) > .et_pb_section:last-child:not(.cef-keep) {
    display: none !important;
}

/* Always show builder content on core WooCommerce pages */
body.woocommerce-cart #et-main-area .et_pb_section,
body.woocommerce-checkout #et-main-area .et_pb_section,
body.woocommerce-account #et-main-area .et_pb_section {
    display: block !important;
}

/* ── WooCommerce / archive pages: remove ALL Divi builder injection ──
   archive-product.php already provides our custom product grid. */
.post-type-archive #et-main-area .et_pb_section,
.tax-product_cat   #et-main-area .et_pb_section { display: none !important; }

/* ====================================================================
   DIVI AGS WOOCOMMERCE PLUGIN OVERRIDES
   The plugin adds these classes to the product wrapper div:
     .ags-divi-wc-layout-grid
     .product-columns-4 / .product-columns-tablet-3 / .product-columns-phone-1
   It also controls the ul.products grid via inline or class-based CSS.
   We must override all these to apply our 4→3→2 column layout.
   ==================================================================== */

/* Override AGS plugin container — ensure it's a proper block */
.ags-divi-wc-layout-grid,
[class*="product-columns-"] {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

/* Fix empty-slot gap: clear any ghost pseudo-elements WooCommerce adds */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { display: none !important; content: none !important; }

/* WC columns wrapper must be block so grid starts from the left edge */
.woocommerce .woocommerce-notices-wrapper { width: 100% !important; }
.woocommerce > .columns-1,
.woocommerce > .columns-2,
.woocommerce > .columns-3,
.woocommerce > .columns-4 {
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

/* Override every possible column-count class on ul.products */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.et_pb_shop .woocommerce ul.products,
.ags-divi-wc-layout-grid .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    align-items: start !important;
}

/* Individual product item — reset ALL Divi/AGS float+width overrides */
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product,
.ags-divi-wc-layout-grid ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--cef-white) !important;
    border: 1px solid var(--cef-border) !important;
    border-radius: var(--cef-radius-lg) !important;
    overflow: hidden !important;
    transition: box-shadow .2s, transform .2s !important;
    box-sizing: border-box !important;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 32px rgba(5,74,106,.16) !important;
    transform: translateY(-3px) !important;
}

/* Product image */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img,
.et_pb_shop ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    min-height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform .3s ease !important;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04) !important; }

/* Homepage Divi Shop sections */
.cef-home-products .cef-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cef-primary, #054a6a);
    margin: 0 0 1.25rem;
}

/* AGS badge wrapper — ensure it doesn't break layout */
.ags-divi-wc-badge-wrap { position: absolute !important; top: 0; left: 0; z-index: 2; }

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: var(--cef-text) !important;
    padding: .75rem .85rem .25rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: var(--cef-font) !important;
}

/* Price */
.woocommerce ul.products li.product .price {
    display: block !important;
    padding: .25rem .85rem .5rem !important;
    margin: 0 !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--cef-primary) !important;
    font-family: var(--cef-font) !important;
}
.woocommerce ul.products li.product .price del {
    font-size: .78rem !important;
    font-weight: 400 !important;
    color: var(--cef-text-light) !important;
    opacity: .8 !important;
    text-decoration: line-through !important;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--cef-danger) !important;
    font-weight: 700 !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    white-space: nowrap !important;
}

/* In stock text */
.woocommerce ul.products li.product .stock {
    font-size: .72rem !important;
    color: var(--cef-text-muted) !important;
    padding: 0 .85rem .3rem !important;
    margin: 0 !important;
}

/* Add to Cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: block !important;
    width: calc(100% - 1.7rem) !important;
    margin: auto .85rem .85rem !important;
    text-align: center !important;
    background: var(--cef-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--cef-radius-lg) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    padding: .5rem 1rem !important;
    cursor: pointer !important;
    transition: background .2s !important;
    font-family: var(--cef-font) !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--cef-primary-dark) !important;
    color: #fff !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .ags-divi-wc-badge {
    background: var(--cef-danger) !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: .2rem .55rem !important;
    line-height: 1.4 !important;
    position: absolute !important;
    top: .6rem !important;
    left: .6rem !important;
    right: auto !important;
    min-height: auto !important;
    min-width: auto !important;
    z-index: 2 !important;
}

/* ====================================================================
   DIVI SECTION / ROW ALIGNMENT
   ==================================================================== */
.et_pb_section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.et_pb_row {
    max-width: var(--cef-container) !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ====================================================================
   DIVI TEXT & BUTTON TYPOGRAPHY
   ==================================================================== */
.et_pb_text_inner,
.et_pb_blurb_description,
.et_pb_section h1,
.et_pb_section h2,
.et_pb_section h3,
.et_pb_section h4,
.et_pb_section p {
    font-family: var(--cef-font) !important;
}
.et_pb_button {
    border-radius: var(--cef-radius-lg) !important;
    font-family: var(--cef-font) !important;
    font-weight: 600 !important;
}

/* WC results count & ordering */
.woocommerce-result-count,
.woocommerce-ordering select {
    font-family: var(--cef-font) !important;
    font-size: .82rem !important;
}

/* ====================================================================
   PAGINATION
   ==================================================================== */
.woocommerce nav.woocommerce-pagination ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .35rem !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 1rem !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: var(--cef-radius) !important;
    border: 1px solid var(--cef-border) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    color: var(--cef-primary) !important;
    transition: all .2s !important;
    text-decoration: none !important;
    font-family: var(--cef-font) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--cef-primary) !important;
    border-color: var(--cef-primary) !important;
    color: #fff !important;
}

/* ====================================================================
   MISC — star ratings, notices, cart, scroll-to-top
   ==================================================================== */
.star-rating span::before { color: var(--cef-secondary) !important; }
.woocommerce-message  { border-top-color: var(--cef-secondary) !important; }
.woocommerce-error    { border-top-color: var(--cef-danger) !important; }
.woocommerce-info     { border-top-color: var(--cef-primary) !important; }
#et_pb_scroll_top     { background: var(--cef-primary) !important; }
#et_pb_scroll_top:hover { background: var(--cef-secondary) !important; }

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

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {

    :root { --cef-navbar-height: 62px; }

    /* ── Header ── */
    .cef-header__nav         { display: none; }
    .cef-header__social-row  { display: none; }
    .cef-nav-btn             { display: none !important; }
    .cef-hamburger           { display: flex !important; }
    .cef-search-wrap         { display: none; } /* hide search on mobile to save space */

    /* Right side: compact row on mobile */
    .cef-header__right {
        flex-direction: row !important;
        gap: .4rem !important;
        align-items: center !important;
    }
    .cef-header__btn-row { gap: .4rem; }

    /* Show search icon on mobile (keep toggle, hide text labels) */
    .cef-search-wrap { display: flex !important; }

    /* Mobile nav drawer — CEF.org.pk style: slides in from the RIGHT,
       logo + close on top, Follow Us + green CTAs at the bottom. */
    .cef-header__nav.is-mobile-open {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;   /* left-align drawer content */
        justify-content: flex-start !important;
        text-align: left !important;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(340px, 88vw);
        height: 100vh;
        height: 100dvh;
        background: var(--cef-white);
        z-index: 100002 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1.25rem 1.5rem;
        box-shadow: -4px 0 24px rgba(0,0,0,.18);
        animation: cefSlideInRight .25s ease;
        pointer-events: auto !important;
        touch-action: manipulation;
    }
    body.cef-nav-open #cef-header,
    #cef-header.cef-nav-open {
        z-index: 100001 !important;
    }
    body.cef-nav-open .cef-nav-overlay,
    .cef-nav-overlay.is-visible {
        z-index: 100000 !important;
        pointer-events: auto;
    }
    .cef-header__nav.is-mobile-open a,
    .cef-header__nav.is-mobile-open button,
    .cef-header__nav.is-mobile-open .cef-nav-btn {
        pointer-events: auto !important;
        position: relative;
        z-index: 2;
        -webkit-tap-highlight-color: rgba(138, 190, 65, 0.25);
    }
    @keyframes cefSlideInRight {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    /* Drawer top: logo left + X right (CEF pattern) */
    .cef-header__nav.is-mobile-open .cef-drawer-top {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: 1rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--cef-border);
    }
    .cef-header__nav.is-mobile-open .cef-drawer-brand {
        display: flex !important;
        align-items: center;
        gap: .65rem;
        min-width: 0;
        flex: 1;
        text-decoration: none !important;
        color: var(--cef-primary) !important;
    }
    /* Logo only — hide site-name text ("Online Book Shop") */
    .cef-drawer-brand__logo {
        width: auto;
        max-width: min(200px, 58vw);
        height: 48px;
        object-fit: contain;
        object-position: left center;
        flex-shrink: 0;
        border-radius: 0;
        background: transparent;
    }
    /* Hidden when logo image is present; fallback text only if no logo */
    .cef-header__nav.is-mobile-open .cef-drawer-brand:has(.cef-drawer-brand__logo) .cef-drawer-brand__text {
        display: none !important;
    }
    .cef-drawer-brand__text {
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--cef-primary);
        white-space: nowrap;
    }

    .cef-header__nav.is-mobile-open .cef-nav__list {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        flex: 0 0 auto; /* do NOT stretch — keeps Follow Us right under the menu */
    }
    .cef-header__nav.is-mobile-open .cef-nav__list > li {
        position: relative !important;
        width: 100% !important;
        text-align: left !important;
    }
    .cef-header__nav.is-mobile-open .cef-nav__list > li > a {
        display: block !important;
        padding: .85rem 2.4rem .85rem 0 !important;
        font-size: .95rem !important;
        font-weight: 700 !important;
        border-bottom: none !important;
        line-height: 1.35 !important;
        text-align: left !important;
        text-transform: none;
        letter-spacing: 0;
        color: var(--cef-primary) !important;
    }
    .cef-header__nav.is-mobile-open .cef-nav__list > li > a::after { display: none !important; }
    .cef-header__nav.is-mobile-open .cef-nav__list > li.current-menu-item > a {
        color: var(--cef-primary-dark) !important;
        font-weight: 800 !important;
    }

    /* Submenu chevron — CEF-style right arrow (>).
       MUST sit above the parent <a> (which also gets z-index:2 from the
       generic open-drawer rule) — previously z-index:1 let the link steal
       the tap, so clicking the arrow hit href="#" and only added # to the URL. */
    .cef-header__nav.is-mobile-open .cef-nav__list > li.menu-item-has-children > .cef-submenu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 0;
        right: 0;
        width: 2.6rem;
        height: 2.9rem;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--cef-primary);
        cursor: pointer;
        transition: transform .2s ease;
        z-index: 20 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(138, 190, 65, 0.25);
    }
    .cef-header__nav.is-mobile-open .cef-nav__list > li.cef-submenu-open > .cef-submenu-toggle {
        transform: rotate(90deg);
    }
    .cef-header__nav.is-mobile-open .cef-nav__list > li.menu-item-has-children > a {
        position: relative !important;
        z-index: 1 !important; /* stay under the chevron tap target */
    }

    /* Hide the desktop hover-chevron (::before) inside the drawer —
       the dedicated .cef-submenu-toggle button is the only open control. */
    .cef-header__nav.is-mobile-open .cef-nav__list li.menu-item-has-children > a::before {
        display: none !important;
    }
    .cef-header__nav.is-mobile-open .cef-nav__list li.menu-item-has-children > a {
        display: block !important;
    }

    /* Sub-menus: closed by default, expand only when the parent <li> has
       .cef-submenu-open (toggled by JS on chevron tap).
       [FIX] Desktop CSS uses opacity/visibility (for hover fade). On touch
       there is no hover — so even with display:block the submenu stayed
       invisible. Force opacity/visibility/pointer-events when open. */
    .cef-header__nav.is-mobile-open .sub-menu {
        display: none !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 0 .35rem 1rem !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }
    .cef-header__nav.is-mobile-open .cef-nav__list > li.cef-submenu-open > .sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }
    .cef-header__nav.is-mobile-open .sub-menu li {
        position: static !important;
        list-style: none !important;
    }
    .cef-header__nav.is-mobile-open .sub-menu a {
        display: block !important;
        padding: .55rem 0 !important;
        font-size: .82rem !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--cef-primary) !important;
        border-bottom: 1px solid var(--cef-border) !important;
        border-radius: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        line-height: 1.35 !important;
    }
    .cef-header__nav.is-mobile-open .sub-menu a:hover,
    .cef-header__nav.is-mobile-open .sub-menu a:active {
        color: var(--cef-secondary-dark) !important;
        background: transparent !important;
    }

    /* Follow Us + social icons — directly under the last menu item (no big gap) */
    .cef-header__nav.is-mobile-open .cef-mobile-drawer-social {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: .65rem;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid var(--cef-border);
        flex: 0 0 auto;
        text-align: left !important;
        width: 100%;
    }
    .cef-mobile-drawer-social__label {
        font-size: .9rem;
        font-weight: 700;
        color: var(--cef-primary);
        text-align: left;
    }
    /* YouTube: white logo with play triangle cut-out (red bg shows through) */
    .cef-drawer-social--youtube svg path {
        fill: currentColor;
        fill-rule: evenodd;
    }
    .cef-mobile-drawer-social__icons {
        display: flex;
        align-items: center;
        gap: .55rem;
        flex-wrap: wrap;
    }
    .cef-drawer-social {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50%;
        color: #fff !important;
        text-decoration: none !important;
    }
    .cef-drawer-social--facebook  { background: #1877f2 !important; }
    .cef-drawer-social--instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af) !important; }
    .cef-drawer-social--youtube   { background: #ff0000 !important; }
    .cef-drawer-social--linkedin  { background: #0a66c2 !important; }

    /* CTA buttons — both green pills like CEF.org.pk, right under Follow Us */
    .cef-mobile-drawer-actions {
        display: flex !important;
        flex-direction: column;
        gap: .65rem;
        margin-top: .85rem !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: .5rem !important;
        border-top: none;
        flex: 0 0 auto; /* never push to viewport bottom */
    }
    .cef-mobile-drawer-actions .cef-nav-btn,
    .cef-mobile-drawer-actions .cef-drawer-btn {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        padding: .75rem 1rem !important;
        font-size: .9rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        background: var(--cef-secondary) !important;
        border: none !important;
        color: #fff !important;
    }
    .cef-mobile-drawer-actions .cef-nav-btn:hover,
    .cef-mobile-drawer-actions .cef-drawer-btn:hover {
        background: var(--cef-secondary-dark) !important;
        color: #fff !important;
    }

    /* Nav overlay — MUST stay below the drawer (see body.cef-nav-open rules) */
    .cef-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 100000;
    }
    .cef-nav-overlay.is-visible { display: block; }

    /* Products: 3 columns tablet */
    .woocommerce ul.products,
    .woocommerce ul.products.columns-1,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .ags-divi-wc-layout-grid .woocommerce ul.products,
    .et_pb_shop .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    /* Divi rows */
    .et_pb_row {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Footer: 2 columns on tablet */
    .cef-footer__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem 1.25rem;
    }
    .cef-footer__brand { grid-column: 1 / -1; }
    .cef-footer__col--donate { min-height: auto; }
    .cef-footer__spacer { min-height: .5rem; }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {

    :root { --cef-navbar-height: 58px; }

    /* Logo smaller */
    .cef-header__logo-img { max-height: 44px; }

    /* Hero stacked */
    .cef-hero__inner {
        grid-template-columns: 1fr !important;
        text-align: center;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .cef-hero__visual  { display: none !important; }
    .cef-hero__search  { max-width: 100%; margin-left: auto; margin-right: auto; }
    .cef-hero__subtext { margin-left: auto; margin-right: auto; }
    .cef-hero__actions { justify-content: center; flex-wrap: wrap; }
    .cef-hero__stats   { justify-content: center; }
    .cef-categories    { position: static !important; }

    /* Sections */
    .cef-section { padding: 1.75rem 0; }

    /* Products: 2 columns on mobile */
    .woocommerce ul.products,
    .woocommerce ul.products.columns-1,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .ags-divi-wc-layout-grid .woocommerce ul.products,
    .et_pb_shop .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem !important;
    }

    .cef-products-grid--4col,
    .cef-products-grid--3col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem !important;
    }

    /* Product images shorter on mobile */
    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
    .woocommerce ul.products li.product img {
        height: 155px !important;
    }

    /* Scroll row */
    .cef-products-scroll .cef-product-card {
        flex: 0 0 150px; min-width: 150px; max-width: 150px;
    }

    /* Promo banner */
    .cef-promo-banner__inner {
        flex-direction: column;
        text-align: center;
    }
    .cef-promo-banner__inner .cef-btn { width: 100%; max-width: 280px; }

    /* Divi rows */
    .et_pb_row {
        padding-left: .875rem !important;
        padding-right: .875rem !important;
    }

    /* Footer: 2-col on mobile */
    .cef-footer__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.25rem 1rem !important;
    }
}

/* ── Small mobile ≤ 480px ── */
@media (max-width: 480px) {

    :root { --cef-navbar-height: 54px; }

    .cef-container { padding-left: .875rem; padding-right: .875rem; }
    .cef-header__logo-img { max-height: 40px; }
    .cef-header__inner { height: var(--cef-navbar-height); gap: .5rem; }

    /* Hero */
    .cef-hero__heading { font-size: 1.5rem; }
    .cef-hero__subtext { font-size: .82rem; }
    .cef-hero__stats   { gap: 1rem; }
    .cef-hero__stat-num { font-size: 1.2rem; }

    /* Products: STILL 2 cols, just tighter */
    .woocommerce ul.products,
    .woocommerce ul.products.columns-1,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .ags-divi-wc-layout-grid .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .6rem !important;
    }

    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product img {
        height: 130px !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: .74rem !important;
        padding: .5rem .6rem .2rem !important;
    }
    .woocommerce ul.products li.product .price {
        font-size: .82rem !important;
        padding: .2rem .6rem .35rem !important;
    }
    .woocommerce ul.products li.product .button {
        font-size: .68rem !important;
        padding: .4rem .6rem !important;
        width: calc(100% - 1.2rem) !important;
        margin: auto .6rem .6rem !important;
    }

    /* CEF product cards */
    .cef-product-card__body { padding: .6rem; }
    .cef-product-card__title { font-size: .75rem; }

    /* Divi rows */
    .et_pb_row {
        padding-left: .875rem !important;
        padding-right: .875rem !important;
    }

    /* Footer: single column */
    .cef-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .cef-footer__brand { grid-column: auto; }
    .cef-footer__logo  { width: 120px; }
    .cef-footer__copyright p { font-size: .68rem; }
}

/* ====================================================================
   FOOTER BULLETPROOF PROTECTION
   Ensures #cef-footer is ALWAYS visible regardless of Divi/plugin
   overrides. This block intentionally uses high-specificity selectors
   and !important to guarantee the footer cannot be hidden.
   ==================================================================== */

/* Force the footer element itself to always render visibly */
#cef-footer,
footer#cef-footer,
footer.cef-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 1px !important;
    /* Keep overflow hidden so the decorative ::after cannot paint
       a white gap below the copyright strip on mobile. */
    overflow: hidden !important;
    position: relative !important;
    z-index: 50 !important;
    /* Hard-coded fallback colours so footer remains visible even if
       CSS custom properties fail to resolve on a page */
    background-color: #054a6a !important;
    color: rgba(255,255,255,.9) !important;
    width: 100% !important;
}

/* Force the dark-blue body block to always show */
#cef-footer .cef-footer__body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #054a6a !important;
    min-height: 1px !important;
    overflow: visible !important;
}

/* Force the green copyright strip to always show */
#cef-footer .cef-footer__copyright {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #8abe41 !important;
    overflow: visible !important;
}

/* Ensure page-container never clips the footer */
#page-container {
    overflow: visible !important;
    max-height: none !important;
}

/* Ensure et-main-area doesn't clip footer below it */
#et-main-area {
    overflow: visible !important;
}

/* ====================================================================
   STICKY FOOTER — footer must always sit at the bottom of the
   viewport with zero gap below it, even on short pages (empty cart,
   short pages, etc). Without this, short content leaves the footer
   floating mid-page with blank space under it.
   ==================================================================== */
html {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
}
#page-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
}
#et-main-area {
    flex: 1 1 auto !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#cef-footer,
footer#cef-footer,
footer.cef-footer {
    flex-shrink: 0 !important;
    margin: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#cef-footer .cef-footer__copyright {
    margin-bottom: 0 !important;
    padding-bottom: .85rem !important;
}
/* Kill leftover Divi / empty nodes that create a white strip after the footer */
#page-container > #main-footer,
#page-container > .et-l--footer,
body > #main-footer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ====================================================================
   HERO VISUAL COLUMN — INSIDE DIVI/ELEMENTOR BUILDER ONLY
   The right-hand hero column (.cef-hero-visual-host) holds several
   individual Image modules stacked one after another (tall book-cover
   art, ~1024px each) so admins can click ANY single cover and swap it
   without touching text. On the real, published page our JS
   (initHeroFromBuilderImages in cef-shop.js) rebuilds those into the
   compact 3-column CEF slider automatically — visitors never see the
   raw stack. But that JS is intentionally SKIPPED while the builder is
   open (so the images stay individually clickable), which left the
   editing canvas showing a huge tall column that no Row/Section height
   setting can shrink (Height/Min Height/Max Height only add EMPTY
   space — they never scale down existing content).
   Fix: lay the same images out as a compact 3-column grid ONLY inside
   the builder canvas, so editing feels normal-sized. The front-end
   behaviour above is completely untouched.
   ==================================================================== */
body.et-fb .cef-hero-visual-host,
body.et_fb .cef-hero-visual-host,
body.elementor-editor-active .cef-hero-visual-host,
body.elementor-editor-preview .cef-hero-visual-host {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: .5rem !important;
    min-height: 0 !important;
}
body.et-fb .cef-hero-visual-host .et_pb_image,
body.et_fb .cef-hero-visual-host .et_pb_image,
body.elementor-editor-active .cef-hero-visual-host .et_pb_image,
body.elementor-editor-preview .cef-hero-visual-host .et_pb_image {
    width: calc(33.33% - .35rem) !important;
    flex: 0 0 calc(33.33% - .35rem) !important;
    margin-bottom: 0 !important;
}
body.et-fb .cef-hero-visual-host .et_pb_image img,
body.et_fb .cef-hero-visual-host .et_pb_image img,
body.elementor-editor-active .cef-hero-visual-host .et_pb_image img,
body.elementor-editor-preview .cef-hero-visual-host .et_pb_image img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 10px !important;
}