/* ==========================================================================
   MASTER BAZAR INDIA (MIB) - LUXURY GOLD & OBSIDIAN DESIGN SYSTEM
   Tailored to MIB Brand Identity & Logo Palette (Golden Amber & Obsidian)
   Crafted to Webinorbit Standards (https://webinorbit.com/)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Base Surfaces */
    --bg-primary: #FAF8F5;
    --bg-surface: #FFFFFF;
    --bg-surface-subtle: #F6F3EE;
    --bg-card: #FFFFFF;
    --bg-header: rgba(255, 255, 255, 0.94);
    
    /* Typography Colors */
    --text-primary: #18181B;
    --text-secondary: #3F3F46;
    --text-muted: #71717A;
    --text-light: #A1A1AA;
    --text-white: #FFFFFF;

    /* Brand Accents - MIB Signature Gold & Amber from Logo */
    --brand-dark: #18181B;
    --brand-slate: #27272A;
    --primary: #D97706;              /* MIB Golden Amber */
    --primary-hover: #B45309;        /* Rich Bronze Ochre */
    --primary-dark: #92400E;         /* Deep Sienna */
    --primary-light: #FFFBEB;        /* Champagne Glow */
    --primary-border: #FDE68A;       /* Soft Gold Border */
    
    --primary-gradient: linear-gradient(135deg, #18181B 0%, #27272A 100%);
    --gold-gradient: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    --gold-light-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --accent-gradient: linear-gradient(135deg, #D97706 0%, #EA580C 100%);
    
    /* Secondary Accents */
    --accent-amber: #F59E0B;
    --accent-coral: #C2410C;
    --accent-coral-light: #FFEDD5;

    /* Status Colors */
    --success: #10B981;
    --success-bg: #ECFDF5;
    --danger: #EF4444;
    --danger-bg: #FEF2F2;

    /* Borders & Dividers */
    --border-color: #E4E0D7;
    --border-subtle: #F0EDE6;
    --border-focus: #D97706;

    /* Elevation & Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(24, 24, 27, 0.04);
    --shadow-sm: 0 2px 8px 0 rgba(24, 24, 27, 0.04);
    --shadow-md: 0 8px 24px -4px rgba(24, 24, 27, 0.06), 0 2px 6px -1px rgba(24, 24, 27, 0.02);
    --shadow-lg: 0 16px 36px -6px rgba(24, 24, 27, 0.08), 0 4px 12px -2px rgba(24, 24, 27, 0.03);
    --shadow-hover: 0 20px 40px -8px rgba(217, 119, 6, 0.22), 0 8px 16px -4px rgba(24, 24, 27, 0.04);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Motion & Font */
    --transition-fast: 0.15s ease;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ================= GLOBAL RESETS & STYLING ================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ================= AUTH MODAL OVERLAYS ================= */
#logout-toast-overlay,
#login-toast-overlay,
#signup-toast-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(24, 24, 27, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
}

#logout-toast-overlay.show,
#login-toast-overlay.show,
#signup-toast-overlay.show {
    display: flex !important;
}

#logout-toast-overlay .success-msg,
#login-toast-overlay .success-msg,
#signup-toast-overlay .success-msg {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-color) !important;
    padding: 40px 50px !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    max-width: 440px !important;
    text-align: center !important;
    animation: zoomIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

#logout-toast-overlay .success-msg ion-icon,
#login-toast-overlay .success-msg ion-icon,
#signup-toast-overlay .success-msg ion-icon {
    font-size: 52px !important;
    color: var(--primary) !important;
    margin-bottom: 16px !important;
}

#logout-toast-overlay .success-msg h4,
#login-toast-overlay .success-msg h4,
#signup-toast-overlay .success-msg h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

/* ================= FLOATING CART & ACTION NOTIFICATION PILLS ================= */
.custom-toast,
#cart-toast-overlay,
#error-toast-overlay,
#toast-overlay,
.toast-overlay {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-30px) !important;
    background: #18181B !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    min-height: unset !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.custom-toast.show,
#cart-toast-overlay.show,
#error-toast-overlay.show,
#toast-overlay.show,
.toast-overlay.show {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

.custom-toast ion-icon,
#cart-toast-overlay ion-icon,
#error-toast-overlay ion-icon,
#toast-overlay ion-icon,
.toast-overlay ion-icon {
    font-size: 20px !important;
    color: var(--primary) !important;
    margin: 0 !important;
}

.custom-toast .toast-card,
#cart-toast-overlay .toast-card,
#error-toast-overlay .toast-card,
#toast-overlay .success-msg,
.toast-overlay .success-msg {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    color: #FFFFFF !important;
}

.custom-toast .toast-card span,
#cart-toast-overlay span,
#error-toast-overlay span,
#toast-overlay h4,
.toast-overlay h4 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
}

/* ================= MODERN REDESIGNED LUXURY NAVBAR ================= */
header#header {
    background: var(--bg-header) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    box-shadow: 0 4px 20px -2px rgba(24, 24, 27, 0.03) !important;
}

