@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Montserrat:wght@300;400;600;700;800&display=swap');

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: none !important; /* Disabled as per user request */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: hidden;
    opacity: 0;
}

.page-loader.show {
    visibility: visible;
    opacity: 1;
}

.loader-content {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(61, 57, 146, 0.1);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-content img {
    width: 60px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.7; }
}

:root {
    --bg-main: #ffffff;
    --bg-surface: #ffffff;
    --primary-color: #3d3992;
    --primary-dark: #2a2769;
    --primary-light: #5a55c2;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border-color: rgba(61, 57, 146, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --glass: rgba(255, 255, 255, 0.7);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', 'Cairo', sans-serif;
}

html, body {
    overflow-x: clip !important;
    width: 100% !important;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    padding-top: 84px; /* Offset for fixed header */
}

body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

[dir="rtl"] {
    font-family: 'Cairo', 'Montserrat', sans-serif;
}

/* Language Visibility Logic */
[dir="rtl"] .lang-en { display: none !important; }
[dir="ltr"] .lang-ar { display: none !important; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0;
    font-weight: 800;
}

p, span, a, li, input, textarea, button {
    font-family: 'Montserrat', 'Cairo', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* Buttons */
.btn {
    padding: 12px 30px;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.btn:hover {
    background: var(--primary-color);
    color: #ffffff;
}

.btn-primary {
    background: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary-color);
}

/* Header & Navigation */
header {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}

header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom-color: transparent;
}

.header-main {
    position: relative;
    background: #23214f;
    z-index: 10;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

header .container {
    overflow: visible !important;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84px;
    position: relative;
    z-index: 1;
    transition: height 0.3s ease;
}

header.scrolled .nav-wrapper {
    height: 75px;
}

.logo img {
    height: 70px;
    
    transition: height 0.3s ease;
}

header.scrolled .logo img {
    height: 55px;
}

/* Secondary Header */
/* Secondary Header */
.header-bottom {
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    padding: 12px 0;
    display: flex;
    justify-content: center;
}

.main-nav {
    position: static;
    width: 100%;
}

.header-bottom .main-nav ul {
    justify-content: center;
    gap: 40px;
}

.slider-arrow {
    display: none;
}

.mobile-action-slider {
    display: none;
}

.main-nav ul {
    display: flex;
    gap: 30px;
    height: 100%;
    position: static;
}

.nav-item {
    display: flex;
    align-items: center;
    height: 100%;
    position: static;
}

.main-nav ul li a {
    color: var(--text-main);
}

.main-nav ul li a:hover {
    color: var(--primary-color);
}

/* Central Search Bar */
.central-search-bar {
    flex: 1;
    max-width: 650px;
    margin: 0 40px;
    position: static !important;
}

#clearSearchHistory span {
    display: none !important;
}

#clearSearchHistory {
    background: #f5f5f5 !important;
    border: none !important;
    color: var(--primary-color) !important;
    font-size: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#clearSearchHistory:hover {
    background: #eeeeee;
}

#clearSearchHistory:active {
    background: #e0e0e0;
    transform: scale(0.9);
}

.central-search-bar form {
    display: flex;
    align-items: stretch;
        border-radius: 50px;
    height: 48px;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 101;
    overflow: hidden !important;
}

[dir="rtl"] .central-search-bar form {
    padding: 0 15px 0 0 !important;
}

[dir="ltr"] .central-search-bar form {
    padding: 0 0 0 15px !important;
}

.central-search-bar form:focus-within {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.central-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 15px;
    font-family: inherit;
    font-size: 14px;
    color: #ffffff;
    outline: none;
    height: 100%;
}
.central-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.central-search-bar button {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    width: 35px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-filter-btn {
    background: #ffffff !important;
    color: #23214f !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
}

[dir="rtl"] .search-filter-btn {
    margin-left: 0 !important;
    left: 0 !important;
}

[dir="ltr"] .search-filter-btn {
    margin-right: 0 !important;
    right: 0 !important;
}

.search-filter-btn:hover {
    background: #f0f0f0 !important;
    transform: scale(1.02);
}

.search-submit-btn {
    margin-inline-end: 5px;
    margin-inline-start: 0;
}

/* Search History Dropdown */
.search-history-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    padding: 25px 20px;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s ease;
    z-index: 999;
}

.search-history-dropdown .search-history-header {
    margin-top: 15px;
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
}

.search-history-dropdown .search-history-list {
    margin-top: 20px !important;
    max-width: 650px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    width: 100%;
}

.central-search-bar.active .search-history-dropdown {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
}

.search-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.search-history-header button {
    background: transparent;
    border: none;
    color: #e74c3c;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.search-history-list {
    list-style: none;
    padding: 0;
    margin-top: 15px !important;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-history-list li {
    background: #f0f0f0;
    color: var(--text-main);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.search-history-list li:hover {
    background: var(--primary-color);
    color: #fff;
}

.search-history-list li i {
    font-size: 11px;
    opacity: 0.7;
}

/* Sidebar Search Suggestions Dropdown */
.sidebar-search-container {
    position: relative;
    width: 100%;
}

.sidebar-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 105;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar-suggestions-dropdown::-webkit-scrollbar {
    display: none;
}

.sidebar-search-container.active .sidebar-suggestions-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Search Suggestions Dropdown Styling */
.search-suggestions-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.search-suggestions-header {
    font-size: 14px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    font-weight: 600;
}

.search-suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: none;
}
.search-suggestions-list::-webkit-scrollbar {
    display: none;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    text-decoration: none;
}

.suggestion-item:hover {
        transform: translateX(4px);
}
[dir="rtl"] .suggestion-item:hover {
    transform: translateX(-4px);
}

.suggestion-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.suggestion-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.suggestion-name {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
    transition: color 0.2s ease;
}

.suggestion-item:hover .suggestion-name {
    color: var(--primary-color);
}

.suggestion-price {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.suggestion-price .curr-price {
    color: var(--primary-color);
    font-weight: 600;
}

.suggestion-price .old-price {
    color: var(--text-light);
    text-decoration: line-through;
    font-size: 11px;
    opacity: 0.8;
}

.header-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Search Toggle */
.search-toggle {
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    background: var(--primary-color);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(61, 57, 146, 0.2);
}

.search-toggle:hover {
    background: var(--text-main);
    transform: translateY(-2px);
}

/* Dropdown Search */
.dropdown-search {
    position: absolute;
    top: 100%; /* Automatically aligns to the bottom of the header */
    left: 0;
    width: 100%;
    background: #fff;
    padding: 25px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: none;
    z-index: 5;
    border-top: 1px solid var(--border-color);
}

.dropdown-search.active {
    display: block;
    animation: searchSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top;
}

@keyframes searchSlideDown {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.search-input-wrapper input {
    width: 100%;
    padding: 16px 25px;
    padding-left: 60px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 16px;
    font-family: inherit;
    background: #f9fafb;
    transition: var(--transition);
}

html[dir="ltr"] .search-input-wrapper input {
    padding-left: 25px;
    padding-right: 60px;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(61, 57, 146, 0.1);
}



.search-close {
    position: absolute;
    left: 20px;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

html[dir="ltr"] .search-close {
    left: auto;
    right: 20px;
}

.search-close:hover {
    color: var(--primary-color);
}

/* Action Icons */
.action-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

.action-icons a {
    color: var(--text-main);
    font-size: 18px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
}

.action-icons a:hover {
    color: var(--primary-color);
    }

.header-count-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    user-select: none;
}

.lang-selected {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    transition: var(--transition);
    background: #fff;
    white-space: nowrap;
}

.lang-selected:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.lang-selected .flag {
    font-size: 18px;
    line-height: 1;
}

.lang-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    min-width: 150px;
    z-index: 9999;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.lang-dropdown.open .lang-options {
    max-height: 200px;
    opacity: 1;
    pointer-events: auto;
}

.lang-dropdown.open .lang-selected {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.lang-option {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
    color: var(--text-main);
}

.lang-option:hover {
        color: var(--primary-color);
}

.lang-option.active {
        color: var(--primary-color);
    font-weight: 700;
}

.lang-option .flag {
    font-size: 18px;
    line-height: 1;
}

/* Nav Links */
.main-nav ul li a {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 500;
    padding: 5px 0;
    position: relative;
    transition: var(--transition);
}

.main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

[dir="rtl"] .main-nav ul li a::after {
    left: auto;
    right: 0;
}

.main-nav ul li a:hover,
.main-nav ul li a.active-link {
    color: var(--primary-color);
}

.main-nav ul li a:hover::after,
.main-nav ul li a.active-link::after {
    width: 100%;
}

/* Mega Menu Close Button - Hidden on Desktop by default */
.mega-menu-close {
    display: none !important;
}

/* Mega Menu */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg-surface);
    border-top: 3px solid var(--primary-color);
    padding: 50px 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    display: none;
    z-index: 100;
}

.mega-menu.show {
    display: block;
    animation: megaFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes megaFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    margin: 0;
}

.mega-column {
    padding: 0 25px;
}

[dir="rtl"] .mega-column {
    text-align: right;
    border-left: 1px solid rgba(61, 57, 146, 0.1);
}

[dir="ltr"] .mega-column {
    text-align: left;
    border-right: 1px solid rgba(61, 57, 146, 0.1);
}

[dir="rtl"] .mega-column:last-child {
    border-left: none;
}

[dir="ltr"] .mega-column:last-child {
    border-right: none;
}

.mega-column h4 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 16px;
    font-weight: 800;
    position: relative;
    padding-bottom: 12px;
}

.mega-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-color);
}

[dir="rtl"] .mega-column h4::after {
    right: 0;
}

[dir="ltr"] .mega-column h4::after {
    left: 0;
}

.mega-column ul li {
    margin-bottom: 15px;
}

.mega-column ul li a {
    color: var(--text-main);
    font-size: 15px;
    display: block;
    padding: 5px 0;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}

.mega-column ul li a:hover {
    color: var(--primary-color);
    transform: translateX(-8px);
}

/* Hero Section */
.hero {
    min-height: 85vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    position: relative;
    padding: 80px 0;
}

.hero::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
        filter: blur(120px);
    border-radius: 50%;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
        filter: blur(120px);
    border-radius: 50%;
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 80px; /* يعطي مساحة داخلية عشان الكارت العايم ما يتقصش */
}

.hero-content {
    max-width: 650px;
    z-index: 2;
    text-align: right;
}

[dir="ltr"] .hero-content {
    text-align: left;
}

.hero-tag {
    display: inline-block;
        color: var(--primary-color);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.hero-content h1 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--text-main);
    font-weight: 800;
    min-height: 1.2em;
    visibility: hidden;
}

.hero-content p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 45px;
    line-height: 1.8;
    max-width: 500px;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

[dir="rtl"] .hero-btns { justify-content: flex-start; }
[dir="ltr"] .hero-btns { justify-content: flex-start; }

.hero-image {
    position: relative;
    z-index: 1;
}

.image-wrapper {
    position: relative;
    border-radius: 20px 250px 20px 20px; /* يعطي شكل مائل للقوس العلوي الأيمن */
    overflow: hidden;
    aspect-ratio: 3 / 3; /* يخلي القالب طويل (شكل طولي) */
    min-height: 550px;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Features Card */
.hero-features-card {
    position: absolute;
    bottom: -75px;
    left: 50%;
    /* transform removed for safer centering */
    background: #ffffff;
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    z-index: 999;
    width: 90%;
    max-width: 500px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.feature-icon {
    width: 32px;
    height: 32px;
        -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-item span {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

.hero-image:hover img {
    transform: scale(1.05);
}

/* Static Line Before Text */
#hero-typing::before {
    content: '|';
    margin-inline-end: 10px;
    color: var(--primary-color);
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    .hero-content {
        max-width: 100%;
        order: 2;
        text-align: center;
    }
    [dir="ltr"] .hero-content { text-align: center; }
    .hero-btns {
        justify-content: center;
    }
    .hero-image {
        order: 1;
        max-width: 500px;
        margin: 0 auto;
    }
}

.hero-content .btn-primary:hover {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Sections */
section {
    padding: 100px 0;
    overflow: hidden; /* Prevent internal elements from pushing width */
    position: relative;
    width: 100%;
}

/* Lookbook CTA — إزالة المسافة قبل الفوتر */
section.lookbook-cta {
    padding: 150px 0 !important;
    margin: 0 !important;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    color: #3d3992 !important;
}

/* Ensure all section headers/titles are color #3d3992 and bold */
.section-header h2,
.section-header-centered h2,
.offers-header h2,
.slider-header h2,
.section-title h2,
.checkout-section-title,
.paymob-section-header,
.wholesale-section-header h2,
.reviews-section-header h2,
h2.section-title,
.section-label,
.highlights-header h3 {
    color: #3d3992 !important;
    font-weight: bold !important;
}

/* Ensure all subcategory headers and popular search headers are color #3d3992 and bold */
.slider-header h4:not([style*="color"]),
.slider-header a h4,
.slider-header h4 a,
.trends-header h3 {
    color: #3d3992 !important;
    font-weight: bold !important;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: var(--primary-color);
}

.section-header span,
.category-header span,
.header-text span,
.section-header > span,
.header-text > span {
    color: #3d3992 !important;
    text-transform: uppercase;
    font-weight: bold !important;
    display: block;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

/* Product Cards */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    transition: all 0.3s ease;
}

@media (min-width: 1200px) {
    .product-grid:not(.list-view) {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* List View Layout */
.product-grid.list-view {
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .product-grid.list-view {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.product-grid.list-view .product-card {
    flex-direction: row;
    align-items: stretch;
}

.product-grid.list-view .product-image {
    width: 220px;
    border-bottom: none;
    border-left: 1px solid var(--border-color); /* RTL separator */
    flex-shrink: 0;
}

.product-grid.list-view .product-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.product-description {
    display: none;
    font-size: 14px;
    color: var(--text-muted);
    margin: 10px 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-grid.list-view .product-description {
    display: -webkit-box;
}

.product-grid.list-view .product-info h3 {
    font-size: 20px;
}



.product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    position: relative;
    transition: var(--transition);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}



.product-image {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    background-color: #ffffff !important; /* لون خلفية أبيض لدمج الصور ذات الخلفية البيضاء */
}

.product-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.product-actions .view-btn {
    flex-grow: 1;
    margin-bottom: 0; /* Override if any */
}

.wishlist-btn {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.wishlist-btn:hover {
    background: #fee;
    color: #e53935;
    border-color: #fcc;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* تجعل الصورة تملأ مساحتها بالكامل */
    background-color: transparent !important;
}

.cart-btn {
    position: absolute;
    bottom: 5px !important;
    left: 6px !important;
    width: 45px;
    height: 45px;
        backdrop-filter: blur(5px);
    color: #ffffff !important;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
    font-size: 16px;
}

.cart-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-3px) scale(1.05) !important;
}

[dir="rtl"] .cart-btn {
    left: auto !important;
    right: 6px !important;
}


.product-info {
    padding: 20px;
    background-color: #f8f9fa !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-main);
}

.product-price {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 12px;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-price > span {
    color: var(--primary-color);
}

.old-price {
    color: var(--text-muted) !important;
    text-decoration: line-through;
    font-size: 14px;
    font-weight: 400;
}

.new-price {
    color: #e53935 !important;
    font-size: 18px;
}

.branch {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Badges */
.badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.badge.sale {
    background: #e53935;
    color: #fff;
    top: 0;
    right: 0;
    left: auto;
    border-radius: 0 0 0 5px;
}

.branch-badge {
    position: absolute;
    top: 12px;
    left: 12px;
        backdrop-filter: blur(8px);
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    cursor: pointer;
}

.branch-badge .branch-name {
    display: none;
    font-size: 11px;
    font-weight: 700;
    margin-inline-start: 8px;
    white-space: nowrap;
    color: #ffffff !important;
}

.product-card:hover .branch-badge {
    width: auto;
    padding: 0 15px;
    border-radius: 20px;
}

.product-card:hover .branch-badge .branch-name {
    display: inline-block;
}

.product-card:hover .branch-badge i {
    display: none;
}

[dir="rtl"] .branch-badge {
    left: auto;
    right: 12px;
}

[dir="rtl"] .badge.sale {
    left: 0;
    right: auto;
    border-radius: 0 0 5px 0;
}



.branch-badge i {
    font-size: 14px;
    min-width: 20px;
    text-align: center;
    color: #ffffff !important;
}

.branch-text {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .branch-text {
    opacity: 1;
}

/* Utilities */
.w-100 { width: 100%; }

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn {
    padding: 12px 30px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-family: inherit;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    gap: 6px;
}

.view-btn:hover {
    background: var(--text-main);
    color: white;
    transform: translateY(-2px);
}


.wishlist-btn.active i {
    font-weight: 900; /* Solid heart */
    color: #e53935;
}

.wishlist-btn.active {
    background: #fff0f0;
    border-color: #ffdada;
    color: #e53935;
}

[dir="rtl"] .wishlist-btn {
    left: 20px;
    right: auto;
}

[dir="ltr"] .wishlist-btn {
    right: 20px;
    left: auto;
}

.product-rating {
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: 32px;
        backdrop-filter: blur(5px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: #ffc107;
    font-size: 13px;
    font-weight: 700;
    width: 32px; /* Initial state: star only */
    overflow: hidden;
    padding: 0;
    border: none;
    cursor: pointer;
}

[dir="rtl"] .product-rating {
    right: auto;
    left: 15px;
}

.product-card:hover .product-rating {
    width: 75px; /* Expand on hover */
    padding: 0 12px;
    gap: 5px;
}

.product-rating i {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-val {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: #ffffff !important;
    white-space: nowrap;
}

.product-card:hover .rating-val {
    max-width: 40px;
    opacity: 1;
}

/* Sliders Styling */
.slider-manual, .slider-auto {
    padding: 20px 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    position: relative !important;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.slider-manual::-webkit-scrollbar, .slider-auto::-webkit-scrollbar {
    display: none;
}

.slider-track {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    width: max-content; 
    min-width: 100%;
}

.slider-track .product-card {
    width: 240px !important; /* Adjusted to fit 6 cards in 1600px container */
    min-width: 240px !important;
    flex: 0 0 240px !important;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .slider-track .product-card {
        width: 280px !important;
        min-width: 280px !important;
        flex: 0 0 280px !important;
    }
}

@media (max-width: 575px) {
    /* .slider-nav-btn { */
    /*    display: none !important; */
    /* } */
    .slider-container {
        padding: 0 !important; /* Remove extra padding to give cards more space */
    }
    .slider-track {
        gap: 12px; /* Slightly smaller gap to make cards bigger */
    }
    .slider-manual {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .slider-track .product-card {
        width: calc(50vw - 22px) !important;
        min-width: calc(50vw - 22px) !important;
        flex: 0 0 calc(50vw - 22px) !important;
        scroll-snap-align: start;
    }
}

.slider-controls {
    display: none; /* Hide old controls as we are moving them to the sides */
}

.slider-container {
    position: relative;
    padding: 0 10px;
    max-width: 100%;
    /* overflow removed to allow buttons to sit outside */
}

.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.slider-nav-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(61, 57, 146, 0.2);
}
.slider-nav-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.slider-nav-btn.prev {
    right: 0; 
}

.slider-nav-btn.next {
    left: 0;
}

@media (max-width: 1200px) {
    .slider-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    .slider-nav-btn.prev { right: 0; }
    .slider-nav-btn.next { left: 0; }
}

[dir="ltr"] .slider-nav-btn.prev {
    right: auto;
    left: 0;
}

[dir="ltr"] .slider-nav-btn.next {
    left: auto;
    right: 0;
}

[dir="ltr"] .slider-nav-btn i,
[dir="ltr"] .view-more-btn i,
[dir="ltr"] .view-btn i {
    transform: rotate(180deg);
}

@media (max-width: 1200px) {
    [dir="ltr"] .slider-nav-btn.prev { left: 0; right: auto; }
    [dir="ltr"] .slider-nav-btn.next { right: 0; left: auto; }
}

.view-more-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
        padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.view-more-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.view-more-btn i {
    font-size: 10px;
}


/* Seasonal Grid */
.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.season-box {
    height: 450px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: right;
    border: 1px solid var(--border-color);
    background-size: cover;
    background-position: center;
    transition: var(--transition);
    border-radius: 8px;
    overflow: hidden;
}

.season-box:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(61, 57, 146, 0.15);
}

.season-box h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #ffffff;
}

.season-box p {
    color: #f3f4f6;
    margin-bottom: 25px;
    font-size: 1.2rem;
}

.summer-box {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(61,57,146,0.8)), url('https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=800');
}

.winter-box {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(61,57,146,0.8)), url('https://images.unsplash.com/photo-1445205170230-053b83016050?w=800');
}

.season-box .btn {
    border-color: #ffffff;
    color: #ffffff;
}

.season-box .btn:hover {
    background: #ffffff;
    color: var(--primary-color);
}

/* Accessories Grid */
.acc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

.acc-item {
    background: transparent;
    padding: 0;
    border: none;
    text-align: right;
    border-radius: 0;
    box-shadow: none;
    min-width: 0; 
    margin-bottom: 60px; /* Space between different accessory sliders */
}

[dir="ltr"] .acc-item {
    text-align: left;
}

.acc-item h4 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

/* Mini Product Card for Accessories */
.mini-product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 15px;
    min-width: 200px;
    text-align: center;
    transition: var(--transition);
    border-radius: 8px;
}

.mini-product-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(61, 57, 146, 0.08);
}

.mini-img {
    width: 100%;
    height: 150px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 4px;
}

.mini-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mini-product-card h5 {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-main);
}

.mini-price {
    display: block;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 14px;
}

.btn-mini {
    padding: 8px 15px;
    background: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 4px;
    width: 100%;
}

.btn-mini:hover {
    background: transparent;
    color: var(--primary-color);
}

/* Review Cards */
.reviews-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
}

.review-card {
    background: var(--bg-surface);
    padding: 30px;
    border: 1px solid var(--border-color);
    position: relative;
    text-align: right;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.review-content {
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 15px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-end;
}

.review-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.review-author span {
    color: var(--primary-color);
    font-weight: 600;
}

/* Testimonials Marquee */
.marquee-container {
    position: relative;
    width: 100%;
}

.marquee-container::before, .marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-surface) 0%, transparent 100%);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-surface) 0%, transparent 100%);
}

.marquee-track {
    display: inline-flex;
    gap: 30px;
    padding: 10px 0;
    width: max-content;
    animation: marquee-left 30s linear infinite;
}

.marquee-track.reverse {
    animation: marquee-right 30s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* In RTL, physical translation still applies. Negative X is Left, Positive X is Right. */
@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { /* transform removed for safer centering */ }
}

@keyframes marquee-right {
    0% { /* transform removed for safer centering */ }
    100% { transform: translateX(0); }
}

/* Category Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cat-item {
    height: 500px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cat-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-item:hover img {
    transform: scale(1.1);
}

.cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, rgba(61,57,146,0.9));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 40px;
    transition: var(--transition);
}

.cat-overlay h3 {
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 2px;
}

/* Footer */
footer {
    background: #23214f;
    padding: 100px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-column h4 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.footer-column ul li {
    margin-bottom: 15px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    transition: var(--transition);
}

.footer-column ul li a:hover {
    color: #ffffff;
    padding-right: 5px;
}

.footer-about h3 {
    font-size: 24px;
    color: #ffffff;
    margin-top: 15px;
}

.footer-about p {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: center;
    transition: var(--transition);
}

.contact-info-footer {
    margin-top: 30px;
}

.contact-info-footer p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.5;
    transition: var(--transition);
}

.contact-info-footer p:hover {
    color: #ffffff;
}

.contact-info-footer p i {
    width: 32px;
    height: 32px;
        border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    flex-shrink: 0;
    transition: var(--transition);
}

.contact-info-footer p:hover i {
    background: #ffffff;
    color: #23214f;
    transform: rotate(15deg);
}

.social-links a {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
        display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 5;
}

.social-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #ffffff;
    transition: all 0.3s ease;
    z-index: -1;
}

