/*
Theme Name: Wallplay Child
Theme URI: https://example.com/
Description: Child theme for Wallplay with Poppins font
Author: Your Name
Author URI: https://example.com/
Template: wallplay
Version: 1.0.0
Text Domain: wallplay-child
*/

/* 
 * Wallplay Child Theme - Custom Styles
 * Header centering, hero positioning, section titles, footer styling, and more
 */

/* ==========================
   HERO SECTION POSITIONING
   ========================== */

/* Ensure hero content is naturally positioned within its parent and centered via flexbox */
body.home .hero:first-of-type .hero__content,
body.page-template-front-page .hero:first-of-type .hero__content,
body.home .wp-site-blocks > .wp-block-wallplay-hero:first-child .hero__content,
body.home .wp-site-blocks > .wp-block-group:first-child .hero__content,
body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-hero:first-child .hero__content,
body.page-template-front-page .wp-site-blocks > .wp-block-group:first-child .hero__content,
body.home .jumbotron:first-of-type .jumbotron__content,
body.page-template-front-page .jumbotron:first-of-type .jumbotron__content,
body.home .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child .jumbotron__content,
body.home .wp-site-blocks > .wp-block-group:first-child .jumbotron__content,
body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child .jumbotron__content,
body.page-template-front-page .wp-site-blocks > .wp-block-group:first-child .jumbotron__content {
    position: relative !important; /* Revert to relative */
    top: auto !important;
    left: auto !important;
    transform: none !important; /* Remove transform */
    width: 100% !important; /* Allow content to take full width of its parent */
    max-width: 1440px !important;
    padding: 0 16px !important;
    z-index: 2 !important;
    margin: auto !important; /* Crucial for flexbox centering */
}

/* Adjust the hero/jumbotron container to clear the header and center content */
body.home .hero:first-of-type,
body.page-template-front-page .hero:first-of-type,
body.home .wp-site-blocks > .wp-block-wallplay-hero:first-child,
body.home .wp-site-blocks > .wp-block-group:first-child,
body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-hero:first-child,
body.page-template-front-page .wp-site-blocks > .wp-block-group:first-child,
body.home .jumbotron:first-of-type,
body.page-template-front-page .jumbotron:first-of-type,
body.home .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child,
body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child {
    margin-top: 0 !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* Allow content to be visible */
    padding: 20px 16px !important; /* Add vertical padding for mobile */
}


/* Define header height as a CSS variable for responsive adjustments */
:root {
    --header-height: 100px;
}

@media (max-width: 1280px) {
    :root {
        --header-height: 90px;
    }
}

@media (max-width: 992px) {
    :root {
        --header-height: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }
}