.header_top {
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) !important;
    align-items: center !important;
    padding: 14px 8% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    background: transparent !important;
    height: 78px !important;
    gap: 20px !important;
}

.header_social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.header_social a {
    color: var(--text-muted) !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--radius-full) !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition) !important;
    flex-shrink: 0 !important;
}

.header_logo_link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}

.header_social a:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.15) !important;
}

.header_logo_link #logo,
.nav-menu-logo {
    height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: transform var(--transition) !important;
}

.header_logo_link:hover #logo {
    transform: scale(1.04) !important;
}

.header_actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
}

.header_actions a {
    color: var(--text-secondary) !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-full) !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.header_top ion-icon,
.header_social ion-icon,
.header_actions ion-icon,
.icon-cart ion-icon,
.menu-toggle ion-icon {
    margin: 0 !important;
    display: block !important;
}

.header_actions a:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-sm) !important;
}

#display_logout a {
    width: auto !important;
    height: auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
    padding: 8px 18px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid #FECACA !important;
}

#display_logout a:hover {
    background: #FEE2E2 !important;
}

.icon-cart {
    position: relative !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-full) !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition) !important;
    color: var(--text-primary) !important;
    font-size: 20px !important;
}

.icon-cart:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15) !important;
}

#cart-counter {
    position: absolute !important;
    top: -6px !important;
    right: -5px !important;
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: var(--radius-full) !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4) !important;
    box-sizing: border-box !important;
}

/* Desktop-only: show main nav, hide hamburger */
.menu-toggle {
    display: none !important;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.menu-toggle ion-icon,
.mobile-menu-toggle ion-icon {
    pointer-events: none !important;
}
.menu-toggle .menu-close-icon,
.mobile-menu-toggle .menu-close-icon {
    display: none !important;
}
.menu-toggle .menu-open-icon,
.mobile-menu-toggle .menu-open-icon {
    display: block !important;
}
body.nav-open .menu-toggle .menu-open-icon,
header.nav-active .menu-toggle .menu-open-icon,
#header.nav-active .menu-toggle .menu-open-icon {
    display: none !important;
}
body.nav-open .menu-toggle .menu-close-icon,
header.nav-active .menu-toggle .menu-close-icon,
#header.nav-active .menu-toggle .menu-close-icon {
    display: block !important;
}

nav.main-nav {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 6px 0 !important;
}

nav.main-nav ul {
    display: flex !important;
    justify-content: center !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

nav.main-nav ul li a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition) !important;
    position: relative !important;
}

nav.main-nav ul li a:hover,
nav.main-nav ul li a.active {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    font-weight: 700 !important;
}

/* ================= OFF-CANVAS MOBILE MENU ================= */

/* Dark overlay backdrop behind the drawer */
.nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    pointer-events: none !important;
}
.nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}
body.nav-open {
    overflow: hidden !important;
    touch-action: none !important;
}

body.nav-open #header,
#header.nav-active {
    z-index: 100000 !important;
}

body.nav-open .header_actions .menu-toggle,
#header.nav-active .header_actions .menu-toggle {
    display: none !important;
}

.nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--bg-surface) !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.nav-menu.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    left: auto !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

.nav-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 20px !important;
}

.nav-menu-close {
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-color) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
}
.nav-menu-close ion-icon {
    pointer-events: none !important;
}

.nav-menu-close:hover {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
    border-color: #FECACA !important;
    transform: rotate(90deg) !important;
}

.nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.nav-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-md) !important;
    display: block !important;
    transition: all var(--transition) !important;
}

.nav-link:hover,
.nav-link.active {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border-left: 3px solid var(--primary) !important;
    padding-left: 13px !important;
}

.nav-menu-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--border-color) !important;
}

.nav-action-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition) !important;
}
.nav-action-link:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
}
.nav-action-link ion-icon {
    font-size: 20px !important;
    color: var(--primary) !important;
}

.nav-menu-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-color) !important;
}
.nav-menu-social a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-color) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-secondary) !important;
    font-size: 18px !important;
    transition: all var(--transition) !important;
}
.nav-menu-social a:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
}

/* ================= SHOPPING CART DRAWER ================= */
.cart-section {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 400px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-color: var(--bg-surface) !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 99999 !important;
}

body.showCart .cart-section {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==================== INTERNATIONAL LUXURY HERO SLIDER ==================== */
.slider,
#heroSlider {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 600px !important;
    max-height: 82vh !important;
    background: #141416 !important;
    display: block !important;
}

.slides {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.slider .slide-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: #141416 !important;
}

.slider .slide-content.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Right-anchored photo on desktop — model sits clearly in right 60% */
.slider .slide-content picture,
.slider .slide-content img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 62% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    z-index: 1 !important;
}