.social-links a:hover::before {
    height: 100%;
}

.social-links a:hover {
    color: #23214f;
    border-color: #ffffff;
}

.social-links a i {
    transition: all 0.3s ease;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

/* Shop Page Layout */
.shop-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
}

.shop-sidebar {
    background: var(--bg-surface);
    padding: 30px;
    border: 1px solid var(--border-color);
    height: fit-content;
    position: sticky;
    top: 100px;
    border-radius: 8px;
}

.filter-group {
    margin-bottom: 30px;
}

.filter-group h4 {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* Modals & Toasts */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.6) !important;
    display: none; /* Controlled by JS as flex */
    justify-content: center;
    align-items: center;
    z-index: 9999 !important;
}

/* #ratingModal display is controlled by JS as flex */

.modal-content {
    background: var(--bg-surface);
    padding: 40px;
    border: 1px solid var(--border-color);
    max-width: 400px;
    width: 90%;
    text-align: center;
    border-radius: 8px;
}

.toast {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: var(--primary-color);
    color: #ffffff;
    padding: 15px 30px;
    font-weight: 600;
    transform: translateY(100px);
    transition: var(--transition);
    z-index: 3000;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(61,57,146,0.3);
}

.toast.show {
    transform: translateY(0);
}

/* Lookbook Page */
.lookbook-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    gap: 20px;
}

.look-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.look-item.big {
    grid-row: span 2;
}

.look-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .categories-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .hero-content h1 { font-size: 3rem; }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .footer-column.footer-about {
        grid-column: span 2;
        text-align: center;
        margin-bottom: 30px;
    }
    .footer-column {
        text-align: center;
    }
    .footer-column ul {
        padding: 0;
        list-style: none;
    }
    .footer-column .social-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
    }
    .contact-info-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 25px !important;
    }
    .contact-info-footer p {
        text-align: center;
        margin-bottom: 10px;
    }
    .contact-info-footer p i {
        margin: 0 0 0 10px !important; /* Fix icon margin for RTL center */
    }
    .categories-grid, .acc-grid, .grid-2-cols, .reviews-grid {
        grid-template-columns: 1fr;
    }
    .cat-item { height: 350px; }
}

/* Shop Page Layout */
main,
.shop-page,
.shop-page .container,
.shop-page .shop-layout {
    overflow: visible !important;
}

.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

/* Sidebar */
.shop-sidebar {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 120px;
    height: fit-content;
    z-index: 10;
}

.filter-group {
    margin-bottom: 30px;
}

.filter-group h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.filter-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
        transition: all 0.3s ease;
    color: var(--text-main);
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(61, 57, 146, 0.15);
    }

/* Modern Custom Dropdowns */
.custom-dropdown {
    position: relative;
    width: 100%;
    user-select: none;
}

.sort-options.custom-dropdown {
    width: 250px;
}

.dropdown-selected {
        border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.dropdown-selected:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(61, 57, 146, 0.05);
}

.dropdown-selected.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(61, 57, 146, 0.15);
        border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-selected i {
    transition: transform 0.3s ease;
    color: var(--primary-color);
    font-size: 12px;
}

.dropdown-selected.active i {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    z-index: 99;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.dropdown-options.show {
    max-height: 250px;
    opacity: 1;
    overflow-y: auto;
}

.dropdown-option {
    padding: 12px 15px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
}

.dropdown-option:hover {
    background-color: rgba(61, 57, 146, 0.05);
    color: var(--primary-color);
}

.dropdown-option.selected {
    background-color: rgba(61, 57, 146, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.price-range {
    display: flex;
    gap: 10px;
}

.price-range input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
        transition: all 0.3s ease;
}

.price-range input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(61, 57, 146, 0.15);
    }

.color-options, .size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

.color-circle:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.size-options span {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.size-options span:hover, .size-options span.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Shop Main */
.shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.view-toggle button {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 15px;
    transition: var(--transition);
}

.view-toggle button.active, .view-toggle button:hover {
    color: var(--primary-color);
}

.sort-options select {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
        transition: all 0.3s ease;
    color: var(--text-main);
}

.sort-options select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(61, 57, 146, 0.15);
    }

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}

.pagination .pages {
    display: flex;
    gap: 10px;
}

.pagination a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-main);
    transition: var(--transition);
    }

.pagination a.active, .pagination a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pagination a.prev, .pagination a.next {
    width: auto;
    padding: 0 20px;
    gap: 10px;
    font-weight: 600;
    border-radius: 8px;
}

.pagination a.prev:hover, .pagination a.next:hover {
    box-shadow: 0 4px 10px rgba(61, 57, 146, 0.2);
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }
}

/* Pagination Arrow Mirroring for LTR */
html[lang="en"] .pagination a i {
    transform: rotate(180deg);
}


.about-page-premium {
    margin-top: -90px;
    padding-top: 0 !important;
    background: #fff;
    overflow: hidden;
}

.about-hero {
    height: 70vh;
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
}

.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
}

.about-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.about-hero-content .eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.about-hero-content h1 {
    font-size: 56px;
    line-height: 1.2;
    margin: 0 0 20px;
    text-transform: none;
    font-weight: 800;
}

.about-hero-sub {
    font-size: 20px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.about-hero-cta {
    margin-top: 20px;
}

.btn-luxury {
    padding: 18px 45px;
    font-size: 18px;
    border-radius: 50px;
    box-shadow: none;
}

/* Narrative Section */
.about-narrative {
    padding: 100px 0;
    background: #fff;
}

.narrative-flex {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 100px;
    align-items: center;
}

.narrative-text h2 {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 40px;
    line-height: 1.2;
}

.narrative-text p {
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.9;
    color: var(--text-muted);
}

.link-luxury {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary-color);
    font-weight: 800;
    font-size: 18px;
    text-decoration: none;
    transition: var(--transition);
    margin-top: 15px;
}

.link-luxury:hover {
    gap: 20px;
    color: var(--primary-light);
}

.lead-text {
    font-size: 24px !important;
    line-height: 1.6 !important;
    color: var(--text-main) !important;
    font-weight: 600;
}

.narrative-visual {
    position: relative;
}

.founder-card {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: none;
}

.founder-card img {
    width: 100%;
    display: block;
}

.founder-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--accent-gold);
    color: #000 !important;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #fff;
    z-index: 10;
    line-height: 1;
    white-space: nowrap;
}

[dir="rtl"] .founder-badge {
    right: auto;
    left: 40px;
}

/* Values Grid */
.about-values {
    padding: 100px 0;
    background: #fff;
}

.split-value-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fdfbf7;
    border-radius: 40px;
    overflow: hidden;
    align-items: center;
}

.value-split-img {
    height: 100%;
    min-height: calc(85vh - 140px); /* Reduced height based on user feedback */
}

.value-split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.value-split-content {
    padding: 80px;
}

.value-split-content .value-icon {
    background: var(--primary-color);
    color: #fff;
}

.value-split-content h3 {
    font-size: 42px;
    margin-bottom: 25px;
    font-weight: 800;
}

.value-split-content p {
    font-size: 18px;
    margin-bottom: 35px;
    color: var(--text-muted);
    line-height: 1.8;
}

.values-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.value-item-minimal {
    display: flex;
    gap: 25px;
    padding: 40px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    align-items: center;
}

.value-item-minimal h4 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 700;
}

.value-item-minimal p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.value-icon {
    width: 60px;
    height: 60px;
    background: #fdfbf7;
    color: var(--primary-color);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 25px;
    flex-shrink: 0;
}

/* Stats Immersive */
.about-stats-immersive {
    padding: 100px 0;
    background: var(--primary-color);
    color: #fff;
}

.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.stat-box .num {
    display: block;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-box .label {
    font-size: 14px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Commitment Section */
.about-commitment-modern {
    padding: 150px 0 100px;
    position: relative;
    /* removed background */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    color: #fff;
    margin-bottom: -100px;
    z-index: 10;
}

.promise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
    z-index: 1;
}

.promise-card {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px;
}

.quote-icon {
    font-size: 50px;
    color: var(--accent-gold);
    margin-bottom: 30px;
    opacity: 0.8;
}

.promise-card h2 {
    font-size: 56px;
    margin-bottom: 30px;
    font-weight: 800;
    color: #fff;
}

.promise-card p {
    font-size: 24px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: rgba(255,255,255,0.9);
}

.btn-luxury-gold {
    background: var(--accent-gold);
    color: #fff;
    padding: 20px 50px;
    font-size: 20px;
    font-weight: 800;
    border-radius: 60px;
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
    margin-bottom: 40px;
}

.btn-luxury-gold:hover {
    transform: translateY(-5px);
    box-shadow: none;
    background: #fff;
    color: var(--primary-color) !important;
}

.signature {
    margin-top: 40px;
    opacity: 1;
}

.signature img {
    height: 70px !important;
    
    opacity: 1 !important;
}

/* Responsive About */
@media (max-width: 1024px) {
    .about-hero-content h1 { font-size: 42px; }
    .narrative-flex { gap: 40px; }
    .value-split-content { padding: 40px; }
}

@media (max-width: 768px) {
    .about-hero { height: 70vh; padding-top: 120px; align-items: flex-start; }
    .about-hero-content h1 { font-size: 32px; }
    .about-hero-content .eyebrow { font-size: 16px; opacity: 1; letter-spacing: 2px; }
    .narrative-flex { grid-template-columns: 1fr; text-align: center; }
    .narrative-visual { order: -1; }
    .split-value-section { grid-template-columns: 1fr; text-align: center; }
    .value-split-content .value-icon { margin: 0 auto 25px; }
    .value-split-img { min-height: 300px; }
    .values-grid-compact { grid-template-columns: 1fr; }
    .stats-wrapper { grid-template-columns: 1fr 1fr; gap: 20px; }
    .promise-card h2 { font-size: 36px; }
    .promise-card p { font-size: 18px; }
    .btn-luxury-gold { padding: 15px 35px; font-size: 16px; }
}

@media (max-width: 480px) {
    .stats-wrapper { grid-template-columns: 1fr; }
    .value-item-minimal { padding: 25px; flex-direction: column; text-align: center; }
    .value-icon { margin: 0 auto 15px; }
}
/* ===================== CONTACT PAGE ===================== */
.contact-page-premium {
    padding-bottom: 120px;
    background: #fdfbf7;
    margin-top: -100px;
}


.contact-hero {
    padding: 30px 0 100px;
    background: linear-gradient(to bottom, #fff, transparent);
    text-align: center;
}

.contact-hero-content .eyebrow {
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    margin-bottom: 15px;
}

.contact-hero-content h1 {
    font-size: 52px;
    color: var(--text-main);
    margin: 0;
}

.contact-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: flex-start;
}

/* Info Side */
.info-card-premium {
    padding: 50px;
    background: #fff;
    border-radius: 40px;
    border: 1px solid var(--border-color);
}

.info-card-premium h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.info-card-premium p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 40px;
}

.contact-list-modern {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.list-item {
    display: flex;
    gap: 20px;
    align-items: center;
}

.item-icon {
    width: 60px;
    height: 60px;
    background: #fdfbf7;
    color: var(--primary-color);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.item-text .label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.item-text .val {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.social-modern {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.social-modern h4 {
    font-size: 14px;
    margin-bottom: 20px;
}

.social-grid-modern {
    display: flex;
    gap: 15px;
}

.social-grid-modern a {
    width: 45px;
    height: 45px;
    background: #fff;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-grid-modern a:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-5px);
}

/* Form Side */
.form-card-glass {
    background: #fff;
    padding: 60px;
    border-radius: 40px;
    border: 1px solid var(--border-color);
    position: relative;
}

.form-card-glass h3 {
    font-size: 28px;
    margin-bottom: 40px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-group-premium {
    margin-bottom: 25px;
}

.form-group-premium label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-main);
}

.form-group-premium input,
.form-group-premium textarea {
    width: 100%;
    padding: 15px 20px;
    background: #fdfbf7;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.form-group-premium .custom-dropdown {
    padding: 0;
    border: none;
    background: transparent;
}

.dropdown-selected {
    padding: 15px 20px;
    background: #fdfbf7;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-selected.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #fff;
    border-color: var(--primary-color);
}

.dropdown-options {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-group-premium input:focus,
.form-group-premium textarea:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 10px 20px rgba(61,57,146,0.05);
}

.btn-submit {
    height: 55px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-weight: 700;
    margin-top: 20px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-submit i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-outline-primary {
    padding: 12px 30px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    background: transparent;
    display: inline-block;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
}

.btn-submit:hover {
    background: var(--primary-color-dark, #2a276b);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(61,57,146,0.2);
}

.btn-submit:hover i {
    transform: translate(-5px, -5px) rotate(-10deg);
}

/* Responsive Contact */
@media (max-width: 1024px) {
    .contact-page-premium { margin-top: -100px !important; }
    .contact-grid-modern { grid-template-columns: 1fr; gap: 40px; }
    .info-card-premium { order: 2; padding: 40px; }
    .form-card-glass { order: 1; padding: 40px; }
    .contact-hero-content h1 { font-size: 42px; }
    .contact-hero { padding: 90px 0 35px !important; }
}

@media (max-width: 768px) {
    .contact-page-premium { margin-top: -100px !important; padding-bottom: 60px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-hero-content h1 { font-size: 32px; }
    .contact-hero { padding: 60px 0 15px !important; }
    .info-card-premium { padding: 30px 20px; border-radius: 25px; }
    .form-card-glass { padding: 30px 20px; border-radius: 25px; }
    .item-icon { width: 50px; height: 50px; font-size: 18px; }
    .item-text .val { font-size: 16px; }
}

/* ===================== LOOKBOOK PAGE ===================== */
.lookbook-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 15px;
    margin-top: 50px;
}

.look-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 3/4;
    cursor: pointer;
    background-color: #ffffff !important;
}

.look-item.big {
    grid-row: span 2;
    aspect-ratio: unset;
}

.look-item.wide {
    grid-column: span 2;
    aspect-ratio: 16/9;
}

.look-item img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    transition: transform 0.5s ease;
    background-color: #ffffff !important;
    mix-blend-mode: multiply;
}

.look-item:hover img { transform: scale(1.06); }

.look-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.look-item:hover .look-overlay { opacity: 1; }

.look-overlay h4 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.look-overlay p {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-bottom: 15px;
}



@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .lookbook-gallery { grid-template-columns: 1fr 1fr; }
    .look-item.big { grid-row: span 1; }
    .look-item.wide { grid-column: span 1; aspect-ratio: 3/4; }

    /* Mobile adjustments for the chat widget */
    .chat-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    [dir="ltr"] .chat-widget {
        right: 15px !important;
    }
    [dir="rtl"] .chat-widget {
        left: 15px !important;
    }
}

/* Chat Widget */
.chat-widget {
    position: fixed;
    bottom: 100px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none; /* Prevent container from blocking background clicks */
}

/* Default layout (English/LTR): Chat widget on the right */
[dir="ltr"] .chat-widget {
    right: 30px;
    left: auto;
}

/* Arabic/RTL layout: Chat widget on the left */
[dir="rtl"] .chat-widget {
    left: 30px;
    right: auto;
}

/* Back to Top */
.back-to-top {
    position: fixed;
    top: 50%;
    margin-top: -25px; /* Vertical centering since height is 50px */
    left: 0; /* Flushed to the left edge by default (LTR) */
    width: 36px;
    height: 50px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 0 8px 8px 0; /* Rounded inner corners only */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 998;
    box-shadow: 2px 0 10px rgba(61, 57, 146, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}

[dir="rtl"] .back-to-top {
    left: auto;
    right: 0; /* Flushed to the right edge (RTL) */
    border-radius: 8px 0 0 8px; /* Rounded inner corners only */
    box-shadow: -2px 0 10px rgba(61, 57, 146, 0.2);
    transform-origin: right center;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}



.chat-btn {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(61, 57, 146, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    pointer-events: auto; /* Enable clicks on the button itself */
}

.chat-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50%;
    z-index: -1;
    animation: chatPulse 2s infinite;
}

@keyframes chatPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.chat-btn:hover {
    transform: scale(1.1) rotate(5deg);
    background: var(--accent-gold);
}

.chat-popup {
    width: 300px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    margin-bottom: 20px;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
    pointer-events: auto; /* Enable clicks on the popup */
}

.chat-popup.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.chat-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-header img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    }

.chat-header-info h4 {
    font-size: 15px;
    margin-bottom: 2px;
}

.chat-header-info span {
    font-size: 12px;
    opacity: 0.8;
}

.chat-body {
    padding: 20px;
    background: #f8f9fa;
}

.chat-msg {
    background: white;
    padding: 12px 15px;
    border-radius: 15px 15px 15px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

[dir="rtl"] .chat-msg {
    border-radius: 15px 15px 0 15px;
}

.chat-footer {
    padding: 15px 20px;
    background: white;
}

.chat-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25d366;
    color: white;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s ease;
}

.chat-whatsapp-btn:hover {
    background: #128c7e;
    color: white;
}

/* Product Card Image Slider */
.product-card-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff !important;
}

.product-card-slider img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* تجعل الصورة تملأ السلايدر بالكامل */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-color: transparent !important;
}

.product-card-slider img:first-child {
    opacity: 1;
    z-index: 2;
}

/* Cross-fade Animation */
/* Animation removed - JS handles the slider */

/* Pause animation on hover */
.product-card:hover .product-card-slider img {
    animation-play-state: paused;
}

/* Category Slider */
.category-slider-section {
    padding: 60px 0;
    background: var(--bg-surface);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    text-align: right;
}

[dir="ltr"] .category-header {
    text-align: left;
}

.category-header .header-text span {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.category-header .header-text h2 {
    font-size: 2.5rem;
    margin-bottom: 0;
}

.category-header .header-text h2::after {
    left: 0;
    transform: none;
    width: 60px;
}

[dir="rtl"] .category-header .header-text h2::after {
    left: auto;
    right: 0;
}

.category-slider {
    padding: 10px 0;
}

.category-slider .slider-track {
    gap: 40px;
}

.cat-slider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 150px;
    text-align: center;
    transition: var(--transition);
}

.cat-img-box {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 3px solid transparent;
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.cat-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
        color: #fff;
    font-size: 10px;
    padding: 4px 0;
    text-align: center;
    backdrop-filter: blur(2px);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 2;
}

.cat-slider-item:hover .cat-badge {
    transform: translateY(0);
}

.cat-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

.cat-slider-item h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: none;
    letter-spacing: 0;
    margin: 8px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.cat-slider-item:hover {
    transform: translateY(-5px);
}

.cat-slider-item:hover .cat-img-box {
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(61, 57, 146, 0.2);
}

