/* Global reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection for input fields and textareas */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

*:focus,
*:focus-visible {
    outline: none !important;
}

html {
    scroll-behavior: smooth;
    overflow-y: auto;
    height: 100%;
}

/* Base typography */
body {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #000;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
    position: relative;
    padding-top: 0;
    opacity: 0;
    animation: fadeIn 0.6s ease-in-out forwards;
    transition: opacity 0.5s ease-in-out;
    min-height: 100vh;
}

body.page-transitioning {
    opacity: 0;
    pointer-events: none;
    animation: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Bar */
.top-bar {
    background: #000;
    color: #fff;
    padding: 12px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    font-weight: 400;
    border-bottom: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-bar .container {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    height: 100%;
}

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

.top-bar .container::before {
    left: 0;
    background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
}

.top-bar .container::after {
    right: 0;
    background: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
}

.top-bar .marquee-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    will-change: transform;
    gap: 0;
}

.top-bar span {
    color: #fff;
    opacity: 1;
    font-weight: 400;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.5), 
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    letter-spacing: 2.5px;
    display: inline-block;
    white-space: nowrap;
    padding-right: 100px;
    position: relative;
}

.top-bar span::after {
    content: '•';
    position: absolute;
    right: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    animation: pulse 2s ease-in-out infinite;
}

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

.top-bar .marquee-wrapper:hover {
    animation-play-state: paused;
}

.top-bar span:hover {
    text-shadow: 
        0 1px 4px rgba(0, 0, 0, 0.6), 
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Header */
.header {
    background: transparent;
    position: fixed;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 50px 0 20px;
    border-bottom: none;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.header-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 50px;
}


.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: auto;
    z-index: 1;
}

.logo a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
}

.logo h1 {
    font-family: 'Brown Sugar', "Didot", "GFS Didot", serif;
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 6px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto;
    transition: color 0.3s ease, transform 0.3s ease;
    transform: scale(1);
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.nav-center {
    display: flex;
    gap: 35px;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.nav-center a {
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    transition: opacity 0.3s, color 0.3s ease;
    position: relative;
    white-space: nowrap;
    padding-bottom: 5px;
    line-height: 1.2;
    display: inline-block;
}

.nav-center a::after {
    display: none;
}

.nav-center a:hover {
    opacity: 1;
}

.nav-center a:hover::after {
    display: none;
}

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

.nav-center a .caret {
    font-size: 8px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
    align-self: baseline;
}

.dropdown-toggle {
    cursor: pointer;
    display: inline-block;
    vertical-align: baseline;
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    transition: opacity 0.3s, color 0.3s ease;
    position: relative;
    white-space: nowrap;
    padding-bottom: 12px;
    margin-bottom: -7px;
    line-height: 1.2;
    outline: none;
    border: none;
    background: none;
}

.dropdown-toggle:focus {
    outline: none;
    border: none;
}

.dropdown-toggle:focus-visible {
    outline: none;
    border: none;
}

.dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 20%,
        rgba(192, 192, 192, 0.9) 50%,
        rgba(255, 255, 255, 0.9) 70%,
        rgba(192, 192, 192, 0.9) 85%,
        rgba(255, 255, 255, 0.5) 100%,
        transparent 100%
    );
    background-size: 200% 100%;
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(192, 192, 192, 0.4),
        0 0 30px rgba(255, 255, 255, 0.3);
    transition: width 0.4s ease, box-shadow 0.4s ease;
    animation: shimmer 2s infinite;
    animation-play-state: paused;
}

.dropdown-toggle:hover {
    opacity: 1;
}

.dropdown-toggle:hover::after {
    width: 100%;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(192, 192, 192, 0.6),
        0 0 45px rgba(255, 255, 255, 0.4),
        0 0 60px rgba(192, 192, 192, 0.2);
    animation-play-state: running;
}

/* Keep line visible when dropdown menu is active */
.dropdown.dropdown-open .dropdown-toggle::after {
    width: 100% !important;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(192, 192, 192, 0.6),
        0 0 45px rgba(255, 255, 255, 0.4),
        0 0 60px rgba(192, 192, 192, 0.2) !important;
    animation-play-state: running !important;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    list-style: none;
    padding: 8px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: visible;
    pointer-events: none;
    display: none;
}


/* Create invisible bridge area above menu when open to catch mouse movement */
.dropdown.dropdown-open .dropdown-menu::before,
.dropdown-menu.active::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 10px;
    background: transparent;
    pointer-events: auto;
    z-index: 999;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    display: block;
}

/* Show dropdown menu on hover when dropdown has dropdown-open class */
.dropdown.dropdown-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    display: block;
}

/* Ensure links are clickable when dropdown is open */
.dropdown.dropdown-open .dropdown-menu li a,
.dropdown-menu.active li a {
    pointer-events: auto;
    cursor: pointer;
    text-align: center;
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    position: relative;
    pointer-events: auto;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    min-height: 44px;
}

/* Only allow clicks on links when dropdown is open */
.dropdown:not(.dropdown-open) .dropdown-menu:not(.active) li a {
    pointer-events: none;
    cursor: default;
}

.dropdown-menu li a::after {
    display: none;
}

.dropdown-menu li a:hover {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.1)
    );
    color: #ffffff;
    opacity: 1;
    backdrop-filter: blur(10px);
    width: 100%;
}

.dropdown-menu li:first-child a {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.dropdown-menu li:last-child a {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.header-icons-left {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.header-icons-right {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.icon-link {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    font-size: 12px;
    font-weight: 300;
    transition: color 0.3s ease;
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

.icon-link button {
    color: inherit;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 11;
}

.icon-link svg {
    transition: opacity 0.3s;
    pointer-events: none;
}

.icon-link:hover svg,
.icon-link:hover {
    opacity: 0.7;
}

/* WhatsApp Nav Icon - Black and White */
.whatsapp-nav-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.whatsapp-nav-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: opacity 0.3s ease;
}

.whatsapp-nav-icon:hover {
    opacity: 0.7;
}

/* Desktop Styles - Ensure mobile styles don't leak to desktop */
@media (min-width: 769px) {
    /* Hide scroll to gallery button on desktop */
    .scroll-to-gallery-btn-mobile {
        display: none !important;
    }
    /* Hide mobile elements on desktop */
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide floating WhatsApp button on desktop */
    .whatsapp-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Show WhatsApp icon on desktop - next to search icon */
    .whatsapp-nav-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* White WhatsApp icon on home page desktop - white when not scrolled */
    body.home-page .whatsapp-nav-icon {
        color: #ffffff !important;
    }
    
    body.home-page .whatsapp-nav-icon svg {
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }
    
    /* Black WhatsApp icon when header is scrolled */
    body.home-page .header.scrolled .whatsapp-nav-icon {
        color: #000000 !important;
    }
    
    body.home-page .header.scrolled .whatsapp-nav-icon svg {
        fill: #000000 !important;
        stroke: #000000 !important;
    }
    
        /* Header scrolled state on desktop for home-page - allow white background */
    body.home-page .header.scrolled {
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Header styling for no-results page - match shop page behavior */
    body:has(.no-results-section) .header {
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    body:has(.no-results-section) .header .logo h1 {
        color: #000000 !important;
    }
    
    body:has(.no-results-section) .header .nav-center a {
        color: #000000 !important;
    }
    
    body:has(.no-results-section) .header .nav-center span {
        color: #000000 !important;
    }
    
    body:has(.no-results-section) .header .icon-link {
        color: #000000 !important;
    }
    
    body:has(.no-results-section) .header #search-icon {
        color: #000000 !important;
    }
    
    body:has(.no-results-section) .header #search-icon svg {
        stroke: #000000 !important;
    }
    
    /* Ensure navigation is visible on desktop */
    .nav-center {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: row !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
        max-width: none !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        scale: 1 !important;
    }
    
    /* Ensure dropdown menus work correctly on desktop */
    .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-10px) !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    }
    
    /* Show dropdown menu when hovered (dropdown-open class) */
    .dropdown.dropdown-open .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
    }
    
    /* Only show dropdown menu when active (clicked) - for mobile */
    .dropdown.active .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
    }
    
    /* Ensure nav-center links are visible on desktop */
    .nav-center a {
        display: inline-block !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure header icons are visible on desktop */
    .header-icons-left,
    .header-icons-right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Cart Badge */
.cart-icon-link {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #000000;
    color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    line-height: 1;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #ffffff;
    z-index: 12;
    min-width: 20px;
    box-sizing: border-box;
}

/* For shop page - ensure badge is visible on white background */
body:has(.shop-section) .cart-badge {
    border-color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cart-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
        top: -6px;
        right: -6px;
        min-width: 18px;
    }
}

.icon-left {
    margin-right: auto;
}

/* Hero Sections */
.hero-section {
    width: 100%;
    position: relative;
}

.hero-image {
    width: 100%;
    height: 90vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 60px;
}


.hero-clutch {
    background-image: none;
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
}

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

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Slide 1: Image 1 */
.hero-slide-image1 {
    background-position: center bottom;
}

/* Slide 2: Image 5 */
.hero-slide-image4 {
    background-position: center top;
}

/* Slide 3: Image 6 */
.hero-slide-image6 {
    background-position: center 70%;
}

/* Slide 4: Image 10 */
.hero-slide-image10 {
    background-position: center;
}




.hero-clutch-2 {
    background-image: none;
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
}

.hero-slide-composite .hero-side-image-left {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    max-width: 500px;
    aspect-ratio: 9 / 16;
    background-image: url('background/4.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 5;
    transition: all 0.4s ease;
}

.hero-side-image-left {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    max-width: 500px;
    aspect-ratio: 9 / 16;
    background-image: url('background/4.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 5;
    transition: all 0.4s ease;
}


.hero-slide-composite .hero-side-image-left:hover,
.hero-side-image-left:hover {
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(255, 255, 255, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.02);
    border-color: rgba(255, 255, 255, 0.95);
}

.hero-slide-composite .hero-side-image {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    background-image: url('background/3.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 5;
    transition: all 0.4s ease;
}


.hero-slide-composite .hero-side-image:hover {
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(255, 255, 255, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.02);
    border-color: rgba(255, 255, 255, 0.95);
}

.hero-side-image {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    background-image: url('background/3.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 5;
    transition: all 0.4s ease;
}


.hero-side-image:hover {
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(255, 255, 255, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.02);
    border-color: rgba(255, 255, 255, 0.95);
}

.hero-section:has(.hero-clutch-2) {
    position: relative;
}

.hero-section:has(.hero-clutch-2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 15%, 
        rgba(255, 255, 255, 0.7) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.7) 70%,
        rgba(255, 255, 255, 0.4) 85%,
        transparent 100%);
    z-index: 10;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15), 
                0 -2px 10px rgba(255, 255, 255, 0.1);
}

.hero-new-arrivals-section {
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.hero-new-arrivals-section .hero-image {
    min-height: 100vh;
    height: 100vh;
}

.hero-new-arrivals-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 15%, 
        rgba(255, 255, 255, 0.7) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.7) 70%,
        rgba(255, 255, 255, 0.4) 85%,
        transparent 100%);
    z-index: 10;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15), 
                0 2px 10px rgba(255, 255, 255, 0.1);
}

.hero-bucket {
    background: #ffffff;
}

.hero-designer {
    background: #ffffff;
}

.hero-community {
    background: #ffffff;
}

.hero-behind-scenes {
    background: #ffffff;
}

.hero-studio {
    background: #ffffff;
}

.hero-content {
    position: absolute;
    bottom: 60px;
    right: 60px;
    z-index: 10;
}

.hero-content-new-arrivals {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    pointer-events: none;
}

.hero-content-new-arrivals button,
.hero-content-new-arrivals a {
    pointer-events: auto;
    text-decoration: none;
    display: inline-block;
}

.cta-button-new-arrivals {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #ffffff;
    padding: 16px 45px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
                0 0 0 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
                 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cta-button-new-arrivals::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    transition: left 0.5s ease;
}

.cta-button-new-arrivals:hover::before {
    left: 100%;
}

.cta-button-new-arrivals:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3),
                0 0 0 4px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
                 0 1px 3px rgba(0, 0, 0, 0.6);
}

.cta-button {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 15px 40px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.cta-button:hover {
    background: #ffffff;
    color: #000;
}

.hero-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #000;
    z-index: 10;
}

.hero-text-overlay h2 {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.6;
    max-width: 800px;
    text-transform: uppercase;
}

/* Editor's Pick Section */
.editors-pick-section {
    padding: 100px 0;
    background-color: #f8f8f8;
}

.section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 60px;
    color: #000;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.product-card {
    background-color: #E8E8E8;
    position: relative;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.product-1 {
    background: #ffffff;
}

.product-2 {
    background: #ffffff;
}

.product-3 {
    background: #ffffff;
}

.product-4 {
    background: #ffffff;
}

.favorite-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
}

.favorite-btn svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.product-info {
    padding: 20px;
    background-color: #E8E8E8;
}

.product-name {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.product-price {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 12px;
}

.product-options {
    display: flex;
    gap: 6px;
}

.option-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000;
    opacity: 0.3;
}

.option-dot:first-child {
    opacity: 1;
}

.view-all-container {
    text-align: center;
    margin-top: 40px;
}