@media (max-width: 640px) {
    :root {
        --header-height: 60px;
    }
    
    /* Ensure hero container is centered and matches wrapper-contained-wide structure */
    body.home .jumbotron:first-of-type,
    body.page-template-front-page .jumbotron:first-of-type,
    body.home .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child,
    body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 48px 16px !important; /* p-4 equivalent: 16px = 1rem, pt-12 pb-12 = 48px */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure hero content is centered on mobile */
    body.home .jumbotron__content,
    body.page-template-front-page .jumbotron__content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    body.home .jumbotron__heading,
    body.page-template-front-page .jumbotron__heading {
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    body.home .jumbotron__text,
    body.page-template-front-page .jumbotron__text {
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.6 !important;
        white-space: normal !important;
        margin-top: 8px !important;
    }
    
    body.home .jumbotron__button,
    body.page-template-front-page .jumbotron__button {
        margin-top: 16px !important;
        width: auto !important;
        align-self: center !important;
        padding-left: 24px !important; /* Restore left padding */
        padding-right: 24px !important; /* Restore right padding */
    }
}

/* Subtle desktop nudge: adjust container padding so content moves slightly up */
@media (min-width: 1024px) {
    body.home .jumbotron:first-of-type,
    body.page-template-front-page .jumbotron:first-of-type,
    body.home .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child,
    body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child {
        padding-top: 12px !important; /* previously 20px; smaller top padding lifts content subtly */
    }
}

/* Precise visual nudge for hero content on large screens without reflow */
@media (min-width: 1024px) {
    body.home .jumbotron:first-of-type .jumbotron__content,
    body.page-template-front-page .jumbotron:first-of-type .jumbotron__content,
    body.home .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child .jumbotron__content,
    body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-jumbotron:first-child .jumbotron__content {
        transform: translateY(-50px) !important;
        will-change: transform;
    }
}
body.home .hero:first-of-type,
body.page-template-front-page .hero:first-of-type {
    margin-top: 0 !important;
}

/* Remove any default margin/padding from the main content and its first child on homepage */
body.home #main-content,
body.page-template-front-page #main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home #main-content > div:first-child,
body.page-template-front-page #main-content > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================
   HERO BUTTON STYLING
   ========================== */

.jumbotron__button,
.hero__button,
.hero .wp-block-button__link {
    position: relative !important;
    width: 171px !important;
    height: 56px !important;
    border-radius: 3px !important;
    border: none !important;
    background: linear-gradient(0deg, rgba(20, 20, 24, 0.70) 0%, rgba(20, 20, 24, 0.70) 100%) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    margin: 24px auto 0 !important;
}

.jumbotron__button span,
.hero__button span,
.hero .wp-block-button__link span {
    width: 110px !important;
    text-align: center !important;
    display: block !important;
}

/* ==========================
   TKO SMO MI CARD STYLING
   ========================== */

/* Target only the white card that contains "Tko smo mi?" */
.rounded-2xl.border.bg-white.shadow-md:has(p[data-slug="tko-smo-mi"]) {
    background-color: #657565 !important;
    border-color: #657565 !important;
}

.rounded-2xl.border.bg-white.shadow-md:has(p[data-slug="tko-smo-mi"]) p[data-slug="tko-smo-mi"] {
    color: #F8F4F1 !important;
}

.rounded-2xl.border.bg-white.shadow-md:has(p[data-slug="tko-smo-mi"]) a {
    color: #F8F4F1 !important;
    border-color: #F8F4F1 !important;
}

/* ==========================
   SECTION TITLES STYLING
   ========================== */


/* ==========================
   SECTION TITLES - CENTERED STYLE (ROBUST)
   ========================== */

/* Featured content title (Izdvojeni proizvodi) */
.featured-content__header {
    justify-content: center !important; /* header uses flex; ensure centered */
}

.featured-content__header h2,
.featured-content__title {
    color: #444446 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 701px !important;
    margin: 0 auto !important;
    word-wrap: break-word !important;
}

/* Headings rendered with data-slug attributes */
[data-slug="ukrasite-dom-po-svojoj-mjeri"],
[data-slug="izdvojeni-proizvodi"],
[data-slug="kvaliteta-u-svakom-detalju"],
[data-slug^="kvaliteta-u-svakom-det"],
[data-slug="nasa-prica-dobrodosli-na-wallplay"],
[data-slug="xn-naa-pria-dobrodoli-na-wallplay-nje003aqa"],
[data-slug="vizija-i-misija"] {
    color: #444446 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 701px !important;
    margin: 0 auto !important;
    word-wrap: break-word !important;
}

/* Ensure display block for slug-based headings */
[data-slug="ukrasite-dom-po-svojoj-mjeri"],
[data-slug="izdvojeni-proizvodi"],
[data-slug="kvaliteta-u-svakom-detalju"],
[data-slug^="kvaliteta-u-svakom-det"],
[data-slug="nasa-prica-dobrodosli-na-wallplay"],
[data-slug="xn-naa-pria-dobrodoli-na-wallplay-nje003aqa"],
[data-slug="vizija-i-misija"] {
    display: block !important;
}

/* Also style parent headings that wrap the slug for 'Kvaliteta u svakom detalju' */
h2:has([data-slug="kvaliteta-u-svakom-detalju"]),
h2:has([data-slug^="kvaliteta-u-svakom-det"]) {
    color: #444446 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 701px !important;
    margin: 0 auto !important;
    word-wrap: break-word !important;
}


/* ==========================
   FEATURED CONTENT NAVIGATION
   ========================== */

.featured-content__wrapper {
    position: relative !important;
}

/* Center and style overlay text at bottom of images in Featured Content on homepage */
body.home .featured-content__wrapper [class*="bottom-0"] {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    width: calc(100% - 16px) !important; /* keep some side padding */
}

/* Center the visible product label paragraph at the bottom */
body.home .featured-content__wrapper .featured-content__card > p {
    align-self: center !important;           /* center horizontally within flex column */
    text-align: center !important;           /* center text lines */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;             /* bolder */
    width: 100% !important;                  /* span card width */
    padding-left: 12px !important;           /* gentle side padding */
    padding-right: 12px !important;
    margin: 0 !important;
}
.featured-content__actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 24px !important;
    width: 100% !important;
}