.slider .slide-content picture img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.slider .slide-img-1 { object-position: center 10% !important; }
.slider .slide-img-2 { object-position: center 5% !important; }
.slider .slide-img-3 { object-position: center top !important; }

/* Seamless blend from #141416 dark left zone into the photo on the right */
.slider .slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        90deg,
        #141416 0%,
        #141416 38%,
        rgba(20, 20, 22, 0.92) 48%,
        rgba(20, 20, 22, 0.4) 64%,
        rgba(20, 20, 22, 0.0) 80%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Left-aligned Editorial Typography — perfectly positioned in dark left zone */
.slider .text {
    position: absolute !important;
    left: 8% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    max-width: 480px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    animation: editorialFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes editorialFadeIn {
    from { opacity: 0; transform: translate(-10px, -50%); }
    to   { opacity: 1; transform: translate(0, -50%);      }
}

.slide-subtitle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #D97706 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.24em !important;
    margin-bottom: 14px !important;
}

.slider .text h2 {
    font-size: clamp(28px, 3.2vw, 46px) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.12 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

.slide-desc {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 0 26px 0 !important;
    line-height: 1.6 !important;
    max-width: 400px !important;
}

.slider .shop-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    padding: 13px 28px !important;
    border-radius: 2px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    width: auto !important;
    margin-top: 0 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.slider .shop-btn:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45) !important;
}

.slider .shop-btn ion-icon {
    font-size: 16px !important;
    transition: transform 0.25s ease !important;
}
.slider .shop-btn:hover ion-icon { transform: translateX(4px) !important; }

/* Minimalist Navigation Arrows */
.slider .navigation {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.slider .prev,
.slider .next {
    pointer-events: auto !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

.slider .prev:hover,
.slider .next:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    transform: scale(1.06) !important;
}

.slider .prev ion-icon,
.slider .next ion-icon { pointer-events: none !important; }

/* Slim luxury progress bars — bottom left */
.slider-dots {
    position: absolute !important;
    bottom: 28px !important;
    left: 7% !important;
    right: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.slider-dots .dot {
    width: 22px !important;
    height: 2.5px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.slider-dots .dot.active {
    width: 44px !important;
    background: #D97706 !important;
}

/* ======== MOBILE HERO SLIDER (≤ 900px) ======== */
@media (max-width: 900px) {
    .slider,
    #heroSlider {
        height: 100svh !important;
        max-height: 680px !important;
        min-height: 500px !important;
        background: #1A1A1A !important;
        display: block !important;
    }

    .hero_for_phone {
        display: none !important;
    }

    .slider .slide-content {
        justify-content: flex-start !important;
    }

    /* Full-bleed on mobile — explicit longhand for iOS Safari compat */
    .slider .slide-content picture {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .slider .slide-content picture img,
    .slider .slide-content > img {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Mobile-specific object positioning per slide */
    .slider .slide-img-1 { object-position: center top !important; }
    .slider .slide-img-2 { object-position: center top !important; }
    .slider .slide-img-3 { object-position: right top !important; }

    /* Bottom-up gradient — model face/torso crystal clear at top, text ultra-legible at bottom */
    .slider .slide-overlay {
        background: linear-gradient(
            180deg,
            rgba(20, 20, 22, 0.0) 0%,
            rgba(20, 20, 22, 0.0) 25%,
            rgba(20, 20, 22, 0.35) 48%,
            rgba(20, 20, 22, 0.85) 72%,
            rgba(20, 20, 22, 0.98) 95%,
            #141416 100%
        ) !important;
    }

    /* Text firmly pinned at bottom on dark gradient zone */
    .slider .text {
        position: absolute !important;
        top: auto !important;
        bottom: 36px !important;
        left: 20px !important;
        right: 20px !important;
        transform: none !important;
        max-width: none !important;
        padding: 0 !important;
        background: transparent !important;
        color: #FFFFFF !important;
        text-align: left !important;
        box-sizing: border-box !important;
        z-index: 3 !important;
        animation: mobileSlideUp 0.6s ease-out forwards !important;
    }

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

    .slide-subtitle {
        display: inline-flex !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.22em !important;
        color: #F59E0B !important;
        margin-bottom: 8px !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important;
    }

    .slider .text h2 {
        font-size: clamp(22px, 6vw, 29px) !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        margin: 0 0 8px 0 !important;
        color: #FFFFFF !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.6) !important;
        letter-spacing: -0.015em !important;
    }

    .slide-desc {
        font-size: 13px !important;
        margin: 0 0 16px 0 !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-width: 90% !important;
    }

    /* High-contrast luxury solid CTA button on mobile */
    .slider .shop-btn {
        font-size: 11.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.12em !important;
        padding: 12px 24px !important;
        border-radius: 3px !important;
        background: #FFFFFF !important;
        color: #141416 !important;
        border: none !important;
        width: fit-content !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
        text-shadow: none !important;
    }

    .slider .shop-btn:hover,
    .slider .shop-btn:active {
        background: #D97706 !important;
        color: #FFFFFF !important;
    }

    /* Hide desktop arrows on mobile — swipe is enough */
    .slider .navigation {
        display: none !important;
    }

    /* Dots — bottom right, subtle */
    .slider-dots {
        bottom: 28px !important;
        left: auto !important;
        right: 20px !important;
        gap: 6px !important;
    }

    .slider-dots .dot {
        width: 14px !important;
        height: 2px !important;
        background: rgba(255, 255, 255, 0.35) !important;
    }

    .slider-dots .dot.active {
        width: 28px !important;
        background: #D97706 !important;
    }
}

/* Small phones (≤ 480px) extra tuning */
@media (max-width: 480px) {
    .slider,
    #heroSlider {
        height: 100svh !important;
        max-height: 640px !important;
    }

    .slider .text h2 {
        font-size: clamp(20px, 7vw, 24px) !important;
    }

    .slide-desc {
        font-size: 11.5px !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* ================= 1. SHOP & WHOLESALE PAGE CATALOG ================= */
.product-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 24px 8% 18px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.product-header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    width: 100% !important;
}

.sortBy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

.sortBy select,
#sort {
    width: auto !important;
    min-width: 180px !important;
    padding: 10px 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-xs) !important;
}

.sortBy select:focus,
#sort:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

#productCount {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    white-space: nowrap !important;
    box-shadow: var(--shadow-xs) !important;
}

/* 2-Column Catalog ONLY on pages with .aside */
main > .container:has(.aside:not([style*="display: none"])) {
    display: grid !important;
    grid-template-columns: 270px 1fr !important;
    gap: 36px !important;
    padding: 36px 8% 70px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    width: 100% !important;
    align-items: start !important;
}

.aside {
    background: var(--bg-surface) !important;
    padding: 24px !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: 100px !important;
}

.aside h2,
.aside h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-primary) !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.shop_categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.categories_link {
    padding: 10px 14px !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all var(--transition) !important;
    cursor: pointer !important;
    background: transparent !important;
}

