/*
 * ITALIST THEME - CUSTOM CSS OVERRIDES
 * This file is loaded on EVERY page template!
 * Make your customizations here.
 */

/* ============================================
   COLOR OVERRIDES
   ============================================ */

/* Primary brand color */
/*
:root {
    --primary-color: #000000;
    --accent-color: #ff0000;
}
*/

/* Background colors */
/*
body, .page-wrapper {
    background-color: #ffffff !important;
}
*/

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Font family */
/*
body {
    font-family: 'Your Font', sans-serif !important;
}
*/

/* ============================================
   YOUR CUSTOM STYLES BELOW
   ============================================ */


/* ============================================
   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;
}


/* ============================================
   NAVIGATION GENDER SWITCHING (CSS)
   ============================================ */

/* Hide all department navs by default */
.navigation-menu-wrapper[data-dept] {
    display: none;
}

/* Show women nav when dept-women */
body.dept-women .navigation-menu-wrapper[data-dept="women"] {
    display: flex !important;
}

/* Show men nav when dept-men */
body.dept-men .navigation-menu-wrapper[data-dept="men"] {
    display: flex !important;
}


/* ============================================
   TOGGLE BUTTON STYLES
   ============================================ */

.header-department-box-container a {
    cursor: pointer !important;
    user-select: none;
}

.header-department-box-container a:hover {
    text-decoration: none;
}

/* Active department indicator */
.department-text.jsx-2005615775 {
    font-weight: bold !important;
    position: relative;
}

.department-text.jsx-2005615775::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: currentColor;
}

/* Inactive department */
.department-text.jsx-2522988750 {
    opacity: 0.7;
}

.department-text.jsx-2522988750:hover {
    opacity: 1;
}


/* ============================================
   DROPDOWN MENU HOVER STYLES
   ============================================ */

/* Show dropdown on hover */
.nav-link:hover + .hover-box,
.hover-box:hover {
    display: block !important;
}

/* Ensure hover-box is hidden by default */
.hover-box.hidden {
    display: none;
}

/* Position dropdown properly */
.hover-box {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    min-width: 200px;
    padding: 15px 0;
}