/* Style the featured products navigation buttons - comprehensive approach */
.featured-content__actions .button,
.featured-content__actions .featured-content__button-prev,
.featured-content__actions .featured-content__button-next,
.featured-content__actions button,
.featured-content__actions .swiper-button-prev,
.featured-content__actions .swiper-button-next,
.featured-content__actions .swiper-button-disabled,
.featured-content__actions .featured-content__button-prev.swiper-button-disabled,
.featured-content__actions .featured-content__button-next.swiper-button-disabled,
button.featured-content__button-prev,
button.featured-content__button-next,
button.featured-content__button-prev.swiper-button-disabled,
button.featured-content__button-next.swiper-button-disabled {
    background-color: #657565 !important;
    color: #F8F4F1 !important;
    border-color: #657565 !important;
    border-radius: 8px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
}

.featured-content__actions .button:hover,
.featured-content__actions .featured-content__button-prev:hover,
.featured-content__actions .featured-content__button-next:hover,
.featured-content__actions button:hover,
.featured-content__actions .swiper-button-prev:hover,
.featured-content__actions .swiper-button-next:hover,
.featured-content__actions .swiper-button-disabled:hover,
.featured-content__actions .featured-content__button-prev.swiper-button-disabled:hover,
.featured-content__actions .featured-content__button-next.swiper-button-disabled:hover,
button.featured-content__button-prev:hover,
button.featured-content__button-next:hover,
button.featured-content__button-prev.swiper-button-disabled:hover,
button.featured-content__button-next.swiper-button-disabled:hover {
    background-color: #657565 !important;
    color: #F8F4F1 !important;
    border-color: #657565 !important;
}

.featured-content__actions .button svg,
.featured-content__actions .featured-content__button-prev svg,
.featured-content__actions .featured-content__button-next svg,
.featured-content__actions button svg,
.featured-content__actions .swiper-button-prev svg,
.featured-content__actions .swiper-button-next svg,
.featured-content__actions .swiper-button-disabled svg,
.featured-content__actions .featured-content__button-prev.swiper-button-disabled svg,
.featured-content__actions .featured-content__button-next.swiper-button-disabled svg,
button.featured-content__button-prev svg,
button.featured-content__button-next svg,
button.featured-content__button-prev.swiper-button-disabled svg,
button.featured-content__button-next.swiper-button-disabled svg {
    color: #F8F4F1 !important;
    stroke: #F8F4F1 !important;
}

.featured-content__actions .button span,
.featured-content__actions button span {
    color: #F8F4F1 !important;
    display: none !important;
}

/* ==========================
   FOOTER STYLING
   ========================== */

/* Footer typography - editable via custom CSS variables */
:root {
    --footer-font-family: 'Poppins', sans-serif;
    --footer-font-size: 16px;
    --footer-heading-font-size: 20px;
    --footer-font-weight: 400;
    --footer-heading-font-weight: 700;
    --footer-text-color: #F8F4F1;
}

/* Target the footer wrapper that has bg-green-700 */
.scroll-my-24.bg-green-700.wrapper-contained-wide {
    background-color: #2C2C2F !important;
}

/* Target the specific footer section with pt-8 pb-4 classes */
div.pt-8.pb-4.sm\:pt-16.sm\:pb-16 {
    background-color: #2C2C2F !important;
    color: var(--footer-text-color) !important;
}

.site-footer,
.wp-block-wallplay-site-footer,
footer,
body .site-footer {
    background-color: #2C2C2F !important;
    color: var(--footer-text-color) !important;
}