.categories_link:hover {
    background: var(--bg-surface-subtle) !important;
    color: var(--primary) !important;
    transform: translateX(3px) !important;
}

.categories_link.active {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--primary) !important;
}

/* ================= PRODUCT CARDS & GRID ================= */
.products,
.products-section {
    width: 100% !important;
}

/* Homepage product grid + shop grid + wholesale grid */
.products,
.products .content,
.top_products .products,
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

.product-card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden !important;
    transition: all var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--primary-border) !important;
}

.product-card .card-img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    background: var(--bg-surface-subtle) !important;
}

.product-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.product-card:hover .card-img img {
    transform: scale(1.06) !important;
}

.product-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: var(--brand-dark) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-full) !important;
    z-index: 5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 12px rgba(24, 24, 27, 0.25) !important;
}

.product-badge.wholesale {
    background: var(--gold-gradient) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

.price-moq-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
    gap: 8px !important;
}

.unit-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.moq-pill {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border: 1px solid var(--primary-border) !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-full) !important;
    white-space: nowrap !important;
}

.wholesale-moq-banner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--primary-light) !important;
    border: 1px solid var(--primary-border) !important;
    padding: 12px 18px !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-size: 13.5px !important;
    margin: 6px 0 10px !important;
}

.wholesale-moq-banner ion-icon {
    font-size: 20px !important;
    color: var(--primary) !important;
    flex-shrink: 0 !important;
}

.wholesale-moq-banner strong {
    color: var(--primary-dark) !important;
}

.product-card .addToCart {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--brand-dark) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    box-shadow: 0 8px 20px rgba(24, 24, 27, 0.3) !important;
    transition: all var(--transition) !important;
    z-index: 5 !important;
    cursor: pointer !important;
    border: none !important;
}

.product-card .addToCart:hover {
    background: var(--primary) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4) !important;
}

.product-card .card-info {
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
}

.product-card .product-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.product-card .product-name:hover {
    color: var(--primary) !important;
}

.product-card .product-price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--primary-dark) !important;
    letter-spacing: -0.02em !important;
}

/* ================= 2. PRODUCT DETAILS PAGE ================= */
.productDetails {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr !important;
    gap: 50px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 40px auto 80px !important;
    padding: 44px !important;
    background: var(--bg-surface) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.productDetails .images {
    width: 100% !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-color) !important;
}

.productDetails .images img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.productDetails .images:hover img {
    transform: scale(1.03) !important;
}

.productDetails .details {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    justify-content: flex-start !important;
}

.productDetails .details .category_name {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--primary-border) !important;
    width: fit-content !important;
}

.productDetails .details .product_name {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.productDetails .details .product_price {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--primary-dark) !important;
    letter-spacing: -0.02em !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin: 0 !important;
}

.productDetails .details .product_price::after {
    display: none !important;
}

