/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Fix muski nakit cover image positioning for new banner image */
.elementor-element-c840a68 {
    background-position: center center !important;
    background-size: cover !important;
}

/* ===== Legal Pages ===== */
.ssb-legal-page {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0 80px;
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

.ssb-legal-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.ssb-legal-page .ssb-legal-updated {
    font-size: 0.85rem;
    color: #888;
    margin: 0 0 48px;
}

.ssb-legal-page h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #DD9933;
    margin: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.ssb-legal-page h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #EDE4D0;
    margin: 32px 0 12px;
}

.ssb-legal-page p {
    margin: 0 0 16px;
}

.ssb-legal-page a {
    color: #DD9933;
    text-decoration: none;
}

.ssb-legal-page a:hover {
    text-decoration: underline;
}

.ssb-legal-page ul,
.ssb-legal-page ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.ssb-legal-page li {
    margin-bottom: 8px;
}

.ssb-legal-page strong {
    color: #fff;
}

.ssb-legal-page em {
    color: #aaa;
}

/* Legal footer link bar */
.ssb-legal-footer-links {
    background: #000;
    border-top: 1px solid #1a1a1a;
    text-align: center;
    padding: 16px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
}

.ssb-legal-footer-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ssb-legal-footer-links a:hover {
    color: #DD9933;
}

.ssb-legal-footer-links .ssb-legal-separator {
    color: #333;
    margin: 0 12px;
}

/* Remove underline from product titles in EKit carousel (appeared after plugin update) */
.ekit-wc-product-title a,
a > .ekit-wc-product-title,
.ekit-wc-product-desc a {
    text-decoration: none !important;
}

/* Hide ElementsKit hamburger button (appeared after plugin update) */
.elementskit-menu-hamburger {
    display: none !important;
}

/* ===== Trust Badges – Sigurna Kupovina ===== */
section.ssb-trust-badges {
    background: #000 !important;
    padding: 48px 24px !important;
    margin: 0 !important;
    border-top: 1px solid #1a1a1a !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.ssb-trust-badges .ssb-trust-badges__grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 24px !important;
    list-style: none !important;
}

.ssb-trust-badges .ssb-trust-badge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
}

.ssb-trust-badges .ssb-trust-badge__icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    color: #fff !important;
    display: block !important;
    line-height: 0 !important;
}

.ssb-trust-badges .ssb-trust-badge__icon svg {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
}

.ssb-trust-badges .ssb-trust-badge__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ssb-trust-badges .ssb-trust-badge__title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.ssb-trust-badges .ssb-trust-badge__sub {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #ccc !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Tablet + Mobile: 2x2 grid */
@media (max-width: 1024px) {
    .ssb-trust-badges .ssb-trust-badges__grid {
        flex-wrap: wrap !important;
        gap: 28px 32px !important;
    }

    .ssb-trust-badges .ssb-trust-badge {
        flex: 0 0 calc(50% - 16px) !important;
    }
}

/* Small mobile: still 2x2 but tighter */
@media (max-width: 480px) {
    section.ssb-trust-badges {
        padding: 32px 16px !important;
    }

    .ssb-trust-badges .ssb-trust-badges__grid {
        gap: 20px 16px !important;
    }

    .ssb-trust-badges .ssb-trust-badge {
        gap: 10px !important;
    }

    .ssb-trust-badges .ssb-trust-badge__icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .ssb-trust-badges .ssb-trust-badge__icon svg {
        width: 36px !important;
        height: 36px !important;
    }

    .ssb-trust-badges .ssb-trust-badge__title {
        font-size: 13px !important;
    }

    .ssb-trust-badges .ssb-trust-badge__sub {
        font-size: 11px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .ssb-legal-page {
        width: 92%;
        padding: 40px 0 60px;
        font-size: 14px;
    }

    .ssb-legal-page h1 {
        font-size: 1.6rem;
    }

    .ssb-legal-page h2 {
        font-size: 1.2rem;
        margin-top: 36px;
    }

    .ssb-legal-page h3 {
        font-size: 1rem;
    }
}

/* Fix: ShopEngine injects an inline <style> rule on every product page that sets
       .shopengine-widget .shopengine-product-image.shopengine-gallery-slider
       .images.woocommerce-product-gallery .flex-control-thumbs { margin-inline: 60px !important; }
   while another ShopEngine rule forces width:100% on the same <ol>. The result is
   that the thumbnails container is 60px wider than its parent, giving the
   .woocommerce-product-gallery a scrollWidth of 595 vs clientWidth of 535. When
   FlexSlider calls scrollIntoView on the active thumbnail (slides 3 & 4), the
   browser scrolls the gallery container horizontally by 33px / 60px, which shifts
   the active main image off-screen and crops the right side of the picture.

   Inline ShopEngine selector specificity = (0,6,0). We beat it with (0,7,0) by
   doubling .shopengine-gallery-slider, and reset the rogue margin to zero. */
.shopengine-widget .shopengine-product-image.shopengine-gallery-slider.shopengine-gallery-slider
.images.woocommerce-product-gallery .flex-control-thumbs {
    margin-inline: 0 !important;
}

/* ===== Product card title: pin margins so <h4> matches previous <h1> visuals =====
   All other title styling (font, size, weight, line-height, padding) already
   targets .woocommerce-loop-product__title by class and applies unchanged. */
.shopengine-archive-products ul.products li.product h4.woocommerce-loop-product__title {
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

/* ===== Product card category badge: center, show only topmost (first) category =====
   ShopEngine sets `.product-categories { display: flex; justify-content: inherit }`,
   so text-align alone won't center the items — we must override justify-content. */
.shopengine-archive-products ul.products li.product .product-categories {
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
}

.shopengine-archive-products ul.products li.product .product-categories > li:not(:first-child) {
    display: none !important;
}

/* ShopEngine adds `content: ","` via ::after on every .product-categories > li:not(:last-child).
   Since we hide all but the first li, the visible (first) li still matches :not(:last-child)
   and renders a trailing comma. Strip it. */
.shopengine-archive-products ul.products li.product .product-categories > li::after {
    content: none !important;
}

/* Product image swap on hover */
.ssb-product-image-wrap {
    position: relative;
    overflow: hidden;
}

.ssb-product-image-wrap img.ssb-swap-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ssb-product-image-wrap.ssb-has-swap:hover img.ssb-swap-image,
.ssb-product-image-wrap.ssb-touch-active img.ssb-swap-image {
    opacity: 1;
}

/* ===== Mobile menu popup fix =====
   The mobile hamburger opens Elementor popup #6814. Symptoms reported:
   other widgets occasionally render above it, and on iOS the popup feels
   short of the real viewport because 100vh excludes the dynamic browser
   chrome. Nextend Smart Slider paints overlays at z-index: 2000000, so
   the popup (default z: 9999) can lose. Lift z-index above any known
   competitor and use 100dvh for true visible-viewport height. */
#elementor-popup-modal-6814,
#elementor-popup-modal-6814.dialog-widget {
    z-index: 2147483000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

#elementor-popup-modal-6814 .dialog-widget-content,
#elementor-popup-modal-6814 .dialog-message {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
}

/* Lock body scroll when the menu popup is open so background content
   can't bleed in visually through scroll-chaining on iOS */
body.elementor-popup-modal-open { overflow: hidden !important; }