.site-footer .jumbotron__heading,
.site-footer .jumbotron__text,
.site-footer p,
.site-footer a,
.site-footer span,
.wp-block-wallplay-site-footer .jumbotron__heading,
.wp-block-wallplay-site-footer .jumbotron__text,
.wp-block-wallplay-site-footer p,
.wp-block-wallplay-site-footer a,
.wp-block-wallplay-site-footer span,
footer p,
footer a,
footer span {
    font-family: var(--footer-font-family) !important;
    font-size: var(--footer-font-size) !important;
    font-weight: var(--footer-font-weight) !important;
    color: var(--footer-text-color) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    font-family: var(--footer-font-family) !important;
    font-size: var(--footer-heading-font-size) !important;
    font-weight: var(--footer-heading-font-weight) !important;
    color: var(--footer-text-color) !important;
}

/* Footer section headings (Trgovina, Korisni linkovi, Pomoć) */
.site-footer .space-y-0\.5 > p,
footer .space-y-0\.5 > p,
footer p.font-bold,
.site-footer p.font-bold {
    font-family: var(--footer-font-family) !important;
    font-size: var(--footer-heading-font-size) !important;
    font-weight: var(--footer-heading-font-weight) !important;
    color: var(--footer-text-color) !important;
}

/* Newsletter title styling and text replacement */
.site-footer [data-slug="subscribe-to-our-newsletter"],
.wp-block-wallplay-site-footer [data-slug="subscribe-to-our-newsletter"],
footer [data-slug="subscribe-to-our-newsletter"] {
    font-family: 'Poppins', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #F8F4F1 !important;
    line-height: 1.2 !important;
    font-size: 0 !important; /* Hide original text */
}

/* Replace with Croatian text */
.site-footer [data-slug="subscribe-to-our-newsletter"]::after,
.wp-block-wallplay-site-footer [data-slug="subscribe-to-our-newsletter"]::after,
footer [data-slug="subscribe-to-our-newsletter"]::after {
    content: "Prijavite se na naš newsletter";
    font-size: 28px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #F8F4F1 !important;
    display: block;
}

.footer-copyright,
.site-footer .footer-copyright,
.wp-block-wallplay-site-footer .footer-copyright,
.mt-16 .inline-flex.gap-1.text-sm.text-white,
.site-footer .mt-16 .inline-flex.gap-1.text-sm.text-white,
.wp-block-wallplay-site-footer .mt-16 .inline-flex.gap-1.text-sm.text-white {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.site-footer .subscribe__title,
.wp-block-wallplay-site-footer .subscribe__title,
.site-footer .subscribe__subtitle,
.wp-block-wallplay-site-footer .subscribe__subtitle {
    color: #F8F4F1 !important;
}

.site-footer .subscribe__input,
.wp-block-wallplay-site-footer .subscribe__input {
    background-color: transparent !important;
    border-color: #F8F4F1 !important;
    color: #F8F4F1 !important;
}

.site-footer .subscribe__button,
.wp-block-wallplay-site-footer .subscribe__button {
    background-color: #F8F4F1 !important;
    color: #2C2C2F !important;
}

/* Footer Mailchimp submit button color */
.site-footer .mc4wp-form button,
.wp-block-wallplay-site-footer .mc4wp-form button,
footer .mc4wp-form button,
#mc4wp-form-1 button {
    background-color: #425642 !important;
    border-color: #425642 !important;
    color: #F8F4F1 !important;
}

.site-footer .mc4wp-form button:hover,
.wp-block-wallplay-site-footer .mc4wp-form button:hover,
footer .mc4wp-form button:hover,
#mc4wp-form-1 button:hover {
    background-color: #425642 !important;
    border-color: #425642 !important;
    color: #F8F4F1 !important;
}

/* ==========================
   HEADER NAVIGATION STYLING
   ========================== */

