/*
 * QATARSHOES THEME - CUSTOM CSS OVERRIDES
 * This file is loaded on EVERY page template!
 */

/* ============================================
   HERO IMAGE GENDER SWITCHING
   ============================================ */

/* Default hero images - CSS Variables */
:root {
    --hero-women-image: url('https://qatarshoes.apexlabagency.com/wp-content/uploads/2025/12/5-1.png');
    --hero-men-image: url('https://qatarshoes.apexlabagency.com/wp-content/uploads/2025/12/4-1.png');
}

/* Hero image base styles */
.hero-image {
    transition: background 0.5s ease-in-out !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Gender-specific hero backgrounds */
body.dept-women .hero-image {
    background: var(--hero-women-image) center/cover no-repeat !important;
}

body.dept-men .hero-image {
    background: var(--hero-men-image) center/cover no-repeat !important;
}

/* ============================================
   QATAR SHOES BRANDING
   ============================================ */

/* Hide legacy SVG logo (rendered by React/JS) */
.qatarshoes-logo-container svg,
.logo.jsx-f20bdc55fc53c205 svg,
#logo-img svg,
a[aria-label="qatarshoes logo"] svg,
svg[viewbox="0 0 128 47"],
svg[viewBox="0 0 128 47"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide logo completely inside jsx-1401438402 container (no SVG, no background) */
.jsx-1401438402.qatarshoes-logo-container svg {
    display: none !important;
    visibility: hidden !important;
}
.jsx-1401438402.qatarshoes-logo-container #logo-img,
.jsx-1401438402.qatarshoes-logo-container a[aria-label="Qatar Shoes logo"] {
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Show Qatar Shoes logo via background-image on anchor */
#logo-img,
a[aria-label="qatarshoes logo"] {
    display: block !important;
    background-image: url('https://qtrshoe.com/wp-content/uploads/2025/12/Qtrshoe-logo-black--e1767178505601.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Header logo dimensions */
.logo.jsx-f20bdc55fc53c205 #logo-img,
.logo.jsx-f20bdc55fc53c205 a[aria-label="qatarshoes logo"] {
    width: 100px !important;
    height: 37px !important;
    min-width: 100px !important;
    min-height: 37px !important;
}

/* Footer logo dimensions (larger) */
.jsx-980088968.section-item #logo-img,
.jsx-980088968.section-item a[aria-label="qatarshoes logo"],
footer #logo-img,
footer a[aria-label="qatarshoes logo"] {
    width: 152px !important;
    height: 55px !important;
    min-width: 152px !important;
    min-height: 55px !important;
}

/* Show any img tag inside logo-img */
#logo-img img {
    display: block !important;
    visibility: visible !important;
    max-width: 100%;
    height: auto;
}

/* Hide country selector */
.wrapper.jsx-2328171715,
.country-and-flag-wrapper,
.country-iso-code,
.second-lang {
    display: none !important;
}

/* Hide Kids toggle if exists */
[data-dept="kids"],
.department-text[title="Kids"],
span[title="Kids"] {
    display: none !important;
}

/* ============================================
   HIDE REACT/LEGACY MOBILE DRAWER CONTENT
   Keep only WordPress injected menu
   ============================================ */

/* Hide ALL React drawer navigation - WordPress menu replaces it */
[role="dialog"] [class*="jsx"]:not(.wp-drawer-tabs):not(.wp-injected-menu):not([class*="close"]):not([class*="Close"]) > a[href*="Homepage"],
[role="dialog"] [class*="jsx"]:not(.wp-drawer-tabs):not(.wp-injected-menu) > a:contains("Homepage") {
    display: none !important;
}

/* Hide any duplicate "Women" / "Men" tab buttons that aren't from WordPress */
[role="dialog"] [class*="jsx"] button[class*="jsx"]:not(.wp-drawer-tab):not(.wp-drawer-expand-btn) {
    display: none !important;
}

/* Force hide ALL sibling content after WordPress menu wrapper */
[role="dialog"] .wp-drawer-tabs ~ *:not(.wp-injected-menu),
[role="dialog"] .wp-injected-menu ~ * {
    display: none !important;
}

/* Ensure WordPress drawer takes full height and hides overflow */
[role="dialog"] > div {
    overflow: hidden !important;
}

[role="dialog"] > div > div:first-child:has(.wp-drawer-tabs) {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Hide the original React menu when WordPress menu exists */
[role="dialog"]:has(.wp-drawer-tabs) > div > div:not(:first-child) {
    display: none !important;
}

/* ============================================
   SHOPIFY PRODUCTS LOADING STATES
   Shows shimmer while Shopify products load
   ============================================ */

/* Show loading placeholder shimmer until Shopify products load */
.products-container:not(.shopify-loaded)::before {
    content: '';
    display: block;
    width: 100%;
    min-height: 300px;
    background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: products-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes products-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Remove shimmer when Shopify products are loaded */
.products-container.shopify-loaded::before {
    display: none !important;
}

/* Shimmer for product-grid-container (used on collection pages) */
.product-grid-container:not(.shopify-loaded)::before {
    content: '';
    display: block;
    width: 100%;
    min-height: 400px;
    background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: products-shimmer 1.5s infinite;
    border-radius: 4px;
    grid-column: 1 / -1;
}

.product-grid-container.shopify-loaded::before {
    display: none !important;
}

/* Ensure all Shopify-loaded products are visible */
.products-container.shopify-loaded > *,
.product-grid-container.shopify-loaded > *,
.product-grid.shopify-loaded > * {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Product card visibility - use flex for vertical alignment */
.shopify-loaded .product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Product card wrapper needs flex for vertical alignment */
.shopify-loaded .product-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Product link needs flex for vertical alignment */
.shopify-loaded .product-card-wrapper > a[href*="/product/"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Image visibility in loaded containers */
.shopify-loaded img {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Primary image display */
.shopify-loaded .image-container img.firstImage {
    display: block !important;
}

/* Secondary/hover images (controlled by JS on hover) */
.shopify-loaded .image-container img:not(.firstImage) {
    display: none !important;
}

/* ============================================
   HIDE UNCONFIGURED SECTIONS
   Based on collection configuration per gender
   ============================================ */

/* Hide sections when current gender doesn't have collection configured */
body.dept-women .homepage-section[data-has-women="false"] {
    display: none !important;
}

body.dept-men .homepage-section[data-has-men="false"] {
    display: none !important;
}

/* ============================================
   HOMEPAGE PRODUCT SECTIONS - 2x2 GRID ON MOBILE
   ============================================ */

/* Mobile: 2 columns grid - Override jsx styles */
@media (max-width: 1023px) {
    /* Override ALL products-container jsx classes to 2x2 grid */
    .products-container.jsx-3213987687,
    .products-container.jsx-2630333056,
    .products-container.jsx-2492920896,
    .homepage-section .products-container,
    .featured-products-container .products-container,
    .gift-products-container .products-container,
    .new-arriaval-products-container .products-container,
    .trending-products-container .products-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        grid-template-areas: "a b" "c d" !important;
        gap: 1px !important;
    }

    /* IMPORTANT: Override jsx rules that hide grid-area:a products */
    .jsx-2630333056[style*="grid-area:a"],
    .jsx-2492920896[style*="grid-area:a"],
    .products-container > div[style*="grid-area:a"],
    .products-container > div[style*="grid-area: a"] {
        display: flex !important;
    }

    /* Product card grid areas - reassign based on child position */
    .products-container > div:nth-child(1) {
        grid-area: a !important;
    }
    .products-container > div:nth-child(2) {
        grid-area: b !important;
    }
    .products-container > div:nth-child(3) {
        grid-area: c !important;
    }
    .products-container > div:nth-child(4) {
        grid-area: d !important;
    }

    /* Show only first 4 products (2x2 grid) */
    .products-container > *:nth-child(n+5) {
        display: none !important;
    }
}

/* ============================================
   HIDE BREADCRUMBS ON COLLECTION & PRODUCT PAGES
   ============================================ */

.collection-page .breadcrumbs,
.product-page .breadcrumbs {
    display: none !important;
}