/* ============================================================
   HOMEPAGE.CSS — Masazeri Child Theme
   Scope: front page only (is_front_page())
   All selectors use .maz- prefix (CSS classes from Elementor HTML widgets)
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.maz-hero-badge {
    display: inline-block;
    background: var(--maz-sage);
    color: #fff;
    font-family: var(--maz-font);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.maz-hero-h1 {
    font-family: var(--maz-font);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    color: var(--maz-dark);
    line-height: 1.14;
    margin: 0 0 16px;
}

.maz-hero-sub {
    font-family: var(--maz-font);
    font-size: 16px;
    line-height: 26px;
    color: var(--maz-gray-500);
    margin: 0 0 32px;
}

.maz-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
}

.maz-hero-btns .maz-btn-outline {
    background-color: var(--maz-sage);
    color: white;
}

.maz-hero-trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--maz-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--maz-gray-500);
}

.maz-hero-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* On mobile the hero section collapses to a single column stacked directly
   over the full-bleed product photo (Mobile-hero-banner.jpg) instead of
   sitting beside it — the heading/subtitle text was reading straight over
   the massager in the image with no separation. Give both a semi-opaque
   card backdrop so they stay legible regardless of what's behind them;
   inline-block sizes the box to the (manually <br>-broken) text instead of
   stretching full width. */
@media (max-width: 768px) {
    .maz-hero-h1 {
        display: inline-block;
        background-color: rgba(246, 239, 230, 0.92);
        padding: 10px 16px;
        border-radius: var(--maz-radius-md);
        box-shadow: var(--maz-shadow-sm);
    }

    .maz-hero-sub {
        display: inline-block;
        background-color: rgba(246, 239, 230, 0.88);
        padding: 8px 16px;
        border-radius: var(--maz-radius-md);
    }

    /* Elementor's own generated CSS sets 80px top+bottom padding on this
       section (tuned for a tall/wide hero) plus background-size:contain
       on Mobile-hero-banner.jpg (natural ratio 769x1025 — taller than it
       is wide). At a 375px-wide viewport the contained image renders at
       ~500px tall, but the hero content (badge+heading+text+buttons+
       trust icons) runs to ~594px before this fix — so the trust-icons
       row was already sitting on plain white below the image, and the
       80px bottom padding added even more blank space after that before
       the next section starts. Cutting the bottom padding closes most of
       the gap without touching the Elementor page content/JSON; a beige
       fallback background-color (same tone as the image/page) covers the
       remainder so what's left reads as intentional negative space
       instead of a stray white gap. Top padding is left alone — it's the
       intentional breathing room above the "ZA VAŠE TELO I UM" badge. */
    .elementor-element-sec_hero.elementor-element {
        padding-bottom: 0 !important;
        background-color: var(--maz-beige) !important;
    }

    /* "Izdvojeni proizvodi" never got the same mobile grid treatment the
       shop archive got in category.css — this grid is still WooCommerce
       core's raw float layout (`ul.products.columns-3 li.product{width:
       30.75%}`, no responsive override at all), so at 375px each of the
       3 cards is only ~115px wide, cramming price/title into wrapped
       text. Same fix pattern as category.css: convert to a 2-column
       CSS grid and neutralize the float width + WC's clearfix
       pseudo-elements (which otherwise become phantom grid items and
       shift every real card over by one slot). */
    .woocommerce ul.products.columns-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* gap: var(--maz-space-md) !important; */
        gap: 10px;
    }

    .woocommerce ul.products.columns-3 li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .woocommerce ul.products.columns-3::before,
    .woocommerce ul.products.columns-3::after {
        content: none !important;
        display: none !important;
    }

    /* At 2-per-row width (~165px card), the button's fixed nowrap text
       ("Dodaj u korpu", "Odaberite opcije" — both longer than the
       plugin's default "Add to Cart") no longer fits and gets clipped at
       the card's right edge instead of wrapping. white-space:nowrap is
       inherited from the site-wide .woocommerce a.button rule in
       style.css; overriding it here lets long labels wrap to a second
       line instead of being cut off. */
    .woocommerce ul.products.columns-3 li.product .button {
        white-space: normal;
        line-height: 1.3;
        padding: 10px 5px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    .home-categories-top .elementor-element-c_cat1,
    .home-categories-top .elementor-element-c_cat2,
    .home-categories-top .elementor-element-c_cat3 {
        margin-bottom: 15px;
    }

    .maz-hero-trust {
        justify-content: center;
    }

    .maz-hero-trust span svg {
        transform: scale(1.5);
    }


    .bottom-banners-section .elementor-element-e527113>.elementor-element-populated,
    .bottom-banners-section .elementor-element-b976ae9>.elementor-element-populated {
        aspect-ratio: 3 / 4;
    }

    .home section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .home #maz-main .bottom-banners-section {
        padding-bottom: 10px;
    }

    .bottom-banners-section .elementor-container {
        gap: 20px;
    }

    .bottom-banners-section .elementor-container .elementor-element-populated {
        border-radius: 15px;
    }

    .bottom-banners-section .elementor-container .elementor-element-populated {
        padding: 20px !important;

    }


    .home section .elementor-element-populated {
        padding: 0 !important;
    }

    .woocommerce ul.products li.product .button {
        height: 45px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 10px !important;
        width: calc(100% - 20px) !important;
        justify-self: anchor-center !important;

        position: absolute;
        bottom: 0;
    }

    .home .woocommerce ul.products li.product {
        padding-bottom: 4rem !important;
    }
}