.site-navigation__base {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.site-navigation__base > a:first-child {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    display: block !important;
}

.site-navigation__link-container {
    margin-left: auto !important;
}

@media (max-width: 1024px) {
    .site-navigation__base > a:first-child {
        position: static !important;
        transform: none !important;
    }

    .site-navigation__link-container {
        margin-left: 0 !important;
    }
}

/* Header navigation typography - editable via custom CSS variables */
:root {
    --header-nav-font-family: 'Poppins', sans-serif;
    --header-nav-font-size: 16px;
    --header-nav-font-weight: 500;
    --header-nav-color: #2C2C2F;
}

nav a,
.site-navigation a,
.site-navigation__link,
nav .site-navigation__link-container a {
    font-family: var(--header-nav-font-family) !important;
    font-size: var(--header-nav-font-size) !important;
    font-weight: var(--header-nav-font-weight) !important;
    color: var(--header-nav-color) !important;
    white-space: nowrap !important;
}

nav a:hover,
.site-navigation a:hover {
    color: var(--header-nav-color) !important;
}

/* Ensure cart link has no background overlay */
nav .js-cart-link {
    background: transparent !important;
}

nav .js-cart-link:hover {
    background: transparent !important;
}

/* Remove logo link hover effects on all pages */
nav a:has(img),
nav a:has(img):hover {
    text-decoration: none !important;
}

nav a:has(img) img,
nav a:has(img):hover img {
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================
   HOMEPAGE-ONLY MENU STYLING
   ========================== */

/* Position navigation absolutely over hero image on homepage */
body.home nav,
body.page-template-front-page nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0) 100%) !important;
    min-height: 150px !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure header is at the very top on desktop - account for admin bar if present */