.cat-slider-item:hover .cat-img-box img {
    transform: scale(1.1);
}

.cat-slider-item:hover h3 {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .category-slider-section {
        padding: 40px 0;
    }
    .category-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        margin-bottom: 25px;
    }
    .category-header .header-text h2 {
        font-size: 1.6rem;
    }
    .category-header .header-text h2::after {
        left: 50%;
        /* transform removed for safer centering */
    }
    .cat-img-box {
        width: 110px;
        height: 110px;
    }
    /* Reduce gap so 2 items fit properly */
    .category-slider .slider-track {
        gap: 15px;
    }
    .cat-slider-item {
        /* 2 items: (100vw - container_padding*2 - gap) / 2 */
        min-width: calc((100vw - 60px) / 2);
        width: calc((100vw - 60px) / 2);
        flex: 0 0 calc((100vw - 60px) / 2);
    }
}

@media (max-width: 480px) {
    .cat-img-box {
        width: 80px;
        height: 80px;
    }
    .category-slider .slider-track {
        gap: 12px;
    }
    .cat-slider-item {
        min-width: calc((100vw - 52px) / 2);
        width: calc((100vw - 52px) / 2);
        flex: 0 0 calc((100vw - 52px) / 2);
        gap: 8px;
    }
    .cat-slider-item h3 {
        font-size: 12px;
    }
}

/* Pixel-Perfect Promo Grid (Reference Match) */
.promo-grid-section {
    padding: 60px 0;
    background: #ffffff;
    font-family: 'Outfit', 'Cairo', sans-serif;
}

.promo-grid-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
}

/* 1. Left Section (Banner Ads) */
.promo-banners-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.promo-banners-col h3.section-label {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}

.banner-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 280px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.banner-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8f9fa;
    transition: transform 0.5s ease;
}

.banner-card:hover img {
    transform: scale(1.05);
}

.banner-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    text-align: right;
    color: #fff;
}

[dir="ltr"] .banner-card-overlay {
    background: transparent;
    text-align: left;
}

.banner-card-overlay h4 {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 8px;
    line-height: 1.2;
}

.banner-card-overlay p {
    font-size: 13px;
    font-weight: 800;
    background: #fff;
    color: #000;
    padding: 8px 22px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.banner-card:hover .banner-card-overlay p {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* 2. Middle Section (Mega Offers - Lavender Box) */
.promo-offers-col {
    min-height: 0;


}

.offers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px;
}

.offers-header h2 {
    font-size: 22px;
    font-weight: 900;
    color: #000;
}

.offers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.offer-card {
    background: #fff;
    border-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: auto; /* Let content define it */
    overflow: hidden;
    border: 1px solid var(--border-color);
    text-decoration: none !important;
}

.offer-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #e53935; /* Red like sale badge */
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 0 0 0 12px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.2);
}

.special-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #3d3992;
    color: #fff;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 0 0 0 12px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(61, 57, 146, 0.3);
    white-space: nowrap;
}

[dir="ltr"] .special-badge {
    right: auto;
    left: 0;
    border-radius: 0 0 12px 0;
}

[dir="ltr"] .offer-badge {
    right: auto;
    left: 0;
    border-radius: 0 0 10px 0;
}

.offer-plus-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
}

[dir="ltr"] .offer-plus-btn {
    left: auto;
    right: 10px;
}

.offer-plus-btn:hover {
    background: #f0f0f0;
}

.offer-img-box {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    background-color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-info h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.offer-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* User wants it to fill and take radius */
    background: #ffffff !important;
    mix-blend-mode: multiply;
}