.view-all-btn {
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 15px 50px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.view-all-btn:hover {
    background: #000;
    color: #fff;
}

/* Follow Designer Section */
.follow-designer-section {
    padding: 100px 0;
    background-color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.gallery-item {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
}

.gallery-1 {
    background: #ffffff;
}

.gallery-2 {
    background: #ffffff;
}

.gallery-3 {
    background: #ffffff;
}

.read-more-container {
    text-align: right;
    margin-top: 40px;
    padding-right: 0;
}

.read-more-btn {
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 15px 50px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.read-more-btn:hover {
    background: #000;
    color: #fff;
}

/* Scroll to Gallery Button - Hidden on Desktop */
.scroll-to-gallery-btn-mobile {
    display: none !important;
}

/* Gallery Section */
.gallery-section {
    padding: 5px 20px 100px 20px; /* Minimal top padding - just tiny separation */
    background: #f8f8f8;
    min-height: 60vh;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Minimal gap between hero and gallery on desktop */
body.home-page .hero-section + .gallery-section {
    margin-top: 0;
    padding-top: 5px; /* Tiny separation - gallery appears right after hero */
}

.gallery-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

.gallery-title {
    text-align: center;
    font-family: 'Cormorant Garamond', serif; /* אותו פונט כמו שמות המוצרים */
    font-size: 42px;
    font-weight: 700; /* Bold */
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 50px auto 60px auto; /* Push down to center - top margin pushes it down */
    width: 100%;
    display: block;
}

.gallery-title .hashtag {
    color: #999999; /* אפור רק לאשטג */
}

/* Luxury effect for KYD text - elegant animated gradient with shifting colors */
.gallery-title .kyd-text {
    font-family: 'Brown Sugar', "Didot", "GFS Didot", serif; /* Match KYD logo font */
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: linear-gradient(90deg, 
        #4a4a4a 0%, 
        #707070 20%, 
        #9a9a9a 40%, 
        #c0c0c0 50%, 
        #9a9a9a 60%, 
        #707070 80%, 
        #4a4a4a 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) 
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))
            drop-shadow(0 0 10px rgba(74, 74, 74, 0.3));
    animation: luxury-shimmer 4s ease-in-out infinite;
    position: relative;
}

@keyframes luxury-shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gallery-section .gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns = 6 images per row */
    gap: 0;
    padding: 0;
}

.gallery-section .gallery-item {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* זה יוצר מרובע מושלם - 1:1 aspect ratio */
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    cursor: pointer;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    text-decoration: none;
    display: block;
    color: inherit;
}

.gallery-section .gallery-item picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.gallery-section .gallery-item picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.gallery-section.visible .gallery-item {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--item-index, 0) * 0.1s);
}

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

.gallery-section .gallery-item {
    cursor: pointer;
}

/* Desktop-only hover effects */
@media (min-width: 769px) {
    .gallery-section .gallery-item:hover {
        transform: scale(1.02);
        z-index: 10;
    }

    /* Instagram overlay on hover - Desktop only */
    .gallery-section .gallery-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        transition: all 0.3s ease;
        z-index: 2;
        pointer-events: none;
    }

    .gallery-section .gallery-item:hover::before {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    /* Instagram icon - Desktop only */
    .gallery-section .gallery-item .instagram-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 48px;
        height: 48px;
        z-index: 3;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
        opacity: 0;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    }

    .gallery-section .gallery-item .instagram-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .gallery-section .gallery-item:hover .instagram-icon {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .gallery-section .gallery-item:hover picture img {
        transform: scale(1.05);
        filter: brightness(0.75) blur(1px);
    }

    /* Fallback for browsers that don't support backdrop-filter */
    @supports not (backdrop-filter: blur(3px)) {
        .gallery-section .gallery-item:hover::before {
            background: rgba(0, 0, 0, 0.65);
        }
    }
}

/* Mobile: No hover effects */
@media (max-width: 768px) {
    .gallery-section .gallery-item::before,
    .gallery-section .gallery-item .instagram-icon {
        display: none !important;
    }
    
    .gallery-section .gallery-item:hover picture img {
        transform: none;
        filter: none;
    }
}

/* Gallery Modal - Mobile Gallery Viewer - Instagram Style */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

.gallery-modal.active {
    opacity: 1;
    visibility: visible;
}

.gallery-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
    cursor: pointer;
}

/* Instagram-style Header */
.gallery-modal-header {
    position: relative;
    width: 100%;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    overflow: hidden;
}

.gallery-modal-header-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    z-index: 1;
}

.gallery-modal-brand {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-modal-brand::before,
.gallery-modal-brand::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.gallery-modal-brand::before {
    left: 0;
    background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
}

.gallery-modal-brand::after {
    right: 0;
    background: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
}

.gallery-modal-brand .gallery-modal-marquee-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: gallery-header-marquee 30s linear infinite;
    will-change: transform;
    gap: 0;
}

.gallery-modal-brand .gallery-modal-marquee-wrapper span {
    color: #fff;
    opacity: 1;
    font-weight: 400;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.5), 
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    letter-spacing: 2.5px;
    display: inline-block;
    white-space: nowrap;
    padding-right: 100px;
    position: relative;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    font-size: 13px;
    text-transform: uppercase;
}

.gallery-modal-brand .gallery-modal-marquee-wrapper span::after {
    content: '•';
    position: absolute;
    right: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes gallery-header-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.gallery-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    color: white;
    transition: opacity 0.3s ease;
    padding: 0;
}

.gallery-modal-close:hover {
    opacity: 0.7;
}

.gallery-modal-content {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
    padding: 0 0 100px;
}


.gallery-modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    flex: 1;
}

/* Navigation Buttons - Instagram Style */
.gallery-modal-prev,
.gallery-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: opacity 0.3s ease;
}

.gallery-modal-prev {
    left: 12px;
}

.gallery-modal-next {
    right: 12px;
}

.gallery-modal-nav-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gallery-modal-prev:hover .gallery-modal-nav-circle,
.gallery-modal-next:hover .gallery-modal-nav-circle {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Dots Indicator */
.gallery-modal-dots {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 90%;
    flex-wrap: wrap;
}

.gallery-modal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.gallery-modal-dot.active {
    width: 8px;
    height: 8px;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Caption */
.gallery-modal-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    text-align: center;
    z-index: 5;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gallery-modal-caption p {
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 1px;
    font-style: italic;
    text-transform: lowercase;
}

/* Hide modal on desktop */
@media (min-width: 769px) {
    .gallery-modal {
        display: none !important;
    }
}

/* Mobile specific modal styles */
@media (max-width: 768px) {
    .gallery-modal-header {
        padding: 12px 0;
    }
    
    .gallery-modal-brand .gallery-modal-marquee-wrapper span {
        font-size: 12px;
        letter-spacing: 2.5px;
        padding-right: 80px;
    }
    
    .gallery-modal-close {
        top: 10px;
        right: 14px;
        width: 28px;
        height: 28px;
    }
    
    .gallery-modal-prev,
    .gallery-modal-next {
        width: 40px;
        height: 40px;
    }
    
    .gallery-modal-nav-circle {
        width: 40px;
        height: 40px;
    }
    
    .gallery-modal-prev {
        left: 10px;
    }
    
    .gallery-modal-next {
        right: 10px;
    }
    
    .gallery-modal-content {
        padding: 0 0 90px;
    }
    
    .gallery-modal-dots {
        bottom: 60px;
        gap: 5px;
        padding: 6px 10px;
    }
    
    .gallery-modal-dot {
        width: 5px;
        height: 5px;
    }
    
    .gallery-modal-dot.active {
        width: 7px;
        height: 7px;
    }
    
    .gallery-modal-caption {
        bottom: 16px;
        padding: 10px 14px;
    }
    
    .gallery-modal-caption p {
        font-size: 14px;
        letter-spacing: 0.8px;
    }
    
}


/* Footer */
.footer {
    background-color: #000;
    color: #fff;
    padding: 80px 0 30px;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin-bottom: 50px;
}

.footer-column h3 {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

.footer-column ul {
    list-style: none;
}

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

.footer-column ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    transition: opacity 0.3s;
}

.footer-column ul li a:hover {
    opacity: 0.7;
}

.newsletter-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.newsletter-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    flex: 1;
    padding: 5px 0;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.newsletter-input::placeholder {
    color: #fff;
    opacity: 0.7;
}

.newsletter-input:focus {
    outline: none;
}

.newsletter-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.social-icon:hover {
    opacity: 0.7;
}

.contact-info {
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.payment-icon {
    font-size: 11px;
    font-weight: 300;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 12px;
    font-weight: 300;
    opacity: 0.7;
}

/* Newsletter Footer Section - Desktop Only */
.newsletter-footer-section {
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
    color: #fff;
    padding: 100px 40px 60px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.newsletter-footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
}

.newsletter-footer-section.desktop-only {
    display: block;
}

.newsletter-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}

.newsletter-heading {
    text-align: center;
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Cormorant Garamond', 'Garamond', serif;
    line-height: 1.4;
    direction: rtl;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    position: relative;
    padding-bottom: 25px;
}

.newsletter-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.newsletter-subheading {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 55px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Georgia', 'Times New Roman', serif;
    direction: rtl;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

.newsletter-form-main {
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 50px 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    position: relative;
}

.newsletter-form-main::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.newsletter-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 1024px) {
    .newsletter-inputs {
        flex-wrap: nowrap;
    }
}

.newsletter-country-select {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px 50px 16px 20px;
    font-size: 15px;
    color: #000;
    font-family: 'Georgia', 'Times New Roman', serif;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
    min-width: 170px;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 400;
}

.newsletter-country-select:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.newsletter-country-select:focus {
    outline: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
}

.newsletter-phone-input,
.newsletter-email-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px 20px;
    font-size: 15px;
    color: #fff;
    font-family: 'Georgia', 'Times New Roman', serif;
    flex: 1;
    min-width: 230px;
    max-width: 290px;
    border-radius: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.newsletter-phone-input::placeholder,
.newsletter-email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    font-weight: 300;
}

.newsletter-phone-input:focus,
.newsletter-email-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.newsletter-phone-input:hover,
.newsletter-email-input:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.35);
}

.newsletter-subscribe-btn {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px 50px;
    font-size: 15px;
    color: #000;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    min-width: 160px;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.newsletter-subscribe-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s ease;
}

.newsletter-subscribe-btn:hover::before {
    left: 100%;
}

.newsletter-subscribe-btn:hover {
    background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.newsletter-subscribe-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.newsletter-disclaimer {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    max-width: 950px;
    margin: 0 auto;
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 0.2px;
}

/* Main Footer */
.main-footer {
    background: #1a1a1a;
    background-image: 
        linear-gradient(180deg, #1f1f1f 0%, #161616 25%, #1a1a1a 50%, #161616 75%, #1f1f1f 100%),
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
    padding-top: 45px;
    padding-bottom: 35px;
    min-height: auto;
    position: relative;
    z-index: 1; /* Lower z-index - below cart overlay (99999) and cart sidebar (100000) */
    width: 100%;
    margin-top: 0;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 -1px 0 rgba(255, 255, 255, 0.03);
}

/* Hide footer completely when cart is open */
body.cart-open .main-footer,
body.cart-open .main-footer-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Hide footer completely when mobile menu is open */
body.menu-open .main-footer,
body.menu-open .main-footer-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Hide footer completely when search is open */
body.search-open .main-footer,
body.search-open .main-footer-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Hide footer completely when filter is open */
body.filter-open .main-footer,
body.filter-open .main-footer-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.5) 30%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.5) 70%,
        rgba(255, 255, 255, 0.2) 90%,
        transparent 100%);
    box-shadow: 
        0 2px 10px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(255, 255, 255, 0.1),
        0 4px 20px rgba(255, 255, 255, 0.05);
    animation: footerShimmer 4s ease-in-out infinite;
}

@keyframes footerShimmer {
    0%, 100% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0.8;
        transform: translateX(2px);
    }
}

.main-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.015) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.main-footer.desktop-only {
    display: block;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0 30px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-main-content {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: flex-start;
    padding: 35px 0 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-links-wrapper {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    direction: ltr;
    position: relative;
    animation: fadeInUp 0.8s ease-out;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 50px;
}

.footer-links-horizontal {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
    max-height: 300px;
    list-style: none;
    padding: 0;
    margin: 0;
    direction: ltr;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

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


.footer-column {
    display: flex;
    flex-direction: column;
    direction: ltr;
    padding: 0;
    position: relative;
    flex: 0 0 auto;
    min-width: 180px;
}

.footer-column::before {
    display: none;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    direction: ltr;
    text-align: left;
}

.footer-links-horizontal li {
    margin: 0;
    line-height: 1.5;
    display: inline-block;
    pointer-events: none;
    opacity: 0.92;
    transition: all 0.3s ease;
    transform: translateX(0);
}

.footer-links-horizontal li:hover {
    opacity: 1;
    transform: translateX(2px);
}

.footer-links-horizontal li a,
.footer-links-horizontal li a:link,
.footer-links-horizontal li a:visited {
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Rubik', 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    direction: ltr;
    text-align: left;
    padding: 3px 6px;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    line-height: 1.5;
}

.footer-links-horizontal li a::before {
    content: '';
    position: absolute;
    right: 8px;
    left: 8px;
    bottom: 2px;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.6) 100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.4),
        0 2px 5px rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
}

.footer-links-horizontal li a:hover {
    color: #ffffff;
    transform: translateX(3px);
    text-shadow: 
        0 2px 10px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 255, 255, 0.15),
        0 4px 15px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

.footer-links-horizontal li a:hover::before {
    transform: scaleX(1);
}

.footer-brand-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 28px;
    min-width: 220px;
    direction: ltr;
    text-align: left;
    padding-left: 40px;
    margin-left: 0;
    justify-self: start;
    position: relative;
}

.footer-brand-logo {
    font-size: 48px;
    font-weight: 600;
    color: #fff;
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Garamond', serif;
    letter-spacing: 6px;
    text-align: left;
    font-style: normal;
    position: relative;
    padding-bottom: 12px;
    white-space: nowrap;
    margin: 0;
    margin-left: 0;
    margin-bottom: 4px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.25));
    cursor: pointer;
}

.footer-brand-logo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 100%);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.footer-brand-logo:hover {
    transform: scale(1.08) translateY(-2px);
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.4));
}

.footer-brand-logo:hover::after {
    width: 100%;
}

.footer-social-icons {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 30px 0;
    position: relative;
    width: 100%;
}

/* Override for social icons in footer-bottom-section */
.footer-bottom-section .footer-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-top: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    width: 100%;
}

.footer-bottom-section .footer-social-icons::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.4) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.social-icon-link {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 0 0 rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.social-icon-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.social-icon-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.social-icon-link:hover::before {
    opacity: 1;
}

.social-icon-link:hover::after {
    width: 150%;
    height: 150%;
}

.social-icon-link:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
}

.social-icon-link:active {
    transform: translateY(-2px) scale(1.02);
}