@media (min-width: 641px) {
    body.home nav,
    body.page-template-front-page nav {
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Account for WordPress admin bar if present */
    .admin-bar body.home nav,
    .admin-bar body.page-template-front-page nav {
        top: 32px !important;
    }
    
    @media screen and (max-width: 782px) {
        .admin-bar body.home nav,
        .admin-bar body.page-template-front-page nav {
            top: 46px !important;
        }
    }
}

/* White text for homepage menu links */
body.home nav a,
body.page-template-front-page nav a,
body.home .site-navigation a,
body.page-template-front-page .site-navigation a,
body.home .site-navigation__link,
body.page-template-front-page .site-navigation__link {
    color: #F5F7FA !important;
    font-size: 14px !important;
    font-family: 'Cabin', 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.home nav a:hover,
body.page-template-front-page nav a:hover,
body.home .site-navigation a:hover,
body.page-template-front-page .site-navigation a:hover {
    color: #F5F7FA !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
}

/* Remove logo hover effects everywhere */
body.home nav a img,
body.page-template-front-page nav a img,
nav a:has(img):hover,
.site-navigation a:has(img):hover {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Cart icon color defaults (non-home pages) */
nav svg,
.site-navigation svg,
nav svg path,
.site-navigation svg path {
    stroke: #000000 !important;
    color: #000000 !important;
}

/* Cart icon color on homepage */
body.home nav svg,
body.home .site-navigation svg,
body.home nav svg path,
body.home .site-navigation svg path,
body.page-template-front-page nav svg,
body.page-template-front-page .site-navigation svg,
body.page-template-front-page nav svg path,
body.page-template-front-page .site-navigation svg path {
    stroke: #CDD4C5 !important;
    color: #CDD4C5 !important;
}

/* Cart link text colors - always white on homepage */
body.home nav a.js-cart-link {
    color: #F5F7FA !important;
}

body.home nav a.js-cart-link,
body.home .site-navigation a.js-cart-link {
    color: #F5F7FA !important;
}

body.home nav a.js-cart-link * {
    color: #F5F7FA !important;
}

/* Exception: Cart indicator number should always be black, even on homepage */
body.home nav a.js-cart-link .cart-indicator,
body.page-template-front-page nav a.js-cart-link .cart-indicator,
body.home nav a.js-cart-link .cart-indicator *,
body.page-template-front-page nav a.js-cart-link .cart-indicator * {
    color: #000000 !important;
}

/* Keep Košarica white on hover/focus/active on homepage */
body.home nav a.js-cart-link:hover,
body.home nav a.js-cart-link:focus,
body.home nav a.js-cart-link:active,
body.page-template-front-page nav a.js-cart-link:hover,
body.page-template-front-page nav a.js-cart-link:focus,
body.page-template-front-page nav a.js-cart-link:active {
    color: #F5F7FA !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
    background: transparent !important;
}

body.page-template-front-page nav a.js-cart-link {
    color: #F5F7FA !important;
}

body.page-template-front-page .site-navigation a.js-cart-link {
    color: #F5F7FA !important;
}

body.page-template-front-page nav a.js-cart-link * {
    color: #F5F7FA !important;
}

/* Exception: Cart indicator number should always be black, even on homepage */
body.page-template-front-page nav a.js-cart-link .cart-indicator,
body.page-template-front-page nav a.js-cart-link .cart-indicator * {
    color: #000000 !important;
}

body.home nav .js-cart-link:hover,
body.home .site-navigation .js-cart-link:hover,
body.page-template-front-page nav .js-cart-link:hover,
body.page-template-front-page .site-navigation .js-cart-link:hover {
    color: #F5F7FA !important;
    opacity: 1 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
}

body:not(.home) nav .js-cart-link,
body:not(.page-template-front-page) nav .js-cart-link,
body:not(.home) .site-navigation .js-cart-link,
body:not(.page-template-front-page) .site-navigation .js-cart-link {
    color: #000000 !important;
}

body:not(.home) nav .js-cart-link:hover,
body:not(.page-template-front-page) nav .js-cart-link:hover,
body:not(.home) .site-navigation .js-cart-link:hover,
body:not(.page-template-front-page) .site-navigation .js-cart-link:hover {
    color: #000000 !important;
    opacity: 1 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
}

/* Cart indicator styling */
.cart-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    margin-left: 6px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Cart indicator styling - always black number on white/light background */
body.home .cart-indicator,
body.page-template-front-page .cart-indicator,
body:not(.home) .cart-indicator,
body:not(.page-template-front-page) .cart-indicator,
.cart-indicator {
    background-color: #F5F7FA !important;
    color: #000000 !important;
}

/* Ensure cart indicator number is always black on all screen sizes and pages */
/* Use very specific selectors to override the white color from parent links */
body.home .cart-indicator,
body.page-template-front-page .cart-indicator,
body.home nav .cart-indicator,
body.page-template-front-page nav .cart-indicator,
body.home nav a.js-cart-link .cart-indicator,
body.page-template-front-page nav a.js-cart-link .cart-indicator,
body.home .site-navigation a.js-cart-link .cart-indicator,
body.page-template-front-page .site-navigation a.js-cart-link .cart-indicator,
.cart-indicator {
    color: #000000 !important;
}

/* Remove logo inversion - now using white SVG directly on homepage */

/* Fix mobile hamburger menu positioning on homepage */
@media (max-width: 640px) {
    /* Remove white background from nav wrapper on mobile homepage - override Tailwind bg-white */
    /* Keep nav absolutely positioned to overlay hero image, just like desktop */
    /* Add black overlay on mobile just like desktop */
    body.home nav,
    body.page-template-front-page nav,
    body.home nav[class*="bg-white"],
    body.page-template-front-page nav[class*="bg-white"],
    body.home nav.bg-white,
    body.page-template-front-page nav.bg-white,
    /* More specific selectors to override Tailwind */
    body.home nav.bg-white.border-b,
    body.page-template-front-page nav.bg-white.border-b {
        position: absolute !important; /* Keep absolute to overlay hero like desktop */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 64px !important;
        width: 100% !important;
        z-index: 20 !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0) 100%) !important; /* Black overlay on mobile like desktop */
        background-color: transparent !important;
        border-bottom: none !important;
        border-color: transparent !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Override any white background on nav wrapper divs */
    body.home nav[class*="bg-white"] > div,
    body.page-template-front-page nav[class*="bg-white"] > div,
    body.home nav > div,
    body.page-template-front-page nav > div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        position: relative !important;
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Target any wp-block wrapper that might have white background */
    body.home .wp-block-wallplay-site-navigation,
    body.page-template-front-page .wp-block-wallplay-site-navigation,
    body.home .wp-block-wallplay-site-navigation[class*="bg-white"],
    body.page-template-front-page .wp-block-wallplay-site-navigation[class*="bg-white"],
    body.home .wp-block[class*="site-navigation"],
    body.page-template-front-page .wp-block[class*="site-navigation"],
    body.home .wp-site-blocks > .wp-block-wallplay-site-navigation,
    body.page-template-front-page .wp-site-blocks > .wp-block-wallplay-site-navigation {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Ensure any parent containers are also transparent */
    body.home .wp-site-blocks > *:has(nav),
    body.page-template-front-page .wp-site-blocks > *:has(nav) {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Center logo on mobile */
    body.home nav > div > a:first-child,
    body.page-template-front-page nav > div > a:first-child {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 30 !important;
    }

    /* Cart link positioned to the left of hamburger - mobile cart icon */
    body.home nav > div > a[href*="cart"]:not(.js-cart-link),
    body.page-template-front-page nav > div > a[href*="cart"]:not(.js-cart-link),
    body.home nav > div > a[class*="sm:hidden"][href*="cart"],
    body.page-template-front-page nav > div > a[class*="sm:hidden"][href*="cart"] {
        position: absolute !important;
        right: 80px !important; /* Much more space between cart and hamburger */
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 40 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    body.home nav > div > a[href*="cart"]:not(.js-cart-link) svg,
    body.page-template-front-page nav > div > a[href*="cart"]:not(.js-cart-link) svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Keep hamburger menu on far right */
    body.home nav button[data-micromodal-trigger],
    body.page-template-front-page nav button[data-micromodal-trigger],
    body.home nav > div > button,
    body.page-template-front-page nav > div > button {
        position: absolute !important;
        right: 12px !important; /* Space from edge */
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: -5px !important; /* shift slightly upward for better alignment */
        z-index: 50 !important;
        background: transparent !important;
        background-color: transparent !important;
    }
}


/* Style cart indicator in mobile menu */
.cart-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure mobile drawer overlays navigation */
#navbar-mobile-flyout .fixed {
    z-index: 999 !important;
    padding-top: calc(var(--header-height, 80px) + 16px) !important;
}

#navbar-mobile-flyout [role="dialog"] {
    z-index: 1000 !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

#navbar-mobile-flyout a[href*="cart"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: inherit !important;
    text-decoration: none !important;
}

#navbar-mobile-flyout a[href*="cart"] .cart-indicator {
    margin-left: 0 !important;
}

/* ==========================
   HEADER NAVIGATION CENTERING (STRUCTURAL)
   ========================== */
@media (min-width: 641px) {
    nav > div {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
    }
    
    /* Center the logo link (first anchor) */
    nav > div > a:first-child {
        grid-column: 2 !important;
        justify-self: center !important;
    }
    
    /* Keep the primary link container on the right */
    nav > div > div:first-of-type {
        grid-column: 3 !important;
        justify-self: end !important;
    }
    
    /* Place any additional header anchors (e.g., mobile cart) on the right as well */
    nav > div > a:not(:first-child) {
        grid-column: 3 !important;
        justify-self: end !important;
    }
}


/* Preporučeni proizvodi section background */
.preporuceni-proizvodi-section {
    background-color: #F8F4F1 !important;
    display: flow-root !important; /* prevent margin collapse so background covers edges */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove vertical margins on inner container to avoid white strips */
.preporuceni-proizvodi-section > .max-w-big-screen {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* FacetWP Load More button styling to match 'Istraži stilove' */
.facetwp-load-more {
    position: relative !important;
    width: 171px !important;
    height: 56px !important;
    border-radius: 3px !important;
    border: none !important;
    background: linear-gradient(0deg, rgba(20, 20, 24, 0.70) 0%, rgba(20, 20, 24, 0.70) 100%) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    margin: 24px auto 0 !important;
}

.facetwp-load-more:hover,
.facetwp-load-more:focus {
    background: linear-gradient(0deg, rgba(20, 20, 24, 0.70) 0%, rgba(20, 20, 24, 0.70) 100%) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Ensure the pager container centers the button */
.facetwp-facet-shop_load_more.facetwp-type-pager,
.facetwp-facet.facetwp-type-pager {
    display: flex !important;
    justify-content: center !important;
}