.offer-info {
    padding: 15px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.offer-info h5 {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    margin-bottom: 4px;
    height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.offer-desc {
    font-size: 10px;
    color: #888;
    line-height: 1.2;
    height: 24px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
}

.offer-price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.offer-price-new {
    font-size: 18px;
    font-weight: 900;
    color: #000;
}

.offer-price-old {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

/* 3. Right Section (Promo Grid - Colored Cards) */
.promo-highlights-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.highlights-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 5px;
}

.highlights-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.highlight-card {
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    height: auto;
    cursor: pointer;

    transition: 0.3s;

}

.hc-img {
    height: 50px;
    width: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hc-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8f9fa;
}

.hc-text {
    flex: 1;
}

/* 3. Right Section (Promo Grid - Colored Cards) */
.promo-highlights-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.highlights-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 5px;
}

.highlights-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.highlight-card {
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    height: auto;
    cursor: pointer;
    transition: 0.3s;
}

.highlight-card:hover {
    /* transform removed */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.hc-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hc-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hc-text {
    flex: 1;
    text-align: right;
}

.hc-text h4 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 2px;
    color: var(--text-dark);
}

.hc-text p {
    font-size: 11px;
    color: #666;
    margin: 0;
}

/* Reference Pastel Colors */
.hc-yellow { background: #fffcf0; }
.hc-green  { background: #f0fff7; }
.hc-gray   { background: #f8f9fa; }
.hc-peach  { background: #fff5f5; }
.hc-purple { background: #f5f3ff; }
.hc-blue   { background: #f0f7ff; }

@media (max-width: 1200px) {
    .promo-grid-wrapper {
        grid-template-columns: 1fr;
    }
    .promo-banners-col {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
    }
    .promo-banners-col h3.section-label {
        width: 100%;
    }
    .banner-card { 
        flex: 1;
        min-width: 250px;
        height: 200px !important;
    }
}

@media (max-width: 768px) {
    .promo-banners-col { flex-direction: column; }
    .offers-grid, .highlights-grid { grid-template-columns: 1fr; }
}


.lookbook-page {
    padding-top: 0;
    padding-bottom: 100px;
    background: #fff;
    overflow: hidden;
}

.lookbook-hero {
    padding: 60px 0 100px 0;
    background: #fdfbf7;
    position: relative;
}

.hero-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
}

.hero-image-main {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    height: 600px;
}

.hero-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floating-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--primary-color);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.hero-text-card {
    padding: 60px;
    background: #fff;
    border-radius: 30px;
    margin-inline-start: -120px; /* Logical property for RTL/LTR */
    z-index: 2;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

[dir="ltr"] .hero-text-card {
    margin-right: 0;
    margin-left: -120px;
}

[dir="rtl"] .hero-text-card {
    margin-left: 0;
    margin-right: -120px;
}

.hero-text-card h1 {
    font-size: 56px;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.1;
}

.elegant-line {
    width: 80px;
    height: 3px;
    background: var(--primary-color);
    margin-bottom: 30px;
}

.hero-text-card p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 400px;
    line-height: 1.8;
}

.explore-scroll {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
}

.explore-scroll i {
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}

/* Featured Section */
.lookbook-featured {
    margin: 120px 0;
}

.featured-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

[dir="rtl"] .featured-item.reverse {
    direction: ltr; /* Force order: Image (left) | Text (right) */
}

[dir="ltr"] .featured-item.reverse {
    direction: rtl; /* Flip for English if needed, but usually we want consistency */
}

.featured-img {
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
}

.featured-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.featured-item:hover img {
    transform: scale(1.05);
}

.featured-content {
    padding: 40px;
}

.category-tag {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.featured-content h2 {
    font-size: 42px;
    margin-bottom: 25px;
}

.featured-content p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
}

.lookbook-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.lookbook-links a {
    padding: 12px 25px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 14px;
    transition: all 0.3s ease;
}

.lookbook-links a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Mosaic Grid */
.lookbook-mosaic {
    margin-bottom: 120px;
}

.section-header-centered {
    text-align: center;
    margin-bottom: 60px;
}

.section-header-centered h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
}

.mosaic-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.8s ease;
}

.mosaic-item.tall { grid-row: span 2; }
.mosaic-item.wide { grid-column: span 2; }

.mosaic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 0.9;
    transition: all 0.4s ease;
}

.mosaic-text span {
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
    opacity: 0.8;
}

.mosaic-text h3 {
    color: #fff;
    font-size: 22px;
    margin: 0;
}

.mosaic-item:hover img { transform: scale(1.1); }
.mosaic-item:hover .mosaic-overlay { background: linear-gradient(to top, var(--primary-color), transparent); }

/* Occasions Section */
.lookbook-occasions {
    margin-bottom: 120px;
}

.occasion-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.occasion-card-premium {
    position: relative;
    height: 450px;
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.occ-img {
    width: 100%;
    height: 100%;
}

.occ-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.occ-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, #fff, transparent);
    text-align: center;
}

.occ-info h4 {
    font-size: 20px;
    color: var(--text-main);
    margin-bottom: 15px;
}

.occ-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
}
/* Accessories CTA */
.accessories-cta {
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accessories-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.cta-content h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Responsive Lookbook */
@media (max-width: 1024px) {
    body {
        padding-top: 70px !important;
        padding-bottom: 65px !important;
    }
    .hero-wrapper { 
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .hero-text-card,
    [dir="ltr"] .hero-text-card,
    [dir="rtl"] .hero-text-card { 
        margin: -80px auto 0 auto !important; 
        padding: 30px; 
        text-align: center;
        width: 90% !important;
        max-width: 500px !important;
        position: relative;
        z-index: 5;
    }
    .hero-image-main { 
        height: 400px !important; 
        width: 100% !important;
        margin: 0 !important;
        border-radius: 20px !important;
    }
    .hero-text-card h1 { font-size: 38px; text-align: center; }
    .elegant-line { margin: 0 auto 20px; }
    .hero-text-card p { margin: 0 auto 30px; }
    .explore-scroll { justify-content: center; }
    .lookbook-hero { padding-bottom: 40px !important; }
    .lookbook-featured { margin: 60px 0 !important; }
    .featured-content { padding: 30px 15px; text-align: center; }
    .lookbook-links { justify-content: center; gap: 10px; }
    .lookbook-links a { padding: 10px 15px; font-size: 13px; }
    .featured-item { grid-template-columns: 1fr; gap: 40px; }
    .mosaic-grid { grid-template-columns: repeat(2, 1fr); }
    .occasion-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hero-text-card h1 { font-size: 32px; }
    .hero-text-card p { font-size: 15px; }
    .featured-img { height: 350px; }
    .featured-content h2 { font-size: 28px; }
    .mosaic-grid { grid-template-columns: 1fr; }
    .mosaic-item.wide { grid-column: auto; }
    .occasion-grid-3 { grid-template-columns: 1fr; }
    .cta-content h2 { font-size: 32px; }
}


/* Popular Searches Section */
.trends-section {
    padding-bottom: 80px;
    margin-top: -40px; /* Bring it closer to Accessories */
}

.trends-header {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.trends-header i {
    color: var(--accent-gold);
    font-size: 20px;
}

.trends-header h3 {
    font-size: 18px;
    color: var(--text-main);
    font-weight: 700;
}

.trends-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.trends-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.trends-group-label {
    width: 100%;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trends-group-label i {
    font-size: 12px;
}

.trend-tag {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    font-size: 14px;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
}



.trend-tag.hot {
    border-color: var(--accent-gold);
    color: #3d3992;
}



@media (max-width: 768px) {
    .trend-tag {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* Comprehensive Mobile & Tablet Responsive Fixes */
@media (max-width: 991px) {
    .mobile-toggle {
        display: block !important;
        font-size: 24px;
        color: var(--primary-color);
        cursor: pointer;
        order: 3;
    }
    
    .header-actions {
        order: 2;
        margin-inline-start: auto; /* Pushes the icons to the left, away from the logo */
        margin-inline-end: 15px; /* Adds space between icons and hamburger menu */
    }

    .main-nav {
        position: fixed !important;
        top: 90px;
        right: -320px; /* Side menu for RTL */
        left: auto;
        width: 300px;
        max-width: 100%;
        height: calc(100vh - 90px);
        background: #fff;
        z-index: 999;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        border-top: 1px solid var(--border-color);
        box-shadow: -5px 0 30px rgba(0,0,0,0.1);
    }

    .main-nav.active {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 20px 25px; /* Reduced padding */
        align-items: flex-start;
        gap: 12px; /* Reduced gap */
        width: 100%;
    }

    .main-nav ul li {
        width: 100%;
    }
    
    .main-nav ul li a {
        display: block;
        width: 100%;
        font-size: 15px; /* Slightly smaller text for tighter fit */
    }
    
    .mobile-only {
        display: block !important;
    }
    
    .central-search-bar {
        margin: 0 10px;
        max-width: 200px;
    }
    .central-search-bar form {
        padding: 3px 10px;
    }
    .central-search-bar input {
        font-size: 12px;
    }
    
    .user-icon-desktop {
        display: none !important;
    }

    header.scrolled .main-nav {
        top: 75px;
        height: calc(100vh - 75px);
    }

    /* Mega Menu Responsive Fix */
    .mega-menu {
        position: fixed;
        top: 90px;
        right: -320px; /* Hidden on right */
        left: auto;
        width: 300px;
        max-width: 100%;
        height: calc(100vh - 90px);
        overflow-y: auto;
        padding: 0;
        z-index: 1000; /* Above main-nav */
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block; /* Override default display:none so it can slide */
    }
    
    .mega-menu.show {
        right: 0;
        animation: none; /* Remove desktop fade animation */
    }

    /* LTR Support for Side Menus */
    html[dir="ltr"] .main-nav, 
    html[dir="ltr"] .mega-menu {
        right: auto;
        left: -320px;
        box-shadow: 5px 0 30px rgba(0,0,0,0.1);
    }

    html[dir="ltr"] .main-nav.active, 
    html[dir="ltr"] .mega-menu.show {
        left: 0;
    }
    
    html[dir="ltr"] .mega-menu-back i {
        transform: scaleX(-1);
    }
    
    .header-bottom {
        padding: 0;
        border: none;
    }

    .header-offers-banner {
        display: none !important;
    }
    
    .mega-menu-back {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 20px;
        background: var(--bg-main);
        font-weight: 700;
        cursor: pointer;
        border-bottom: 1px solid var(--border-color);
        color: var(--primary-color);
    }

    header.scrolled .mega-menu {
        top: 75px;
        height: calc(100vh - 75px);
    }
    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 20px 0;
    }
    .mega-column {
        border: none !important;
        padding: 0 20px;
        text-align: start !important;
        margin-bottom: 25px;
    }
    .mega-column h4 {
        margin-bottom: 15px;
        color: var(--primary-color);
    }
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .marquee-track {
        gap: 15px;
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 70px !important;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 15px;
    }
    
    .hero-content {
        padding: 10px 0 0 0;
    }

    .hero-tag {
        margin-bottom: 30px !important; /* Force space */
        display: inline-block;
    }

    .hero-btns {
        justify-content: center;
    }

    .hero-image {
        display: block !important;
        width: 100%;
        max-width: 450px;
        margin: 0 auto 130px !important; /* Removed top margin completely */
        position: relative;
        padding: 0 20px;
    }

    .image-wrapper {
        min-height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 30px !important;
    }

    .hero-features-card {
        position: absolute !important;
        bottom: -100px !important; /* Deeper overlap */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 15px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        z-index: 10;
        background: #ffffff !important;
    }

    .hero-features-card .feature-item {
        justify-content: center;
        border: none !important;
        padding: 5px !important;
        font-size: 11px !important;
    }

    .hero-features-card .feature-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .nav-wrapper {
        height: 70px;
        padding: 0 5px; /* Reduced padding from 10px to 5px */
        gap: 8px;
        justify-content: space-between;
        display: flex;
        align-items: center;
    }
    
    header.scrolled .nav-wrapper {
        height: 60px;
    }
    
    .logo img {
        height: 50px !important;
    }
    
    header.scrolled .logo img {
        height: 45px !important;
    }

    .mobile-toggle {
        display: none !important;
    }
    
    .header-actions {
        display: none !important;
    }
    
    .central-search-bar {
        margin: 5px 12px !important;
        flex: 1;
        max-width: none;
        position: static !important;
    }

    .central-search-bar form {
        display: flex;
        height: 42px; 
        border-radius: 25px !important;
        border: 1px solid #eee !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        overflow: hidden;
        align-items: stretch;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff;
        transition: all 0.3s ease;
    }

    .central-search-bar form:focus-within {
        border-color: var(--primary-color) !important;
        background: #fff;
        box-shadow: 0 4px 15px rgba(61, 57, 146, 0.1);
    }

    .central-search-bar input {
        border-radius: 0 !important;
        height: 100%;
        border: none;
        padding: 0 16px;
        flex: 1;
        width: 100%;
        margin: 0;
        background: transparent;
        font-size: 13px;
    }

    .central-search-bar button {
        border-radius: 0 !important;
        height: 100% !important;
        background: transparent !important;
        color: var(--primary-color) !important;
        width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    .header-bottom {
    display: block !important;
    padding: 10px 0;
            backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-color);
        border-bottom: none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    }

    .header-bottom .container {
        position: relative;
        padding: 0 25px; /* Space for arrows */
    }

    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        display: none; /* Hide by default */
        align-items: center;
        justify-content: center;
        z-index: 10;
        font-size: 10px;
        color: var(--primary-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .slider-arrow:active {
        transform: translateY(-50%) scale(0.9);
        background: #f8f8f8;
    }

    .slider-arrow.show {
        display: flex; /* Show only when overflow detected */
    }

    .slider-arrow.prev {
        right: 0;
    }

    .slider-arrow.next {
        left: 0;
    }

    .mobile-action-slider {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 20px;
        padding: 5px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: center; /* Center by default */
    }

    .mobile-action-slider::-webkit-scrollbar {
        display: none;
    }

    .mobile-action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        padding: 8px 12px;
        gap: 4px;
        border: none !important;
        flex-shrink: 0;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

    .mobile-action-item:active {
        background: rgba(42, 39, 101, 0.08) !important;
        transform: scale(0.9);
    }

    .mobile-action-item i {
        color: var(--primary-color);
        font-size: 18px !important;
    }

    /* Show text labels for mobile nav */
    .mobile-action-item span:not(.header-count-badge):not(.flag),
    .mobile-action-item .lang-name {
        display: block !important;
        font-size: 11px !important;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
    }

    .mobile-action-item .lang-selected {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Maintain flag emoji for language toggle but make it larger */
    .mobile-action-item .flag {
        display: inline-block !important;
        font-size: 20px !important;
    }

    .logo {
        flex-shrink: 0;
    }

    .main-nav {
        display: none !important;
    }



    .mega-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 85% !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 99999 !important;
        transition: right 0.3s ease !important;
        padding: 20px !important;
        overflow-y: auto !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
        /* Hide scrollbar but keep scrollable */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .mega-menu::-webkit-scrollbar {
        display: none !important;
    }

    .mega-menu.active {
        right: 0 !important;
    }

    html[dir="ltr"] .mega-menu {
        right: auto !important;
        left: -100% !important;
        transition: left 0.3s ease !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1) !important;
    }

    html[dir="ltr"] .mega-menu.active {
        left: 0 !important;
    }

    /* Prevent header.scrolled from overriding mobile settings */
    header.scrolled .mega-menu {
        top: 0 !important;
        height: 100vh !important;
    }

    .mega-menu-close {
        display: none !important; /* Controlled by active class or JS */
        justify-content: space-between !important; /* Title on right, close mark on left */
        align-items: center !important;
        width: 100% !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #eee !important;
        margin-bottom: 20px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        color: var(--text-main) !important;
    }

    /* Mobile logic for close button */
    @media (max-width: 991px) {
        .mega-menu.active .mega-menu-close {
            display: flex !important;
        }
    }

    html[dir="ltr"] .mega-menu-close {
        justify-content: space-between !important; /* Title on left, close mark on right */
    }

    .mega-menu-grid {
        display: block;
    }

    .mega-column {
        margin-bottom: 25px;
        border: none !important;
    }

    .mega-column h4 {
        font-size: 16px;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }

    /* Restore Hero & Footer Mobile Styles */
    .hero h1 {
        font-size: 28px !important;
        margin-bottom: 20px;
    }
    
    .hero-btns {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
    
    .hero-btns .btn {
        width: 100%;
        margin: 0 !important;
    }

    .slider-header h2 {
        font-size: 22px;
    }
    
    .footer-column h4 {
        font-size: 16px;
    }
    
    .trends-grid {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 40px !important;
    }
    
    header.scrolled .logo img {
        height: 35px !important;
    }
}

@media (max-width: 360px) {
    .nav-wrapper {
        padding: 0 !important;
        gap: 5px;
    }
    
    .logo img {
        height: 35px !important;
    }
    
    .central-search-bar {
        padding: 0 !important;
    }
}
    .mobile-toggle {
        font-size: 18px;
        padding-inline-end: 5px;
    }
    .review-card {
        min-width: 280px !important;
    }

/* Mobile Section Headers & Card Scaling */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 35px;
    }
    .section-header h2 {
        font-size: 1.8rem;
    }
    .section-header span {
        font-size: 11px;
        letter-spacing: 2px;
    }
    .section {
        padding: 50px 0;
    }
}

@media (max-width: 480px) {
    .section-header {
        margin-bottom: 25px;
    }
    .section-header h2 {
        font-size: 1.4rem;
    }
    .section-header span {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    .section {
        padding: 35px 0;
    }

    /* Compact product cards for mobile slider */
    .slider-track .product-card .product-info {
        padding: 12px;
    }
    .slider-track .product-card .product-name {
        font-size: 13px;
    }
    .slider-track .product-card .new-price,
    .slider-track .product-card .product-price {
        font-size: 15px;
    }
    .slider-track .product-card .cart-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* Sub-section header & card size scaling on mobile */
@media (max-width: 768px) {
    .slider-header h4 {
        font-size: 16px;
    }
    .view-more-btn {
        font-size: 12px;
    }
    .slider-header {
        margin-bottom: 12px !important;
    }
    /* Slightly reduce image height ratio for less vertical scroll */
    .slider-track .product-card .product-image {
        aspect-ratio: 3/4 !important;
    }
}

@media (max-width: 480px) {
    .slider-header h4 {
        font-size: 14px;
        font-weight: 700;
    }
    .view-more-btn {
        font-size: 11px;
        gap: 4px;
    }
    .view-more-btn i {
        font-size: 10px;
    }
    /* Compact image ratio for small screens */
    .slider-track .product-card .product-image {
        aspect-ratio: 3/4 !important;
    }
    /* Reduce nav buttons slightly */
    .slider-nav-btn {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* Category Banner Styles */
.category-banner-wrapper {
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #3d3992, #5e59c2);
    box-shadow: 0 10px 30px rgba(61, 57, 146, 0.15);
}

.category-banner {
    padding: 60px 40px;
    text-align: center;
    color: white;
        backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.category-banner h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.category-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.category-banner-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        opacity: 0.4;
    z-index: 1;
}

@media (max-width: 768px) {
    .category-banner {
        padding: 40px 20px;
    }
    .category-banner h1 {
        font-size: 2rem;
    }
    .category-banner p {
        font-size: 0.95rem;
    }
}

/* Shop Mobile Specific */
.shop-categories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-link-wrapper:hover .cat-link {
    color: var(--primary-color);
}

/* Special style for 'All' link */
.cat-link[data-i18n="shop_type_all"] {
    background: #f1f1f1 !important;
    margin-bottom: 15px;
}
.cat-link[data-i18n="shop_type_all"].active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

.cat-parent {
    margin-bottom: 10px;
}
.cat-link-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding-inline-end: 10px;
    transition: var(--transition);
}

.cat-link {
    flex-grow: 1;
    display: block;
    padding: 12px 15px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
    text-decoration: none;
    border-right: 3px solid transparent;
}
[dir="ltr"] .cat-link {
    border-right: none;
    border-left: 3px solid transparent;
}
.cat-link.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.cat-toggle {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 10px;
    transition: all 0.3s;
}
.cat-parent.open .cat-toggle {
    color: var(--primary-color);
}

.sub-cats-list {
    padding-inline-start: 15px;
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.cat-parent.open .sub-cats-list {
    display: flex;
}
.sub-link {
    display: block;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
    padding: 5px 10px;
    border-radius: 4px;
}
.sub-link:hover, .sub-link.active {
    color: var(--primary-color);
        font-weight: 600;
}

.no-results {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    background: #fff;
    border-radius: 15px;
    border: 2px dashed var(--border-color);
    margin: 20px 0;
}
.no-results i {
    color: var(--primary-color);
    opacity: 0.2;
    margin-bottom: 20px;
}
.no-results h3 {
    color: var(--text-main);
    font-weight: 600;
}

.size-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.size-checkbox {
    cursor: pointer;
}
.size-checkbox input {
    display: none;
}
.size-checkbox span {
    display: block;
    padding: 8px 4px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    transition: all 0.3s;
    background: #fff;
    font-weight: 600;
}
.size-checkbox input:checked + span {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.price-range-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
}
.filter-input-small {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background: #f9fafb;
}
.price-range-inputs .btn {
    padding: 10px 15px;
    background: var(--primary-color);
    color: #fff;
}

/* Remove arrows from number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Reset Button Style */
#btnResetFilters {
    background: transparent !important;
    color: #666 !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 500;
    font-size: 13px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

#btnResetFilters::before {
    content: '\f2f9';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
}

#btnResetFilters:hover {
    background: #f8f9fa !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}



.filter-toggle-btn {
    display: none;
    padding: 8px 15px;
    background: #f9fafb;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.filter-toggle-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #fff;
}

.sidebar-header-mobile {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 1024px) {
    .shop-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0;
    }
    
    .filter-toggle-btn {
        display: flex;
        width: auto;
        margin: 0;
    }
    
    @media (max-width: 400px) {
        .filter-toggle-btn span {
            display: none;
        }
        .filter-toggle-btn {
            padding: 8px 12px;
        }
    }

    .shop-sidebar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 85%;
        height: 100vh;
        z-index: 10000;
        background: #fff;
        padding: 30px;
        overflow-y: auto;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        border: none;
        border-radius: 0;
    }

    .shop-sidebar::-webkit-scrollbar {
        display: none !important;
    }

    [dir="ltr"] .shop-sidebar {
        right: auto;
        left: -100%;
        box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    }

    .shop-sidebar.active {
        right: 0;
    }

    [dir="ltr"] .shop-sidebar.active {
        right: auto;
        left: 0;
    }

    .sidebar-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .sidebar-header-mobile h3 {
        color: var(--primary-color);
        margin: 0;
        font-size: 18px;
    }
    
    .close-sidebar {
        background: #f5f5f5;
        border: none;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        font-size: 16px;
        color: var(--text-main);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .shop-main {
        width: 100%;
    }

    .shop-controls {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    
    .sort-options.custom-dropdown {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .shop-main .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .shop-main .product-grid.list-view {
        grid-template-columns: 1fr;
    }

    .shop-main .product-grid.list-view .product-description {
        font-size: 12px;
        margin: 5px 0;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        display: -webkit-box;
    }

    .shop-main .product-grid.list-view .product-card {
        padding: 0;
        gap: 0;
    }

    .shop-main .product-grid.list-view .product-image {
        width: 140px;
        min-height: 180px;
    }

    .shop-main .product-grid.list-view .product-info {
        padding: 15px;
    }
    
    .shop-main .product-card .product-info {
        padding: 10px;
    }
    
    .shop-main .product-card .product-name {
        font-size: 12px;
        height: 34px;
        overflow: hidden;
    }
    
    .shop-main .product-card .new-price,
    .shop-main .product-card .product-price {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .shop-main .product-card .cart-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
        bottom: 10px;
        left: 10px;
    }

    .pagination {
        gap: 10px;
    }

    .pagination a.prev, .pagination a.next {
        padding: 0 15px;
        font-size: 13px;
    }

    .pagination .btn-text {
        display: none;
    }
}

@media (max-width: 400px) {
    .container {
        padding: 0 12px;
    }
    
    .shop-main .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        display: grid !important;
    }
    
    .shop-main .product-grid.list-view {
        grid-template-columns: 1fr !important;
    }
    
    .shop-main .product-card .product-info {
        padding: 8px;
    }
    
    .shop-main .product-card .product-name {
        font-size: 11px;
        line-height: 1.3;
        height: 28px;
    }
    
    .shop-main .product-card .product-price span {
        font-size: 13px;
    }
    
    .product-price .old-price {
        font-size: 11px;
    }
    
    .shop-main .product-card .cart-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
        bottom: 8px;
        left: 8px;
    }



    .shop-controls {
        padding: 10px;
        margin-bottom: 20px;
    }

    .view-toggle button {
        font-size: 16px;
        margin-left: 10px;
    }
    
    .dropdown-selected {
        padding: 10px;
        font-size: 12px;
    }

    /* Footer adjustments for very small screens */
    .footer-grid {
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .footer-column h4 {
        font-size: 14px;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }
    
    .footer-column ul li {
        margin-bottom: 10px;
    }
    
    .footer-column ul li a {
        font-size: 12px;
    }

    .footer-about p {
        font-size: 13px;
    }

    .social-links a {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* Shop View Transition */
#shop-view, #product-detail-view {
    transition: opacity 0.3s ease-in-out;
}

#product-detail-view {
    opacity: 0;
}

/* Product Detail View (SPA Style) */
.shop-page.detail-active {
    padding: 80px 0 60px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-page-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.shop-page.detail-active > .container {
    max-width: 100%;
    padding: 0 16px;
}

.shop-page.detail-active .detail-page-wrapper {
    width: 100%;
    max-width: none;
}

.product-detail-content {
    width: 100%;
    min-width: 0;
}

.detail-gallery,
.detail-info,
.thumb-list-wrapper {
    min-width: 0;
}

.detail-info h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
}

.detail-description h3,
.option-item h4 {
    font-size: 18px;
}

.detail-description p {
    font-size: 15px;
}

@media (max-width: 768px) {
    .detail-page-wrapper {
        padding: 0 10px;
    }
}

.back-to-shop {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: var(--transition);
    padding: 10px 0;
}

.back-to-shop:hover {
    color: var(--primary-color);
    transform: translateX(-5px);
}

[dir="rtl"] .back-to-shop:hover {
    transform: translateX(5px);
}

.product-detail-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Gallery (right in RTL), Info (left in RTL) */
    gap: 30px;
    align-items: stretch;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    border: none;
}

/* Swap for LTR */
[dir="ltr"] .product-detail-content {
    grid-template-columns: 1fr 1.2fr;
}

@media (min-width: 769px) {
    .detail-gallery {
        height: 0;
        min-height: 100%;
    }
    .main-img-container {
        flex: 1;
        min-height: 0;
    }
}

/* Fix font-size difference between Arabic (Cairo) and English (Montserrat) in product detail view */
[dir="ltr"] .detail-info h1 {
    font-size: 30px;
}

[dir="ltr"] .detail-current-price {
    font-size: 32px;
}

[dir="ltr"] .detail-old-price {
    font-size: 18px;
}

[dir="ltr"] .detail-description h3,
[dir="ltr"] .option-item h4 {
    font-size: 16px;
}

[dir="ltr"] .detail-description p {
    font-size: 15px;
}

[dir="ltr"] .product-sku {
    font-size: 13px;
}

[dir="ltr"] .detail-total-row {
    font-size: 16px;
}

[dir="ltr"] .add-to-cart-hero {
    font-size: 16px;
}

[dir="ltr"] .back-to-shop {
    font-size: 15px;
}

[dir="ltr"] .free-shipping-banner {
    font-size: 13px;
}

.detail-gallery {
    position: relative;
    padding: 0;
    background: transparent;
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[dir="ltr"] .detail-gallery {
    border-right: none;
}

.main-img-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: none;
    margin: 0;
    box-shadow: none;
}

.main-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    transition: transform 0.4s ease;
}

.main-img-container:hover img {
    transform: scale(1.03);
}

.detail-info {
    background: #fff;
    border-radius: 24px;
    padding: 30px 45px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-description {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 5px;
}

.detail-options-gallery {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

@media (max-width: 768px) {
    .detail-gallery {
        padding: 15px;
        gap: 15px;
    }
    
    .detail-description, 
    .detail-options-gallery {
        display: block; /* Visible on mobile too */
    }

    .detail-description p {
        font-size: 11px; /* Smaller for narrow mobile gallery */
    }
}

.detail-info h1 {
    font-size: 34px;
    color: var(--text-main);
    font-weight: 800;
}

.detail-price-box {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.detail-current-price {
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-color);
}

.detail-old-price {
    font-size: 18px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.detail-description {
    border-top: 1px solid #f5f5f5;
    padding-top: 20px;
}

.detail-description h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.detail-description p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
}

.thumb-list {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.thumb-list::-webkit-scrollbar { display: none; }

.thumb-item {
    width: 65px;
    height: 85px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
}

.thumb-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(61, 57, 146, 0.15);
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: var(--text-main);
}

.gallery-nav-btn.prev { right: 0; }
.gallery-nav-btn.next { left: 0; }

[dir="ltr"] .gallery-nav-btn.prev { right: auto; left: 0; }
[dir="ltr"] .gallery-nav-btn.next { left: auto; right: 0; }

@keyframes detailFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

.detail-branch-badge {
    position: absolute;
    top: 30px;
    right: 30px;
        backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

[dir="rtl"] .detail-branch-badge {
    right: auto;
    left: 30px;
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detail-info h1 {
    font-size: 42px;
    color: var(--text-main);
    font-weight: 900;
    line-height: 1.2;
}

.detail-price-box {
    display: flex;
    align-items: center;
    gap: 25px;
}

.detail-current-price {
    font-size: 36px;
    font-weight: 900;
    color: var(--primary-color);
}

.detail-current-price small {
    font-size: 16px;
}

.detail-old-price {
    font-size: 20px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.detail-description h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--text-main);
    position: relative;
    display: inline-block;
}

.detail-description h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-color);
}

[dir="ltr"] .detail-description h3::after {
    right: auto;
    left: 0;
}

.detail-description p {
    color: var(--text-muted);
    line-height: 2;
    font-size: 16px;
}

.detail-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.option-item h4 {
    font-size: 15px;
    margin-bottom: 15px;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-size-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.size-opt {
    width: 60px;
    height: 50px;
    border: 2px solid #eee;
    background: white;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.size-opt.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    box-shadow: 0 10px 20px rgba(61, 57, 146, 0.2);
}

.size-opt.out-of-stock {
    position: relative;
    color: #3d3992 !important;
    background: #f8f8f8;
    border-color: #eee;
    cursor: not-allowed;
    overflow: hidden;
}

.size-opt.out-of-stock::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
        transform: rotate(-45deg);
}

.detail-qty-selector {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #eee;
    border-radius: 14px;
    height: 52px;
    box-sizing: border-box;
    padding: 0 4px;
    min-width: 140px;
    justify-content: space-between;
}

.detail-qty-selector .qty-btn {
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-qty-selector .qty-btn:hover {
    background: #f5f5ff;
    color: var(--primary-color);
}

.detail-qty-selector input {
    width: 45px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-main);
    -moz-appearance: textfield;
    appearance: textfield;
}

.detail-qty-selector input::-webkit-outer-spin-button,
.detail-qty-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.detail-footer-actions {
    display: flex;
    gap: 20px;
}

.add-to-cart-hero {
    flex: 1;
    height: 64px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 18px;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.4s;
    box-shadow: 0 15px 35px rgba(61, 57, 146, 0.25);
}

.add-to-cart-hero:hover {
    background: var(--text-main);
    transform: translateY(-4px);
    box-shadow: none;
}

.detail-wishlist-btn {
    width: 64px;
    height: 64px;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s;
}

.detail-wishlist-btn:hover {
    background: #fff0f0;
    color: #e53935;
    border-color: #ffdada;
}

.detail-wishlist-btn.active i {
    font-weight: 900;
    color: #e53935;
}

@media (max-width: 1100px) {
    .product-detail-content {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    [dir="rtl"] .product-detail-content {
        grid-template-columns: 1fr 1fr;
    }
    .detail-info {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .product-detail-content {
        grid-template-columns: 1fr; /* Stack on mobile */
        border-radius: 0;
    }
    
    [dir="rtl"] .product-detail-content {
        grid-template-columns: 1fr;
    }

    .detail-gallery {
        padding: 20px;
        gap: 20px;
    }

    .main-img-container {
        aspect-ratio: 3/4;
        border-radius: 12px;
    }

    .detail-info {
        padding: 25px 20px;
        gap: 20px;
    }

    .detail-info h1 {
        font-size: 22px;
        line-height: 1.3;
        margin-top: 0;
    }

    .detail-current-price {
        font-size: 24px;
    }

    .detail-description h3, 
    .option-item h4 {
        font-size: 16px;
    }

    .detail-description p {
        font-size: 14px;
    }

    .thumb-item {
        width: 50px;
        height: 70px;
    }

    .add-to-cart-hero {
        height: 48px;
        font-size: 14px !important;
        padding: 0 15px;
    }

    .detail-wishlist-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .back-to-shop {
        margin-bottom: 20px;
        font-size: 15px;
    }
    .detail-gallery {
        padding: 10px;
        gap: 15px;
    }
    .main-img-container {
        max-width: 100%;
        aspect-ratio: 4/5;
        border-radius: 12px;
    }
    .product-detail-content {
        padding: 0 0 20px 0;
        border-radius: 0; /* Full width edge-to-edge */
        border: none;
        box-shadow: none;
        gap: 15px;
    }
    .detail-info {
        padding: 0 15px;
    }
    .detail-info h1 {
        font-size: 22px;
    }
    .detail-price-box {
        gap: 15px;
    }
    .detail-current-price {
        font-size: 24px;
    }
    .detail-size-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .size-opt {
        width: 100% !important;
        height: 38px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .detail-qty-selector input {
        width: 45px;
        font-size: 16px;
    }
    .detail-qty-selector .qty-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .detail-footer-actions {
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin-top: 10px;
    }
    .add-to-cart-hero {
        height: 55px;
        font-size: 16px;
        border-radius: 14px;
    }
    .detail-wishlist-btn {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        font-size: 18px;
        flex-shrink: 0;
    }
    .detail-branch-badge {
        top: 15px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }
    [dir="rtl"] .detail-branch-badge {
        left: 15px;
        right: auto;
    }
}

/* Hide icon on desktop (text label is shown instead) */
@media (min-width: 601px) {
    .view-btn i {
        display: none;
    }
    [dir="ltr"] .view-btn i {
        display: none;
    }
}

@media (max-width: 600px) {
    .view-btn span {
        display: none !important;
    }
    .view-btn {
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        flex-shrink: 0;
    }
    .view-btn i {
        margin: 0 !important;
        display: inline-block !important;
        font-size: 18px !important;
    }

    /* Wrap text, expand vertically, and move to center on hover for small screens */
    .product-card:hover .branch-badge, [dir="rtl"] .product-card:hover .branch-badge {
        height: auto;
        padding: 6px 15px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: max-content;
        max-width: 90%;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    .product-card:hover .branch-badge .branch-name {
        white-space: nowrap;
        margin-inline-start: 0;
        margin-top: 0;
    }

    /* Reduce gap between product name and price */
    .shop-main .product-card .product-info .product-name {
        margin-bottom: 2px !important;
        height: auto !important; /* Allow it to shrink if it's only one line */
        min-height: 28px;
    }
}

@media (max-width: 400px) {
    .product-card:hover .branch-badge .branch-name,
    .detail-branch-badge .branch-name {
        font-size: 9px !important;
    }
}

/* Rating & User Reviews Enhanced Styles */
.product-rating.has-rating {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.user-review-card {
    border: 2px solid rgba(61, 57, 146, 0.1) !important;
    background: #fff !important;
    transition: var(--transition) !important;
}

.user-review-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-color: var(--primary-color) !important;
}


/* Footer Bottom & Payment Methods */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 50px;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.footer-copyright p {
    font-size: 14px;
    opacity: 0.8;
    color: #ffffff;
}

.payment-methods-footer span {
    transition: var(--transition);
}

.payment-methods-footer span:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .detail-description p {
        font-size: 14px;
        line-height: 1.8;
    }
    .detail-options {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 0;
    }
    .option-item h4 {
        margin-bottom: 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .back-to-shop {
        margin-bottom: 20px;
        font-size: 15px;
    }
    .detail-gallery {
        padding: 10px;
        gap: 15px;
    }
    .main-img-container {
        aspect-ratio: 4/5;
        border-radius: 0;
    }
    .product-detail-content {
        padding: 0 0 20px 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        gap: 15px;
    }
    .detail-info {
        padding: 0 15px;
    }
    .detail-info h1 {
        font-size: 22px;
    }
    .detail-price-box {
        gap: 15px;
    }
    .detail-current-price {
        font-size: 24px;
    }
    .detail-size-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .size-opt {
        width: 100% !important;
        height: 38px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .detail-qty-selector input {
        width: 45px;
        font-size: 16px;
    }
    .detail-qty-selector .qty-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .detail-footer-actions {
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin-top: 10px;
    }
    .add-to-cart-hero {
        height: 55px;
        font-size: 16px;
        border-radius: 14px;
    }
    .detail-wishlist-btn {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        font-size: 18px;
        flex-shrink: 0;
    }
    .detail-branch-badge {
        top: 15px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }
    [dir="rtl"] .detail-branch-badge {
        left: 15px;
        right: auto;
    }
}

/* Hide icon on desktop (text label is shown instead) */
@media (min-width: 601px) {
    .view-btn i {
        display: none;
    }
    [dir="ltr"] .view-btn i {
        display: none;
    }
}

@media (max-width: 600px) {
    .view-btn span {
        display: none !important;
    }
    .view-btn {
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        flex-shrink: 0;
    }
    .view-btn i {
        margin: 0 !important;
        display: inline-block !important;
        font-size: 18px !important;
    }

    /* Wrap text, expand vertically, and move to center on hover for small screens */
    .product-card:hover .branch-badge, [dir="rtl"] .product-card:hover .branch-badge {
        height: auto;
        padding: 6px 15px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: max-content;
        max-width: 90%;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    .product-card:hover .branch-badge .branch-name {
        white-space: nowrap;
        margin-inline-start: 0;
        margin-top: 0;
    }

    /* Reduce gap between product name and price */
    .shop-main .product-card .product-info .product-name {
        margin-bottom: 2px !important;
        height: auto !important; /* Allow it to shrink if it's only one line */
        min-height: 28px;
    }
}

@media (max-width: 400px) {
    .product-card:hover .branch-badge .branch-name,
    .detail-branch-badge .branch-name {
        font-size: 9px !important;
    }
}

/* Rating & User Reviews Enhanced Styles */
.product-rating.has-rating {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.user-review-card {
    border: 2px solid rgba(61, 57, 146, 0.1) !important;
    background: #fff !important;
    transition: var(--transition) !important;
    min-width: 450px;
    padding: 25px;
    border-radius: 20px;
    margin: 10px;
}

.user-review-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-color: var(--primary-color) !important;
}

@media (max-width: 575px) {
    .user-review-card {
        min-width: 290px !important;
        padding: 18px !important;
        margin: 8px !important;
    }
    .review-content {
        font-size: 13px !important;
    }
    .review-author span {
        font-size: 12px !important;
    }
}


/* Footer Bottom & Payment Methods */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 50px;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.footer-copyright p {
    font-size: 14px;
    opacity: 0.8;
    color: #ffffff;
}

.payment-methods-footer span {
    transition: var(--transition);
}

.payment-methods-footer span:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-3px);
}
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    .payment-methods-footer {
        justify-content: center;
    }
}

/* Promo Sliders */
.banner-slider-container, .offers-slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.banner-slider-track, .offers-slider-track {
    display: flex;
    gap: 18px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-banners-col .banner-card {
    min-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 0;
}

.offers-grid-slide {
    min-width: 100%;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 12px;
}

.promo-offers-col .offer-card {
    min-width: 0;
    flex: 1;
}

.promo-mini-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff4081, #f50057);
    color: #fff;
    padding: 4px 14px;
    border-radius: 25px;
    font-size: 11px;
    font-weight: 800;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(245, 0, 87, 0.4);
    letter-spacing: 0.3px;
}

.promo-card-special {
    position: relative;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .offers-grid-slide {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .offers-grid-slide {
        grid-template-columns: 1fr 1fr;
    }
}



/* Wholesale Section Styles */
.wholesale-section {
    background: linear-gradient(135deg, #1a237e, #3d5afe);
    color: #fff;
    padding: 60px 0;
    overflow: hidden;
    position: relative;
}

.wholesale-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px);
    border-radius: 20px !important;
    overflow: hidden !important; /* Force clip content */
    transition: 0.3s;
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.wholesale-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.wholesale-card:hover h3 {
    color: #ffeb3b !important;
    text-shadow: 0 2px 10px rgba(255, 235, 59, 0.3);
}

.wholesale-card .product-image {
    height: 300px;
    position: relative;
    overflow: hidden !important;
    background: #fff;
    border-radius: 20px 20px 0 0 !important; /* Top corners match card radius */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.wholesale-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wholesale-card .wholesale-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ffeb3b;
    color: #000;
    font-weight: 900;
    padding: 6px 15px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size: 12px;
    z-index: 2;
}

.wholesale-card .product-info p,
.wholesale-card .product-info h3 {
    color: #333 !important;
}

.wholesale-card .product-info h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wholesale-card .overlay-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 15px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 10;
}

.wholesale-card:hover .overlay-info,
.wholesale-card .overlay-info.visible-mobile {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .wholesale-card .overlay-info {
        opacity: 1;
        transform: translateY(0);
                padding: 10px;
    }
    
    .wholesale-card .product-image {
        height: 250px;
    }
}

/* Ensure wholesale cards always clip content even with sliders */
.wholesale-card.product-card:has(.has-slider), 
.wholesale-card.product-card:has(.product-card-slider) {
    overflow: hidden !important;
}

/* Promo Offers Slider Responsive Toggles */
.mobile-offers-slider { display: none; }
@media (max-width: 768px) {
    .desktop-offers-slider { display: none; }
    .mobile-offers-slider { display: block; }
}

/* Footer Adjustments for Very Small Screens (e.g., iPhone SE) */
@media (max-width: 400px) {
    .footer-column h4 {
        font-size: 13px !important;
        margin-bottom: 10px;
    }
    .footer-column ul li a {
        font-size: 11px !important;
    }
    .footer-about p, .contact-info-footer p {
        font-size: 11px !important;
        line-height: 1.5;
    }
    .social-links a {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .contact-info-footer p i {
        font-size: 14px !important;
        width: 30px !important;
        height: 30px !important;
    }
}

/* Consolidated slider styles above */

/* Product Card Slider Arrows - Specific Styling */
.product-image.has-slider .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
        border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 1 !important;
    display: flex !important; /* Ensure they show up */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--primary-color);
    font-size: 11px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.product-card:has(.has-slider), 
.product-card:has(.product-card-slider) {
    overflow: visible !important;
}

.product-image.has-slider {
    overflow: visible !important;
}

.product-image.has-slider .product-card-slider img {
    border-radius: 0; /* Match wholesale card radius */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
        border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    opacity: 0.6; /* Visible but subtle */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: var(--primary-color);
    font-size: 12px;
}

.product-card:hover .slider-arrow {
    opacity: 1;
}

.card-arrow-prev { right: 0; }
.card-arrow-next { left: 0; }

.slider-arrow:hover {
    background: var(--primary-color);
    color: #fff;
    opacity: 1;
}

/* Header Navigation Arrows (Mobile Only) */
.header-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
        border: none;
    border-radius: 50%;
    display: none; /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    color: var(--primary-color);
    font-size: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-nav-arrow.prev { right: 0; }
.header-nav-arrow.next { left: 0; }

/* LTR overrides for navigation, card, and slider arrows */
[dir="ltr"] .header-nav-arrow.prev {
    left: 0;
    right: auto;
}
[dir="ltr"] .header-nav-arrow.next {
    right: 0;
    left: auto;
}
[dir="ltr"] .header-nav-arrow.prev i::before {
    content: "\f053" !important; /* Left Chevron */
}
[dir="ltr"] .header-nav-arrow.next i::before {
    content: "\f054" !important; /* Right Chevron */
}

[dir="ltr"] .card-arrow-prev {
    left: 0;
    right: auto;
}
[dir="ltr"] .card-arrow-next {
    right: 0;
    left: auto;
}
[dir="ltr"] .card-arrow-prev i::before {
    content: "\f053" !important; /* Left Chevron */
}
[dir="ltr"] .card-arrow-next i::before {
    content: "\f054" !important; /* Right Chevron */
}

/* Homepage Slider & Action Arrows LTR Fixes */
[dir="ltr"] .slider-nav-btn i,
[dir="ltr"] .view-more-btn i,
[dir="ltr"] .view-btn i {
    transform: none !important; /* Disable double-flipping/rotation */
}
[dir="ltr"] .slider-nav-btn.prev i::before {
    content: "\f053" !important; /* Left Chevron */
}
[dir="ltr"] .slider-nav-btn.next i::before {
    content: "\f054" !important; /* Right Chevron */
}
[dir="ltr"] .view-more-btn i::before {
    content: "\f061" !important; /* Arrow pointing right */
}

.header-nav-arrow.show {
    display: flex;
}

@media (max-width: 1024px) {
    /* Only show if script adds .show class */
}

@media (min-width: 1025px) {
    .header-nav-arrow {
        display: none !important;
    }
}

.slider-arrow:hover, .header-nav-arrow:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Slider Dots - Specific Styling */
.product-image.has-slider .slider-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    justify-content: center;
    display: flex;
    gap: 8px;
    z-index: 100;
    opacity: 1 !important;
    display: flex !important;
}

.slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
        cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.slider-dot.active {
    background: #fff;
    width: 18px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* Out of Stock Sizes Styling */
.size-opt.out-of-stock {
    position: relative;
    color: #3d3992 !important;
    opacity: 0.6;
    pointer-events: none;
    overflow: hidden;
    background: #f1f1f1 !important;
    border-color: #ddd !important;
}

/* Cart Page - Items Scrollbar */
#cartItems {
    max-height: 560px;
    overflow-y: auto;
    padding-inline-end: 0 !important;
}

#cartItems {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#cartItems::-webkit-scrollbar {
    display: none !important;
}

.size-opt.out-of-stock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top left, transparent 47%, #3d3992 48%, #3d3992 52%, transparent 53%);
    pointer-events: none;
}


/* Product Color & Gallery Enhancements */
.thumb-list {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}


/* Thumbnail nav buttons (large screens) */
.thumb-list-wrapper { position: relative; }
.thumb-nav-btn {
    display: none; /* default hidden, shown via media query */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px rgba(16,24,40,0.06);
    cursor: pointer;
    z-index: 6;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.thumb-nav-btn i { color: var(--primary-dark); font-size: 14px; }
.thumb-nav-btn:hover { transform: translateY(-50%) scale(1.04); box-shadow: 0 10px 24px rgba(16,24,40,0.12); }
.thumb-nav-btn.prev { left: -10px; right: auto; }
.thumb-nav-btn.next { right: -10px; left: auto; }

[dir="rtl"] .thumb-nav-btn.prev { left: auto; right: -10px; }
[dir="rtl"] .thumb-nav-btn.next { right: auto; left: -10px; }

/* Show nav buttons on large screens */
@media (min-width: 992px) {
    .thumb-nav-btn { display: flex; }
    .thumb-list-wrapper {
        width: calc(70px * 4 + 10px * 3);
        max-width: calc(70px * 4 + 10px * 3);
        margin: 15px auto 0 auto;
    }
}

/* Small-screen: keep scroll behaviour and hide navs */
@media (max-width: 991px) {
    .thumb-nav-btn { display: none !important; }
}
.thumb-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.thumb-item {
    width: 70px;
    height: 70px;
    border: 2px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background: #f8f9fa;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb-item:hover, .thumb-item.active {
    border-color: var(--primary-color, #3d3992);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.detail-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.color-swatch:hover {
    transform: scale(1.1);
    border-color: #333;
}

.color-swatch.active {
    border-color: var(--primary-color, #3d3992);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-color, #3d3992);
}

/* Management Gallery Styles */
.btn-xs {
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 3px;
}

.gallery-color-radio:checked + label {
    background-color: var(--primary-color, #3d3992) !important;
    color: white !important;
    border-color: var(--primary-color, #3d3992) !important;
}


/* Responsive Detail View Fixes */
@media (max-width: 480px) {
    .product-detail-content {
        grid-template-columns: 160px 1fr !important;
    }
    
    [dir="rtl"] .product-detail-content {
        grid-template-columns: 160px 1fr !important;
    }

    .detail-info {
        padding: 20px 15px !important; /* Fixed: Added more side padding */
    }

    .detail-info h1 {
        margin-top: 15px !important; /* Fixed: Space from top */
        font-size: 16px !important;
    }

    .gallery-nav-btn {
        width: 26px !important; /* Fixed: Smaller arrows */
        height: 26px !important;
        font-size: 12px !important;
    }
    
    .add-to-cart-hero {
        font-size: 10px !important;
        height: 38px !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding: 0 8px !important;
        gap: 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .add-to-cart-hero span {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .add-to-cart-hero i {
        font-size: 12px !important;
    }
}

@media (max-width: 360px) {
    .product-detail-content {
        grid-template-columns: 140px 1fr !important;
    }
    
    [dir="rtl"] .product-detail-content {
        grid-template-columns: 140px 1fr !important;
    }

    .detail-info {
        padding: 15px 10px !important;
        gap: 8px !important;
    }

    .detail-info h1 {
        font-size: 13px !important;
        margin-top: 10px !important;
    }

    .detail-current-price {
        font-size: 15px !important;
    }

    .add-to-cart-hero {
        font-size: 9px !important;
        height: 36px !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding: 0 4px !important;
        gap: 3px !important;
    }

    .add-to-cart-hero span {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .add-to-cart-hero i {
        font-size: 11px !important;
    }

    .detail-qty-selector {
        transform: scale(0.7) !important;
    }

    .detail-wishlist-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
}

/* --- Modern Checkout UI --- */
.checkout-container {
    padding: 30px 0 60px 0;
    background: #f8f8fa;
    min-height: 100vh;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1024px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

.checkout-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(61, 57, 146, 0.08);
    box-shadow: 0 10px 30px rgba(61, 57, 146, 0.04);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
}

.checkout-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-main);
}

.checkout-section-title i {
    color: var(--primary-color);
        width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* Payment Methods */
.payment-methods-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.payment-method-card {
    border: 1px solid #f1f1f5;
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.payment-method-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #fafafa;
    filter: grayscale(0.8);
}

.payment-method-card:hover:not(.disabled) {
    border-color: var(--primary-color);
    background: #fcfaff;
}

.payment-method-card.active {
    border-color: var(--primary-color);
        box-shadow: 0 4px 15px rgba(82, 78, 183, 0.05);
}

.payment-method-card i.check-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--primary-color);
    font-size: 14px;
    opacity: 0;
    transform: scale(0.5);
    transition: 0.3s;
}

.payment-method-card.active i.check-icon {
    opacity: 1;
    transform: scale(1);
}

.payment-method-icon {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.payment-method-icon img {
    max-height: 100%;
    max-width: 60px;
    object-fit: contain;
}

.payment-method-card span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.payment-method-card small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 4px;
}

/* Paymob Form Placeholder */
.paymob-payment-section {
    border-top: 1px solid #f1f1f5;
    padding-top: 30px;
    margin-top: 20px;
}

.paymob-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.paymob-card-form {
    display: grid;
    gap: 5px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid #f1f1f5;
    background: #fff;
    font-family: inherit;
    transition: 0.3s;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(82, 78, 183, 0.05);
    outline: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Order Summary */
.order-summary-card {
    position: sticky;
    top: 100px;
}

.cart-items-mini {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
    max-height: 100px !important;
    overflow-y: auto !important;
    padding-right: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scroll-snap-type: y mandatory; /* Snap scroll container vertically */
}

.cart-items-mini::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.cart-item-modern {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f8f8fa;
    scroll-snap-align: start; /* Align each product cleanly to top when snapping */
}

.cart-item-modern:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.cart-item-image {
    width: 80px;
    height: 100px;
    border-radius: 12px;
    background: #f8f9fa;
    object-fit: contain;
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-main);
    line-height: 1.5;
    padding-inline-end: 25px; /* Space for trash icon */
}

.cart-item-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.cart-item-qty-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modern-stepper {
    display: flex;
    align-items: center;
    background: #f8f8fa;
    border-radius: 8px;
    padding: 4px;
    gap: 10px;
}

.stepper-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: #fff;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: 0.2s;
}

.stepper-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.item-qty-val {
    font-weight: 700;
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

.cart-item-price {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 15px;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #ff4d4d;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    transition: 0.3s;
}

.cart-item-remove:hover {
    color: #cc0000;
    transform: scale(1.1);
}

/* Totals */
.summary-totals {
    border-top: 1.5px solid #f1f1f5;
    padding-top: 20px;
    display: grid;
    gap: 12px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-muted);
}

.summary-row.total {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed #f1f1f5;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 800;
}

.summary-row.total .total-price {
    color: var(--primary-color);
}

/* Pay Button Wrapper */
.checkout-actions {
    margin-top: 30px;
}

.btn-pay {
    width: 100%;
    background: var(--primary-color);
    color: #fff !important;
    border: none;
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(82, 78, 183, 0.2);
}

.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(82, 78, 183, 0.3);
}

.btn-pay:disabled {
    background: #b5b2e3;
    cursor: not-allowed;
    transform: none;
}

.sticky-pay-wrapper {
    display: none !important;
}

.checkout-actions {
    display: none !important;
}

body.checkout-unlocked .checkout-actions {
    display: block !important;
}

body.cart-empty .sticky-pay-wrapper {
    display: none !important;
}

/* Mobile Specifics */
@media (max-width: 768px) {
    .checkout-container {
        padding: 100px 0 100px 0;
    }

    .checkout-grid {
        gap: 20px;
    }

    .checkout-actions {
        display: none !important; /* Hide inline button on mobile */
    }

    body.checkout-unlocked .checkout-actions {
        display: none !important;
    }
    
    body.checkout-unlocked .sticky-pay-wrapper {
        display: flex !important;
        position: relative; /* Changed from fixed */
        background: transparent;
        padding: 20px;
        z-index: 10;
        justify-content: center;
        box-shadow: none;
    }

    .sticky-pay-wrapper .btn-pay {
        max-width: 500px;
    }

    .checkout-card {
        padding: 16px;
        border-radius: 16px;
    }
}

/* Success Page Styles */
.success-card {
    text-align: center;
    max-width: 500px;
    margin: 60px auto;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #e7fcf0;
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 24px;
}

.success-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-main);
}

.success-desc {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.order-info-box {
    background: #f8f8fa;
    border-radius: 16px;
    padding: 20px;
    text-align: right;
    margin-bottom: 30px;
}

[dir="ltr"] .order-info-box {
    text-align: left;
}

.checkout-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.checkout-badge.fawry { background: #fffbeb; color: #d97706; }
.checkout-badge.cash { background: #fef2f2; color: #dc2626; }
.checkout-badge.wallet { background: #eff6ff; color: #2563eb; }

@media (max-width: 400px) {
    .cart-item-modern {
        gap: 10px;
        padding: 12px 0;
    }
    .cart-item-image {
        width: 60px;
        height: 75px;
    }
    .cart-item-info h4 {
        font-size: 13px;
    }
    .cart-item-meta {
        font-size: 11px;
    }
    .cart-item-price {
        font-size: 14px;
    }
    .modern-stepper {
        gap: 6px;
        padding: 2px;
    }
    .stepper-btn {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .item-qty-val {
        font-size: 12px;
    }
    .payment-methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Collapsible Section Styles */
.collapsible-section.collapsed .collapsible-content {
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.collapsible-section .collapsible-content {
    max-height: 2000px; /* Large enough to fit content */
    opacity: 1;
    transition: all 0.4s ease-in-out;
    overflow: visible;
}

.collapsible-section.collapsed .toggle-icon {
    transform: rotate(180deg);
}

.collapsible-header {
    user-select: none;
}

.checkout-section-title.collapsible-header {
    margin-bottom: 5px !important;
}


/* Product Description Toggle */
.product-desc-wrapper {
    position: relative;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 1000px; /* Large enough for full content */
}

.product-desc-wrapper.collapsed {
    max-height: 3.2em; /* Exactly 2 lines approx */
    overflow: hidden;
}

.product-desc-wrapper.collapsed .product-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

.btn-toggle-desc {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    transition: all 0.2s;
}

.btn-toggle-desc:hover {
    color: var(--accent-gold);
}

.btn-toggle-desc i {
    font-size: 10px;
    transition: transform 0.3s;
}

.btn-toggle-desc.active i {
    transform: rotate(180deg);
}

/* Enhanced Product Detail Styles (Matched Layout, Original Colors) */
.detail-header-center {
    text-align: center;
    margin-bottom: 15px;
}

.product-sku {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.detail-price-box {
    justify-content: center;
    margin-bottom: 20px;
}

.option-item h4 {
    font-size: 13px;
    margin-bottom: 8px;
    color: #333;
}

/* Original Style Swatches/Buttons */
.color-swatch, .size-opt {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: auto;
    height: 40px;
    padding: 0 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}

.color-swatch {
    border-radius: 50%; /* Circle for color by default, unless text is needed */
    width: 36px;
    height: 36px;
    padding: 0;
}

.color-swatch.active, .size-opt.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    box-shadow: 0 5px 15px rgba(61, 57, 146, 0.2);
}

.detail-qty-selector {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
}

.detail-total-row {
    padding: 15px 0;
    border-top: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
}

.free-shipping-banner {
    background: #f0f0ff;
    color: var(--primary-color);
    padding: 12px;
    text-align: center;
    border-radius: 12px;
    font-size: 13px;
    margin: 15px 0;
    font-weight: 700;
    border: 1px dashed var(--primary-color);
}

.size-guide-link {
    text-align: right;
    margin-bottom: 15px;
    margin-left: auto !important;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.size-guide-link a {
    color: var(--primary-color);
    font-size: 13px;
    text-decoration: underline;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.detail-footer-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.primary-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.add-to-cart-hero {
    flex: 1;
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 55px !important;
    font-weight: 700;
    border: none !important;
    box-shadow: none !important;
}

.buy-now-btn {
    width: 100%;
    background: var(--primary-dark) !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 55px !important;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: none !important;
}

.detail-wishlist-btn {
    width: 55px !important;
    height: 55px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s;
}

.detail-wishlist-btn.active {
    color: #ff4757;
    background: #fff0f0 !important;
    border-color: #ff4757 !important;
}

@media (max-width: 600px) {
    .product-detail-content {
        display: block !important;
    }
    
    .detail-gallery {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    .thumb-list {
        justify-content: flex-end !important;
        padding: 10px 2px !important;
        overflow-x: auto !important;
        display: flex !important;
        gap: 10px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .thumb-list::-webkit-scrollbar {
        display: none !important;
    }
    .thumb-list .thumb-item {
        width: calc((100% - 30px) / 4) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 0 !important;
    }
    
    .detail-info {
        padding: 20px 15px !important;
    }
}

/* Dynamic Image Zoom Lightbox & Triggers */
.product-image:hover,
.main-img-container:hover {
    cursor: zoom-in !important;
}

.image-zoom-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 50px;
    height: 50px;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    color: var(--primary-color) !important;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
}

.product-image:hover .image-zoom-btn,
.main-img-container:hover .image-zoom-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.image-zoom-btn:hover {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    color: var(--primary-dark) !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
}

/* Centered on mobile and only appears on hover */
@media (max-width: 768px) {
    .image-zoom-btn {
        width: 44px;
        height: 44px;
    }
}

/* Lightbox Modal */
.samraa-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
        z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}

.samraa-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.samraa-lightbox img {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    border-radius: 12px;
    transform: scale(0.9);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
}

.samraa-lightbox.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.lightbox-close:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
}

.samraa-lightbox .lightbox-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-left, .lightbox-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* Flex when active via JS */
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.lightbox-left:hover, .lightbox-right:hover {
    background: #ffffff;
    color: #000000;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
}

.lightbox-left {
    left: 30px;
}

.lightbox-right {
    right: 30px;
}

@media (max-width: 768px) {
    .lightbox-close {
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        font-size: 26px;
    }
    .lightbox-left { left: 10px; width: 40px; height: 40px; font-size: 20px; }
    .lightbox-right { right: 10px; width: 40px; height: 40px; font-size: 20px; }
}

/* Premium sizes styling */
.detail-size-list {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.size-opt, .size-box {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 85px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    border: 2px solid #eee !important;
    background: #fff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.size-opt .sz-name, .size-box .sz-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    display: block !important;
}

.size-opt .sz-qty, .size-box .sz-qty {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    margin-top: 3px !important;
    display: block !important;
}

/* Active styles */
.size-opt.active, .size-box.active {
    border-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 8px 20px rgba(61, 57, 146, 0.15) !important;
}

.size-opt.active .sz-name, .size-box.active .sz-name,
.size-opt.active .sz-qty, .size-box.active .sz-qty {
    color: white !important;
}

/* Mobile responsive rules */
@media (max-width: 768px) {
    .detail-size-list {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .size-opt, .size-box {
        min-width: 75px !important;
        padding: 6px 12px !important;
        border-radius: 10px !important;
    }
    .size-opt .sz-name, .size-box .sz-name {
        font-size: 13px !important;
    }
    .size-opt .sz-qty, .size-box .sz-qty {
        font-size: 9px !important;
    }
}

/* Premium Modern Size Select styling */
.modern-size-select {
    font-family: inherit !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modern-size-select:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(61, 57, 146, 0.08) !important;
}

.modern-size-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(61, 57, 146, 0.15) !important;
    background-color: #fff !important;
}

.size-dropdown-wrapper .select-arrow {
    transition: transform 0.3s ease !important;
}

.size-dropdown-wrapper:hover .select-arrow {
    transform: translateY(-50%) scale(1.1) !important;
    color: var(--primary-color) !important;
}

/* True Custom Modern Dropdown Selector */
.custom-select-container {
    position: relative;
    max-width: 320px;
    width: 100%;
    user-select: none;
    font-family: inherit;
    z-index: 99;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 20px;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    min-width: 0;
}

.custom-select-trigger > span {
    display: inline-block;
    max-width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-trigger:hover {
    border-color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(61, 57, 146, 0.08);
}

.custom-select-container.active .custom-select-trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(61, 57, 146, 0.15);
}

.select-trigger-arrow {
    transition: transform 0.3s ease;
    color: #777;
    font-size: 13px;
}

.custom-select-container.active .select-trigger-arrow {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 280px;
    overflow-y: auto;
    z-index: 999;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.custom-select-container.active .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f9f9f9;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background: #f5f5ff;
}

.custom-option.selected {
    background: #ececff;
    color: var(--primary-color);
}

.custom-option .opt-text {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
}

.custom-option.selected .opt-text {
    color: var(--primary-color);
}

.custom-option .opt-badge {
    font-size: 11px;
    font-weight: 700;
        color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.custom-option.selected .opt-badge {
    background: var(--primary-color);
    color: #fff;
}

.custom-option:hover .opt-badge {
    background: var(--primary-color);
    color: #fff;
}

.custom-select-options::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}


@media (min-width: 992px) {
/* --- GLOBAL MOBILE HEADER-BOTTOM FOR DESKTOP (USER REQUESTED) --- */
body { padding-top: 84px !important; padding-bottom: 70px !important; }

.header-bottom {
    display: block !important;
    padding: 10px 0;
        backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}
.header-bottom .container {
    position: relative;
    padding: 0 25px;
}
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 10px;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}
.slider-arrow:active {
    transform: translateY(-50%) scale(0.9);
    background: #f8f8f8;
}
.slider-arrow.show {
    display: flex;
}
.slider-arrow.prev {
    right: 0;
}
.slider-arrow.next {
    left: 0;
}
.mobile-action-slider {
    display: flex !important;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    padding: 5px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
}
.mobile-action-slider::-webkit-scrollbar {
    display: none;
}
.mobile-action-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    padding: 8px 12px;
    gap: 4px;
    border: none !important;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}
.mobile-action-item:active {
    background: rgba(42, 39, 101, 0.08) !important;
    transform: scale(0.9);
}
.mobile-action-item i {
    color: var(--primary-color);
    font-size: 18px !important;
}
.mobile-action-item span:not(.header-count-badge):not(.flag),
.mobile-action-item .lang-name {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}
.mobile-action-item .lang-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.mobile-action-item .flag {
    display: inline-block !important;
    font-size: 20px !important;
}
.main-nav {
    display: none !important;
}

}

/* FIX FOR SIZE TEXT CUT OFF */
.custom-select-trigger { height: auto !important; min-height: 52px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.custom-select-trigger > span { white-space: normal !important; overflow: visible !important; }

/* Duplicate search-filter-btn removed */

.search-submit-btn {
    background: transparent !important;
    color: #ffffff !important;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-bottom .main-nav ul li a {
    color: var(--primary-color) !important;
}
.header-bottom .main-nav ul li a:hover {
    color: var(--primary-dark) !important;
}
.mobile-action-item {
    color: var(--text-main) !important;
}
.mobile-action-item i {
    color: var(--primary-color) !important;
    transition: transform 0.2s ease !important;
}
.mobile-action-item:hover {
    color: var(--primary-color) !important;
}
.mobile-action-item:hover i {
    transform: translateY(-2px);
}
.header-nav-arrow {
    color: var(--primary-color) !important;
}
.mobile-toggle {
    color: #ffffff !important;
}


/* Smoke / Wave Effect on the left side of Header Top */

.header-main::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(135, 100, 255, 0.4) 0%, rgba(35, 33, 79, 0) 70%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
}
.header-main::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 150px;
    width: 300px;
    height: 150px;
    background: radial-gradient(ellipse, rgba(80, 200, 255, 0.2) 0%, rgba(35, 33, 79, 0) 70%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: rotate(-15deg);
}


/* =========================================
   GLOBAL FILTER DRAWER STYLES
   ========================================= */

.filter-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
        z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.filter-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.global-filter-drawer {
    position: fixed;
    z-index: 99999;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
}

.global-filter-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.global-filter-drawer .drawer-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.global-filter-drawer .close-drawer {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.global-filter-drawer .close-drawer:hover {
    color: var(--primary-color);
}

.global-filter-drawer .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.global-filter-drawer .drawer-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: #ffffff;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-main);
}

/* Custom Select */
.custom-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
        font-family: inherit;
    font-size: 0.95rem;
    color: #1e293b;
    cursor: pointer;
    appearance: none;
        background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.custom-select:hover {
    border-color: #cbd5e1;
    }
.custom-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,0,0, 0.05);
    }
[dir="ltr"] .custom-select {
    background-position: right 15px center;
}

/* Custom Checkbox */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-checkbox-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 35px; /* RTL */
    cursor: pointer;
    font-size: 0.95rem;
    user-select: none;
}
[dir="ltr"] .custom-checkbox-label {
    padding-right: 0;
    padding-left: 35px;
}

.custom-checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox-label .checkmark {
    position: absolute;
    top: 50%;
    right: 0; /* RTL */
    transform: translateY(-50%);
    height: 22px;
    width: 22px;
        border: 2px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
}
[dir="ltr"] .custom-checkbox-label .checkmark {
    right: auto;
    left: 0;
}

.custom-checkbox-label:hover input ~ .checkmark {
    border-color: var(--primary-color);
}

.custom-checkbox-label input:checked ~ .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.custom-checkbox-label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox-label input:checked ~ .checkmark:after {
    display: block;
}

.rating-filter .stars {
    color: #ffd700;
    margin: 0 8px;
    font-size: 0.9rem;
}
.rating-filter .rating-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Range Slider */
.samraa-price-slider {
    position: relative !important;
    width: 100% !important;
    height: 5px !important;
    background: #e0e0e0 !important;
    border-radius: 5px !important;
    margin-top: 25px !important;
    margin-bottom: 30px !important;
}

.samraa-price-slider .samraa-slider-track {
    position: absolute !important;
    height: 5px !important;
    top: 0 !important;
    bottom: 0 !important;
    background: var(--primary-color) !important;
    border-radius: 5px !important;
    z-index: 1 !important;
}

[dir="rtl"] .samraa-price-slider .samraa-slider-track {
    left: auto !important;
}

.samraa-price-slider .samraa-range-input {
    position: absolute !important;
    width: 100% !important;
    height: 5px !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: none !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.samraa-price-slider .samraa-range-input::-webkit-slider-thumb {
    height: 18px !important;
    width: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid var(--primary-color) !important;
    pointer-events: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    margin-top: -6px !important; /* Center thumb vertically */
}

.samraa-price-slider .samraa-range-input::-moz-range-thumb {
    height: 18px !important;
    width: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid var(--primary-color) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px);
}

.price-range-inputs .filter-input-small {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
}

/* Chips */

/* Chips */
.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-label {
    cursor: pointer;
    position: relative;
}

.chip-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.size-chip span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-main);
    background: #fff;
    transition: all 0.2s;
}

.size-chip:hover span {
    border-color: var(--primary-color);
}

.size-chip input:checked + span {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.color-chip {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    transition: all 0.2s;
}

.color-chip .color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px; /* RTL */
    border: 1px solid rgba(0,0,0,0.1);
}
[dir="ltr"] .color-chip .color-circle {
    margin-left: 0;
    margin-right: 8px;
}

.color-chip .color-name {
    font-size: 0.85rem;
    color: var(--text-main);
}

.color-chip:hover {
    border-color: var(--primary-color);
}

.color-chip input:checked ~ span {
    font-weight: 600;
}

.color-chip input:checked ~ .color-circle {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color);
}

/* Responsive Drawer / Bottom Sheet */
@media (min-width: 992px) {
    .global-filter-drawer {
        top: 0;
        right: -400px; /* Hidden state */
        width: 380px;
        height: 100vh;
    }
    
    [dir="ltr"] .global-filter-drawer {
        right: auto;
        left: -400px;
    }

    .global-filter-drawer.active {
        transform: translateX(-400px); /* Slide in RTL */
    }
    
    [dir="ltr"] .global-filter-drawer.active {
        transform: translateX(400px); /* Slide in LTR */
    }
    
    [dir="ltr"] .global-filter-drawer .filter-actions button {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .global-filter-drawer {
        top: 100%; bottom: auto; /* Start exactly below viewport */
        left: 0;
        width: 100%;
        height: 85vh; /* Bottom sheet height */
        border-radius: 20px 20px 0 0;
    }

    .global-filter-drawer.active {
        transform: translateY(-100%); /* Slide up */
    }
    
    .global-filter-drawer .drawer-header {
        padding: 15px 20px;
    }
    
    /* Optional drag handle for bottom sheet feel */
    .global-filter-drawer::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 4px;
        margin-bottom: 8px;
    }
}


\n
/* Force Button Gap in Drawer Footer */
.global-filter-drawer .drawer-footer button {
    margin-bottom: 15px !important;
}
.global-filter-drawer .drawer-footer button:last-child {
    margin-bottom: 0 !important;
}


/* Modern Select Component (Custom JS Dropdown) */
.modern-select-wrapper {
    position: relative;
    width: 100%;
    font-family: inherit;
    user-select: none;
}

.modern-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
        border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.modern-select-trigger:hover {
    border-color: #cbd5e1;
    }

.modern-select-trigger.open {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(61, 57, 146, 0.1);
        border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.modern-select-trigger i {
    font-size: 12px;
    color: #64748b;
    transition: transform 0.3s ease;
}

.modern-select-trigger.open i {
    transform: rotate(180deg);
}

.modern-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #f1f5f9;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 250px;
    overflow-y: auto;
}

.modern-select-options.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.modern-select-option {
    padding: 12px 15px;
    font-size: 0.95rem;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modern-select-option:hover {
        color: var(--primary-color);
}

.modern-select-option.selected {
    background-color: rgba(61, 57, 146, 0.05);
    color: var(--primary-color);
    font-weight: 600;
}

.modern-select-option .check-icon {
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modern-select-option.selected .check-icon {
    opacity: 1;
}

/* Hide scrollbars globally from filter drawer and all dropdowns, keeping scroll behavior intact */
.global-filter-drawer,
.global-filter-drawer .drawer-body,
.dropdown-options,
.custom-select-options,
.modern-select-options,
.search-history-dropdown,
.search-history-list,
.sidebar-suggestions-dropdown,
.search-suggestions-list,
.lang-options,
.select2-results__options,
.select2-dropdown {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE 10+ and Edge */
}

.global-filter-drawer::-webkit-scrollbar,
.global-filter-drawer .drawer-body::-webkit-scrollbar,
.dropdown-options::-webkit-scrollbar,
.custom-select-options::-webkit-scrollbar,
.modern-select-options::-webkit-scrollbar,
.search-history-dropdown::-webkit-scrollbar,
.search-history-list::-webkit-scrollbar,
.sidebar-suggestions-dropdown::-webkit-scrollbar,
.search-suggestions-list::-webkit-scrollbar,
.lang-options::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar,
.select2-dropdown::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Sleek, Modern Input Styles for Checkout Wizard */
.modern-text-input {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.modern-text-input:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.modern-text-input:focus {
    border-color: #5c24e5 !important;
    box-shadow: 0 0 0 4px rgba(92, 36, 229, 0.08) !important;
    outline: none !important;
    background: #fff !important;
}

/* Sleek, Modern Select Input Styling for Custom Select */
.checkout-card .modern-select-wrapper {
    width: 100% !important;
}

.checkout-card .modern-select-trigger {
    height: 52px !important;
    border: 1.5px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.checkout-card .modern-select-trigger:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.checkout-card .modern-select-trigger.open {
    border-color: #5c24e5 !important;
    box-shadow: 0 0 0 4px rgba(92, 36, 229, 0.08) !important;
}

.checkout-card .modern-select-trigger span {
    font-weight: 500 !important;
}

.checkout-card .modern-select-trigger i {
    font-size: 12px !important;
    color: #64748b !important;
}

/* Custom styling for modern select inside phone prefix wrapper */
.phone-prefix-container .modern-select-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.phone-prefix-container .modern-select-trigger {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 52px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
}

/* Align trigger text and chevron */
.phone-prefix-container .modern-select-trigger span {
    text-align: center !important;
    flex: 1 !important;
    margin-inline-end: 5px !important;
}

.phone-prefix-container .modern-select-trigger i {
    font-size: 11px !important;
    color: #64748b !important;
}

/* Modern Select Options position and width for prefix */
.phone-prefix-container .modern-select-options {
    min-width: 180px !important;
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .phone-prefix-container .modern-select-options {
    right: 0 !important;
    left: auto !important;
}

/* Custom modern styling for option items */
.modern-select-options {
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    z-index: 90 !important;
}

.modern-select-option {
    padding: 13px 20px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.modern-select-option:hover {
    background-color: #f7f6ff !important;
    color: #5c24e5 !important;
}

.modern-select-option.selected {
    background-color: #f1eeff !important;
    color: #5c24e5 !important;
    font-weight: 600 !important;
}

.modern-phone-wrapper {
    display: flex;
    gap: 0;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: #ffffff;
    width: 100%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.modern-phone-wrapper:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.modern-phone-wrapper:focus-within {
    border-color: #5c24e5 !important;
    box-shadow: 0 0 0 4px rgba(92, 36, 229, 0.08) !important;
}




/* ==========================================================================
   NEW HERO SECTION & FEATURES (Redesign)
   ========================================================================== */

.new-hero-section {
    padding: 20px 0 40px;
    background-color: transparent;
}

.new-hero-banner {
                border-radius: 12px;
    display: flex;
    align-items: stretch; /* Stretch to fill height */
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

.new-hero-image {
    flex: 0 0 45%; /* Take 45% of the width */
    position: relative;
    overflow: hidden;
}

.new-hero-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
}

.new-hero-content {
    flex: 1;
    color: #fff;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* Align to the right in RTL */
    text-align: right;
    z-index: 2;
}

html[dir="ltr"] .new-hero-content {
    align-items: flex-start;
    text-align: left;
}

/* Adjust order for LTR/RTL so image is always on left, text on right.
   In RTL, flex-direction row makes first element right.
   So in HTML, image is FIRST. That means image is on RIGHT by default in RTL.
   We want image on LEFT. 
   So in RTL, we use flex-direction: row-reverse.
   In LTR, flex-direction: row.
*/
.new-hero-banner {
    flex-direction: row-reverse;
}
html[dir="ltr"] .new-hero-banner {
    flex-direction: row;
}

.nh-subtitle {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    opacity: 0.9;
    color: #fff;
}

.nh-title {
    font-size: 130px;
    font-weight: 900;
    margin: -10px 0 0 0;
    line-height: 1;
    color: #fff;
}

.nh-desc {
    font-size: 20px;
    font-weight: 500;
    margin: 20px 0 35px 0;
    opacity: 0.85;
    line-height: 1.6;
    white-space: pre-line; /* Support 
 in textContent */
}

.nh-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    color: #000;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nh-btn:hover {
    background: #f1f1f1;
    transform: translateY(-2px);
}

html[dir="rtl"] .nh-btn i {
    transform: rotate(0deg);
}
html[dir="ltr"] .nh-btn i {
    transform: rotate(180deg);
}

.nh-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    /* transform removed for safer centering */
    display: flex;
    gap: 8px;
    z-index: 3;
}

.nh-dot {
    width: 6px;
    height: 6px;
        border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.nh-dot.active {
    background: #fff;
}

/* --- Features Row --- */
.new-features-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: nowrap; /* Force them to stay inline */
}

.nf-item {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    min-width: 0; /* Allow shrinking in flex container */
}

.nf-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: rgba(75, 56, 105, 0.05); 
    color: #4b3869; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.nf-text {
    flex-grow: 1;
    overflow: hidden;
}

.nf-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin: 0 0 5px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nf-text span {
    font-size: 12px;
    color: #777;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 991px) {
    .nh-title { font-size: 80px; }
    .new-hero-banner { flex-direction: column !important; }
    .new-hero-image { flex: 0 0 300px; width: 100%; }
    .new-hero-content { align-items: center !important; text-align: center !important; padding: 30px; }
    .new-features-row { flex-wrap: wrap; }
    .nf-item { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 768px) {
    .nh-title { font-size: 60px; }
    .nf-item { flex: 0 0 100%; }
    .new-hero-content {
        margin-bottom: 30px;
    }
    .new-hero-image {
        justify-content: center;
    }
    .new-hero-image img {
        max-height: 350px;
        transform: scale(1);
    }
}


/* --- New Hero Section Styles --- */
.new-hero-section {
    padding: 30px 0;
    background: #ffffff;
}

.new-hero-banner {
        /* Subtle leaf/floral SVG pattern overlay */
        border-radius: 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 0 40px;
    box-shadow: 0 10px 30px rgba(90, 75, 129, 0.2);
    min-height: calc(85vh - 140px); /* Reduced height based on user feedback */
    display: flex;
    align-items: center;
}

.floral-decal {
    position: absolute;
    width: 250px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
    pointer-events: none;
}
.decal-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-position: left center;
    }
.decal-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-position: right center;
    }

.new-hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
}

.new-hero-content {
    flex: 1;
    padding: 40px 0;
    position: relative;
    padding-right: 40px; /* RTL spacing */
    text-align: start; /* Fix alignment */
}

.hero-tag-small {
    font-size: 24px;
    font-weight: 500;
    display: block;
    margin-bottom: -10px;
}

.hero-title-large {
    font-size: 130px;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero-subtitle {
    font-size: 22px;
    line-height: 1.5;
    margin: 20px 0 30px;
    opacity: 0.9;
}

.new-hero-btn {
    background: #fff;
    color: #5a4b81;
    border: none;
    padding: 12px 35px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.new-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    color: #5a4b81;
}

.hero-slider-dots {
    display: flex;
    gap: 8px;
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    justify-content: center;
    /* transform removed for safer centering */
    z-index: 10;
}
.hero-slider-dots .dot {
    width: 10px;
    height: 10px;
        border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.hero-slider-dots .dot.active {
    background: #fff;
    transform: scale(1.2);
}

.new-hero-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.arch-frame {
    width: 380px;
    height: 70vh;
    min-height: 420px;
    max-height: 650px;
            border-bottom: none;
    border-radius: 190px 190px 0 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -40px; /* Offset to sit on bottom of container */
    overflow: hidden; /* This clips the image to the arch shape! */
}

.mannequin-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 10;
}

/* Features Bar */
.features-bar-container {
    display: flex;
    background: #fff;
    border-radius: 15px;
    padding: 20px 30px;
    margin-top: -30px; /* Overlap the banner slightly or just push down */
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 5;
    border: 1px solid #f0f0f0;
}

.feature-bar-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: center;
    border-left: 1px solid #eee;
}

.feature-bar-item:last-child {
    border-left: none;
}

.fb-icon {
    font-size: 28px;
    color: #3b2b5d; /* Darker purple */
}

.fb-text {
    display: flex;
    flex-direction: column;
}

.fb-text strong {
    font-size: 16px;
    color: #222;
    font-weight: 700;
}

.fb-text span {
    font-size: 13px;
    color: #666;
}

/* RTL Specific overrides just in case */
html[dir="rtl"] .new-hero-btn i {
    transform: rotate(180deg);
}

html[dir="rtl"] .feature-bar-item {
    border-left: none;
    border-right: 1px solid #eee;
}
html[dir="rtl"] .feature-bar-item:first-child {
    border-right: none;
}
html[dir="rtl"] .new-hero-content {
    padding-right: 0;
    padding-left: 40px; /* Switch padding */
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .new-hero-grid {
        flex-direction: column;
        text-align: center;
    }
    .new-hero-content {
        padding: 40px 0 0 0 !important;
    }
    .hero-slider-dots {
        justify-content: center;
        bottom: 25px; /* Less spacing on smaller screens */
    }
    .new-hero-image-wrapper {
        justify-content: center;
        margin-top: 50px;
        width: 100%;
    }
    .arch-frame {
        width: 280px;
        height: 380px;
        border-radius: 140px 140px 0 0;
    }
    .features-bar-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
        margin-top: 20px;
    }
    .feature-bar-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
        flex-direction: column !important;
        padding: 15px 5px !important;
    }
    .feature-bar-item i {
        margin: 0 0 10px 0 !important;
        font-size: 24px;
    }
}
@media (max-width: 576px) {
    .feature-bar-item {
        padding: 10px 5px !important;
    }
    .feature-bar-item i {
        font-size: 20px;
        margin: 0 0 5px 0 !important;
    }
    .hero-title-large {
        font-size: 70px;
    }
}

/* Force RTL/LTR alignments */
html[dir="rtl"] .new-hero-content, 
html[dir="rtl"] .new-hero-grid,
html[dir="rtl"] .new-hero-section {
    text-align: right !important;
    align-items: flex-start !important;
}
html[dir="ltr"] .new-hero-content {
    text-align: left !important;
}

/* FORCE BACKGROUND IMAGE */
.new-hero-banner {
    /* removed background */
    background-size: cover !important;
    background-color: transparent !important;
}


/* REVERT ARCH POSITION TO LEFT */
.new-hero-grid {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.new-hero-image-wrapper {
    position: relative;
    flex: 1;
    left: auto;
    transform: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    pointer-events: auto;
}

.arch-frame {
    width: 380px;
    height: 70vh;
    min-height: 420px;
    max-height: 650px;
    border-radius: 190px 190px 0 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -40px; 
    border: none !important;
    background: transparent !important;
}

.new-hero-content {
    flex: 1;
    position: relative;
    padding-right: 40px;
}

@media (max-width: 991px) {
    .new-hero-grid {
        flex-direction: column;
    }
    .new-hero-image-wrapper {
        justify-content: center;
        margin-top: 50px;
        width: 100%;
    }
    .new-hero-content {
        padding-right: 0;
    }
}

/* LUXURY CSS ARCH OVERRIDE */
.arch-frame {
    background: rgba(255, 255, 255, 0.08) !important; /* Lighter shade */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255,255,255,0.05) !important;
}

/* FIX DOTS VISIBILITY */
.hero-slider-dots .dot {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
.hero-slider-dots .dot.active {
    background: #fff !important;
    border-color: #fff !important;
}

/* FIX SEARCH BAR DESKTOP VISIBILITY */
.central-search-bar form {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.central-search-bar input {
    color: #ffffff !important;
}
.central-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}
.central-search-bar button.search-submit-btn,
.central-search-bar button.search-submit-btn i {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.central-search-bar button.search-filter-btn {
    width: auto !important;
    padding: 0 15px !important;
    background-color: rgba(35, 33, 79, 0.6) !important; /* #23214f with transparency */
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}



/* FORCE TEXT WHITE */
.central-search-bar input[type="text"],
.central-search-bar input {
    color: #ffffff !important;
}
.central-search-bar input[type="text"]::placeholder,
.central-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* LUXURY GOLD OVERRIDES */
.hero-title-large {
    color: #FDE08B !important; /* Gold color for main title */
    text-shadow: 0 0 20px rgba(253, 224, 139, 0.4), 0 2px 5px rgba(0,0,0,0.5);
}

.new-hero-btn {
    background: linear-gradient(90deg, #FDE08B, #D49B35) !important;
    color: #281D4C !important;
    border: none !important;
    font-weight: 700 !important;
}

.new-hero-btn i {
    color: #281D4C !important;
}

.arch-frame {
    /* Update border to gold */
    border: 1px solid rgba(229, 205, 148, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 30px rgba(229, 205, 148, 0.1) !important;
}

/* Gold active dot */
.hero-slider-dots .dot.active {
    background: #FDE08B !important;
    border-color: #FDE08B !important;
}

/* EXPLICIT GOLD OVERRIDE FOR CORRECT CLASSES */
.hero-title-large {
    color: #FDE08B !important;
    text-shadow: 0 0 20px rgba(253, 224, 139, 0.4), 0 2px 5px rgba(0,0,0,0.5);
}
.new-hero-btn {
    background: linear-gradient(90deg, #FDE08B, #D49B35) !important;
    color: #281D4C !important;
    border: none !important;
    font-weight: 700 !important;
}
.new-hero-btn i {
    color: #281D4C !important;
}
.new-hero-btn span {
    color: #281D4C !important;
}

/* MOVE ARCH TO RIGHT AND TEXT TO LEFT */
.new-hero-grid {
    flex-direction: row-reverse !important;
}

/* Fix text alignment when on the left */
html[dir="rtl"] .new-hero-content {
    text-align: right !important; /* Text still aligned to the right edge of its container, but container is on the left */
    padding-left: 40px;
    padding-right: 0;
}

.new-hero-image-wrapper {
    justify-content: flex-end !important; /* Align image to the right edge (flex-start in RTL row-reverse is right) */
}

@media (max-width: 991px) {
    .new-hero-grid {
        flex-direction: column !important;
    }
    html[dir="rtl"] .new-hero-content {
        text-align: center !important;
        padding-left: 0;
    }
}

/* FINAL ELEGANCE OVERRIDE */
.hero-title-large {
    color: #e2c695 !important; /* Muted elegant beige-gold */
    text-shadow: none !important; /* Remove cheap glow */
    font-weight: 600 !important;
    letter-spacing: -1px;
}

.new-hero-btn {
    background: #e2c695 !important;
    color: #281D4C !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: none !important;
}

.hero-slider-dots .dot.active {
    background: #e2c695 !important;
    border-color: #e2c695 !important;
    transform: none !important;
}

/* Fix the arch frame and mannequin */
.arch-frame {
    background: transparent !important;
    border: 1px solid rgba(226, 198, 149, 0.4) !important; /* Thin glowing line */
    box-shadow: 0 0 15px rgba(226, 198, 149, 0.1), inset 0 0 15px rgba(226, 198, 149, 0.1) !important;
    border-radius: 190px 190px 0 0 !important;
    /* We don't clip the image anymore if we want the line to be visible outside it, 
       but if we clip it, the border is on the edge. */
    overflow: hidden;
}

.mannequin-img {
    /* The mannequin image has a solid light background. 
       Multiply will make the light background disappear into the dark purple, leaving the dark abaya visible. */
    mix-blend-mode: multiply;
    filter: contrast(1.1) brightness(1.05);
}

/* MASTERPIECE LAYOUT FIXES */
.new-hero-banner {
    background-position: right center !important;
    min-height: 70vh !important; /* Make sure it's tall enough to show the beautiful art */
}

/* Hide the old floating mannequin because it's now beautifully baked into the 4K background */
.new-hero-image-wrapper {
    display: none !important;
}

/* Ensure the text is on the left and has enough space */
.new-hero-grid {
    justify-content: flex-end !important;
}

.new-hero-content {
    flex: 0 0 50% !important;
    padding-left: 5% !important;
}
@media (max-width: 991px) {
    .new-hero-content {
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        background: rgba(47, 41, 107, 0.7); /* Optional: add slight dark overlay on mobile so text is readable if it covers the model */
        border-radius: 20px;
        padding: 30px !important;
        margin-top: 50px;
    }
}

/* CENTER TEXT ALIGNMENT FOR MASTERPIECE */
html[dir="rtl"] .new-hero-content,
.new-hero-content {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    flex-direction: column;
}

/* LTR (ENGLISH) LAYOUT FIX FOR BAKED BACKGROUND */
html[dir="ltr"] .new-hero-banner {
    transform: scaleX(-1); /* Flip the background so the woman is on the left */
}

html[dir="ltr"] .new-hero-grid {
    transform: scaleX(-1); /* Un-flip the content so text is readable */
    justify-content: flex-end !important; /* Push text to the right side */
}

html[dir="ltr"] .new-hero-content {
    padding-left: 0 !important;
    padding-right: 5% !important; /* Padding on the right */
}

@media (max-width: 991px) {
    html[dir="ltr"] .new-hero-content {
        padding-right: 30px !important;
        padding-left: 30px !important;
    }
}

/* ABSOLUTE POSITIONING FIX FOR CONTENT ALIGNMENT */
.new-hero-grid {
    display: flex !important;
    width: 100% !important;
    /* flex-end means LEFT in RTL, and RIGHT in LTR */
    justify-content: flex-end !important; 
}

.new-hero-content {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    /* Remove padding that might mess up centering inside the 50% */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html[dir="ltr"] .new-hero-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Let's make sure the text itself is perfectly centered in its 50% box */
html[dir="rtl"] .new-hero-content,
html[dir="ltr"] .new-hero-content,
.new-hero-content {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
}

/* BULLETPROOF POSITIONING (NO FLEX GUESSWORK) */

.new-hero-grid {
    display: block !important; /* Disable flex on grid so margins work predictably */
    width: 100% !important;
    position: relative !important;
}

.new-hero-content {
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 70vh !important; /* Center text vertically in the 70vh banner */
}

/* ARABIC (RTL): FORCE TEXT TO THE LEFT */
html[dir="rtl"] .new-hero-content {
    margin-right: 55% !important; /* Push text block away from the right half */
    margin-left: 0 !important;
}

/* ENGLISH (LTR): FORCE TEXT TO THE RIGHT */
html[dir="ltr"] .new-hero-content {
    margin-left: 55% !important; /* Push text block away from the left half */
    margin-right: 0 !important;
}

@media (max-width: 991px) {
    .new-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* HALF BACKGROUND BEHIND HERO SECTION */
.new-hero-section {
    position: relative;
    z-index: 1;
}

.new-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #2e2e70;
    z-index: -1;
}

/* GOLD HEADER STYLES */
.header-main {
    border-bottom: 1px solid rgba(226, 198, 149, 0.4) !important;
}

#searchForm,
.central-search-bar {
    border-color: #e2c695 !important;
}

.logo img, .footer-logo img {
    /* Filter to turn the white/black logo into elegant gold (#e2c695) */
    filter: brightness(0) saturate(100%) invert(83%) sepia(26%) saturate(636%) hue-rotate(344deg) brightness(95%) contrast(89%) !important;
}

/* REMOVE SEARCH FOCUS OUTLINE */
#searchInput:focus,
.central-search-bar input:focus,
.central-search-bar:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: #e2c695 !important; /* Keep the gold border, don't change it on focus */
}

/* DYNAMIC IMAGE WRAPPER */
.new-hero-image-wrapper {
    display: flex !important;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
}

/* LTR FIX FOR DYNAMIC IMAGE */
html[dir="ltr"] .new-hero-image-wrapper {
    right: auto;
    left: 0; /* Move image wrapper to the left side when English */
}

.arch-frame {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 30px;
}

.mannequin-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    /* This makes white backgrounds disappear into the dark purple */
    mix-blend-mode: multiply;
    /* Optional shadow to pop it out */
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

@media (max-width: 991px) {
    .new-hero-image-wrapper {
        position: relative;
        width: 100%;
        height: 300px;
    }
}

/* THE REAL ARCH FRAME */
.arch-frame {
    width: 380px !important;
    height: 520px !important;
    border-radius: 200px 200px 0 0 !important;
    overflow: hidden !important; /* THIS IS THE MAGIC: It cuts the image to the arch shape! */
    border: 4px solid #FDE08B !important; /* Shiny gold border */
    box-shadow: 0 0 30px rgba(253, 224, 139, 0.5), inset 0 0 20px rgba(253, 224, 139, 0.3) !important; /* Outer and inner glow */
    background-color: rgba(40, 29, 76, 0.8) !important; /* Dark fallback background */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    padding-top: 0 !important;
    margin: 0 auto !important;
}

.mannequin-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Fill the entire arch shape perfectly */
    mix-blend-mode: normal !important; /* REMOVE multiply so dark images look perfect */
    filter: none !important; /* Remove drop-shadow to keep the frame clean */
    border-radius: 0 !important; /* Let the parent .arch-frame do the rounding */
}

/* Make sure the wrapper holds it properly */
.new-hero-image-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* THE PERFECT PROGRAMMED ARCH */
.new-hero-image-wrapper {
    display: flex !important;
    align-items: flex-end !important; /* Align to bottom so the arch sits cleanly */
    justify-content: center !important;
    width: 50% !important;
    height: 100% !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
}

html[dir="ltr"] .new-hero-image-wrapper {
    right: auto !important;
    left: 0 !important;
}

.arch-frame {
    width: 420px !important;
    height: 600px !important;
    border-radius: 300px 300px 0 0 !important; /* Perfect smooth arch */
    overflow: hidden !important; /* Force image into arch shape */
    border: 2px solid #F9D976 !important; /* Thin elegant gold line */
    border-bottom: none !important; /* Open at the bottom like a real arch */
    /* Beautiful glowing effect */
    box-shadow: 0 0 25px rgba(249, 217, 118, 0.4), inset 0 0 15px rgba(249, 217, 118, 0.2) !important;
    background-color: transparent !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

.mannequin-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Fill the arch completely without stretching */
    mix-blend-mode: normal !important; /* Keep original image colors */
    filter: none !important;
    border-radius: 0 !important;
    /* Optional: Slight zoom out if images are too tight */
    transform: scale(1.01); 
}

@media (max-width: 991px) {
    .arch-frame {
        width: 300px !important;
        height: 400px !important;
    }
    .new-hero-image-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 20px !important;
    }
}

/* MASKING THE ORIGINAL MANNEQUIN WITH CSS ARCH */
.new-hero-banner {
    /* background image removed as requested */
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}

.new-hero-image-wrapper {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    width: 45% !important;
    height: 100% !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 5% !important; /* Position it exactly over the old mannequin */
    top: auto !important;
}

html[dir="ltr"] .new-hero-image-wrapper {
    right: auto !important;
    left: 5% !important;
}

.arch-frame {
    width: 380px !important;
    height: 550px !important;
    border-radius: 300px 300px 0 0 !important;
    overflow: hidden !important;
    border: 3px solid #F9D976 !important;
    border-bottom: none !important;
    box-shadow: 0 0 20px rgba(249, 217, 118, 0.5) !important;
    /* THIS IS CRITICAL: Solid dark purple background to HIDE the baked mannequin underneath! */
    background-color: #2b1b46 !important; 
    position: relative !important;
    margin-bottom: 0 !important;
    /* Move it slightly to perfectly cover the old mannequin */
    transform: translateY(0); 
}

.mannequin-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    border-radius: 0 !important;
}

@media (max-width: 991px) {
    .new-hero-image-wrapper {
        position: relative !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
        justify-content: center !important;
    }
    .arch-frame {
        width: 300px !important;
        height: 400px !important;
    }
}

/* THE MASTERPIECE BACKGROUND */
.new-hero-banner {
    background-image: url('../images/hero_bg_masterpiece.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* UPDATED ARCH FRAME WITH GLASSMORPHISM AND BLEND MODE */
.arch-frame {
    width: 420px !important;
    height: 600px !important;
    border-radius: 300px 300px 0 0 !important;
    overflow: hidden !important; 
    border: 1px solid rgba(249, 217, 118, 0.4) !important; /* Very thin transparent gold */
    border-bottom: none !important;
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(249, 217, 118, 0.1) !important;
    position: relative !important;
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.mannequin-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* THIS IS THE MAGIC THAT REMOVES THE SOLID WHITE BACKGROUND FROM PRODUCT IMAGES! */
    mix-blend-mode: multiply !important; 
    filter: contrast(1.1) brightness(1.05) !important; /* Slight enhancement to pop against purple */
    border-radius: 0 !important;
}

/* RESTORING ORIGINAL MASTERPIECE BACKGROUND */
.new-hero-banner {
    background-image: url('../images/hero_abaya.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* FIXING THE ARCH SO IT FITS THE ORIGINAL MODEL IF NEEDED, OR HIDING IT */
/* We will just hide the dynamic mannequin for now to let the original masterpiece show completely */
.arch-frame {
    display: none !important; 
}

/* --- EMERGENCY REVERT: RESTORE EXACT ORIGINAL IMAGE --- */
.new-hero-banner {
    background: url('../images/hero_abaya.png') no-repeat center center !important;
    background-size: cover !important;
}

/* Hide all the dynamic slider elements we added so they don't ruin the original image */
.new-hero-image-wrapper, .arch-frame, .mannequin-img, .decal-left, .decal-right, .floral-decal {
    display: none !important;
}



/* =========================================================================
   EXACT LUXURY HERO BANNER - AS ANALYZED BY THE AI
   ========================================================================= */
.new-hero-banner {
    position: relative;
    padding: 60px 40px;
    min-height: 600px;
    /* Deep Plum #1E1233 to Neon Purple Glow #4E2A84 */
    background: radial-gradient(circle at center, #4E2A84 0%, #1E1233 70%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: space-between; /* Text right, Image left */
    align-items: center;
    direction: rtl; /* Enforce RTL layout */
}

/* Background Magic Glows to simulate the stars/sparkles */
.magic-glow {
    position: absolute;
    border-radius: 50%;
    background: #F3CC8A;
    box-shadow: 0 0 15px 5px rgba(243, 204, 138, 0.4);
    opacity: 0.6;
}
.glow-1 { width: 4px; height: 4px; top: 30%; left: 45%; }
.glow-2 { width: 3px; height: 3px; bottom: 20%; left: 55%; }
.glow-3 { width: 5px; height: 5px; top: 50%; right: 40%; }

/* --- TEXT CONTENT (RIGHT SIDE) --- */
.new-hero-content {
    flex: 1;
    max-width: 50%;
    padding-right: 50px;
    z-index: 10;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.nh-subtitle {
    color: #f1f1f1;
    font-size: 1.2rem;
    margin-bottom: 5px;
    font-family: 'Tajawal', sans-serif;
}

.nh-title {
    color: #F3CC8A; /* Exact Gold */
    font-size: 5.5rem;
    font-weight: 900;
    margin: 0 0 10px 0;
    text-shadow: 0 0 20px rgba(243, 204, 138, 0.3); /* Luminous glow */
    line-height: 1.1;
    font-family: 'Tajawal', sans-serif;
}

.nh-divider-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}
.nh-divider-line::before, .nh-divider-line::after {
    content: '';
    height: 1px;
    background-color: #F3CC8A;
    flex-grow: 0;
    width: 40px; /* Short lines like the image */
}
.nh-divider-line span {
    color: #F3CC8A;
    font-size: 1.4rem;
    font-weight: 500;
}

.nh-desc {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.nh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #F3CC8A; /* Exact Gold */
    color: #1E1233; /* Dark Plum text */
    padding: 12px 35px;
    border-radius: 50px; /* Pill-shaped (rounded-full) */
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}
.nh-btn:hover {
    background-color: #fce1a9;
    box-shadow: 0 0 20px rgba(243, 204, 138, 0.5);
    color: #1E1233;
}

/* --- GLASS ARCH (LEFT SIDE) --- */
.new-hero-image-wrapper {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    z-index: 10;
    height: 100%; /* Fill banner height */
}

.arch-frame {
    width: 420px;
    height: 550px;
    border-radius: 300px 300px 0 0; /* Arch */
    overflow: hidden; /* Cut image inside curve */
    
    /* GLASSMORPHISM */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(243, 204, 138, 0.5); /* Thin glowing gold edge */
    border-bottom: none;
    box-shadow: inset 0 0 25px rgba(243, 204, 138, 0.2), 0 0 30px rgba(0,0,0,0.3);
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Move it down to sit flush with the bottom */
    margin-top: auto; 
    margin-bottom: -60px; /* Negative margin to hit the bottom of the banner (padding 60) */
}

.mannequin-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* IMPORTANT: Remove white background of product images to make them transparent over the glass */
    mix-blend-mode: multiply; 
    filter: contrast(1.1) brightness(1.05);
}

/* --- SLIDER DOTS --- */
.nh-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}
.nh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3); /* Faded gray/white */
    transition: all 0.3s ease;
}
.nh-dot.active {
    background-color: #F3CC8A; /* Exact Gold */
}

/* Hide old stuff just in case */
.floral-decal { display: none !important; }


/* =========================================================================
   APPLYING THE REAL BACKGROUND FROM DESIGNER (bg.png)
   ========================================================================= */
.new-hero-banner {
    /* REMOVE the CSS radial gradient */
    background: url('../images/bg.png') no-repeat center center !important;
    background-size: cover !important;
}

/* HIDE the fake CSS magic glows because the real image has them! */
.magic-glow {
    display: none !important;
}

/* REDUCE HEIGHT OF ARCH FRAME AS REQUESTED */
.arch-frame {
    height: 500px !important; /* Reduced from 550px */
}

/* SET NEW HERO SECTION HEIGHT TO 70vh */
.new-hero-section {
    height: 70vh !important;
}

.new-hero-banner {
    height: 100% !important; /* Take full height of the section */
    min-height: unset !important;
}

.arch-frame {
    height: 85% !important; /* Make the arch relative to the banner height */
}

/* --- FIXING THE 70vh ISSUE TO SHOW FEATURES BAR --- */
.new-hero-section {
    height: auto !important; /* Let it expand to show the features bar */
    min-height: unset !important;
}

.new-hero-banner {
    height: 70vh !important; /* Put the 70vh directly on the banner */
    min-height: unset !important;
}

/* Ensure the features bar sits nicely below the banner */
.features-bar-container {
    display: flex !important;
    position: relative !important;
    z-index: 20 !important;
    margin-top: -30px !important; /* Pull it slightly over the bottom of the banner if needed, or 0 */
}

/* --- FIX ALIGNMENT OF TEXT AND DIVIDER LINE --- */
.new-hero-content {
    align-items: center !important; /* Center the text block horizontally */
    text-align: center !important;
}

.nh-divider-line {
    width: auto !important; /* Don't stretch to 100% */
    justify-content: center !important; /* Center the lines and text */
}

/* Ensure the title doesn't have weird margins pushing it */
.nh-title {
    text-align: center !important;
    width: 100% !important;
}

.nh-desc {
    text-align: center !important;
    width: 100% !important;
}

/* --- MOBILE RESPONSIVE FIXES FOR HERO SECTION --- */
@media (max-width: 991px) {
    .new-hero-banner {
        flex-direction: column !important; /* Stack items vertically */
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 30px 15px 0 !important; /* Remove bottom padding to let arch sit flush */
        height: auto !important; /* Don't force 70vh on mobile to avoid cutoffs */
        min-height: 80vh !important;
        gap: 30px;
    }

    .new-hero-content {
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-top: 20px;
    }

    .nh-title {
        font-size: 3.5rem !important; /* Smaller title */
    }

    .nh-subtitle {
        font-size: 1rem !important;
    }

    .nh-desc {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }

    .nh-btn {
        padding: 10px 25px !important;
        font-size: 1rem !important;
    }

    .new-hero-image-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: flex-end !important;
        flex: none !important;
        height: 350px !important; /* Fixed height for mobile arch container */
        margin-top: auto !important; /* Push to bottom */
    }

    .arch-frame {
        width: 280px !important; /* Smaller arch width */
        height: 100% !important; /* Fill container */
        margin-bottom: 0 !important; /* Remove negative margin on mobile */
    }

    .nh-slider-dots {
        bottom: 10px !important; /* Adjust dots position */
    }
}

@media (max-width: 480px) {
    .nh-title {
        font-size: 2.8rem !important; /* Even smaller for tiny phones */
    }
    .arch-frame {
        width: 240px !important;
    }
}

/* === ARCH INNER IMAGE (bg-2.png positioned inside the golden arch of bg.png) === */
.new-hero-banner {
    position: relative !important;
}

.arch-inner-img {
    position: absolute;
    /* The arch in bg.png is roughly: centered horizontally in the right half, vertically centered */
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 28%;         /* Adjust width to fit inside the arch */
    height: 80%;        /* Fill most of the arch height */
    object-fit: cover;
    object-position: top center;
    border-radius: 300px 300px 0 0;   /* Match the arch curve */
    z-index: 5;
}

@media (max-width: 991px) {
    .arch-inner-img {
        display: none !important; /* Hide on mobile since arch is not visible */
    }
}

/* ====================================================
   CSS GOLDEN ARCH FRAME - PROPER IMPLEMENTATION
   ==================================================== */

/* Wrapper: positions the arch on the right side of the banner */
.css-arch-wrapper {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The arch frame itself: golden border + overflow hidden to clip the image */
.css-arch-frame {
    width: 260px;
    height: 360px;
    /* Arch shape: curved top, flat bottom */
    border-radius: 130px 130px 0 0;
    overflow: hidden;
    /* Thick shiny golden border */
    border: 4px solid transparent;
    background-image:
        linear-gradient(#1a0a3b, #1a0a3b),      /* inner fill (transparent-ish) */
        linear-gradient(160deg, #ffd700, #b8860b, #ffd700, #ffec80, #b8860b);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /* Glowing golden shadow */
    box-shadow:
        0 0 18px 4px rgba(255, 215, 0, 0.45),
        0 0 40px 8px rgba(255, 215, 0, 0.18),
        inset 0 0 20px rgba(0,0,0,0.3);
    position: relative;
}

/* The image fills the arch completely */
.css-arch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Remove old arch-inner-img rules */
.arch-inner-img {
    display: none !important;
}

/* Mobile: hide arch on small screens */
@media (max-width: 991px) {
    .css-arch-wrapper {
        position: static !important;
        transform: none !important;
        margin-top: 20px;
        width: 100%;
        justify-content: center;
    }
    .css-arch-frame {
        width: 200px;
        height: 280px;
        border-radius: 100px 100px 0 0;
    }
}

/* ====================================================
   CSS GOLDEN ARCH FRAME - FIXED (no background, correct position)
   ==================================================== */

.css-arch-wrapper {
    position: absolute !important;
    /* Match the arch in bg.png: it sits in the center-right area */
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
}

.css-arch-frame {
    width: 230px !important;
    height: 340px !important;
    /* Arch shape */
    border-radius: 115px 115px 0 0 !important;
    overflow: hidden !important;
    /* NO background - fully transparent */
    background: transparent !important;
    background-image: none !important;
    /* Thick shiny golden border only */
    border: 3px solid #d4a017 !important;
    box-shadow:
        0 0 12px 3px rgba(212, 160, 23, 0.6),
        0 0 30px 6px rgba(255, 215, 0, 0.2),
        inset 0 0 12px rgba(212, 160, 23, 0.15) !important;
}

/* Image fills the arch */
.css-arch-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

@media (max-width: 991px) {
    .css-arch-wrapper {
        position: static !important;
        transform: none !important;
        margin: 20px auto 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .css-arch-frame {
        width: 180px !important;
        height: 260px !important;
        border-radius: 90px 90px 0 0 !important;
    }
}

/* === FINAL ARCH POSITION FIX: Move to match bg.png golden arch === */
.css-arch-wrapper {
    position: absolute !important;
    left: auto !important;
    right: 14% !important;          /* right side of the banner */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

.css-arch-frame {
    width: 230px !important;
    height: 340px !important;
    border-radius: 115px 115px 0 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    background-image: none !important;
    border: 3px solid #d4a017 !important;
    box-shadow:
        0 0 14px 4px rgba(212, 160, 23, 0.65),
        0 0 35px 8px rgba(255, 215, 0, 0.18),
        inset 0 0 10px rgba(212, 160, 23, 0.12) !important;
}

.css-arch-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

@media (max-width: 991px) {
    .css-arch-wrapper {
        position: static !important;
        transform: none !important;
        margin: 20px auto 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .css-arch-frame {
        width: 180px !important;
        height: 260px !important;
        border-radius: 90px 90px 0 0 !important;
    }
}

/* ====================================================
   LANGUAGE-BASED ARCH POSITION
   ==================================================== */

/* Arabic (RTL) - default */
html[lang="ar"] .css-arch-wrapper {
    right: 29% !important;
    left: auto !important;
}

/* English (LTR) - arch on the left side */
html[lang="en"] .css-arch-wrapper {
    right: auto !important;
    left: 30% !important;
}

/* English: text moves to the right side (LTR layout) */
html[lang="en"] .new-hero-content {
    margin-right: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    padding-left: 40px !important;
    padding-right: 0 !important;
}

html[lang="en"] .nh-divider-line {
    justify-content: flex-start !important;
}

/* ====================================================
   ENGLISH (LTR) HERO FIXES - STOP THE MIRROR!
   ==================================================== */
html[lang="en"] .new-hero-banner {
    direction: ltr !important;
}

html[lang="en"] .new-hero-content {
    direction: ltr !important;
    text-align: left !important;
    align-items: flex-start !important;
    margin-right: auto !important;
    margin-left: 5% !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
}

html[lang="en"] .nh-divider-line {
    direction: ltr !important;
    justify-content: flex-start !important;
}

html[lang="en"] .nh-btn {
    direction: ltr !important;
}

/* Flip the arrow to point right in English */
html[lang="en"] .nh-btn i.fa-arrow-left {
    transform: scaleX(-1) !important;
}

/* Move arch to the right in English */
html[lang="en"] .css-arch-wrapper {
    right: 30% !important;
    left: auto !important;
}

/* ====================================================
   KILL ALL MIRROR TRANSFORMS ON HERO - FINAL FIX
   ==================================================== */

/* Arabic: normal RTL, no transforms on text */
html[lang="ar"] .new-hero-banner,
html[dir="rtl"] .new-hero-banner {
    transform: none !important;
}
html[lang="ar"] .new-hero-content,
html[dir="rtl"] .new-hero-content {
    transform: none !important;
    direction: rtl !important;
    text-align: right !important;
}

/* English: LTR, absolutely NO scaleX or mirrors */
html[lang="en"] .new-hero-banner,
html[dir="ltr"] .new-hero-banner {
    transform: none !important;
}
html[lang="en"] .new-hero-content,
html[dir="ltr"] .new-hero-content,
html[lang="en"] .new-hero-content *,
html[dir="ltr"] .new-hero-content * {
    transform: none !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: normal !important;
}

html[lang="en"] .nh-divider-line,
html[dir="ltr"] .nh-divider-line {
    transform: none !important;
    direction: ltr !important;
    justify-content: flex-start !important;
}

/* Only flip the arrow icon, nothing else */
html[lang="en"] .nh-btn i,
html[dir="ltr"] .nh-btn i {
    transform: scaleX(-1) !important;
}

html[lang="en"] .new-hero-content {
    align-items: flex-start !important;
    margin-left: 5% !important;
    margin-right: auto !important;
}

/* Arch position for English */
html[lang="en"] .css-arch-wrapper {
    right: 30% !important;
    left: auto !important;
}

/* Smaller title in English */
html[lang="en"] .nh-title {
    font-size: 3.5rem !important;
}

/* Fix features-bar border direction for English (LTR) */
html[lang="en"] .feature-bar-item {
    border-left: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html[lang="en"] .feature-bar-item:last-child {
    border-right: none !important;
}

/* Fix features-bar border direction & color for English (LTR) */
html[lang="en"] .feature-bar-item {
    border-left: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important; /* Make it visible */
}

/* Fallback if the container is light (use #eee) */
html[lang="en"] .features-bar-container .feature-bar-item {
    border-left: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[lang="en"] .feature-bar-item:last-child {
    border-right: none !important;
}

/* Fix features-bar border color to #eee for English so it is visible on white background */
html[lang="en"] .feature-bar-item {
    border-left: none !important;
    border-right: 1px solid #eee !important;
}

html[lang="en"] .features-bar-container .feature-bar-item {
    border-right: 1px solid #eee !important;
}

html[lang="en"] .feature-bar-item:last-child {
    border-right: none !important;
}

/* Remove border-bottom from header as requested */
.header-main {
    border-bottom: none !important;
}

/* Fix header white background */
header {
    background: #23214f !important;
}

/* Badges, Buttons, and Ratings Customization as requested */
.offer-badge, 
.promo-mini-badge, 
.branch-badge, 
.cart-btn, 
.product-rating, 
.special-badge, 
.view-more-btn {
    background: #3d3992 !important;
    background-color: #3d3992 !important;
    color: #e2c695 !important;
    border-color: #e2c695 !important;
}

/* Ensure any icons, spans, or text inside them inherit the gold color */
.offer-badge *, 
.promo-mini-badge *, 
.branch-badge *, 
.cart-btn *, 
.product-rating *, 
.special-badge *, 
.view-more-btn * {
    color: #e2c695 !important;
}

/* Ensure hover states don't break the background or text color if not intended, 
   but usually hover effects might slightly darken or lighten it. 
   We will strictly enforce the background on hover as well just in case */
.offer-badge:hover, 
.promo-mini-badge:hover, 
.branch-badge:hover, 
.cart-btn:hover, 
.product-rating:hover, 
.special-badge:hover, 
.view-more-btn:hover {
    background: #3d3992 !important;
    background-color: #3d3992 !important;
    color: #e2c695 !important;
    border-color: #e2c695 !important;
    box-shadow: 0 4px 12px rgba(61, 57, 146, 0.4) !important;
}

/* Remove shadows from all badges and buttons as requested */
.offer-badge, 
.promo-mini-badge, 
.branch-badge, 
.cart-btn, 
.product-rating, 
.special-badge, 
.view-more-btn {
    box-shadow: none !important;
    text-shadow: none !important;
}

.offer-badge:hover, 
.promo-mini-badge:hover, 
.branch-badge:hover, 
.cart-btn:hover, 
.product-rating:hover, 
.special-badge:hover, 
.view-more-btn:hover {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Also remove from before/after pseudo elements just in case */
.offer-badge::before, .offer-badge::after,
.promo-mini-badge::before, .promo-mini-badge::after,
.branch-badge::before, .branch-badge::after,
.cart-btn::before, .cart-btn::after,
.product-rating::before, .product-rating::after,
.special-badge::before, .special-badge::after,
.view-more-btn::before, .view-more-btn::after {
    box-shadow: none !important;
}

/* Fix Marquee Animations Valid */
@keyframes marquee-left-fixed {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-right-fixed {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

html[dir="rtl"] .marquee-track {
    animation-name: marquee-left-fixed !important; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear;
}

html[dir="rtl"] .marquee-track.reverse {
    animation-name: marquee-right-fixed !important; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear;
}

html[lang="en"] .marquee-track, html[dir="ltr"] .marquee-track {
    animation-name: marquee-right-fixed !important; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; /* In English, reading is left-to-right, so scrolling right-to-left means we need the opposite translation? Wait. 
    Actually if we want it to scroll right-to-left in LTR, we need translateX(-50%). So marquee-left. */
    animation-name: marquee-left-fixed !important; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear;
}
html[lang="en"] .marquee-track.reverse, html[dir="ltr"] .marquee-track.reverse {
    animation-name: marquee-right-fixed !important; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear;
}

/* Disable hover effects for trend tags since they are now static text */
.trend-tag {
    cursor: default !important;
}
.trend-tag:hover, 


/* Remove all shadows from new-hero-section as requested */
.new-hero-section,
.new-hero-section *,
.new-hero-banner,
.new-hero-banner *,
.new-hero-content,
.new-hero-content *,
.nh-btn-glow {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important; /* In case there is a drop-shadow filter */
}

/* Ensure hover states also have no shadow */
.new-hero-section *:hover,
.new-hero-banner *:hover,
.nh-btn:hover {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Fix spacing for new-hero-section across all pages to match index.php */
.shop-page.section {
    padding-top: 0 !important; 
}
.about-page-premium {
    margin-top: 0 !important;
}
.lookbook-page {
    padding-top: 0 !important;
}
.lookbook-page .new-hero-section {
    padding: 30px 0 0 0 !important;
}

/* Heartbeat Zigzag for Headers */
.slider-header h2, .offers-header h2,
.slider-header h4, .slider-header a h4, .slider-header h4 a, .trends-header h3,
.promo-grid-section .section-label,
.suggested-products-section .slider-header h2,
.hero-categories-mini .header-text span,
.highlights-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.slider-header h2::after, .offers-header h2::after,
.slider-header h4::after, .slider-header a h4::after, .slider-header h4 a::after, .trends-header h3::after,
.promo-grid-section .section-label::after,
.suggested-products-section .slider-header h2::after,
.hero-categories-mini .header-text span::after,
.highlights-header h3::after {
    content: '';
    display: inline-block;
    width: 65px;
    height: 24px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 30"><path d="M0,15 L15,15 L22,5 L32,25 L39,15 L64,15" fill="none" stroke="%23d4af37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M72,13 A4,4 0 0,0 64,13 C64,20 72,26 72,26 C72,26 80,20 80,13 A4,4 0 0,0 72,13 Z" fill="%23d4af37"/></svg>') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.7));
    animation: heartbeatPulse 1.5s infinite ease-in-out;
}

@keyframes heartbeatPulse {
    0% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)); transform: scale(0.95); opacity: 0.8; }
    50% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 1)); transform: scale(1.05); opacity: 1; }
    100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)); transform: scale(0.95); opacity: 0.8; }
}

html[dir="rtl"] .slider-header h2::after, html[dir="rtl"] .offers-header h2::after,
html[dir="rtl"] .slider-header h4::after, html[dir="rtl"] .slider-header a h4::after, html[dir="rtl"] .slider-header h4 a::after, html[dir="rtl"] .trends-header h3::after,
html[dir="rtl"] .promo-grid-section .section-label::after,
html[dir="rtl"] .suggested-products-section .slider-header h2::after,
html[dir="rtl"] .hero-categories-mini .header-text span::after,
html[dir="rtl"] .highlights-header h3::after {
    animation: heartbeatPulseRTL 1.5s infinite ease-in-out;
}

@keyframes heartbeatPulseRTL {
    0% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)); transform: scale(-0.95, 0.95); opacity: 0.8; }
    50% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 1)); transform: scale(-1.05, 1.05); opacity: 1; }
    100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)); transform: scale(-0.95, 0.95); opacity: 0.8; }
}

@media (max-width: 768px) {
    .slider-header h2::after, .offers-header h2::after,
    .slider-header h4::after, .slider-header a h4::after, .slider-header h4 a::after, .trends-header h3::after,
    .promo-grid-section .section-label::after,
    .suggested-products-section .slider-header h2::after,
    .hero-categories-mini .header-text span::after,
    .highlights-header h3::after {
        width: 50px;
        height: 18px;
    }
}

/* ====================================================
   MOBILE HERO SECTION FIXES (OVERRIDES ALL RTL/LTR)
   ==================================================== */
@media (max-width: 991px) {
    html[lang="ar"] .new-hero-content,
    html[dir="rtl"] .new-hero-content,
    html[lang="en"] .new-hero-content,
    html[dir="ltr"] .new-hero-content,
    .new-hero-content {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 35px 15px !important; /* Adjusted vertical padding to 35px */
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        z-index: 10;
        background: transparent !important; /* Remove translucent background */
    }
    
    /* Force children to center in English on mobile (overrides earlier * rule) */
    html[lang="en"] .new-hero-content *,
    html[dir="ltr"] .new-hero-content * {
        text-align: center !important;
    }
    
    html[lang="ar"] .nh-divider-line,
    html[dir="rtl"] .nh-divider-line,
    html[lang="en"] .nh-divider-line,
    html[dir="ltr"] .nh-divider-line,
    .nh-divider-line {
        justify-content: center !important;
        margin: 15px auto !important;
    }

    html[lang="ar"] .new-hero-banner,
    html[dir="rtl"] .new-hero-banner,
    html[lang="en"] .new-hero-banner,
    html[dir="ltr"] .new-hero-banner,
    .new-hero-banner {
        background-position: 78.8% center !important; /* Shift to center the model (who is on the right side of the original image) */
        background-color: #3d3992 !important; /* Fallback purple */
        padding: 30px 15px !important; /* Balanced top and bottom padding for perfect vertical centering */
        min-height: 70vh !important;
        position: relative;
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: center !important; /* Center horizontally */
        justify-content: center !important; /* Center vertically */
    }
    
    /* Unified transparent overlay that covers the entire main background */
    .new-hero-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(47, 41, 107, 0.45); /* translucent */
        z-index: 1;
        border-radius: inherit;
    }

    /* Enlarge logo on mobile screens */
    .logo img {
        height: 60px !important;
    }
    header.scrolled .logo img {
        height: 50px !important;
    }
}

/* Style for Filter Toggle Button in Shop */
.shop-controls .filter-toggle-btn {
    background-color: #3f3a95 !important;
    border-color: #3f3a95 !important;
    color: #e2c695 !important;
}
.shop-controls .filter-toggle-btn span {
    display: inline-block !important; /* Show the text on mobile */
    color: #e2c695 !important;
}
.shop-controls .filter-toggle-btn i.fa-filter,
.shop-controls .filter-toggle-btn i.fas {
    color: #e2c695 !important;
}

/* Base smaller size for drawer header buttons on large screens */
.drawer-header .filter-actions .btn {
    font-size: 13px !important;
    padding: 5px 12px !important;
}

@media (max-width: 991px) {
    .drawer-header .filter-actions .btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* =========================================
   ABSOLUTE OVERRIDE FOR FEATURES BAR MOBILE
   ========================================= */
@media (max-width: 991px) {
    div.features-bar-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
        margin-top: -130px !important; /* Pull up a bit if needed */
    }
    div.features-bar-container .feature-bar-item {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 15px 5px !important;
    }
    div.features-bar-container .feature-bar-item i {
        margin: 0 0 10px 0 !important;
        font-size: 24px !important;
    }
}

/* Wishlist Button */
.wishlist-btn.active {
    color: #e74c3c !important;
}
.wishlist-btn.active i {
    color: #e74c3c !important;
}


/* Fix for .container clipping dropdowns in checkout */
.checkout-container .container { overflow: visible !important; }