/* ── CATEGORY CARDS ─────────────────────────────────────────── */
.maz-cat-card-link {
    display: block;
    text-decoration: none;
    height: 100%;
}

.maz-cat-card {
    background: #7fa08a30;
    border: 1px solid var(--maz-border);
    border-radius: 16px;
    padding: 24px 20px;
    height: 100%;
    min-height: 180px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    cursor: pointer;
}

.maz-cat-card:hover {
    box-shadow: 0 8px 24px rgba(31, 31, 31, .08);
    border-color: var(--maz-orange-border);
    transform: translateY(-2px);
}

.maz-cat-card__icon {
    margin-bottom: 14px;
}

.maz-cat-card__title {
    font-family: var(--maz-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--maz-dark);
    margin-bottom: 6px;
}

.maz-cat-card__desc {
    font-family: var(--maz-font);
    font-size: 13px;
    color: var(--maz-gray-500);
    line-height: 1.5;
    margin-bottom: 18px;
}

.maz-cat-card__arrow {
    font-size: 50px;
    color: var(--maz-orange);
    font-weight: 600;
    transition: transform .2s ease;
    line-height: 14px;
}

.maz-cat-card:hover .maz-cat-card__arrow {
    transform: translateX(4px);
}

/* ── TRUST STRIP ─────────────────────────────────────────────── */
.maz-trust-item-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 8px;
}

.maz-trust-icon {
    color: var(--maz-dark);
    flex-shrink: 0;
}

.maz-trust-title {
    font-family: var(--maz-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--maz-dark);
    margin-bottom: 3px;
    letter-spacing: .04em;
}

.maz-trust-desc {
    font-family: var(--maz-font);
    font-size: 12px;
    color: var(--maz-gray-500);
    line-height: 1.4;
}

/* ── PROMO BANERI ────────────────────────────────────────────── */
.maz-promo {
    border-radius: 16px;
    padding: 48px 40px;
    height: 100%;
}

.maz-promo--sage {
    background: var(--maz-sage);
}

.maz-promo--sand {
    background: var(--maz-sand);
}

.maz-promo__label {
    display: inline-block;
    font-family: var(--maz-font);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.maz-promo--sage .maz-promo__label {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.maz-promo--sand .maz-promo__label {
    background: rgba(0, 0, 0, .08);
    color: var(--maz-dark);
}

.maz-promo__title {
    font-family: var(--maz-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
}

.maz-promo--sage .maz-promo__title {
    color: #fff;
}

.maz-promo--sand .maz-promo__title {
    color: var(--maz-dark);
}

.maz-promo__desc {
    font-family: var(--maz-font);
    font-size: 14px;
    margin: 0 0 28px;
    line-height: 1.5;
}

.maz-promo--sage .maz-promo__desc {
    color: rgba(255, 255, 255, .85);
}

.maz-promo--sand .maz-promo__desc {
    color: var(--maz-gray-500);
}

/* Ghost light — za sage baner (beli tekst, bela ivica) */
.maz-btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--maz-font);
    font-size: 13px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    text-decoration: none;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

.maz-btn-ghost-light:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
    text-decoration: none;
}

.maz-btn-ghost-light:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .4);
}

.maz-btn-ghost-light:active {
    background: rgba(255, 255, 255, .35);
    transform: scale(.98);
}

/* Ghost dark — za sand baner (tamni tekst, tamna ivica) */
.maz-btn-ghost-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--maz-font);
    font-size: 13px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 8px;
    border: 1px solid rgba(31, 31, 31, .25);
    background: rgba(31, 31, 31, .07);
    color: var(--maz-dark);
    text-decoration: none;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

.maz-btn-ghost-dark:hover {
    background: rgba(31, 31, 31, .14);
    border-color: rgba(31, 31, 31, .4);
    color: var(--maz-dark);
    text-decoration: none;
}

.maz-btn-ghost-dark:focus-visible {
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
}

.maz-btn-ghost-dark:active {
    background: rgba(31, 31, 31, .2);
    transform: scale(.98);
}

/* ── NEWSLETTER ──────────────────────────────────────────────── */
.maz-newsletter {
    text-align: center;
    max-width: 580px;
    margin: 0 auto;
}