.product_des {
    font-size: 15px !important;
    color: var(--text-secondary) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.productDetails .buttons {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.productDetails .counts {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface-subtle) !important;
    height: 52px !important;
    overflow: hidden !important;
}

.productDetails .counts_btns {
    background: transparent !important;
    border: none !important;
    padding: 0 16px !important;
    height: 100% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--transition-fast) !important;
}

.productDetails .counts_btns:hover {
    background: #E4E0D7 !important;
    color: var(--text-primary) !important;
}

.productDetails .product_count {
    width: 48px !important;
    border: none !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    outline: none !important;
}

#btn_add {
    flex: 1 !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 24px -4px rgba(217, 119, 6, 0.35) !important;
    transition: all var(--transition) !important;
    border: none !important;
    cursor: pointer !important;
}

#btn_add:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px -4px rgba(217, 119, 6, 0.45) !important;
}

/* ================= 3. WHOLESALE ACCESS / LOCK SCREEN ================= */
.lock-wrapper,
.lock-container {
    width: 100% !important;
    min-height: 65vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 60px 20px 100px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#shop-content:has(.lock-wrapper),
.container:has(.lock-wrapper),
main:has(.lock-wrapper) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.lock-box {
    background: #FFFFFF !important;
    padding: 56px 44px !important;
    border-radius: var(--radius-xl) !important;
    text-align: center !important;
    max-width: 460px !important;
    width: 100% !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-color) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    position: relative !important;
}

.lock-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 5px !important;
    background: var(--gold-gradient) !important;
    border-top-left-radius: var(--radius-xl) !important;
    border-top-right-radius: var(--radius-xl) !important;
}

.lock-icon {
    font-size: 3rem !important;
    margin-bottom: 24px !important;
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border: 1px solid var(--primary-border) !important;
    width: 88px !important;
    height: 88px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
}

.lock-title {
    font-size: 28px !important;
    margin-bottom: 12px !important;
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
}

.lock-text {
    color: var(--text-muted) !important;
    margin-bottom: 30px !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
    padding: 0 10px !important;
}

.lock-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
}

.lock-btns .btn-primary {
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    padding: 15px 24px !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all var(--transition) !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3) !important;
}

.lock-btns .btn-primary:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(217, 119, 6, 0.45) !important;
}

.lock-btns .btn-outline {
    background: var(--bg-surface-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 14px 24px !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all var(--transition) !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lock-btns .btn-outline:hover {
    background: #E4E0D7 !important;
    transform: translateY(-2px) !important;
}

.lock-icon {
    font-size: 40px !important;
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    width: 84px !important;
    height: 84px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    margin-bottom: 24px !important;
    border: 1px solid var(--primary-border) !important;
}

.lock-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
}

.lock-text {
    font-size: 15px !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

.lock-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.lock-btns a,
.lock-btns button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 15px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition) !important;
    cursor: pointer !important;
}

.lock-btns .btn-primary {
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3) !important;
}

.lock-btns .btn-primary:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
}

.lock-btns .btn-secondary {
    background: var(--bg-surface-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.lock-btns .btn-secondary:hover {
    background: #E4E0D7 !important;
}

/* ================= 4. CART & CHECKOUT PAGES ================= */
.cart_page .container,
.checkout_page .container {
    max-width: 1200px !important;
    margin: 40px auto 80px !important;
    padding: 0 4% !important;
}

.cart_page h1,
.checkout_page h1 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 36px !important;
    text-align: center !important;
}

.cart_page .content {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

.checkout_page .content {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

.order_summary_wrapper,
.billing_details,
.order_review {
    background: var(--bg-surface) !important;
    padding: 32px !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.checkout_page .checkout,
.cart_page .checkout,
.btn-submit-order {
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px -4px rgba(217, 119, 6, 0.35) !important;
}

.checkout_page .checkout:hover,
.cart_page .checkout:hover,
.btn-submit-order:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
}

/* ================= 5. AUTH FORMS (LOGIN / SIGNUP) ================= */
#login {
    min-height: calc(100vh - 180px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 60px 20px !important;
    background: var(--bg-primary) !important;
}

#login .container {
    display: block !important;
    max-width: 460px !important;
    width: 100% !important;
    background: var(--bg-surface) !important;
    padding: 48px 40px !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
    text-align: left !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.auth-header {
    text-align: center !important;
    margin-bottom: 32px !important;
}

#login h1.section-header {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

.auth-subtitle {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: center !important;
}

#form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
}

.form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

#form label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}

#form input {
    height: 52px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-surface-subtle) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    padding: 0 18px !important;
    transition: all var(--transition) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
}

#form input:focus {
    border-color: var(--primary) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18) !important;
    outline: none !important;
}

#form .alert {
    display: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--danger) !important;
    margin-top: 4px !important;
}

#form .alert.show {
    display: block !important;
}

#form .submit {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 10px !important;
    width: 100% !important;
    align-items: center !important;
}