.social-icon-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Vibrant colors for each social media platform */
.social-icon-link[aria-label="Instagram"] {
    background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 
        0 2px 8px rgba(131, 58, 180, 0.4),
        0 0 0 0 rgba(131, 58, 180, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.social-icon-link[aria-label="Instagram"]:hover {
    background: linear-gradient(135deg, #9B4DD4 0%, #FF2D2D 50%, #FFBF55 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 6px 20px rgba(131, 58, 180, 0.6),
        0 0 30px rgba(253, 29, 29, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
    color: #ffffff;
}

.social-icon-link[aria-label="TikTok"] {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.social-icon-link[aria-label="TikTok"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(37, 244, 238, 0.15) 30%, 
        rgba(254, 44, 85, 0.15) 70%, 
        transparent 100%);
    transition: left 0.5s ease;
}

.social-icon-link[aria-label="TikTok"]:hover::before {
    left: 100%;
}

.social-icon-link[aria-label="TikTok"] svg {
    filter: drop-shadow(0 0 3px rgba(37, 244, 238, 0.4)) 
            drop-shadow(0 0 3px rgba(254, 44, 85, 0.4));
}

.social-icon-link[aria-label="TikTok"]:hover {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(37, 244, 238, 0.4);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(37, 244, 238, 0.3),
        0 0 20px rgba(254, 44, 85, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-4px) scale(1.05);
    color: #ffffff;
}

.social-icon-link[aria-label="TikTok"]:hover svg {
    filter: drop-shadow(0 0 6px rgba(37, 244, 238, 0.6)) 
            drop-shadow(0 0 6px rgba(254, 44, 85, 0.6));
}

.social-icon-link[aria-label="Facebook"] {
    background: linear-gradient(135deg, #1877F2 0%, #0A5FCC 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 
        0 2px 8px rgba(24, 119, 242, 0.4),
        0 0 0 0 rgba(24, 119, 242, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.social-icon-link[aria-label="Facebook"]:hover {
    background: linear-gradient(135deg, #2980F3 0%, #1B6FE8 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 6px 20px rgba(24, 119, 242, 0.6),
        0 0 30px rgba(24, 119, 242, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
    color: #ffffff;
}

.social-icon-link[aria-label="WhatsApp"] {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 
        0 2px 8px rgba(37, 211, 102, 0.4),
        0 0 0 0 rgba(37, 211, 102, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.social-icon-link[aria-label="WhatsApp"]:hover {
    background: linear-gradient(135deg, #2FE576 0%, #1AB394 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 6px 20px rgba(37, 211, 102, 0.6),
        0 0 30px rgba(37, 211, 102, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.05);
    color: #ffffff;
}

.social-icon-link:hover svg {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

.footer-bottom-section {
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.footer-copyright {
    text-align: center;
    direction: rtl;
    margin-top: 12px;
    padding-top: 12px;
}

.footer-copyright p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 300;
    font-family: 'Rubik', 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease;
}

.footer-copyright:hover p {
    color: rgba(255, 255, 255, 0.8);
}

/* Newsletter Section - Footer */
.newsletter-section {
    flex: 1;
    max-width: 50%;
    padding: 0 0 0 50px;
    text-align: right;
    direction: rtl;
    border-bottom: none;
    margin: 0;
}

.newsletter-title {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: right;
}

.newsletter-subtitle {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: right;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    max-width: 420px;
    margin: 0;
    width: 100%;
}

.newsletter-input-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 0;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    direction: rtl;
    min-height: 44px;
    box-sizing: border-box;
}

.newsletter-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.newsletter-email-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 15px;
    padding: 12px 16px;
    direction: rtl;
    text-align: right;
    min-width: 0;
    border-radius: 0 4px 4px 0;
    align-self: stretch;
    box-sizing: border-box;
    margin: 0;
    height: 100%;
}

.newsletter-email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.newsletter-email-input.error,
.newsletter-email-input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: rgba(244, 67, 54, 0.6) !important;
    background: rgba(244, 67, 54, 0.1) !important;
}

.newsletter-input-wrapper.has-error,
.newsletter-input-wrapper:has(.newsletter-email-input.error) {
    border-color: rgba(244, 67, 54, 0.6) !important;
    background: rgba(244, 67, 54, 0.05) !important;
}

.newsletter-submit-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 12px 24px;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
    white-space: nowrap;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    height: 100%;
    direction: rtl;
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
}

.newsletter-submit-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.newsletter-submit-btn:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.85);
}

.newsletter-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: right;
    direction: rtl;
}

.newsletter-consent-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.newsletter-consent-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.newsletter-consent-checkbox:checked {
    background: #ffffff;
    border-color: #ffffff;
    accent-color: #000000;
}

.newsletter-consent-checkbox:checked:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}

.newsletter-consent-label {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    text-align: right;
    direction: rtl;
    flex: 1;
}

.newsletter-consent-label a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.newsletter-consent-label a:hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.8);
}

.newsletter-gender-note {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    text-align: right;
    direction: rtl;
}

.newsletter-message {
    display: none;
    padding: 12px 20px;
    border-radius: 4px;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    direction: rtl;
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    animation: slideDown 0.3s ease;
}

.newsletter-message-success {
    background: rgba(76, 175, 80, 0.2);
    color: #a5d6a7;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.newsletter-message-error {
    background: rgba(244, 67, 54, 0.2);
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.4);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Newsletter Styles */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 35px 20px 25px;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .newsletter-title {
        font-size: 22px;
        letter-spacing: 2px;
        margin-bottom: 8px;
    }

    .newsletter-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .newsletter-form {
        gap: 15px;
        max-width: 100%;
    }

    .newsletter-input-wrapper {
        flex-direction: column;
        padding: 0;
        background: transparent;
        border: none;
        gap: 10px;
        border-radius: 0;
        direction: rtl;
    }

    .newsletter-input-wrapper:focus-within {
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .newsletter-email-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        padding: 12px 16px;
        font-size: 15px;
        direction: rtl;
        text-align: right;
    }

    .newsletter-email-input:focus {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.08);
    }
    
    .newsletter-email-input.error,
    .newsletter-email-input.error:focus {
        border-color: rgba(244, 67, 54, 0.7) !important;
        background: rgba(244, 67, 54, 0.15) !important;
    }

    .newsletter-submit-btn {
        width: 100%;
        padding: 12px 24px;
        font-size: 15px;
        border-radius: 4px;
        align-self: stretch;
        direction: rtl;
        min-height: 44px;
    }

    .newsletter-consent {
        gap: 10px;
    }

    .newsletter-consent-label {
        font-size: 12px;
        line-height: 1.5;
    }

    .newsletter-gender-note {
        font-size: 10px;
        margin-top: 6px;
    }

    .newsletter-message {
        font-size: 13px;
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .newsletter-section {
        padding: 30px 15px 25px;
    }

    .newsletter-title {
        font-size: 20px;
        letter-spacing: 1.5px;
    }

    .newsletter-subtitle {
        font-size: 13px;
    }

    .newsletter-consent-label {
        font-size: 11px;
    }
}

.footer-accessibility {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.accessibility-icon-link {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s;
    width: 24px;
    height: 24px;
}

.accessibility-icon-link:hover {
    opacity: 0.75;
}

.accessibility-icon-link svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* Footer Responsive Design */
@media (max-width: 1200px) {
    .footer-content {
        padding: 0 50px;
    }
    
    .footer-links-wrapper {
        gap: 80px;
    }
    
    .footer-column {
        padding-left: 30px;
    }
}

@media (max-width: 992px) {
    .footer-links-wrapper {
        gap: 60px;
    }
    
    .footer-column ul li a {
        font-size: 15px;
    }
    
    .footer-brand-logo {
        font-size: 42px;
        letter-spacing: 5px;
    }
}

/* Mobile Footer */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .main-footer.desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block;
    }
    
    .main-footer-mobile {
        background: #1a1a1a;
        background-image: 
            linear-gradient(180deg, #1f1f1f 0%, #161616 25%, #1a1a1a 50%, #161616 75%, #1f1f1f 100%),
            radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
            radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
        padding: 40px 20px 30px;
        position: relative;
        z-index: 1; /* Lower z-index - below cart overlay (99999) and cart sidebar (100000) */
        width: 100%;
        margin-top: 0;
        overflow: hidden;
        box-shadow: 
            inset 0 2px 4px rgba(0, 0, 0, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            0 -1px 0 rgba(255, 255, 255, 0.03);
    }
    
    .footer-content-mobile {
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        padding: 0;
        z-index: 1;
    }
    
    .footer-links-wrapper-mobile {
        margin-bottom: 0;
        padding-bottom: 20px;
        direction: rtl;
        position: relative;
    }
    
    .footer-links-wrapper-mobile::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.08) 80%,
            transparent 100%);
        box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
    }
    
    .footer-links-horizontal-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px;
        list-style: none;
        padding: 0;
        margin: 0;
        direction: ltr;
        justify-content: center;
        align-items: center;
    }
    
    .footer-links-horizontal-mobile li {
        margin: 0;
        line-height: 1.4;
        display: inline-block;
        pointer-events: none;
        opacity: 0.92;
        transition: all 0.3s ease;
    }
    
    .footer-links-horizontal-mobile li a,
    .footer-links-horizontal-mobile li a:link,
    .footer-links-horizontal-mobile li a:visited {
        color: rgba(255, 255, 255, 0.88) !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 400;
        font-family: 'Rubik', 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-block;
        direction: ltr;
        text-align: left;
        padding: 3px 6px;
        position: relative;
        cursor: pointer;
        pointer-events: auto;
        white-space: nowrap;
        letter-spacing: 0.1px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        line-height: 1.4;
    }
    
    .footer-links-horizontal-mobile li a::before {
        content: '';
        position: absolute;
        right: 6px;
        left: 6px;
        bottom: 1px;
        width: auto;
        height: 1.5px;
        background: linear-gradient(90deg, 
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.6) 100%);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 
            0 0 8px rgba(255, 255, 255, 0.4),
            0 1px 3px rgba(255, 255, 255, 0.2);
        border-radius: 1px;
        transform: scaleX(0);
        transform-origin: left;
    }
    
    .footer-links-horizontal-mobile li a:hover {
        color: #ffffff;
        transform: translateX(2px);
        text-shadow: 
            0 2px 8px rgba(255, 255, 255, 0.4),
            0 0 15px rgba(255, 255, 255, 0.15),
            0 3px 12px rgba(0, 0, 0, 0.3);
        font-weight: 500;
    }
    
    .footer-links-horizontal-mobile li a:hover::before {
        transform: scaleX(1);
    }
    
    .footer-bottom-section-mobile {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    
    .footer-social-icons-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        padding: 20px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        width: 100%;
        gap: 12px;
    }
    
    .footer-social-icons-mobile::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.4) 80%,
            transparent 100%);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }
    
    .footer-social-icons-mobile .social-icon-link {
        width: 40px;
        height: 40px;
    }
    
    .footer-social-icons-mobile .social-icon-link svg {
        width: 18px;
        height: 18px;
    }
    
    .footer-copyright-mobile {
        text-align: center;
        direction: rtl;
        margin-top: 15px;
        padding-top: 15px;
    }
    
    .footer-copyright-mobile p {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        font-weight: 300;
        font-family: 'Rubik', 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        letter-spacing: 0.2px;
        margin: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        transition: color 0.3s ease;
    }
    
    .footer-copyright-mobile:hover p {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.back-to-top:active {
    transform: translateY(-2px);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.back-to-top:hover svg {
    transform: translateY(-2px);
}


/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(20, 20, 20, 0.98) 50%,
        rgba(0, 0, 0, 0.95) 100%
    );
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.page-transition-overlay::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition-overlay.active::before {
    opacity: 1;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 36px;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 102;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: var(--header-height, auto);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

/* On desktop, ensure search overlay is above header */
@media (min-width: 769px) {
    .search-overlay {
        z-index: 100005 !important; /* Higher than header (100001), top-bar (100001), filter (100004), and cart-sidebar (100002) */
    }
    
    .search-overlay.active {
        z-index: 100005 !important;
    }
    
    .search-overlay::after {
        z-index: 100004 !important; /* Below search overlay but above everything else */
    }
    
    /* Ensure header and top-bar are below search on desktop */
    body.search-open .header {
        z-index: 100001 !important; /* Lower than search */
    }
    
    body.search-open .top-bar {
        z-index: 100001 !important; /* Lower than search */
    }
}

.search-overlay::after {
    content: '';
    position: fixed;
    top: var(--search-overlay-bottom, 200px);
    left: 0;
    width: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay.active::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.search-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

html.search-open {
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
}

/* Prevent scrolling when search is open - Mobile */
@media (max-width: 768px) {
    body.search-open,
    html.search-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        -webkit-overflow-scrolling: none !important;
    }
    
    body.search-open * {
        -webkit-overflow-scrolling: none !important;
    }
    
    /* Allow scrolling only inside search overlay */
    body.search-open .search-overlay,
    body.search-open .search-container,
    body.search-open .search-results {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Keep header fixed when search is open */
    body.search-open .header,
    body.search-open .top-bar {
        position: fixed !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
    }
    
    body.search-open .search-overlay {
        z-index: 1002 !important;
    }
}


.search-container {
    width: 100%;
    padding: 0;
    position: relative;
    background: transparent;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 103;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    padding: 0 40px;
    padding-top: 20px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-close {
    position: absolute;
    top: 15px;
    right: 40px;
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 104;
}

.search-close:hover {
    transform: rotate(90deg);
    opacity: 0.7;
}

.search-close svg {
    width: 28px;
    height: 28px;
}

/* Show search close button on desktop (original style) */
@media (min-width: 769px) {
    .search-close {
        display: block;
        position: absolute;
        top: 15px;
        right: 40px;
        background: transparent;
        border: none;
        color: #000;
        cursor: pointer;
        padding: 10px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 104;
        width: auto;
        height: auto;
        border-radius: 0;
        border: none;
    }
    
    .search-close:hover {
        transform: rotate(90deg);
        opacity: 0.7;
        background: transparent;
    }
    
    .search-close svg {
        width: 28px;
        height: 28px;
        stroke: currentColor;
        stroke-width: 2;
    }
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-underline {
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.search-input-wrapper.has-text .search-underline {
    opacity: 1;
}

.search-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 50px 12px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    letter-spacing: 0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.search-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-style: normal;
}

.search-input:focus {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    width: 20px;
    height: 20px;
    z-index: 1;
}

.search-clear-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    padding: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.search-clear-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

.search-clear-btn svg {
    width: 12px;
    height: 12px;
}

.search-results {
    width: 100%;
    max-width: 800px;
    margin-top: 15px;
    padding: 0;
}

.search-suggestion-item {
    padding: 8px 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    transition: color 0.2s ease;
    text-align: left;
}

.search-suggestion-item:hover {
    color: rgba(0, 0, 0, 0.9);
}

.search-suggestion-item .query-text {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

.search-result-item {
    padding: 25px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-result-item:hover {
    padding-left: 15px;
    background: rgba(0, 0, 0, 0.05);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-icon svg {
    width: 24px;
    height: 24px;
    color: rgba(0, 0, 0, 0.7);
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin-bottom: 5px;
    font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    letter-spacing: 1px;
}

.search-result-price {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Cormorant Garamond', serif;
}

.search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

.search-results-header {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.search-result-item mark {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
    padding: 2px 4px;
    border-radius: 2px;
}

/* Cart Sidebar */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999; /* Higher than top-bar (101), header (100), and all other elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* On desktop, ensure cart overlay covers everything including header (like filter) */
@media (min-width: 769px) {
    .top-bar {
        z-index: 100001 !important; /* Lower than cart-overlay when cart is open */
    }
    
    .header {
        z-index: 100001 !important; /* Lower than cart-overlay when cart is open */
    }
    
    /* Cart overlay should cover header and top-bar on desktop (like filter) */
    .cart-overlay {
        z-index: 99999 !important; /* Default - will be overridden when active */
    }
    
    /* When cart is open, overlay should be above header and top-bar */
    body.cart-open .cart-overlay,
    body.cart-open .cart-overlay.active {
        z-index: 100003 !important; /* Above header (100001) and top-bar (100001), like filter */
        pointer-events: auto !important; /* Block all clicks */
    }
    
    /* Cart sidebar should still be above everything */
    .cart-sidebar {
        z-index: 100004 !important; /* Highest - above overlay, header, and top-bar */
    }
    
    /* Ensure cart sidebar can receive clicks */
    body.cart-open .cart-sidebar,
    body.cart-open .cart-sidebar.active {
        pointer-events: auto !important; /* Can be clicked */
    }
    
    body.cart-open .cart-sidebar * {
        pointer-events: auto !important; /* All children can be clicked */
    }
    
    /* Ensure header and top-bar are visible but NOT clickable when cart is open on desktop */
    /* They should be behind the overlay, just like with filter */
    body.cart-open .top-bar,
    body.home-page.cart-open .top-bar,
    body:not(.home-page).cart-open .top-bar,
    body.cart-open .header,
    body.home-page.cart-open .header,
    body:not(.home-page).cart-open .header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important; /* Cannot be clicked - overlay blocks it */
        z-index: 100001 !important; /* Below overlay (100003) and cart sidebar (100004) */
        transform: none !important; /* Override any transform that might hide it */
    }
    
    /* Ensure header icons are visible but NOT clickable on desktop when cart is open */
    body.cart-open .header-icons-left,
    body.cart-open .header-icons-right,
    body.home-page.cart-open .header-icons-left,
    body.home-page.cart-open .header-icons-right,
    body.cart-open .icon-link,
    body.home-page.cart-open .icon-link,
    body.cart-open .logo,
    body.home-page.cart-open .logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important; /* Cannot be clicked - overlay blocks it */
    }
    
    /* CRITICAL: Hide mobile menu toggle on desktop - it should NEVER be visible on desktop, even when cart is open */
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    body.cart-open .mobile-menu-toggle,
    body.home-page.cart-open .mobile-menu-toggle,
    body:not(.home-page).cart-open .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Specifically hide filter button on desktop when cart is open */
    body.cart-open #filter-toggle-btn,
    body.cart-open .filter-icon-link,
    body.home-page.cart-open #filter-toggle-btn,
    body.home-page.cart-open .filter-icon-link {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Ensure overlay doesn't block clicks on sidebar */
.cart-overlay.active ~ .cart-sidebar,
.cart-sidebar.active {
    pointer-events: auto !important;
}

.cart-sidebar.active * {
    pointer-events: auto !important;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: #ffffff;
    z-index: 100000; /* Highest z-index - above everything including top-bar, header, and mobile menu */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    pointer-events: auto; /* Ensure sidebar can receive clicks */
}

.cart-sidebar * {
    pointer-events: auto; /* Ensure all children can receive clicks */
}

.cart-sidebar.active {
    transform: translateX(0);
}

.cart-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cart-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #000000;
    margin: 0;
    text-transform: uppercase;
}

.cart-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #000000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-close:hover {
    transform: rotate(90deg);
    opacity: 0.7;
}

.cart-close svg {
    width: 24px;
    height: 24px;
}

.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.cart-items-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    font-weight: 500;
}

.cart-column-product {
    flex: 1;
}

.cart-column-total {
    text-align: right;
    min-width: 80px;
}

.cart-items {
    flex: 1;
}

.cart-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    min-width: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    border-radius: 2px;
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.5px;
    margin: 0;
}

.cart-item-price {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: 2px;
}

.quantity-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #000000;
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
    border-radius: 2px;
}

.quantity-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.quantity-value {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    min-width: 20px;
    text-align: center;
}

.cart-item-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 5px;
    margin-left: auto;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-remove:hover {
    color: #000000;
}

.cart-item-remove svg {
    width: 16px;
    height: 16px;
}

.cart-item-total {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    text-align: right;
    min-width: 80px;
    align-self: flex-start;
    padding-top: 5px;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    display: none;
}

.cart-empty.active {
    display: block;
}

.cart-empty p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}

.cart-sidebar-footer {
    padding: 20px 30px 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cart-total-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #000000;
    text-transform: uppercase;
}

.cart-total-amount {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
}

.cart-checkout-btn,
a.cart-checkout-btn {
    width: 100%;
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 16px 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
    display: block;
    text-align: center;
}

a.cart-checkout-btn:hover:not(:disabled) {
    background: #333333;
}

.cart-checkout-btn:hover:not(:disabled) {
    background: #333333;
}

.cart-checkout-btn:disabled,
a.cart-checkout-btn[href="#"] {
    background: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.cart-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-view-cart-btn,
a.cart-view-cart-btn,
#cart-view-cart-btn,
a#cart-view-cart-btn {
    width: 100%;
    background: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 16px 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    display: block;
    text-align: center;
    pointer-events: auto !important; /* Ensure button can receive clicks */
    position: relative;
    z-index: 100001; /* Higher than sidebar to ensure clicks work */
    border-radius: 0;
    box-sizing: border-box;
    min-height: 50px;
    line-height: 1.2;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    -ms-text-decoration: none !important;
    -o-text-decoration: none !important;
}

a.cart-view-cart-btn:hover,
.cart-view-cart-btn:hover,
#cart-view-cart-btn:hover,
a#cart-view-cart-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-color: #000000 !important;
}

/* Ensure no link styling is applied - Desktop */
.cart-sidebar-footer a.cart-view-cart-btn,
.cart-action-buttons a.cart-view-cart-btn,
.cart-sidebar a.cart-view-cart-btn,
.cart-sidebar-footer #cart-view-cart-btn,
.cart-action-buttons #cart-view-cart-btn,
.cart-sidebar #cart-view-cart-btn,
.cart-sidebar-footer a.cart-view-cart-btn:visited,
.cart-action-buttons a.cart-view-cart-btn:visited,
.cart-sidebar a.cart-view-cart-btn:visited,
.cart-sidebar-footer a.cart-view-cart-btn:link,
.cart-action-buttons a.cart-view-cart-btn:link,
.cart-sidebar a.cart-view-cart-btn:link,
.cart-sidebar-footer a.cart-view-cart-btn:active,
.cart-action-buttons a.cart-view-cart-btn:active,
.cart-sidebar a.cart-view-cart-btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    background: transparent !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    -ms-text-decoration: none !important;
    -o-text-decoration: none !important;
}

.cart-sidebar-footer a.cart-view-cart-btn:hover,
.cart-action-buttons a.cart-view-cart-btn:hover,
.cart-sidebar a.cart-view-cart-btn:hover,
.cart-sidebar-footer #cart-view-cart-btn:hover,
.cart-action-buttons #cart-view-cart-btn:hover,
.cart-sidebar #cart-view-cart-btn:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #000000 !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    -ms-text-decoration: none !important;
    -o-text-decoration: none !important;
}