.maz-newsletter__icon {
    width: 72px;
    height: 72px;
    background: var(--maz-beige);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.maz-newsletter__title {
    font-family: var(--maz-font);
    font-size: 32px;
    font-weight: 600;
    color: var(--maz-dark);
    margin: 0 0 12px;
}

.maz-newsletter__sub {
    font-family: var(--maz-font);
    font-size: 16px;
    color: var(--maz-gray-500);
    line-height: 26px;
    margin: 0 0 32px;
}

.maz-newsletter__form {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.maz-newsletter__input {
    flex: 1;
    padding: 14px 20px;
    border: 1.5px solid var(--maz-border);
    border-radius: 12px;
    font-family: var(--maz-font);
    font-size: 14px;
    color: var(--maz-dark);
    background: #fff;
    outline: none;
    min-width: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.maz-newsletter__input:focus {
    border-color: var(--maz-orange);
    box-shadow: 0 0 0 3px var(--maz-focus-ring);
}

.maz-newsletter__input::placeholder {
    color: var(--maz-gray-400);
}

/* ── WOOCOMMERCE PRODUCT GRID OVERRIDES ──────────────────────── */

/* Hide: category under button, wishlist link */
.woocommerce ul.products li.product .maz-product-cat,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button,
.woocommerce ul.products li.product .tinvwl-shortcode-add-to-cart {
    display: none !important;
}

/* Product card */
.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid var(--maz-border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
    padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(31, 31, 31, .08);
    transform: translateY(-3px);
}

/* Sale badge — inset within the card instead of hanging over its edge
   (WooCommerce core ul.products li.product .onsale sets top:0;right:0
   with a -0.5em margin designed for a flush corner ribbon look).
   Same fix as category.css. */
.woocommerce ul.products li.product .onsale {
    top: 10px;
    right: 10px;
}

/* Product image area */
.woocommerce ul.products li.product a img {
    border-radius: 0;
    margin: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

/* Product body text */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--maz-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--maz-dark);
    padding: 16px 16px 4px;
    margin: 0;
}

.woocommerce ul.products li.product .price {
    padding: 0 16px 12px;
    display: block;
    font-family: var(--maz-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--maz-orange);
}

.woocommerce ul.products li.product .price del {
    color: var(--maz-gray-400);
    font-weight: 400;
    font-size: 13px;
}

/* Variable product "Odaberite opcije" — override yellow to orange */
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_variable:visited {
    background-color: var(--maz-orange) !important;
    color: #fff !important;
    border-color: var(--maz-orange) !important;
}

.woocommerce ul.products li.product a.button.product_type_variable:hover {
    background-color: var(--maz-orange-hover) !important;
    border-color: var(--maz-orange-hover) !important;
    color: #fff !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    border-radius: 5px !important;
    font-family: var(--maz-font);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-align: center;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Add to cart hover */
.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button:not(.product_type_variable):hover {
    background-color: var(--maz-orange-hover) !important;
    border-color: var(--maz-orange-hover) !important;
    color: #fff !important;
}

/* Add to cart focus */
.woocommerce ul.products li.product .button:focus-visible {
    box-shadow: 0 0 0 3px var(--maz-focus-ring) !important;
    outline: none;
}

/* Loading state */
.woocommerce ul.products li.product .button.loading {
    opacity: .7;
    pointer-events: none;
}

/* Added state — sage green */
.woocommerce ul.products li.product .button.added {
    background-color: var(--maz-sage) !important;
    border-color: var(--maz-sage) !important;
}

/* "Pregled korpe" link — appended by WooCommerce JS after add-to-cart succeeds */
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
    display: block;
    text-align: center;
    padding: 0 16px 16px;
    margin-top: -4px;
    font-family: var(--maz-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--maz-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover {
    color: var(--maz-orange);
}

/* ── SECTION HEADER SHARED ───────────────────────────────────── */
.maz-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 12px;
}

.maz-section-title {
    font-family: var(--maz-font);
    font-size: 32px;
    font-weight: 600;
    color: var(--maz-dark);
    margin: 0;
}

/* ── BOTTOM PROMO BANNERS (Elementor "bottom-banners-section") ──
   The banner photo's native ratio is 350:169. Elementor already sets
   background-size:cover on this div; forcing the div itself to that same
   ratio means cover has nothing to crop or zoom — the photo renders exactly
   as designed (product on the right, clear space on the left for the text),
   so no extra background layers or padding are needed. */
.bottom-banners-section .elementor-element-e527113>.elementor-element-populated,
.bottom-banners-section .elementor-element-b976ae9>.elementor-element-populated {
    /* aspect-ratio: 350 / 169; */
    background-size: contain !important;
}

/* Text container width — keeps the heading/description clear of the product photo */
.bottom-banners-section .elementor-element-8ae01a6 {
    max-width: 57%;
}

.bottom-banners-section .elementor-element-6ddd1ac {
    max-width: 77%;
    left: 0;
}

.bottom-banners-section .elementor-element-6ddd1ac .e-con-inner {
    max-width: 77%;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 768px) {

    /* ── BOTTOM PROMO BANNERS (Elementor "bottom-banners-section") ──
   The banner photo's native ratio is 350:169. Elementor already sets
   background-size:cover on this div; forcing the div itself to that same
   ratio means cover has nothing to crop or zoom — the photo renders exactly
   as designed (product on the right, clear space on the left for the text),
   so no extra background layers or padding are needed. */
    .bottom-banners-section .elementor-element-e527113>.elementor-element-populated,
    .bottom-banners-section .elementor-element-b976ae9>.elementor-element-populated {
        aspect-ratio: 350 / 169;
    }

}