#form .submit button,
.btn-login {
    height: 52px !important;
    width: 100% !important;
    border-radius: var(--radius-md) !important;
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 10px 24px -4px rgba(217, 119, 6, 0.35) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    letter-spacing: 0.02em !important;
}

#form .submit button:hover,
.btn-login:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px -4px rgba(217, 119, 6, 0.45) !important;
}

#form .submit a#signup,
.auth-switch-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    text-align: center !important;
    transition: color var(--transition) !important;
}

#form .submit a#signup:hover,
.auth-switch-link:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline !important;
}

/* ================= 6. ABOUT US LUXURY EXPERIENCE ================= */
.about-hero {
    position: relative !important;
    min-height: 440px !important;
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.88) 0%, rgba(39, 39, 42, 0.9) 100%), url('../images/background/banner1.png') center/cover no-repeat !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 90px 8% !important;
    color: #FFFFFF !important;
}

.about-hero-content {
    max-width: 820px !important;
    margin: 0 auto !important;
}

.about-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(217, 119, 6, 0.2) !important;
    border: 1px solid rgba(217, 119, 6, 0.4) !important;
    color: #FDE68A !important;
    padding: 8px 18px !important;
    border-radius: var(--radius-full) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    backdrop-filter: blur(8px) !important;
}

.about-hero h1 {
    font-size: clamp(32px, 4.5vw, 48px) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 18px !important;
}

.about-hero p {
    font-size: 17px !important;
    color: #CBD5E1 !important;
    line-height: 1.7 !important;
    margin: 0 auto !important;
}

/* Stats Counter Row */
.about-stats {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 40px 8% !important;
    box-shadow: var(--shadow-sm) !important;
}

.about-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.stat-item h3 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 6px 0 !important;
}

.stat-item p {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
}

/* Story Section */
.about-story-section {
    padding: 80px 8% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

.about-story-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.about-image-wrapper {
    position: relative !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-color) !important;
}

.about-image-wrapper img {
    width: 100% !important;
    height: 480px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s ease !important;
}

.about-image-wrapper:hover img {
    transform: scale(1.04) !important;
}

.about-image-badge {
    position: absolute !important;
    bottom: 24px !important;
    left: 24px !important;
    background: rgba(24, 24, 27, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    color: #FFFFFF !important;
    padding: 12px 20px !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(217, 119, 6, 0.4) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.about-story-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.section-eyebrow {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--primary) !important;
    margin: 0 !important;
}

.about-story-content h2 {
    font-size: clamp(28px, 3.5vw, 38px) !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.about-story-content p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

.about-story-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.feature-point {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.feature-point ion-icon {
    font-size: 20px !important;
    color: var(--primary) !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* Values Section */
.about-values-section {
    background: var(--bg-surface-subtle) !important;
    padding: 90px 8% !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.about-section-header {
    text-align: center !important;
    max-width: 680px !important;
    margin: 0 auto 56px !important;
}

.about-section-header h2 {
    font-size: clamp(28px, 3.5vw, 38px) !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    margin: 8px 0 14px !important;
}

.about-section-header p {
    font-size: 16px !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.about-values-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 28px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

.value-card {
    background: #FFFFFF !important;
    padding: 36px 30px !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.value-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--primary-border) !important;
}

.value-icon-box {
    width: 60px !important;
    height: 60px !important;
    border-radius: var(--radius-lg) !important;
    background: var(--primary-light) !important;
    border: 1px solid var(--primary-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    color: var(--primary) !important;
    margin-bottom: 20px !important;
}

.value-card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 0 10px 0 !important;
}

.value-card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* Wholesale Partnership CTA Banner */
.about-cta-section {
    padding: 80px 8% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

.about-cta-card {
    background: linear-gradient(135deg, #18181B 0%, #27272A 100%) !important;
    border-radius: var(--radius-xl) !important;
    padding: 60px 48px !important;
    color: #FFFFFF !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

.about-cta-text {
    max-width: 600px !important;
}

.about-cta-text h3 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px 0 !important;
}

.about-cta-text p {
    font-size: 16px !important;
    color: #94A3B8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.about-cta-actions {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.about-cta-actions .btn-primary {
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    padding: 15px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all var(--transition) !important;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3) !important;
}

.about-cta-actions .btn-primary:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.45) !important;
}

.about-cta-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 15px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    backdrop-filter: blur(10px) !important;
    transition: all var(--transition) !important;
}

.about-cta-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-2px) !important;
}

/* ================= NEWSLETTER SECTION ================= */
.news {
    background: linear-gradient(135deg, #18181B 0%, #27272A 100%) !important;
    color: #FFFFFF !important;
    padding: 50px 8% !important;
    margin: 50px 0 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 32px !important;
    flex-wrap: wrap !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(217, 119, 6, 0.3) !important;
    height: auto !important;
    min-height: unset !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

.news-text {
    max-width: 540px !important;
    flex: 1 1 300px !important;
}

.news-text h4 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.02em !important;
}

.news-text p {
    font-size: 15px !important;
    color: #94A3B8 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.Subscribe-form {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 6px !important;
    border-radius: var(--radius-full) !important;
    backdrop-filter: blur(10px) !important;
    max-width: 460px !important;
    width: 100% !important;
}

.Subscribe-form input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 10px 20px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-family: inherit !important;
}

.Subscribe-form input::placeholder {
    color: #94A3B8 !important;
}

.Subscribe-form button {
    background: var(--gold-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-full) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all var(--transition) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important;
}

.Subscribe-form button:hover {
    background: var(--primary-hover) !important;
    transform: translateX(2px) !important;
}

/* ================= MODERN WEBINORBIT FOOTER ================= */
footer.footer {
    background: #FFFFFF !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 70px 8% 30px !important;
    color: var(--text-secondary) !important;
}

.footer-top {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important;
    gap: 48px !important;
    max-width: 1440px !important;
    margin: 0 auto 50px !important;
}

.footer-logo {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.footer-logo img {
    height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
}

.footer-logo p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    max-width: 320px !important;
}

.footer-social-links {
    display: flex !important;
    gap: 12px !important;
    margin-top: 6px !important;
}

.footer-social-links a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-secondary) !important;
    font-size: 18px !important;
    transition: all var(--transition) !important;
}