/* Override accessibility widget styles */
body.a11y-underline-links .cart-view-cart-btn,
body.a11y-underline-links a.cart-view-cart-btn,
body.a11y-underline-links #cart-view-cart-btn,
body.a11y-underline-links a#cart-view-cart-btn {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
}

body.cart-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Lock html scroll when cart is open */
html body.cart-open {
    overflow: hidden !important;
    height: 100% !important;
}

/* Lock main element scroll on home page when cart is open */
body.cart-open #main {
    overflow: hidden !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-text-overlay h2 {
        font-size: 24px;
    }
    
    .hero-side-image-left {
        width: 40%;
        max-width: 400px;
        left: 40px;
    }
    
    .hero-side-image {
        width: 40%;
        max-width: 400px;
        right: 40px;
    }
}

@media (max-width: 768px) {
    /* Cart Sidebar - Mobile - Unified styles for all pages - MUST BE STABLE */
    /* Override any home-page or other page-specific styles that might affect cart */
    body.home-page .cart-sidebar,
    body:not(.home-page) .cart-sidebar,
    .cart-sidebar {
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        /* Use both vh and dvh for maximum compatibility */
        height: 100vh !important;
        height: 100dvh !important; /* Use dynamic viewport height for mobile - prevents issues with browser UI */
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        z-index: 100000 !important; /* Highest z-index - above everything including top-bar (101), header (100), and mobile menu (103) */
        overflow: hidden !important; /* Prevent sidebar itself from scrolling */
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
        transform: translate3d(100%, 0, 0) !important; /* Start off-screen, use GPU acceleration */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        isolation: isolate !important; /* Create new stacking context */
        contain: layout style paint !important; /* Prevent layout shifts */
        -webkit-transform: translate3d(100%, 0, 0) !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure cart sidebar active state uses GPU acceleration for stability */
    body.home-page .cart-sidebar.active,
    body:not(.home-page) .cart-sidebar.active,
    .cart-sidebar.active {
        transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration for stability */
        -webkit-transform: translate3d(0, 0, 0) !important;
        /* Prevent any movement when active */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important; /* Ensure sidebar can receive clicks */
    }
    
    /* Ensure all sidebar children can receive clicks on mobile */
    body.home-page .cart-sidebar.active *,
    body:not(.home-page) .cart-sidebar.active *,
    .cart-sidebar.active * {
        pointer-events: auto !important;
    }
    
    /* Ensure cart sidebar closed state */
    body.home-page .cart-sidebar:not(.active),
    body:not(.home-page) .cart-sidebar:not(.active),
    .cart-sidebar:not(.active) {
        transform: translate3d(100%, 0, 0) !important; /* Off-screen when closed */
    }
    
    /* Cart Overlay - Mobile - MUST BE STABLE */
    /* Overlay must be above everything including top-bar and header */
    body.home-page .cart-overlay,
    body:not(.home-page) .cart-overlay,
    .cart-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 99999 !important; /* Higher than everything */
        background: rgba(0, 0, 0, 0.7) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        will-change: opacity, visibility !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Cart Overlay Active - Mobile */
    body.home-page .cart-overlay.active,
    body:not(.home-page) .cart-overlay.active,
    .cart-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure overlay doesn't block clicks on sidebar - Mobile */
    body.home-page .cart-overlay.active ~ .cart-sidebar,
    body:not(.home-page) .cart-overlay.active ~ .cart-sidebar,
    .cart-overlay.active ~ .cart-sidebar,
    body.home-page .cart-sidebar.active,
    body:not(.home-page) .cart-sidebar.active,
    .cart-sidebar.active {
        pointer-events: auto !important;
    }
    
    /* Hide top-bar and header when cart is open on mobile - they should be completely hidden */
    /* Note: On desktop (min-width: 769px), these are overridden to keep header visible */
    body.cart-open .top-bar,
    body.home-page.cart-open .top-bar,
    body:not(.home-page).cart-open .top-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
        transform: translateY(-100%) !important;
    }
    
    /* Hide header when cart is open on mobile */
    /* Note: On desktop (min-width: 769px), these are overridden to keep header visible */
    body.cart-open .header,
    body.home-page.cart-open .header,
    body:not(.home-page).cart-open .header {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
        transform: translateY(-100%) !important;
    }
    
    /* Hide footer completely when mobile menu is open - all pages */
    body.menu-open .main-footer,
    body.menu-open .main-footer-mobile,
    body.home-page.menu-open .main-footer,
    body.home-page.menu-open .main-footer-mobile,
    body:not(.home-page).menu-open .main-footer,
    body:not(.home-page).menu-open .main-footer-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    /* Hide footer completely when search is open - all pages */
    body.search-open .main-footer,
    body.search-open .main-footer-mobile,
    body.home-page.search-open .main-footer,
    body.home-page.search-open .main-footer-mobile,
    body:not(.home-page).search-open .main-footer,
    body:not(.home-page).search-open .main-footer-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    /* Hide footer completely when filter is open - all pages */
    body.filter-open .main-footer,
    body.filter-open .main-footer-mobile,
    body.home-page.filter-open .main-footer,
    body.home-page.filter-open .main-footer-mobile,
    body:not(.home-page).filter-open .main-footer,
    body:not(.home-page).filter-open .main-footer-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    /* Hide footer completely when cart is open - all pages */
    body.cart-open .main-footer,
    body.cart-open .main-footer-mobile,
    body.home-page.cart-open .main-footer,
    body.home-page.cart-open .main-footer-mobile,
    body:not(.home-page).cart-open .main-footer,
    body:not(.home-page).cart-open .main-footer-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Hide mobile menu toggle (hamburger) when cart is open */
    body.cart-open .mobile-menu-toggle,
    body.home-page.cart-open .mobile-menu-toggle,
    body:not(.home-page).cart-open .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide all header icons when cart is open */
    body.cart-open .header-icons-left,
    body.cart-open .header-icons-right,
    body.cart-open .icon-link:not(.cart-icon-link),
    body.home-page.cart-open .header-icons-left,
    body.home-page.cart-open .header-icons-right,
    body.home-page.cart-open .icon-link:not(.cart-icon-link) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Specifically hide filter button when cart is open */
    body.cart-open #filter-toggle-btn,
    body.cart-open .filter-icon-link,
    body.home-page.cart-open #filter-toggle-btn,
    body.home-page.cart-open .filter-icon-link {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Hide logo when cart is open */
    body.cart-open .logo,
    body.home-page.cart-open .logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Prevent body scroll when cart is open on mobile - all pages */
    body.cart-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    html:has(body.cart-open),
    html body.cart-open {
        overflow: hidden !important;
        height: 100% !important;
    }
    
    /* Lock main element scroll on home page when cart is open */
    body.cart-open #main {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide top-bar and header when cart is open on mobile - they should not be visible */
    /* Note: On desktop (min-width: 769px), header and top-bar remain visible */
    @media (max-width: 768px) {
        body.cart-open .top-bar,
        body.home-page.cart-open .top-bar,
        body:not(.home-page).cart-open .top-bar {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            z-index: -1 !important;
            pointer-events: none !important;
        }
        
        /* Hide header when cart is open on mobile */
        body.cart-open .header,
        body.home-page.cart-open .header,
        body:not(.home-page).cart-open .header {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            z-index: -1 !important;
            pointer-events: none !important;
        }
    }
    
    /* Hide mobile menu toggle (hamburger) when cart is open - mobile only */
    @media (max-width: 768px) {
        body.cart-open .mobile-menu-toggle,
        body.home-page.cart-open .mobile-menu-toggle,
        body:not(.home-page).cart-open .mobile-menu-toggle {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        
        /* Hide all header icons when cart is open on mobile */
        body.cart-open .header-icons-left,
        body.cart-open .header-icons-right,
        body.cart-open .icon-link,
        body.home-page.cart-open .header-icons-left,
        body.home-page.cart-open .header-icons-right,
        body.home-page.cart-open .icon-link {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
    }
    
    /* Ensure cart sidebar stays fixed and doesn't move */
    body.home-page.cart-open .cart-sidebar,
    body.cart-open .cart-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
    }
    
    /* Ensure cart sidebar structure prevents body scroll */
    body.home-page.cart-open .cart-sidebar-header,
    body.cart-open .cart-sidebar-header {
        position: relative !important;
        flex-shrink: 0 !important;
        z-index: 100001 !important; /* Even higher within cart sidebar */
    }
    
    body.home-page.cart-open .cart-sidebar-content,
    body.cart-open .cart-sidebar-content {
        position: relative !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        max-height: calc(100vh - 200px) !important;
        max-height: calc(100dvh - 200px) !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        /* Allow scrolling only inside content, not the page */
        touch-action: pan-y !important;
        /* Prevent scroll chaining to body */
        overscroll-behavior-y: contain !important;
    }
    
    body.home-page.cart-open .cart-sidebar-footer,
    body.cart-open .cart-sidebar-footer {
        position: relative !important;
        flex-shrink: 0 !important;
        z-index: 100001 !important; /* Even higher within cart sidebar */
        margin-top: auto !important;
    }
    
    /* Cart Sidebar Header - Mobile */
    body.home-page .cart-sidebar-header,
    body:not(.home-page) .cart-sidebar-header,
    .cart-sidebar-header {
        padding: 15px 15px 12px !important;
        flex-shrink: 0 !important;
        min-height: 56px !important;
        max-height: 56px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }
    
    body.home-page .cart-title,
    body:not(.home-page) .cart-title,
    .cart-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: clamp(22px, 5vw, 28px) !important; /* Responsive font size */
        font-weight: 500 !important;
        letter-spacing: 1px !important;
        color: #000000 !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
    }
    
    .cart-close {
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 5px !important;
        color: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .cart-close svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Cart Sidebar Content - Mobile */
    body.home-page .cart-sidebar-content,
    body:not(.home-page) .cart-sidebar-content,
    .cart-sidebar-content {
        padding: 15px 20px !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        /* Use dynamic viewport height and calculate based on actual header/footer heights */
        max-height: calc(100dvh - 180px) !important; /* Reserve space for header (~60px) and footer (~120px) */
        overscroll-behavior: contain !important; /* Prevent scroll chaining */
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        position: relative !important;
        height: auto !important;
        /* Ensure it works on all screen sizes */
        box-sizing: border-box !important;
    }
    
    .cart-items-header {
        display: flex !important;
        justify-content: space-between !important;
        padding-bottom: 15px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: #666 !important;
        font-weight: 500 !important;
    }
    
    .cart-items {
        flex: 1 !important;
    }
    
    /* Cart Sidebar Footer - Mobile */
    body.home-page .cart-sidebar-footer,
    body:not(.home-page) .cart-sidebar-footer,
    .cart-sidebar-footer {
        padding: 12px 15px 15px !important;
        flex-shrink: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        background: #ffffff !important;
        position: relative !important;
        z-index: 10 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
        min-height: auto !important;
        margin-top: auto !important;
        box-sizing: border-box !important;
    }
    
    .cart-total {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .cart-total-label {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: 1px !important;
        color: #000000 !important;
        text-transform: uppercase !important;
        flex: 1 !important;
        min-width: 120px !important;
    }
    
    .cart-total-amount {
        font-family: Arial, sans-serif !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        white-space: nowrap !important;
    }
    
    .cart-checkout-btn,
    a.cart-checkout-btn {
        width: 100% !important;
        background: #000000 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 16px 20px !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        transition: background 0.3s ease, opacity 0.3s ease !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        min-height: 50px !important;
        max-height: 60px !important;
        box-sizing: border-box !important;
    }
    
    a.cart-checkout-btn:hover:not(:disabled),
    .cart-checkout-btn:hover:not(:disabled) {
        background: #333333 !important;
    }
    
    .cart-checkout-btn:disabled,
    a.cart-checkout-btn[href="#"] {
        background: #cccccc !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    .cart-action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .cart-view-cart-btn,
    a.cart-view-cart-btn,
    #cart-view-cart-btn,
    a#cart-view-cart-btn {
        width: 100% !important;
        background: transparent !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        padding: 16px 20px !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        transition: background 0.3s ease, color 0.3s ease !important;
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        text-decoration-color: transparent !important;
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        min-height: 50px !important;
        max-height: 60px !important;
        box-sizing: border-box !important;
        pointer-events: auto !important; /* Ensure button can receive clicks */
        position: relative !important;
        z-index: 100001 !important; /* Higher than sidebar to ensure clicks work */
        -webkit-text-decoration: none !important;
        -moz-text-decoration: none !important;
        -ms-text-decoration: none !important;
        -o-text-decoration: none !important;
    }
    
    a.cart-view-cart-btn:hover,
    .cart-view-cart-btn:hover,
    #cart-view-cart-btn:hover,
    a#cart-view-cart-btn:hover {
        background: #000000 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-decoration-line: none !important;
        border-color: #000000 !important;
    }
    
    /* Ensure no link styling is applied - Mobile */
    .cart-sidebar-footer a.cart-view-cart-btn,
    .cart-action-buttons a.cart-view-cart-btn,
    .cart-sidebar a.cart-view-cart-btn,
    .cart-sidebar-footer #cart-view-cart-btn,
    .cart-action-buttons #cart-view-cart-btn,
    .cart-sidebar #cart-view-cart-btn,
    .cart-sidebar-footer a.cart-view-cart-btn:visited,
    .cart-action-buttons a.cart-view-cart-btn:visited,
    .cart-sidebar a.cart-view-cart-btn:visited,
    .cart-sidebar-footer a.cart-view-cart-btn:link,
    .cart-action-buttons a.cart-view-cart-btn:link,
    .cart-sidebar a.cart-view-cart-btn:link,
    .cart-sidebar-footer a.cart-view-cart-btn:active,
    .cart-action-buttons a.cart-view-cart-btn:active,
    .cart-sidebar a.cart-view-cart-btn:active {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        text-decoration-color: transparent !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        background: transparent !important;
        -webkit-text-decoration: none !important;
        -moz-text-decoration: none !important;
        -ms-text-decoration: none !important;
        -o-text-decoration: none !important;
    }
    
    .cart-sidebar-footer a.cart-view-cart-btn:hover,
    .cart-action-buttons a.cart-view-cart-btn:hover,
    .cart-sidebar a.cart-view-cart-btn:hover,
    .cart-sidebar-footer #cart-view-cart-btn:hover,
    .cart-action-buttons #cart-view-cart-btn:hover,
    .cart-sidebar #cart-view-cart-btn:hover {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-style: none !important;
        text-decoration-color: transparent !important;
        color: #ffffff !important;
        background: #000000 !important;
        border-color: #000000 !important;
        -webkit-text-decoration: none !important;
        -moz-text-decoration: none !important;
        -ms-text-decoration: none !important;
        -o-text-decoration: none !important;
    }
    
    /* Override accessibility widget styles - Mobile */
    body.a11y-underline-links .cart-view-cart-btn,
    body.a11y-underline-links a.cart-view-cart-btn,
    body.a11y-underline-links #cart-view-cart-btn,
    body.a11y-underline-links a#cart-view-cart-btn {
        text-decoration: none !important;
        text-decoration-line: none !important;
        text-decoration-thickness: 0 !important;
    }
    
    /* Cart Items - Mobile */
    .cart-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .cart-item:last-child {
        border-bottom: none !important;
    }
    
    .cart-item-image {
        width: 100% !important;
        height: 200px !important;
        min-width: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: #f0f0f0 !important;
        border-radius: 2px !important;
    }
    
    .cart-item-details {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .cart-item-name {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
    }
    
    .cart-item-price {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
        font-size: 14px !important;
        color: #666 !important;
        font-weight: 500 !important;
    }
    
    .cart-item-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 5px !important;
    }
    
    .quantity-selector {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        padding: 4px 8px !important;
        border-radius: 2px !important;
    }
    
    .quantity-btn {
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #000000 !important;
        font-size: 16px !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 2px !important;
    }
    
    .quantity-value {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        min-width: 20px !important;
        text-align: center !important;
    }
    
    .cart-item-remove {
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #666 !important;
        padding: 5px !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .cart-item-remove svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .cart-item-total {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        text-align: left !important;
        align-self: flex-start !important;
        padding-top: 5px !important;
    }
    
    .cart-empty {
        text-align: center !important;
        padding: 60px 20px !important;
        color: #666 !important;
        display: none !important;
    }
    
    .cart-empty.active {
        display: block !important;
    }
    
    .cart-empty p {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        letter-spacing: 1px !important;
    }
    
    .header .container {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-left {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .hero-image {
        height: 60vh;
        padding: 30px;
    }
    
    .hero-content {
        bottom: 30px;
        right: 30px;
    }
    
    .hero-side-image-left {
        width: 45%;
        max-width: 300px;
        left: 30px;
        border-width: 2px;
    }
    
    .hero-side-image {
        width: 45%;
        max-width: 300px;
        right: 30px;
        border-width: 2px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
    }
    
    .hero-text-overlay h2 {
        font-size: 20px;
        padding: 0 20px;
    }
    
    .search-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        z-index: 200000 !important;
        padding: 0 !important;
        padding-top: 80px !important;
        padding-bottom: 32px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    
    .search-overlay.active::after {
        display: none !important;
    }
    
    .search-container {
        padding: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
        align-items: stretch !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        position: relative !important;
        pointer-events: auto !important;
        align-self: flex-start !important;
    }
    
    .search-input-wrapper {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        order: 1 !important;
        width: calc(100% - 70px) !important;
        max-width: calc(100% - 70px) !important;
        position: relative !important;
        pointer-events: auto !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .search-input {
        font-size: 14px;
        padding: 10px 50px 10px 45px;
        pointer-events: auto !important;
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Position close button in the same row as search input - aligned vertically */
    .search-container .search-close {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        align-self: center !important;
    }
    
    /* Ensure search input wrapper and close button are aligned */
    .search-input-wrapper {
        align-self: flex-start !important;
    }
    
    .search-results {
        order: 2 !important;
        margin-top: 0 !important;
        pointer-events: auto !important;
        z-index: 1 !important;
    }
    
    .search-clear-btn {
        display: none !important;
    }
    
    /* Close button for mobile search - same style as mobile menu close button */
    .search-close {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 2px solid #1a1a1a !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 200001 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        transform: translateY(0) !important;
    }
    
    .search-close:hover {
        background: #1a1a1a !important;
        transform: scale(1.1) rotate(90deg) !important;
    }
    
    .search-close:active {
        transform: scale(0.95) rotate(90deg) !important;
    }
    
    .search-close svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #1a1a1a !important;
        stroke-width: 2.5 !important;
        transition: stroke 0.3s ease !important;
    }
    
    .search-close:hover svg {
        stroke: #ffffff !important;
    }
    
    .search-icon {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .search-results {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        margin-top: 20px;
    }
    
    .search-result-name {
        font-size: 18px;
    }
    
    .search-result-price {
        font-size: 14px;
    }
    
    .hero-side-image-left {
        width: 50%;
        max-width: 250px;
        left: 20px;
        border-width: 2px;
    }
    
    .hero-side-image {
        width: 50%;
        max-width: 250px;
        right: 20px;
        border-width: 2px;
    }
    
}

/* Responsive cart for different phone sizes */
@media (max-width: 480px) {
    .hero-side-image-left {
        width: 60%;
        max-width: 200px;
        left: 15px;
    }
    
    .hero-side-image {
        width: 60%;
        max-width: 200px;
        right: 15px;
    }
    
    /* Cart sidebar improvements for small devices - Unified for all pages */
    body.home-page .cart-sidebar-header,
    body:not(.home-page) .cart-sidebar-header,
    .cart-sidebar-header {
        padding: 12px 12px 10px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }
    
    body.home-page .cart-title,
    body:not(.home-page) .cart-title,
    .cart-title {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }
    
    body.home-page .cart-sidebar-content,
    body:not(.home-page) .cart-sidebar-content,
    .cart-sidebar-content {
        padding: 12px 12px !important;
        max-height: calc(100dvh - 170px) !important; /* Adjust for smaller header/footer */
    }
    
    body.home-page .cart-sidebar-footer,
    body:not(.home-page) .cart-sidebar-footer,
    .cart-sidebar-footer {
        padding: 12px 12px 15px !important;
    }
    
    .cart-total {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        gap: 8px !important;
    }
    
    .cart-total-label {
        font-size: 13px !important;
    }
    
    .cart-total-amount {
        font-size: 16px !important;
    }
    
    .cart-checkout-btn,
    a.cart-checkout-btn {
        padding: 14px 16px !important;
        font-size: 13px !important;
        letter-spacing: 1.2px !important;
        min-height: 48px !important;
    }
}

/* Extra small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    body.home-page .cart-sidebar-header,
    body:not(.home-page) .cart-sidebar-header,
    .cart-sidebar-header {
        padding: 10px 10px 8px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    
    body.home-page .cart-title,
    body:not(.home-page) .cart-title,
    .cart-title {
        font-size: clamp(18px, 5vw, 22px) !important;
    }
    
    body.home-page .cart-sidebar-content,
    body:not(.home-page) .cart-sidebar-content,
    .cart-sidebar-content {
        padding: 10px 10px !important;
        max-height: calc(100dvh - 160px) !important;
    }
    
    body.home-page .cart-sidebar-footer,
    body:not(.home-page) .cart-sidebar-footer,
    .cart-sidebar-footer {
        padding: 10px 10px 12px !important;
    }
    
    .cart-items-header {
        font-size: 11px !important;
        padding-bottom: 12px !important;
        margin-bottom: 15px !important;
    }
    
    .cart-total-label {
        font-size: 12px !important;
    }
    
    .cart-total-amount {
        font-size: 15px !important;
    }
    
    .cart-checkout-btn,
    a.cart-checkout-btn {
        padding: 12px 14px !important;
        font-size: 12px !important;
        min-height: 44px !important;
    }
    
    .cart-close svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Very small phones */
@media (max-width: 320px) {
    body.home-page .cart-sidebar-header,
    body:not(.home-page) .cart-sidebar-header,
    .cart-sidebar-header {
        padding: 8px 8px 6px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    
    body.home-page .cart-title,
    body:not(.home-page) .cart-title,
    .cart-title {
        font-size: clamp(16px, 4.5vw, 20px) !important;
    }
    
    body.home-page .cart-sidebar-content,
    body:not(.home-page) .cart-sidebar-content,
    .cart-sidebar-content {
        padding: 8px 8px !important;
        max-height: calc(100dvh - 150px) !important;
    }
    
    body.home-page .cart-sidebar-footer,
    body:not(.home-page) .cart-sidebar-footer,
    .cart-sidebar-footer {
        padding: 8px 8px 10px !important;
    }
    
    .cart-items-header {
        font-size: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .cart-total {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .cart-total-label {
        font-size: 11px !important;
    }
    
    .cart-total-amount {
        font-size: 14px !important;
    }
    
    .cart-checkout-btn,
    a.cart-checkout-btn {
        padding: 10px 12px !important;
        font-size: 11px !important;
        min-height: 40px !important;
    }
}

/* Hide close button on desktop */
.mobile-menu-close-btn {
    display: none !important;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
    position: relative;
    align-items: stretch;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2.5px;
    background-color: currentColor;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    display: block;
    margin: 0;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Allow scrolling on mobile home page to show gallery - BUT NOT WHEN CART IS OPEN */
    html:has(body.home-page):not(:has(body.cart-open)),
    html:not(:has(body.cart-open)) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        position: relative !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* When cart is open, prevent all scrolling */
    html:has(body.cart-open),
    html body.cart-open {
        overflow: hidden !important;
        height: 100% !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Allow scrolling on mobile home page to show gallery - BUT NOT WHEN CART IS OPEN */
    body.home-page:not(.cart-open),
    body:not(.cart-open) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* When cart is open, lock body completely */
    body.home-page.cart-open,
    body.cart-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    /* Hero section - allow scrolling past it */
    body.home-page .hero-section {
        overflow: visible !important;
        height: 100vh !important;
        height: 100dvh !important; /* Use dynamic viewport height */
        max-height: 100vh !important;
        max-height: 100dvh !important;
        position: relative;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Minimal spacing between hero and gallery on mobile */
    body.home-page .hero-section + .gallery-section {
        margin-top: 0 !important;
        padding-top: 5px !important; /* Tiny separation */
        position: relative !important;
        z-index: 2 !important;
        transition: none !important; /* Remove transitions that might interfere */
    }
    
    /* Ensure hero section decorative element doesn't interfere with scrolling */
    body.home-page .hero-new-arrivals-section::after {
        pointer-events: none !important; /* Allow clicks to pass through */
        z-index: 1 !important; /* Lower z-index */
    }
    
    /* Allow scrolling on main element to show gallery - unified definition */
    body.home-page #main {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        overflow-y: auto !important; /* Allow vertical scroll */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        scroll-behavior: smooth !important; /* Smooth scroll behavior */
        height: auto !important;
        max-height: none !important;
        min-height: 100vh;
        position: relative !important;
    }
    
    /* Ensure html and body allow smooth scrolling on mobile */
    body.home-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile Menu Toggle - Enhanced Design */
    .mobile-menu-toggle {
        display: flex;
        width: 32px;
        height: 26px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        padding: 4px;
        position: relative;
        z-index: 103;
        cursor: pointer;
        background: transparent;
        border: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-toggle:hover {
        transform: scale(1.05);
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .mobile-menu-toggle span {
        width: 24px;
        height: 2.5px;
        background-color: currentColor;
        border-radius: 3px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
        position: relative;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    /* Animated hamburger to X transformation */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
        width: 24px;
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
        width: 24px;
    }
    
    /* Header adjustments - Main page (index.html) ONLY */
    body.home-page .header {
        padding: 30px 0 18px;
        top: 30px !important;
        position: fixed;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* Keep logo static on mobile home page - no scroll effects */
    body.home-page .logo h1 {
        transform: scale(1) !important;
        color: #ffffff !important;
    }
    
    /* Keep nav links white on mobile home page - but black in mobile menu */
    body.home-page .nav-center a {
        color: #ffffff !important;
    }
    
    /* Mobile menu text - improved readability for home page */
    body.home-page .nav-center.active a,
    body.home-page .nav-center.active .dropdown-toggle {
        color: #1a1a1a !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }
    
    body.home-page .nav-center.active .dropdown-menu a {
        color: #2a2a2a !important;
        font-weight: 500 !important;
        text-shadow: none !important;
    }
    
    body.home-page .nav-center.active .dropdown-menu a:hover,
    body.home-page .nav-center.active .dropdown-menu a:active {
        color: #000000 !important;
        background: rgba(0, 0, 0, 0.08) !important;
    }
    
    body.home-page .nav-center.active .dropdown-toggle .caret {
        color: #1a1a1a !important;
        font-weight: 600 !important;
    }
    
    /* Keep icon links white on mobile home page */
    body.home-page .icon-link {
        color: #ffffff !important;
    }
    
    
    /* Keep search icon white on mobile home page */
    body.home-page #search-icon {
        color: #ffffff !important;
    }
    
    /* Keep WhatsApp icon white on mobile home page - white when not scrolled */
    body.home-page .whatsapp-nav-icon {
        color: #ffffff !important;
    }
    
    /* Black WhatsApp icon when header is scrolled on mobile */
    body.home-page .header.scrolled .whatsapp-nav-icon {
        color: #000000 !important;
    }
    
    body.home-page .whatsapp-nav-icon svg {
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }
    
    body.home-page .header.scrolled .whatsapp-nav-icon svg {
        fill: #000000 !important;
        stroke: #000000 !important;
    }
    
    body.home-page .header .container {
        padding: 0 20px;
    }
    
    body.home-page .header-top {
        min-height: 45px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    
    body.home-page .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), position 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    body.home-page .logo h1 {
        font-size: 28px;
        letter-spacing: 3.5px;
        line-height: 1;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Logo letters - Mobile Home Page Only */
    body.home-page .logo-letter {
        display: inline-block;
    }
    
    body.home-page .header-icons-left {
        display: flex;
        align-items: center;
        gap: 15px;
        z-index: 102;
        height: 100%;
        justify-content: flex-start;
        flex: 1;
    }
    
    body.home-page .header-icons-right {
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 102;
        height: 100%;
        justify-content: flex-end;
        flex: 1;
    }
    
    body.home-page .mobile-menu-toggle {
        color: #ffffff;
        width: 32px;
        height: 26px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 4px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 103;
        position: relative;
        margin: 0;
        align-self: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body.home-page .mobile-menu-toggle:hover {
        transform: scale(1.05);
    }
    
    body.home-page .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    body.home-page .mobile-menu-toggle span {
        width: 24px;
        height: 2.5px;
        background-color: #ffffff;
        border-radius: 3px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    body.home-page .header.menu-open .mobile-menu-toggle span {
        background-color: #ffffff !important;
    }
    
    body.home-page .header.scrolled .mobile-menu-toggle span {
        background-color: #000000 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    /* Hamburger to X animation for home page */
    body.home-page .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
        width: 24px;
    }
    
    body.home-page .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    
    body.home-page .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
        width: 24px;
    }
    
    body.home-page .icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        height: auto;
        align-self: center;
    }
    
    body.home-page .icon-link svg {
        margin: 0;
        display: block;
    }
    
    body.home-page .icon-link button {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
    }
    
    body.home-page #search-icon {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
    }
    
    body.home-page #search-icon svg {
        display: block;
    }
    
    /* Header adjustments - General (for other pages) */
    body:not(.home-page) .header {
        padding: 15px 0 12px;
        top: 0;
    }
    
    body:not(.home-page) .header .container {
        padding: 0 20px;
    }
    
    body:not(.home-page) .header-top {
        min-height: 45px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    
    body:not(.home-page) .logo {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), position 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    body:not(.home-page) .logo h1 {
        font-size: 32px;
        letter-spacing: 4px;
        line-height: 1;
        margin: 0;
    }
    
    body:not(.home-page) .header-icons-left {
        display: flex;
        align-items: center;
        gap: 15px;
        z-index: 102;
        height: 100%;
        justify-content: flex-start;
        flex: 1;
    }
    
    body:not(.home-page) .header-icons-right {
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 102;
        height: 100%;
        justify-content: flex-end;
        flex: 1;
    }
    
    body:not(.home-page) .mobile-menu-toggle {
        color: #000000;
        width: 32px;
        height: 26px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 4px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 103;
        position: relative;
        margin: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body:not(.home-page) .mobile-menu-toggle:hover {
        transform: scale(1.05);
    }
    
    body:not(.home-page) .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    body:not(.home-page) .mobile-menu-toggle span {
        width: 24px;
        height: 2.5px;
        background-color: #000000;
        border-radius: 3px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
        position: relative;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    body:not(.home-page) .header.menu-open .mobile-menu-toggle span {
        background-color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    /* Hamburger to X animation for other pages */
    body:not(.home-page) .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
        width: 24px;
    }
    
    body:not(.home-page) .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    
    body:not(.home-page) .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
        width: 24px;
    }
    
    body:not(.home-page) .icon-link {
        color: #000000;
    }
    
    body:not(.home-page) .icon-link svg {
        color: #000000;
        stroke: #000000;
    }
    
    /* Remove duplicate/conflicting styles - using page-specific styles above */
    
    .header-icons-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .icon-link {
        font-size: 14px;
    }
    
    .icon-link svg {
        width: 18px;
        height: 18px;
    }
    
    /* Mobile Menu - New Side Menu from Left - Full Screen */
    .nav-center {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: translateX(-100%);
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0 !important;
        padding-top: 80px !important;
        padding-bottom: 32px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        gap: 0;
        margin: 0 !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200000 !important; /* Highest z-index - above all overlays */
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        pointer-events: none;
        display: flex;
    }
    
    .nav-center.active {
        transform: translateX(0) !important;
        pointer-events: auto !important;
        z-index: 200000 !important; /* Highest z-index - above all overlays */
    }
    
    /* Close button (X) for mobile menu - only show on mobile */
    .mobile-menu-close-btn {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 2px solid #1a1a1a !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 200001 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-menu-close-btn:hover {
        background: #1a1a1a !important;
        transform: scale(1.1) rotate(90deg) !important;
    }
    
    .mobile-menu-close-btn:active {
        transform: scale(0.95) rotate(90deg) !important;
    }
    
    .mobile-menu-close-btn svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #1a1a1a !important;
        stroke-width: 2.5 !important;
        transition: stroke 0.3s ease !important;
    }
    
    .mobile-menu-close-btn:hover svg {
        stroke: #ffffff !important;
    }
    
    .nav-center.active * {
        pointer-events: auto !important;
    }
    
    .nav-center a {
        width: 100%;
        padding: 16px 20px;
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #1a1a1a;
        font-size: 16px;
        letter-spacing: 2px;
        text-align: left;
        transition: all 0.3s ease;
        font-weight: 500;
        text-decoration: none;
        display: block;
        background: transparent;
        font-family: 'Cormorant Garamond', 'Garamond', serif;
    }
    
    .nav-center a:hover,
    .nav-center a:active {
        background: rgba(0, 0, 0, 0.05);
        color: #000000;
    }
    
    .nav-center a:last-child {
        border-bottom: none;
    }
    
    .nav-center a::after {
        display: none;
    }
    
    .nav-center .dropdown {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-center .dropdown-toggle {
        width: 100% !important;
        padding: 16px 20px;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #1a1a1a;
        font-size: 16px;
        letter-spacing: 2px;
        text-align: left;
        transition: all 0.3s ease;
        font-weight: 500;
        text-decoration: none;
        display: block !important;
        cursor: pointer;
        background: transparent;
        font-family: 'Cormorant Garamond', 'Garamond', serif;
        position: relative !important;
        order: 1 !important; /* Toggle appears first */
    }
    
    .nav-center .dropdown-toggle:hover,
    .nav-center .dropdown-toggle:active {
        background: rgba(0, 0, 0, 0.05);
        color: #000000;
    }
    
    .nav-center .dropdown.active .dropdown-toggle {
        background: rgba(0, 0, 0, 0.04);
    }
    
    .nav-center .dropdown-toggle .caret {
        color: #1a1a1a;
        font-weight: 600;
        display: inline-block;
        margin-left: 10px;
        transition: transform 0.35s ease;
        font-size: 11px;
        vertical-align: middle;
    }
    
    .nav-center .dropdown.active .dropdown-toggle .caret {
        transform: rotate(180deg);
    }
    
    .nav-center .dropdown-menu {
        position: relative !important;
        display: none;
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%) !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: none !important;
        border-left: 3px solid #1a1a1a !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: auto !important;
        z-index: 200002 !important;
        /* Ensure dropdown appears directly below the toggle button */
        order: 2 !important;
        /* Special animation for dropdown */
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(0) !important;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        /* Keep dropdown inside menu container */
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        list-style: none !important;
        padding-left: 0 !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu {
        display: block !important;
        pointer-events: auto !important;
        z-index: 200002 !important;
        position: relative !important;
        max-height: 1000px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure dropdown menu is visible and clickable when menu is open */
    body.menu-open .nav-center.active .dropdown.active .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 200002 !important;
        position: relative !important;
        max-height: 1000px !important;
        transform: translateY(0) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Special styling for dropdown menu items */
    .nav-center .dropdown-menu li {
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        transform: translateX(-20px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-delay: 0s !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu li {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu li:nth-child(1) {
        transition-delay: 0.1s !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu li:nth-child(2) {
        transition-delay: 0.15s !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu li:nth-child(3) {
        transition-delay: 0.2s !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu li:nth-child(4) {
        transition-delay: 0.25s !important;
    }
    
    .nav-center .dropdown.active .dropdown-menu li:nth-child(5) {
        transition-delay: 0.3s !important;
    }
    
    /* Ensure dropdown container doesn't have positioning that breaks layout */
    .nav-center .dropdown {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        align-content: stretch !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Ensure dropdown menu stays within menu bounds */
    .nav-center {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .nav-center .dropdown-menu {
        contain: layout style !important;
        will-change: max-height, opacity, transform !important;
    }
    
    .nav-center .dropdown-menu li {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .nav-center .dropdown-menu a {
        padding: 16px 20px !important;
        font-size: 15px;
        color: #2a2a2a;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0 !important;
        text-align: left;
        text-decoration: none;
        display: block;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-weight: 500;
        font-family: 'Cormorant Garamond', 'Garamond', serif;
        letter-spacing: 1.5px;
        position: relative !important;
        padding-left: 32px !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .nav-center .dropdown-menu a::before {
        content: '→';
        position: absolute;
        left: 12px;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        font-size: 14px;
        color: #1a1a1a;
    }
    
    .nav-center .dropdown-menu a:hover::before,
    .nav-center .dropdown-menu a:active::before {
        opacity: 1;
        transform: translateX(0);
    }
    
    .nav-center .dropdown-menu a:hover {
        background: rgba(0, 0, 0, 0.05) !important;
        padding-left: 40px !important;
        transform: translateX(5px);
    }
    
    .nav-center .dropdown-menu a:last-child {
        border-bottom: none;
    }
    
    .nav-center .dropdown-menu a:hover,
    .nav-center .dropdown-menu a:active {
        color: #000000;
        background: rgba(0, 0, 0, 0.08);
    }
    
    
    /* Top Bar */
    .top-bar {
        font-size: 14px;
        height: 45px;
        padding: 14px 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: #000000;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .top-bar span {
        letter-spacing: 2px;
        padding-right: 80px;
    }
    
    .header {
        top: 38px !important;
        position: fixed !important;
    }
    
    /* Prevent header from moving on home page mobile - always stay at top */
    body.home-page .header {
        position: fixed !important;
        top: 0 !important;
        z-index: 1000 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    body.home-page .header.scrolled {
        top: 0 !important;
        position: fixed !important;
        z-index: 1000 !important;
    }
    
    /* Smooth top bar animation on mobile */
    body.home-page .top-bar {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* When header is scrolled, move it to top to cover the hidden top-bar - only for non-home pages */
    body:not(.home-page) .header.scrolled {
        top: 0 !important;
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Hero Sections */
    .hero-image {
        height: 50vh;
        padding: 20px;
    }
    
    .hero-content {
        bottom: 20px;
        right: 20px;
    }
    
    .hero-content h2 {
        font-size: 24px;
    }
    
    .hero-content .btn {
        padding: 12px 24px;
        font-size: 12px;
    }
    
    /* SHOP NOW Button - Mobile */
    .hero-content-new-arrivals {
        bottom: 12%;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    
    /* Hide scroll button on mobile */
    .hero-content-new-arrivals .scroll-to-gallery-btn-mobile {
        display: none !important;
    }
    
    .cta-button-new-arrivals {
        width: auto;
        padding: 0;
        padding-bottom: 8px;
        font-size: 18px;
        letter-spacing: 2px;
        border-radius: 0;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-bottom: 2px solid #ffffff !important;
        text-align: center;
        display: inline-block;
        min-height: auto;
        font-weight: 500;
        transition: opacity 0.3s ease, border-bottom-color 0.3s ease;
        position: static;
        overflow: visible;
        text-transform: uppercase;
        color: #ffffff;
        text-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.3);
        animation: none !important;
        font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    }
    
    .cta-button-new-arrivals:hover {
        border-bottom-color: rgba(255, 255, 255, 0.7);
        opacity: 0.9;
        transform: translateY(-1px);
    }
    
    .cta-button-new-arrivals:active {
        transform: translateY(0);
        opacity: 0.8;
    }
    
    /* Remove all pseudo-elements and effects on mobile */
    .cta-button-new-arrivals::before,
    .cta-button-new-arrivals::after {
        display: none !important;
        content: none !important;
    }
    
    .cta-button-new-arrivals:hover::before,
    .cta-button-new-arrivals:hover::after,
    .cta-button-new-arrivals:active::before,
    .cta-button-new-arrivals:active::after {
        display: none !important;
        content: none !important;
    }
    
    /* Scroll to Gallery Button - Hidden on Mobile */
    .scroll-to-gallery-btn-mobile {
        display: none !important; /* Hide button on mobile */
    }
    
    @keyframes scrollButtonBounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    .scroll-to-gallery-btn-mobile::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.4s ease, height 0.4s ease;
    }
    
    .scroll-to-gallery-btn-mobile:hover::before,
    .scroll-to-gallery-btn-mobile:active::before {
        width: 100%;
        height: 100%;
    }
    
    .scroll-to-gallery-btn-mobile svg {
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transition: transform 0.3s ease;
    }
    
    .scroll-to-gallery-btn-mobile:active {
        animation: none;
        transform: translateY(-2px) scale(0.95);
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.2),
            0 2px 8px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    /* Gallery Section - Mobile */
    .gallery-section {
        padding: 40px 15px 20px 15px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 2 !important;
        background: #f8f8f8 !important;
        transform: none !important; /* Remove any transform that might interfere */
        will-change: auto; /* Remove will-change for better performance */
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure no gap between hero and gallery sections */
    body.home-page .hero-section:last-of-type {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .gallery-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 28px;
        font-weight: 700; /* Bold */
        letter-spacing: 3px;
        margin: 30px auto 30px auto; /* Push down to center on mobile */
    }
    
    .gallery-title .hashtag {
        color: #999999; /* אפור רק לאשטג - גם במובייל */
    }
    
    /* Luxury effect for KYD text - mobile with animation */
    .gallery-title .kyd-text {
        font-family: 'Brown Sugar', "Didot", "GFS Didot", serif; /* Match KYD logo font on mobile */
        font-weight: 400;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        background: linear-gradient(90deg, 
            #4a4a4a 0%, 
            #707070 20%, 
            #9a9a9a 40%, 
            #c0c0c0 50%, 
            #9a9a9a 60%, 
            #707070 80%, 
            #4a4a4a 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))
                drop-shadow(0 0 10px rgba(74, 74, 74, 0.3));
        animation: luxury-shimmer 4s ease-in-out infinite;
    }
    
    .gallery-section .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 0;
        padding: 0;
    }
    
    .gallery-section .gallery-item {
        width: 100%;
        height: 0;
        padding-bottom: 100%; /* מרובע מושלם גם במובייל */
        border-radius: 0;
        position: relative;
        overflow: hidden;
    }
    
    .gallery-section .gallery-item picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .gallery-section .gallery-item picture img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    .gallery-section .gallery-item:hover {
        transform: scale(1.01);
    }
    
    /* Buttons */
    .btn {
        padding: 14px 28px;
        font-size: 13px;
        letter-spacing: 2px;
    }
    
    /* Search */
    .search-overlay {
        padding: 20px;
    }
    
    .search-input {
        font-size: 16px;
        padding: 12px 50px 12px 50px;
    }
    
    .search-clear-btn {
        display: none !important;
    }
    
    /* Search close button should be visible on mobile - same style as mobile menu close button */
    .search-close {
        display: flex !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 2px solid #1a1a1a !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 200001 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .search-close:hover {
        background: #1a1a1a !important;
        transform: scale(1.1) rotate(90deg) !important;
    }
    
    .search-close:active {
        transform: scale(0.95) rotate(90deg) !important;
    }
    
    .search-close svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #1a1a1a !important;
        stroke-width: 2.5 !important;
        transition: stroke 0.3s ease !important;
    }
    
    .search-close:hover svg {
        stroke: #ffffff !important;
    }
    
    .search-icon {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Footer */
    .footer {
        padding: 15px 20px 30px;
    }
    
    .footer-columns {
        gap: 30px;
    }
    
    .footer h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .footer a,
    .footer p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* Main page (index.html) ONLY */
    body.home-page .logo {
        margin-top: 0;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    body.home-page .logo h1 {
        font-size: 28px;
        letter-spacing: 3px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    body.home-page .header {
        padding: 35px 0 22px;
    }
    
    body.home-page .header .container {
        padding: 0 15px;
    }
    
    body.home-page .header-top {
        min-height: 42px;
    }
    
    body.home-page .header-icons-left,
    body.home-page .header-icons-right {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    body.home-page .mobile-menu-toggle {
        width: 28px;
        height: 20px;
        padding: 0;
        margin: 0;
    }
    
    body.home-page .mobile-menu-toggle span {
        height: 2.5px;
        width: 100%;
    }
    
    body.home-page .icon-link {
        margin: 0;
        padding: 0;
    }
    
    /* General for other pages */
    body:not(.home-page) .logo {
        margin-top: 0;
    }
    
    body:not(.home-page) .logo h1 {
        font-size: 28px;
        letter-spacing: 3px;
        line-height: 1;
    }
    
    body:not(.home-page) .header {
        padding: 12px 0 10px;
    }
    
    body:not(.home-page) .header .container {
        padding: 0 15px;
    }
    
    body:not(.home-page) .header-top {
        min-height: 42px;
    }
    
    body:not(.home-page) .header-icons-left,
    body:not(.home-page) .header-icons-right {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    body:not(.home-page) .mobile-menu-toggle {
        width: 28px;
        height: 20px;
        padding: 0;
    }
    
    body:not(.home-page) .mobile-menu-toggle span {
        height: 2.5px;
    }
    
    .nav-center {
        width: 90%;
        max-width: 380px;
        min-height: 380px;
        max-height: 80vh;
    }
    
    .nav-center .menu-content {
        padding: 60px 20px 20px;
    }
    
    .nav-center a {
        font-size: 14px;
        padding: 14px 0;
    }
    
    .nav-center .dropdown-toggle {
        font-size: 14px;
        padding: 14px 0;
    }
    
    .nav-center .dropdown-menu a {
        font-size: 13px;
        padding: 12px 0;
        text-align: center;
    }
    
    .mobile-menu-close {
        width: 32px;
        height: 32px;
        top: 12px;
        right: 12px;
    }
    
    .mobile-menu-close svg {
        width: 16px;
        height: 16px;
    }
    
    .top-bar {
        font-size: 11px;
        height: 32px;
        padding: 8px 0;
    }
    
    .top-bar span {
        letter-spacing: 1.5px;
        padding-right: 60px;
    }
    
    .header {
        top: 28px !important;
        position: fixed !important;
    }
    
    body.home-page .header {
        top: 0 !important;
        position: fixed !important;
        z-index: 1000 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Prevent header from moving on home page mobile - always stay at top */
    body.home-page .header.scrolled {
        top: 0 !important;
        position: fixed !important;
        z-index: 1000 !important;
    }
    
    /* Smooth top bar animation on mobile */
    body.home-page .top-bar {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* When header is scrolled, move it to top to cover the hidden top-bar - only for non-home pages */
    body:not(.home-page) .header.scrolled {
        top: 0 !important;
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Ensure header position for all non-home pages on mobile - match contact page behavior */
    body:not(.home-page):not(:has(.cart-page-section)) .header {
        top: 28px !important;
        position: fixed !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Ensure header text is black on non-home pages */
    body:not(.home-page):not(:has(.cart-page-section)) .header .logo h1,
    body:not(.home-page):not(:has(.cart-page-section)) .header .nav-center a,
    body:not(.home-page):not(:has(.cart-page-section)) .header .nav-center span,
    body:not(.home-page):not(:has(.cart-page-section)) .header .icon-link,
    body:not(.home-page):not(:has(.cart-page-section)) .header #search-icon {
        color: #000000 !important;
    }
    
    body:not(.home-page):not(:has(.cart-page-section)) .header #search-icon svg {
        stroke: #000000 !important;
    }
    
    .hero-image {
        height: 40vh;
        padding: 15px;
    }
    
    .hero-content h2 {
        font-size: 20px;
    }
    
    .hero-content .btn {
        padding: 10px 20px;
        font-size: 11px;
    }
    
    /* SHOP NOW Button - Small Mobile */
    .hero-content-new-arrivals {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: none;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .cta-button-new-arrivals {
        width: auto;
        padding: 0;
        padding-bottom: 6px;
        font-size: 16px;
        letter-spacing: 2px;
        min-height: auto;
        border-radius: 0;
        font-weight: 500;
        transition: opacity 0.3s ease, border-bottom-color 0.3s ease;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-bottom: 2px solid #ffffff !important;
        animation: none !important;
        position: static;
        overflow: visible;
        font-family: 'Cormorant Garamond', 'Garamond', 'Didot', serif;
    }
    
    .cta-button-new-arrivals:active {
        transform: translateY(0);
        opacity: 0.8;
    }
    
    /* Remove all pseudo-elements and effects on small mobile */
    .cta-button-new-arrivals::before,
    .cta-button-new-arrivals::after {
        display: none !important;
        content: none !important;
    }
    
    .cta-button-new-arrivals:hover::before,
    .cta-button-new-arrivals:hover::after,
    .cta-button-new-arrivals:active::before,
    .cta-button-new-arrivals:active::after {
        display: none !important;
        content: none !important;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 12px;
    }
    
    .footer {
        padding: 30px 15px 20px;
    }
    
    .footer-columns {
        gap: 25px;
    }
    
    .footer-column h3 {
        font-size: 13px;
        margin-bottom: 12px;
    }
    
    .footer-column ul li a {
        font-size: 11px;
        padding: 6px 0;
    }
    
    .footer-bottom {
        padding: 20px 15px;
        margin-top: 25px;
    }
    
    .footer-bottom p {
        font-size: 10px;
    }
}

/* Overlay for mobile menu */
@media (max-width: 768px) {
    /* Simple scroll prevention - no locking */
    /* Prevent body scroll when menu is open on mobile - same method as cart */
    /* Note: top is set via JavaScript inline style to preserve scroll position */
    body.menu-open,
    body.home-page.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        /* top is set via JavaScript to preserve scroll position - no !important */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    html.menu-open,
    html body.home-page.menu-open {
        overflow: hidden !important;
        height: 100% !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Lock main element scroll when menu is open */
    body.menu-open #main,
    body.home-page.menu-open #main {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        pointer-events: none !important;
    }
    
    /* Allow menu to be interactive */
    body.menu-open .nav-center.active,
    body.menu-open .nav-center.active *,
    body.home-page.menu-open .nav-center.active,
    body.home-page.menu-open .nav-center.active * {
        touch-action: auto !important;
        pointer-events: auto !important;
    }
    
    /* Mobile Menu Overlay - REMOVED - No overlay needed */
    /* Overlay completely removed - menu works without it */
    .mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        background: transparent !important;
    }
    
    .mobile-menu-overlay.active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        background: transparent !important;
    }
    
    /* Menu must be above ALL overlays - highest z-index ensures clicks reach menu */
    /* Higher than cart-overlay (99999) and cart-sidebar (100000) */
    .nav-center.active {
        z-index: 200000 !important;
        pointer-events: auto !important;
        position: fixed !important;
        /* Create new stacking context to ensure menu is above overlay */
        isolation: isolate !important;
        transform: translateX(0) !important;
    }
    
    /* All menu elements must be clickable */
    .nav-center.active * {
        pointer-events: auto !important;
    }
    
    /* Ensure menu links are clickable */
    body.menu-open .nav-center.active a,
    body.menu-open .nav-center.active .dropdown-toggle,
    body.menu-open .nav-center.active button {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 200001 !important;
        position: relative;
    }
    
    /* Dropdown menu items - must be above everything */
    body.menu-open .nav-center.active .dropdown-menu {
        pointer-events: auto !important;
        z-index: 200002 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    body.menu-open .nav-center.active .dropdown-menu a {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 200003 !important;
        position: relative;
    }
    
    /* Ensure dropdown is visible and clickable */
    body.menu-open .nav-center.active .dropdown.active .dropdown-menu {
        display: block !important;
        pointer-events: auto !important;
        z-index: 200002 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Prevent body scroll when menu is open on mobile - same method as cart */
    /* Note: top is set via JavaScript inline style to preserve scroll position */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        /* top is set via JavaScript to preserve scroll position - no !important */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    html.menu-open {
        overflow: hidden !important;
        height: 100% !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Lock main element scroll when menu is open */
    body.menu-open #main {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        pointer-events: none !important;
    }
    
    /* Ensure scroll is restored when menu is closed */
    body:not(.menu-open):not(.cart-open):not(.search-open),
    html:not(.menu-open):not(.cart-open):not(.search-open) {
        overflow: auto !important;
        overflow-x: hidden !important;
    }
    
    /* For home page specifically */
    body.home-page:not(.menu-open):not(.cart-open):not(.search-open),
    html body.home-page:not(.menu-open):not(.cart-open):not(.search-open) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    /* Menu active state */
    .nav-center.active {
        transform: translateX(0);
    }
}

/* Breadcrumbs */
.breadcrumbs {
    margin-bottom: 40px;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 14px;
    color: #666;
}

.breadcrumb-link {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #000;
}

.breadcrumb-link.breadcrumb-current {
    color: #000;
    font-weight: 500;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #999;
}

@media (max-width: 768px) {
    .breadcrumbs {
        margin-bottom: 30px;
        font-size: 13px;
    }
}

/* Newsletter Popup Modal */
html.newsletter-popup-locked,
body.newsletter-popup-locked {
    overflow: hidden;
}

body.newsletter-popup-locked {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

.newsletter-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 300000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    touch-action: none;
    padding: 20px;
}

.newsletter-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.newsletter-popup-container {
    position: relative;
    max-width: 520px;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.newsletter-popup-overlay.active .newsletter-popup-container {
    transform: scale(1) translateY(0);
}

.newsletter-popup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Background image is set via JavaScript */
}

.newsletter-popup-content {
    position: relative;
    z-index: 1;
    padding: 40px 32px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.92) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    overflow: hidden;
    touch-action: auto;
}

.newsletter-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.newsletter-popup-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.newsletter-popup-close svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.5;
    pointer-events: none;
}

.newsletter-popup-logo {
    margin-bottom: 30px;
    margin-top: 10px;
    z-index: 3;
    position: relative;
}

.newsletter-popup-logo a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: transform 0.3s ease;
}

.newsletter-popup-logo a:hover {
    transform: scale(1.05);
}

.newsletter-popup-logo h1 {
    font-family: 'Brown Sugar', "Didot", "GFS Didot", serif;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 6px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease, transform 0.3s ease;
}

.newsletter-popup-title {
    font-family: 'Dancing Script', 'Great Vibes', cursive;
    font-size: 52px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-transform: none;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
    position: relative;
    padding-bottom: 15px;
    font-style: normal;
    line-height: 1.2;
    z-index: 3;
}

.newsletter-popup-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.newsletter-popup-discount {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    margin: 10px auto 15px auto;
    line-height: 1.4;
    direction: rtl;
    text-align: center;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 1px 5px rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    padding: 12px 18px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 3;
    white-space: nowrap;
    overflow: visible;
    display: inline-block;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}

.newsletter-popup-subtitle {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.98);
    margin-bottom: 10px;
    line-height: 1.7;
    direction: rtl;
    text-align: center;
    letter-spacing: 0.3px;
}

.newsletter-popup-subtitle-small {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    line-height: 1.6;
    direction: rtl;
    text-align: center;
    font-style: italic;
    letter-spacing: 0.2px;
}

.newsletter-popup-form {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.newsletter-popup-input-wrapper {
    display: flex;
    width: 100%;
    gap: 0;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    direction: rtl;
    min-height: 48px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.newsletter-popup-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.newsletter-popup-email-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 15px;
    padding: 12px 16px;
    direction: rtl;
    text-align: right;
    min-width: 0;
    border-radius: 0 6px 6px 0;
    align-self: stretch;
    box-sizing: border-box;
    margin: 0;
    height: 100%;
}

.newsletter-popup-email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.newsletter-popup-email-input.error,
.newsletter-popup-email-input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: rgba(244, 67, 54, 0.6) !important;
    background: rgba(244, 67, 54, 0.15) !important;
}

.newsletter-popup-input-wrapper.has-error,
.newsletter-popup-input-wrapper:has(.newsletter-popup-email-input.error) {
    border-color: rgba(244, 67, 54, 0.6) !important;
    background: rgba(244, 67, 54, 0.1) !important;
}

.newsletter-popup-email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.newsletter-popup-email-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
}

.newsletter-popup-submit-btn {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    color: #000000;
    border: none;
    padding: 12px 28px;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.8px;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.newsletter-popup-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
}

.newsletter-popup-submit-btn:hover::before {
    left: 100%;
}

.newsletter-popup-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.newsletter-popup-submit-btn:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(0);
}

.newsletter-popup-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.newsletter-popup-disclaimer {
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    text-align: center;
    direction: rtl;
    margin-top: 5px;
}

.newsletter-popup-disclaimer a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.newsletter-popup-disclaimer a:hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.8);
}

.newsletter-popup-message {
    display: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-family: 'Rubik', 'Assistant', 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    direction: rtl;
    margin-top: 10px;
    width: 100%;
    animation: slideDown 0.3s ease;
}

.newsletter-popup-message.success {
    display: block;
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.newsletter-popup-message.error {
    display: block;
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Decorative Balloons */
.newsletter-popup-balloons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.newsletter-popup-balloon {
    position: absolute;
    width: 60px;
    height: 80px;
    opacity: 0.7;
    animation: floatBalloon 6s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.newsletter-popup-balloon svg {
    width: 100%;
    height: 100%;
}

.newsletter-popup-balloon.balloon-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 5s;
}

.newsletter-popup-balloon.balloon-2 {
    top: 15%;
    right: 8%;
    animation-delay: 0.5s;
    animation-duration: 6s;
}

.newsletter-popup-balloon.balloon-3 {
    top: 8%;
    left: 50%;
    animation-delay: 1s;
    animation-duration: 5.5s;
    animation-name: floatBalloonCenter;
}

@keyframes floatBalloonCenter {
    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) translateY(-10px) rotate(2deg);
    }
    50% {
        transform: translateX(-50%) translateY(-5px) rotate(-2deg);
    }
    75% {
        transform: translateX(-50%) translateY(-12px) rotate(1deg);
    }
}

.newsletter-popup-balloon.balloon-4 {
    bottom: 20%;
    left: 10%;
    animation-delay: 1.5s;
    animation-duration: 6.5s;
}

.newsletter-popup-balloon.balloon-5 {
    bottom: 15%;
    right: 12%;
    animation-delay: 2s;
    animation-duration: 5.8s;
}

.newsletter-popup-balloon.balloon-6 {
    top: 50%;
    right: 5%;
    animation-delay: 2.5s;
    animation-duration: 6.2s;
}

@keyframes floatBalloon {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) translateX(5px) rotate(2deg);
    }
    50% {
        transform: translateY(-5px) translateX(-5px) rotate(-2deg);
    }
    75% {
        transform: translateY(-12px) translateX(3px) rotate(1deg);
    }
}

/* Confetti */
.newsletter-popup-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.newsletter-popup-confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.8;
    border-radius: 2px;
    animation: confettiFall 4s linear infinite;
}

.newsletter-popup-confetti-piece.confetti-1 { left: 10%; animation-delay: 0s; animation-duration: 3s; }
.newsletter-popup-confetti-piece.confetti-2 { left: 20%; animation-delay: 0.3s; animation-duration: 3.5s; }
.newsletter-popup-confetti-piece.confetti-3 { left: 30%; animation-delay: 0.6s; animation-duration: 4s; }
.newsletter-popup-confetti-piece.confetti-4 { left: 40%; animation-delay: 0.9s; animation-duration: 3.2s; }
.newsletter-popup-confetti-piece.confetti-5 { left: 50%; animation-delay: 1.2s; animation-duration: 3.8s; }
.newsletter-popup-confetti-piece.confetti-6 { left: 60%; animation-delay: 1.5s; animation-duration: 3.3s; }
.newsletter-popup-confetti-piece.confetti-7 { left: 70%; animation-delay: 1.8s; animation-duration: 4.2s; }
.newsletter-popup-confetti-piece.confetti-8 { left: 80%; animation-delay: 2.1s; animation-duration: 3.6s; }
.newsletter-popup-confetti-piece.confetti-9 { left: 90%; animation-delay: 2.4s; animation-duration: 3.9s; }
.newsletter-popup-confetti-piece.confetti-10 { left: 15%; animation-delay: 0.2s; animation-duration: 4.1s; }
.newsletter-popup-confetti-piece.confetti-11 { left: 25%; animation-delay: 0.5s; animation-duration: 3.4s; }
.newsletter-popup-confetti-piece.confetti-12 { left: 35%; animation-delay: 0.8s; animation-duration: 3.7s; }
.newsletter-popup-confetti-piece.confetti-13 { left: 45%; animation-delay: 1.1s; animation-duration: 4.3s; }
.newsletter-popup-confetti-piece.confetti-14 { left: 55%; animation-delay: 1.4s; animation-duration: 3.5s; }
.newsletter-popup-confetti-piece.confetti-15 { left: 65%; animation-delay: 1.7s; animation-duration: 4s; }
.newsletter-popup-confetti-piece.confetti-16 { left: 75%; animation-delay: 2s; animation-duration: 3.6s; }
.newsletter-popup-confetti-piece.confetti-17 { left: 85%; animation-delay: 2.3s; animation-duration: 3.8s; }
.newsletter-popup-confetti-piece.confetti-18 { left: 95%; animation-delay: 2.6s; animation-duration: 4.1s; }
.newsletter-popup-confetti-piece.confetti-19 { left: 5%; animation-delay: 0.1s; animation-duration: 3.9s; }
.newsletter-popup-confetti-piece.confetti-20 { left: 95%; animation-delay: 2.7s; animation-duration: 3.7s; }

@keyframes confettiFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(600px) rotate(360deg);
        opacity: 0;
    }
}

/* Ensure content is above decorative elements */
.newsletter-popup-title,
.newsletter-popup-subtitle,
.newsletter-popup-subtitle-small,
.newsletter-popup-form {
    position: relative;
    z-index: 2;
}


/* Mobile Responsive */
@media (max-width: 768px) {
    .newsletter-popup-container {
        max-width: 100%;
        margin: 10px;
        border-radius: 12px;
    }
    
    .newsletter-popup-content {
        border-radius: 12px;
        padding: 40px 20px;
    }

    .newsletter-popup-balloon {
        width: 45px;
        height: 60px;
    }
    
    .newsletter-popup-title {
        font-size: 48px;
        margin-bottom: 15px;
        letter-spacing: 1.5px;
        padding-bottom: 12px;
    }
    
    .newsletter-popup-title::after {
        width: 50px;
    }

    .newsletter-popup-discount {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 12px;
        margin-top: 8px;
        padding: 8px 8px;
        border-width: 1.5px;
        white-space: nowrap;
        overflow: visible;
        line-height: 1.4;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 0.1px;
    }

    .newsletter-popup-subtitle {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .newsletter-popup-subtitle-small {
        font-size: 13px;
        margin-bottom: 30px;
    }

    .newsletter-popup-form {
        max-width: 100%;
        gap: 18px;
    }

    .newsletter-popup-input-wrapper {
        min-height: 50px;
    }

    .newsletter-popup-email-input {
        font-size: 15px;
        padding: 13px 16px;
    }

    .newsletter-popup-submit-btn {
        font-size: 15px;
        padding: 13px 28px;
        min-height: 50px;
    }

    .newsletter-popup-disclaimer {
        font-size: 10px;
    }

    .newsletter-popup-close {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
    }

    .newsletter-popup-close svg {
        width: 20px;
        height: 20px;
    }

    .newsletter-popup-logo {
        margin-bottom: 25px;
        margin-top: 5px;
    }

    .newsletter-popup-logo h1 {
        font-size: 36px;
        letter-spacing: 4px;
    }
}

@media (max-width: 480px) {
    .newsletter-popup-content {
        padding: 35px 20px;
    }

    .newsletter-popup-title {
        font-size: 28px;
    }

    .newsletter-popup-discount {
        font-size: 11px;
        padding: 6px 6px;
        margin-bottom: 10px;
        margin-top: 6px;
        white-space: nowrap;
        overflow: visible;
        letter-spacing: 0px;
        width: 100%;
        box-sizing: border-box;
    }

    .newsletter-popup-subtitle {
        font-size: 14px;
    }

    .newsletter-popup-subtitle-small {
        font-size: 12px;
    }

    .newsletter-popup-logo h1 {
        font-size: 28px;
        letter-spacing: 3px;
    }
}