.footer-social-links a:hover {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2) !important;
}

.footer-column h4,
.footer-list .list h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 20px 0 !important;
}

.footer-column ul,
.footer-list .list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.footer-column ul li a,
.footer-list .list ul li a {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    transition: color var(--transition) !important;
    display: inline-block !important;
}

.footer-column ul li a:hover,
.footer-list .list ul li a:hover {
    color: var(--primary) !important;
    transform: translateX(2px) !important;
}

.footer-bottom {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--border-subtle) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.footer-company-name {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

.webinorbit-credit {
    font-weight: 700 !important;
    color: var(--primary) !important;
    transition: color var(--transition) !important;
}

nav.main-nav ul li a:hover,
nav.main-nav ul li a.active {
    color: var(--primary-dark) !important;
    background: var(--primary-light) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px var(--primary-border), 0 2px 8px rgba(217, 119, 6, 0.15) !important;
}

.nav-link:hover,
.nav-link.active {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--primary) !important;
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE SYSTEM (Mobile, Tablet, Desktop & Ultra-wide)
   ========================================================================== */

/* Ultra-wide Screens (> 1440px) */
@media (min-width: 1441px) {
    .container,
    .products-page,
    .footer-top,
    .footer-bottom,
    header.container {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Standard Desktops (≥ 901px) */
@media (min-width: 901px) {
    .menu-toggle {
        display: none !important;
    }
    .nav-menu,
    .nav-menu.active {
        display: none !important;
        transform: translateX(105%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .nav-overlay,
    .nav-overlay.active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    nav.main-nav {
        display: block !important;
    }
}

/* Tablet Landscape & Medium Screens (901px - 1100px) */
@media (max-width: 1100px) and (min-width: 901px) {
    main > .container:has(.aside:not([style*="display: none"])) {
        grid-template-columns: 220px 1fr !important;
        gap: 24px !important;
        padding: 24px 4% 50px !important;
    }
    .products .content {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Tablet Portrait & Small Laptops (≤ 900px): Show hamburger, hide desktop nav */
@media (max-width: 900px) {
    header.container,
    #header {
        padding: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: var(--bg-surface) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    .header_top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
        height: 60px !important;
        padding: 8px 16px !important;
        box-sizing: border-box !important;
    }
    .header_social {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    nav.main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    .header_actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    /* Hide desktop-only login/logout on small screens */
    #display_login,
    #display_logout {
        display: none !important;
    }
    .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: var(--radius-full) !important;
        background: var(--bg-surface-subtle) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        transition: all var(--transition) !important;
        padding: 0 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .nav-menu {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        left: auto !important;
        padding: 18px 16px !important;
        transform: translateX(105%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .nav-menu.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        right: 0 !important;
        left: auto !important;
    }
    .menu-toggle:hover,
    .menu-toggle:active {
        background: var(--primary-light) !important;
        color: var(--primary) !important;
        border-color: var(--primary) !important;
    }
    
    main > .container {
        padding: 16px !important;
    }
    main > .container:has(.aside:not([style*="display: none"])) {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }
    .aside {
        position: static !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    .shop_categories {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .categories_link {
        border-radius: var(--radius-full) !important;
        border: 1px solid var(--border-color) !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
    .products,
    .products .content,
    .top_products .products,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    
    /* Product Details Stacked Layout */
    .productDetails {
        display: flex !important;
        flex-direction: column !important;
        padding: 24px 18px !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px auto !important;
        border-radius: var(--radius-lg) !important;
    }
    .productDetails .images {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
    }
    .productDetails .images img,
    #product_image {
        width: 100% !important;
        height: 380px !important;
        max-height: 420px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: var(--radius-md) !important;
    }
    .productDetails .details {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    .productDetails .details .product_name {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    .productDetails .details .product_price {
        font-size: 22px !important;
    }
    .productDetails .buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .productDetails .buttons .counts {
        width: 100% !important;
        justify-content: space-between !important;
        height: 48px !important;
    }
    .productDetails .buttons #btn_add {
        width: 100% !important;
        height: 48px !important;
    }
    
    .cart_page .content,
    .checkout_page .content {
        grid-template-columns: 1fr !important;
    }
    .about-story-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .about-principles-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
}

/* Mobile Devices (< 640px) */
@media (max-width: 640px) {
    body {
        font-size: 14px !important;
    }
    header.container,
    #header {
        padding: 0 !important;
    }
    .header_top {
        height: 56px !important;
        padding: 6px 12px !important;
    }
    .header_logo_link #logo {
        height: 36px !important;
        max-width: 120px !important;
    }
    .header_actions a,
    .icon-cart,
    .menu-toggle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 18px !important;
    }
    #cart-counter {
        min-width: 17px !important;
        height: 17px !important;
        font-size: 10px !important;
        top: -5px !important;
        right: -4px !important;
    }
    
    /* 2-Column Dense Mobile Catalog (Homepage + Shop + Wholesale) */
    .products .content,
    .top_products .products,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-card {
        border-radius: var(--radius-md) !important;
    }
    .product-card .card-img {
        height: 190px !important;
    }
    .product-card .card-info {
        padding: 10px !important;
    }
    .product-card .product-name {
        font-size: 13px !important;
        height: 34px !important;
        line-height: 1.3 !important;
    }
    .product-card .product-price {
        font-size: 14px !important;
    }
    .product-card .product-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    .product-card .addToCart {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
        bottom: 8px !important;
        right: 8px !important;
    }
    .price-moq-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .moq-pill {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* Product Details Mobile Hero Image & Content */
    .productDetails {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        border-radius: var(--radius-lg) !important;
        margin: 12px auto !important;
        gap: 20px !important;
    }
    .productDetails .images {
        width: 100% !important;
        height: 340px !important;
    }
    .productDetails .images img,
    #product_image {
        width: 100% !important;
        height: 340px !important;
        max-height: 340px !important;
        object-fit: cover !important;
        border-radius: var(--radius-md) !important;
    }
    .productDetails .details .product_name {
        font-size: 22px !important;
    }
    .productDetails .details .product_price {
        font-size: 20px !important;
    }
    .productDetails .buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .productDetails .buttons .counts {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .productDetails .buttons #btn_add {
        width: 100% !important;
        padding: 14px !important;
    }

    /* Lock Screen Card Mobile */
    .lock-wrapper,
    .lock-container {
        padding: 30px 14px 60px !important;
        min-height: 60vh !important;
    }
    .lock-box {
        padding: 36px 20px !important;
        border-radius: var(--radius-lg) !important;
    }
    .lock-icon {
        width: 72px !important;
        height: 72px !important;
        font-size: 2.4rem !important;
        margin-bottom: 18px !important;
    }
    .lock-title {
        font-size: 22px !important;
    }
    .lock-text {
        font-size: 14px !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
    }
    
    /* Auth Form Mobile */
    .auth-card {
        padding: 32px 20px !important;
        border-radius: var(--radius-lg) !important;
    }
    .auth-title {
        font-size: 24px !important;
    }
    
    /* About & Stats Mobile */
    .about-hero {
        padding: 50px 16px 36px !important;
    }
    .about-hero h1 {
        font-size: 28px !important;
    }
    .about-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .about-stat-card {
        padding: 16px 12px !important;
    }
    .about-stat-number {
        font-size: 28px !important;
    }
    .about-principles-grid {
        grid-template-columns: 1fr !important;
    }
    .about-cta {
        padding: 40px 20px !important;
    }
    .about-cta-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    .about-cta-actions .btn-primary,
    .about-cta-actions .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Newsletter & Footer Mobile */
    .news {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 36px 16px !important;
        gap: 20px !important;
        margin-top: 36px !important;
        box-sizing: border-box !important;
    }
    .news-text {
        max-width: 100% !important;
        text-align: center !important;
    }
    .news-text h4 {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .news-text p {
        font-size: 13.5px !important;
    }
    .Subscribe-form {
        max-width: 100% !important;
        flex-direction: column !important;
        border-radius: var(--radius-lg) !important;
        padding: 8px !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
    .Subscribe-form input {
        width: 100% !important;
        padding: 12px 14px !important;
        text-align: center !important;
        font-size: 14px !important;
    }
    .Subscribe-form button {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        border-radius: var(--radius-md) !important;
    }
    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        margin-bottom: 32px !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    
    /* Cart Drawer Mobile */
    .cart-section {
        width: 100% !important;
        max-width: 100% !important;
    }
}