/* ============================================
   الركن اليماني - ENHANCEMENTS & DARK MODE
   Loads LAST — overrides main design system
   ============================================ */

/* ── Dark Mode Variables ── */
:root {
    --bg-dark: #2E1A0B;
    --surface-dark: #3E230F;
    --card-dark: #4F2D15;
    --card-hover-dark: #543012;
    --border-dark: rgba(197, 156, 109, 0.08);
    --border-hover-dark: rgba(197, 156, 109, 0.15);
    --text-dark: #E8DCC8;
    --text-secondary-dark: #A09487;
    --text-muted-dark: rgba(255,255,255,0.4);
}

/* ── Dark Mode Toggle (Header) ── */
.dark-mode-toggle { display: none; }

.dark-mode-toggle-header {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--parchment);
    border: 1px solid var(--sand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--amber-500);
    transition: all 0.3s var(--ease-out);
    margin-right: 4px;
    position: relative;
    overflow: hidden;
}
.dark-mode-toggle-header:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}
.dark-mode-toggle-header .fa-sun { display: none; }
.dark-mode-toggle-header .fa-moon { display: block; }

/* ── Cart Hover Dropdown ── */
.header-cart-wrap { position: relative; }
.cart-hover-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(28, 20, 16, 0.10);
    border: 1px solid var(--sand);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s var(--ease-out);
    z-index: 1000;
    overflow: hidden;
}
.header-cart-wrap:hover .cart-hover-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}
.cart-hover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sand);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--walnut);
}
.cart-hover-count { font-size: 11px; color: var(--stone); font-weight: 400; }
.cart-hover-empty { text-align: center; padding: 28px 18px; }
.cart-hover-empty i { font-size: 28px; margin-bottom: 10px; display: block; color: var(--amber-200); }
.cart-hover-empty p { font-size: 13px; color: var(--stone); margin: 0; font-weight: 300; }
.cart-hover-footer { padding: 12px 18px 14px; border-top: 1px solid var(--sand); }
.cart-hover-footer .btn { border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px; }

/* ── Hover-cart items list (populated by YC.renderMiniCart from /api/cart) ── */
.cart-hover-items { max-height: 280px; overflow-y: auto; padding: 6px 6px 4px; }
.cart-hover-items::-webkit-scrollbar { width: 6px; }
.cart-hover-items::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }
.cart-hover-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    transition: background 0.15s ease;
}
.cart-hover-item:hover { background: #fbf6ec; }
.cart-hover-item + .cart-hover-item { border-top: 1px dashed var(--sand); }
.cart-hover-item-img {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 8px; overflow: hidden;
    background: #fbf6ec; border: 1px solid var(--sand);
    display: flex; align-items: center; justify-content: center;
}
.cart-hover-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-hover-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-hover-item-name {
    font-size: 13px; font-weight: 600; color: var(--ink, #2a1f10);
    text-decoration: none; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.15s ease;
}
.cart-hover-item-name:hover { color: var(--amber-700, #a07432); }
.cart-hover-item-meta { font-size: 11px; color: var(--stone); }
.cart-hover-item-total {
    font-size: 12px; font-weight: 700; color: var(--amber-700, #a07432);
    white-space: nowrap; flex: 0 0 auto;
}
.cart-hover-more {
    text-align: center; font-size: 11px; color: var(--stone);
    padding: 6px 12px 4px; font-style: italic;
}

/* ── Fixed Header Enhancement ── */
.main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

/* Fix top bar overlapping header actions */
.top-bar {
    z-index: 999 !important;
}

/* Body padding for fixed header */
.top-bar + .main-header + .main-nav + .hero-section {
    /* Homepage: top-bar + header + nav are stacked */
}

/* Sub-pages: push content below fixed header */
.main-header + .offcanvas + .breadcrumb-section,
.main-header + div + .breadcrumb-section {
    /* Handled by .breadcrumb-section margin-top */
}
.top-bar-marquee {
    pointer-events: none;
}
.top-bar-marquee span {
    pointer-events: auto;
}

/* Dark scrollbar */
body.dark-mode::-webkit-scrollbar-track { background: var(--bg-dark); }
body.dark-mode::-webkit-scrollbar-thumb { border-color: var(--bg-dark); }

/* ============================================
   DARK MODE - Complete System
   ============================================ */
body.dark-mode {
    background: var(--bg-dark);
    color: var(--text-dark);
}
body.dark-mode::before { opacity: 0.012; }
body.dark-mode::after { opacity: 0.008; }

/* ── Dark Toggle State ── */
body.dark-mode .dark-mode-toggle-header {
    background: rgba(197, 156, 109, 0.08);
    border-color: var(--border-dark);
    color: var(--amber-300);
}
body.dark-mode .dark-mode-toggle-header:hover {
    background: var(--amber-500);
    color: #fff;
}
body.dark-mode .dark-mode-toggle-header .fa-sun { display: block; }
body.dark-mode .dark-mode-toggle-header .fa-moon { display: none; }

/* ── Dark Top Bar ── */
body.dark-mode .top-bar {
    background: #1F1206;
    border-color: var(--border-dark);
}

/* ── Dark Header ── */
body.dark-mode .main-header {
    background: rgba(14, 11, 8, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--border-dark);
}
body.dark-mode .main-header.scrolled {
    box-shadow: 0 1px 30px rgba(0,0,0,0.2);
}

/* ── Dark Navigation ── */
body.dark-mode .main-nav {
    background: var(--surface-dark);
    border-color: var(--border-dark);
}
body.dark-mode .nav-link { color: var(--text-secondary-dark); }
body.dark-mode .nav-link:hover,
body.dark-mode .nav-item.active .nav-link { color: var(--amber-400); }

/* ── Dark Search ── */
body.dark-mode .search-input {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .search-input::placeholder { color: var(--text-muted-dark); }
body.dark-mode .search-input:focus {
    border-color: var(--amber-400);
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06);
    background: rgba(255,255,255,0.06);
}

/* ── Dark Header Actions ── */
body.dark-mode .header-action-btn { color: var(--text-dark); }
body.dark-mode .header-action-btn i { color: var(--amber-400); }
body.dark-mode .header-action-btn:hover { background: rgba(197, 156, 109, 0.06); }
body.dark-mode .action-text { color: var(--text-muted-dark); }
body.dark-mode .badge-count { border-color: var(--bg-dark); }

body.dark-mode .mobile-menu-toggle {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
}
body.dark-mode .mobile-menu-toggle span { background: var(--amber-400); }

/* ── Dark Features Bar ── */
body.dark-mode .feature-item {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .feature-item:hover {
    border-color: var(--border-hover-dark);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
body.dark-mode .feature-info h4 { color: var(--text-dark); }
body.dark-mode .feature-info p { color: var(--text-muted-dark); }

/* ── Dark Categories ── */
body.dark-mode .categories-section { background: var(--bg-dark); }
body.dark-mode .categories-section::before { opacity: 0.005; }
body.dark-mode .category-card-inner {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .category-card:hover .category-card-inner {
    border-color: var(--border-hover-dark);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
body.dark-mode .category-card-inner h3 { color: var(--text-dark); }
body.dark-mode .category-card-inner p { color: var(--text-muted-dark); }
body.dark-mode .category-count { background: rgba(197, 156, 109, 0.06); }

/* ── Dark Products ── */
body.dark-mode .products-section { background: var(--bg-dark) !important; }
body.dark-mode .products-section:nth-of-type(even),
body.dark-mode .products-alt { background: var(--surface-dark) !important; }

body.dark-mode .product-card {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .product-card:hover {
    border-color: var(--border-hover-dark);
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}
body.dark-mode .product-info { color: var(--text-dark); }
body.dark-mode .product-title, body.dark-mode .product-title a { color: var(--text-dark); }
body.dark-mode .product-card:hover .product-title { color: var(--amber-400); }
body.dark-mode .product-category { color: var(--amber-400); }
body.dark-mode .product-image { background: var(--surface-dark); }
body.dark-mode .rating-count { color: var(--text-muted-dark); }
body.dark-mode .old-price { color: var(--text-muted-dark); }
body.dark-mode .btn-details {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .btn-details:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}
body.dark-mode .product-wishlist {
    background: rgba(26, 21, 18, 0.9);
    color: var(--text-muted-dark);
}
body.dark-mode .overlay-btn {
    background: rgba(26, 21, 18, 0.9);
    color: var(--text-dark);
}

/* ── Dark Section Headers ── */
body.dark-mode .section-title { color: var(--text-dark); }
body.dark-mode .section-badge {
    background: rgba(197, 156, 109, 0.06);
    border-color: var(--border-dark);
}
body.dark-mode .section-view-all {
    background: rgba(197, 156, 109, 0.04);
    border-color: var(--border-dark);
    color: var(--amber-400);
}
body.dark-mode .section-view-all:hover {
    background: var(--amber-500);
    color: #fff;
    border-color: var(--amber-500);
}

/* ── Dark Promo ── */
body.dark-mode .promo-card { border-color: var(--border-dark); }

/* ── Dark Testimonials ── */
body.dark-mode .testimonials-section { background: var(--bg-dark); }
body.dark-mode .testimonial-card {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.dark-mode .testimonial-card:hover {
    border-color: var(--border-hover-dark);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
body.dark-mode .testimonial-card::before { color: rgba(197, 156, 109, 0.04); }
body.dark-mode .testimonial-text { color: var(--text-secondary-dark); }
body.dark-mode .author-info h5 { color: var(--text-dark); }
body.dark-mode .author-info span { color: var(--text-muted-dark); }

/* ── Dark Newsletter ── */
body.dark-mode .newsletter-section { background: transparent; }
body.dark-mode .newsletter-card { border-color: var(--border-dark); }

/* ── Dark Footer ── */
body.dark-mode .main-footer { background: #1A0F05; }

/* ── Dark Mega Dropdown ── */
body.dark-mode .mega-dropdown {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
body.dark-mode .mega-col h4 { border-color: var(--border-dark); }
body.dark-mode .mega-col ul li a { color: var(--text-secondary-dark); }
body.dark-mode .mega-col ul li a:hover { color: var(--amber-400); }
body.dark-mode .mega-featured-card { background: rgba(197, 156, 109, 0.04); }

/* ── Dark Cart Dropdown ── */
body.dark-mode .cart-hover-dropdown {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
body.dark-mode .cart-hover-header { border-color: var(--border-dark); color: var(--text-dark); }
body.dark-mode .cart-hover-footer { border-color: var(--border-dark); }

/* ── Dark Swiper ── */
body.dark-mode .products-section .swiper-button-next,
body.dark-mode .products-section .swiper-button-prev {
    background: var(--card-dark);
    border-color: var(--border-dark);
    color: var(--amber-400);
}
body.dark-mode .products-section .swiper-button-next:hover,
body.dark-mode .products-section .swiper-button-prev:hover {
    background: var(--amber-500);
    color: #fff;
}

/* ── Dark Misc ── */
body.dark-mode .scroll-to-top { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
body.dark-mode .toast-notification { box-shadow: 0 6px 24px rgba(0,0,0,0.3); }

/* ── Dark Auth Pages ── */
body.dark-mode .breadcrumb-section { background: #241407; }
body.dark-mode .auth-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .auth-form-side { background: var(--card-dark); }
body.dark-mode .auth-form-side h2 { color: var(--text-dark); }
body.dark-mode .auth-form-side .auth-subtitle { color: var(--text-muted-dark); }
body.dark-mode .form-floating-custom label { color: var(--text-dark); }
body.dark-mode .form-floating-custom .form-control {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .form-floating-custom .form-control:focus {
    border-color: var(--amber-400);
    background: rgba(255,255,255,0.05);
}
body.dark-mode .form-floating-custom .input-icon { color: var(--amber-400); }
body.dark-mode .password-toggle { color: var(--text-muted-dark); }
body.dark-mode .form-check-custom label { color: var(--text-dark); }
body.dark-mode .forgot-link { color: var(--amber-400); }
body.dark-mode .auth-divider::before { background: var(--border-dark); }
body.dark-mode .auth-divider span { background: var(--card-dark); color: var(--text-muted-dark); }
body.dark-mode .social-auth-btn {
    border-color: var(--border-dark);
    color: var(--text-dark);
    background: transparent;
}
body.dark-mode .social-auth-btn:hover {
    border-color: var(--amber-400);
    background: rgba(197, 156, 109, 0.04);
}
body.dark-mode .auth-switch { color: var(--text-muted-dark); }
body.dark-mode .auth-switch a { color: var(--amber-400); }

/* ── Dark Cart & Checkout ── */
body.dark-mode .cart-table-wrap { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-summary { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-summary h3 { color: var(--text-dark); }
body.dark-mode .checkout-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .checkout-form-card h3 { color: var(--text-dark); }
body.dark-mode .contact-info-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .contact-info-card h4 { color: var(--text-dark); }
body.dark-mode .contact-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .map-card { background: var(--card-dark); border-color: var(--border-dark); }

/* ── Dark Auth Section ── */
body.dark-mode .auth-section {
    background: linear-gradient(180deg, var(--bg-dark) 0%, #241407 100%) !important;
}
body.dark-mode .auth-card {
    box-shadow: 0 4px 30px rgba(0,0,0,0.2) !important;
}

/* ============================================
   MOBILE HEADER FIX
   ============================================ */
@media (max-width: 991px) {
    .header-wrapper {
        flex-direction: row-reverse !important;
    }
    .header-logo {
        order: 0 !important;
        margin-left: auto;
    }
    .header-actions {
        order: 1 !important;
    }
    .mobile-menu-toggle {
        order: 2 !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   AUTH PAGES - Modern Immersive Design
   ============================================ */

/* Hide breadcrumb on auth pages for cleaner look */
body:has(.auth-section) .breadcrumb-section { display: none !important; }

/* Full immersive auth section */
.auth-section {
    padding: 100px 0 50px !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(197, 156, 109, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(197, 156, 109, 0.03) 0%, transparent 50%),
        linear-gradient(160deg, var(--ivory, #FBF6ED) 0%, var(--parchment, #F7F0E3) 50%, var(--ivory, #FBF6ED) 100%) !important;
    position: relative;
    overflow: hidden;
}
.auth-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 156, 109, 0.06) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    pointer-events: none;
}

/* Auth Card - Modern Glass */
.auth-card {
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow:
        0 4px 6px rgba(28, 20, 16, 0.02),
        0 12px 40px rgba(28, 20, 16, 0.06),
        0 0 0 1px rgba(28, 20, 16, 0.03) !important;
    border: none !important;
    max-width: 940px !important;
    margin: 40px auto !important;
    backdrop-filter: blur(2px);
}

/* Visual Side - Rich Dark */
.auth-visual {
    background: linear-gradient(165deg, #2E1A0B 0%, #62391C 40%, #784625 70%, #62391C 100%) !important;
    padding: 50px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 500px;
}
.auth-visual::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.03 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23C59C6D' stroke-width='0.5'/%3E%3C/svg%3E") !important;
    background-size: 56px 100px !important;
}
.auth-visual::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 156, 109, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.auth-visual img {
    width: 85px !important;
    margin-bottom: 28px !important;
    filter: drop-shadow(0 0 30px rgba(197, 156, 109, 0.3)) !important;
    animation: none !important;
    position: relative;
    z-index: 2;
}
.auth-visual h2 {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 2;
    text-align: center;
}
.auth-visual p {
    font-size: 14px !important;
    color: rgba(255,255,255,0.4) !important;
    text-align: center !important;
    line-height: 1.9 !important;
    font-weight: 300 !important;
    max-width: 260px;
    position: relative;
    z-index: 2;
}

/* Form Side - Clean & Spacious */
.auth-form-side {
    padding: 44px 40px !important;
    background: #fff !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-form-side h2 {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--walnut) !important;
    margin-bottom: 6px !important;
}
.auth-form-side .auth-subtitle {
    font-size: 14px !important;
    color: var(--stone) !important;
    margin-bottom: 32px !important;
    font-weight: 300 !important;
}

/* ── Modern Form Inputs ── */
.form-floating-custom {
    margin-bottom: 20px !important;
    position: relative !important;
}
.form-floating-custom label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--earth, #6B5D52) !important;
    margin-bottom: 8px !important;
    display: block !important;
    letter-spacing: 0.3px;
}
.form-floating-custom .form-control {
    border: 1.5px solid var(--sand, #E8DCC8) !important;
    border-radius: 14px !important;
    padding: 15px 50px 15px 48px !important;
    font-size: 14px !important;
    background: var(--parchment, #F7F0E3) !important;
    transition: all 0.35s var(--ease-out, ease) !important;
    height: auto !important;
    font-family: var(--font-body) !important;
    color: var(--walnut, #62391C) !important;
    font-weight: 400;
    line-height: 1.4;
}
.form-floating-custom .form-control::placeholder {
    color: var(--dust, #C4B8AB) !important;
    font-weight: 300;
    font-size: 13px;
}
.form-floating-custom .form-control:focus {
    border-color: var(--amber-500) !important;
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.08), 0 4px 12px rgba(149, 104, 59, 0.06) !important;
    background: #fff !important;
    transform: translateY(-1px);
}

/* ── Icon positioning - anchored to the input bottom ── */
.form-floating-custom .input-icon,
.form-floating-custom > i.input-icon,
.form-floating-custom > span.input-icon {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    color: var(--amber-500) !important;
    font-size: 16px !important;
    z-index: 5 !important;
    width: 22px !important;
    height: 50px !important;
    text-align: center !important;
    line-height: 50px !important;
    pointer-events: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.form-floating-custom > span.input-icon i {
    font-size: 16px;
    line-height: 1;
}

/* Password toggle - perfectly centered vertically with input */
.password-toggle {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    font-size: 16px !important;
    color: var(--dust, #C4B8AB) !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    width: 30px;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.25s ease;
}
.password-toggle:hover {
    color: var(--amber-500) !important;
}

/* ── RTL flip for icons inside .form-floating-custom ──
   In RTL the leading (lock) icon belongs on the right (visual start of the
   field) and the eye toggle on the left (visual end). The !important LTR rules
   above only set ONE physical side, so we MUST also force the opposite side
   to auto here — otherwise both insets resolve and the browser falls back to
   the trailing one in RTL, stacking icons on top of each other. */
[dir="rtl"] .form-floating-custom .input-icon,
[dir="rtl"] .form-floating-custom > i.input-icon,
[dir="rtl"] .form-floating-custom > span.input-icon,
[dir="rtl"] .form-floating-custom .input-wrap .input-icon {
    right: 16px !important;
    left: auto !important;
}
[dir="rtl"] .password-toggle,
[dir="rtl"] .form-floating-custom .password-toggle,
[dir="rtl"] .form-floating-custom .input-wrap .password-toggle {
    left: 16px !important;
    right: auto !important;
}

/* ── Checkbox & Links ── */
.form-check-custom {
    margin-bottom: 24px !important;
}
.form-check-custom .form-check-input {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--sand) !important;
    margin-top: 0;
}
.form-check-custom .form-check-input:checked {
    background-color: var(--amber-500) !important;
    border-color: var(--amber-500) !important;
}
.form-check-custom label {
    font-size: 13px !important;
    color: var(--earth) !important;
}
.forgot-link {
    font-size: 13px !important;
    color: var(--amber-500) !important;
    font-weight: 500 !important;
}
.forgot-link:hover {
    color: var(--amber-600) !important;
    text-decoration: underline !important;
}

/* ── Submit Button - Bold & Modern ── */
.auth-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(149, 104, 59, 0.3) !important;
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600, #95683B)) !important;
    border: none !important;
    transition: all 0.35s var(--ease-out) !important;
}
.auth-btn:hover {
    box-shadow: 0 8px 32px rgba(149, 104, 59, 0.4) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--amber-600, #95683B), var(--amber-500)) !important;
}

/* ── Divider ── */
.auth-divider {
    margin: 24px 0 !important;
}
.auth-divider::before {
    background: var(--sand) !important;
}
.auth-divider span {
    font-size: 12px !important;
    color: var(--dust) !important;
    background: #fff !important;
    padding: 0 16px !important;
    letter-spacing: 0.3px;
}

/* ── Social Buttons - Modern Pill Style ── */
.social-auth {
    gap: 10px !important;
    margin-bottom: 20px !important;
}
.social-auth-btn {
    border: 1.5px solid var(--sand) !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s var(--ease-out) !important;
    background: var(--parchment, #F7F0E3) !important;
    color: var(--walnut) !important;
}
.social-auth-btn:hover {
    border-color: var(--amber-300) !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(28, 20, 16, 0.06) !important;
    transform: translateY(-1px);
}
.social-auth-btn i {
    font-size: 16px;
}

/* ── Switch Link ── */
.auth-switch {
    font-size: 14px !important;
    text-align: center !important;
    margin-top: 6px !important;
    color: var(--stone) !important;
}
.auth-switch a {
    color: var(--amber-500) !important;
    font-weight: 600 !important;
}
.auth-switch a:hover {
    text-decoration: underline !important;
}

/* ── Responsive Auth ── */
@media (max-width: 991px) {
    .auth-visual { display: none !important; }
    .auth-card {
        max-width: 500px !important;
        margin: 30px auto !important;
        border-radius: 24px !important;
    }
    .auth-form-side { padding: 36px 28px !important; }
}
@media (max-width: 575px) {
    .auth-section { padding: 20px 0 !important; min-height: calc(100vh - 60px) !important; }
    .auth-card { border-radius: 20px !important; margin: 16px !important; }
    .auth-form-side { padding: 28px 20px !important; }
    .auth-form-side h2 { font-size: 22px !important; }
    .auth-btn { padding: 14px !important; font-size: 15px !important; }
    .social-auth-btn { padding: 12px !important; font-size: 13px !important; }
}

/* ── Dark Mode Auth ── */
body.dark-mode .auth-section {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(197, 156, 109, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(197, 156, 109, 0.02) 0%, transparent 50%),
        linear-gradient(160deg, var(--bg-dark) 0%, #241407 100%) !important;
}
body.dark-mode .auth-section::before { background: radial-gradient(circle, rgba(197, 156, 109, 0.04) 0%, transparent 70%); }
body.dark-mode .auth-card {
    box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px var(--border-dark) !important;
}
body.dark-mode .auth-form-side {
    background: var(--card-dark) !important;
}
body.dark-mode .auth-form-side h2 { color: var(--text-dark) !important; }
body.dark-mode .auth-form-side .auth-subtitle { color: var(--text-muted-dark) !important; }
body.dark-mode .form-floating-custom label { color: var(--text-secondary-dark) !important; }
body.dark-mode .form-floating-custom .form-control {
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-dark) !important;
}
body.dark-mode .form-floating-custom .form-control::placeholder { color: var(--text-muted-dark) !important; }
body.dark-mode .form-floating-custom .form-control:focus {
    border-color: var(--amber-400) !important;
    background: rgba(255,255,255,0.05) !important;
    box-shadow: 0 0 0 4px rgba(149, 104, 59, 0.06), 0 2px 8px rgba(0,0,0,0.1) !important;
}
body.dark-mode .form-floating-custom .input-icon,
body.dark-mode .form-floating-custom > i.input-icon,
body.dark-mode .form-floating-custom > span.input-icon { color: var(--amber-400) !important; }
body.dark-mode .password-toggle { color: var(--text-muted-dark) !important; }
body.dark-mode .form-check-custom .form-check-input { border-color: var(--border-dark) !important; }
body.dark-mode .form-check-custom label { color: var(--text-dark) !important; }
body.dark-mode .forgot-link { color: var(--amber-400) !important; }
body.dark-mode .auth-divider::before { background: var(--border-dark) !important; }
body.dark-mode .auth-divider span { background: var(--card-dark) !important; color: var(--text-muted-dark) !important; }
body.dark-mode .social-auth-btn {
    border-color: var(--border-dark) !important;
    color: var(--text-dark) !important;
    background: rgba(255,255,255,0.02) !important;
}
body.dark-mode .social-auth-btn:hover {
    border-color: var(--amber-400) !important;
    background: rgba(197, 156, 109, 0.04) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}
body.dark-mode .auth-switch { color: var(--text-muted-dark) !important; }
body.dark-mode .auth-switch a { color: var(--amber-400) !important; }

/* ============================================
   DARK MODE: SUB-PAGES (Cart, Checkout, Product, Contact)
   ============================================ */

/* Cart page */
body.dark-mode .cart-section { background: var(--bg-dark); }
body.dark-mode .cart-table-wrap { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-table thead { background: var(--surface-dark); }
body.dark-mode .cart-table th { color: var(--text-dark); border-color: var(--border-dark); }
body.dark-mode .cart-table td { border-color: var(--border-dark); }
body.dark-mode .cart-product-name { color: var(--text-dark); }
body.dark-mode .cart-product-cat { color: var(--text-muted-dark); }
body.dark-mode .cart-product-img { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .cart-remove { border-color: var(--border-dark); color: var(--text-muted-dark); }
body.dark-mode .quantity-controls { border-color: var(--border-dark); }
body.dark-mode .qty-btn { background: var(--surface-dark); color: var(--text-dark); }
body.dark-mode .qty-input { color: var(--text-dark); }
body.dark-mode .cart-summary { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .cart-summary h3 { color: var(--text-dark); border-color: var(--border-dark); }
body.dark-mode .summary-row .label { color: var(--text-muted-dark); }
body.dark-mode .summary-row .value { color: var(--text-dark); }
body.dark-mode .summary-row.total .label { color: var(--text-dark); }
body.dark-mode .coupon-form input { background: var(--surface-dark); border-color: var(--border-dark); color: var(--text-dark); }

/* Checkout page */
body.dark-mode .checkout-section { background: var(--bg-dark); }
body.dark-mode .checkout-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .checkout-form-card h3 { color: var(--text-dark); border-color: var(--border-dark); }
body.dark-mode .checkout-form-card label { color: var(--text-dark); }
body.dark-mode .checkout-form-card .form-control,
body.dark-mode .checkout-form-card .form-select {
    background: var(--surface-dark); border-color: var(--border-dark); color: var(--text-dark);
}
body.dark-mode .checkout-form-card .form-control:focus,
body.dark-mode .checkout-form-card .form-select:focus {
    border-color: var(--amber-400); background: rgba(255,255,255,0.04);
}
body.dark-mode .step-item { color: var(--text-muted-dark); }
body.dark-mode .step-number { border-color: var(--border-dark); }
body.dark-mode .step-line { background: var(--border-dark); }
body.dark-mode .payment-method { border-color: var(--border-dark); }
body.dark-mode .payment-method:hover,
body.dark-mode .payment-method.selected { border-color: var(--amber-400); background: rgba(197, 156, 109, 0.04); }
body.dark-mode .method-info h5 { color: var(--text-dark); }
body.dark-mode .method-info p { color: var(--text-muted-dark); }
body.dark-mode .order-item { border-color: var(--border-dark); }
body.dark-mode .order-item-img { background: var(--surface-dark); }
body.dark-mode .order-item-name { color: var(--text-dark); }
body.dark-mode .order-item-qty { color: var(--text-muted-dark); }

/* Product Details page */
body.dark-mode .product-detail-section { background: var(--bg-dark); }
body.dark-mode .gallery-main { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .gallery-thumb { background: var(--surface-dark); border-color: var(--border-dark); }
body.dark-mode .gallery-thumb.active { border-color: var(--amber-400); }
body.dark-mode .gallery-zoom-btn { background: var(--card-dark); color: var(--text-dark); }
body.dark-mode .detail-category { background: rgba(197, 156, 109, 0.06); border-color: var(--border-dark); }
body.dark-mode .detail-title { color: var(--text-dark); }
body.dark-mode .detail-rating { border-color: var(--border-dark); }
body.dark-mode .detail-rating .rating-text { color: var(--text-muted-dark); }
body.dark-mode .detail-description { color: var(--text-secondary-dark); border-color: var(--border-dark); }
body.dark-mode .meta-row .meta-label { color: var(--text-dark); }
body.dark-mode .meta-row .meta-value { color: var(--text-secondary-dark); }
body.dark-mode .quantity-selector label { color: var(--text-dark); }
body.dark-mode .detail-share { border-color: var(--border-dark); }
body.dark-mode .detail-share span { color: var(--text-dark); }
body.dark-mode .share-btn { border-color: var(--border-dark); color: var(--text-muted-dark); }
body.dark-mode .product-tabs-section { background: var(--surface-dark); }
body.dark-mode .product-tabs .nav-tabs { border-color: var(--border-dark); }
body.dark-mode .product-tabs .nav-link { color: var(--text-muted-dark); }
body.dark-mode .product-tabs .nav-link.active { color: var(--amber-400); background: rgba(197, 156, 109, 0.04); }
body.dark-mode .tab-content-inner { color: var(--text-secondary-dark); }
body.dark-mode .tab-content-inner h4,
body.dark-mode .tab-content-inner h5 { color: var(--text-dark) !important; }
body.dark-mode .spec-table td:first-child { background: var(--card-dark); color: var(--text-dark); }
body.dark-mode .spec-table tr { border-color: var(--border-dark); }
body.dark-mode .review-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .reviewer-name { color: var(--text-dark); }
body.dark-mode .review-text { color: var(--text-secondary-dark); }

/* Contact page */
body.dark-mode .contact-section { background: var(--bg-dark); }
body.dark-mode .contact-info-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .contact-info-card:hover { border-color: var(--border-hover-dark); }
body.dark-mode .contact-info-card h4 { color: var(--text-dark); }
body.dark-mode .contact-info-card p { color: var(--text-muted-dark); }
body.dark-mode .contact-form-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .contact-form-card h3 { color: var(--text-dark); }
body.dark-mode .contact-form .form-control,
body.dark-mode .contact-form .form-select {
    background: var(--surface-dark); border-color: var(--border-dark); color: var(--text-dark);
}
body.dark-mode .contact-form .form-control:focus {
    border-color: var(--amber-400); background: rgba(255,255,255,0.04);
}
body.dark-mode .contact-form label { color: var(--text-dark); }
body.dark-mode .map-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark-mode .map-placeholder { background: var(--surface-dark); }

/* ── Breadcrumb fix for fixed header ── */
.breadcrumb-section {
    margin-top: 80px !important;
    padding: 28px 0 !important;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .breadcrumb-section { margin-top: 60px !important; }
}

/* Breadcrumb dark mode */
body.dark-mode .breadcrumb-section { background: linear-gradient(135deg, #1F1206 0%, #2E1A0B 100%); }

/* ============================================
   ENHANCED HOVER EFFECTS & MICRO-INTERACTIONS
   ============================================ */

/* Smooth link transitions */
a:not(.btn-honey):not(.btn-outline-honey):not(.btn-details):not(.btn-cart-icon) {
    transition: color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

/* Button hover shine */
.btn-honey {
    position: relative;
    overflow: hidden;
}
.btn-honey::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255,255,255,0.08), transparent);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.7s var(--ease-out);
    pointer-events: none;
}
.btn-honey:hover::after {
    transform: rotate(45deg) translateX(100%);
}

/* Cart icon pulse */
.btn-cart-icon:hover {
    animation: cartPulse 0.4s var(--ease-out);
}
@keyframes cartPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1.08); }
}

/* Details button arrow */
.btn-details:hover i {
    animation: arrowSlide 0.4s var(--ease-out);
}
@keyframes arrowSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
    100% { transform: translateX(-4px); }
}

/* Footer social enhanced */
.footer-social a {
    transition: all 0.35s var(--ease-spring);
}

/* Wishlist heart */
.product-wishlist.active {
    animation: heartBeat 0.4s var(--ease-spring);
}
@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Product card refined transition */
.product-card {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.category-card-inner {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.testimonial-card {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

/* Enhanced mega dropdown */
.mega-dropdown {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    border-top: 2px solid var(--amber-500) !important;
}
.mega-col ul li a { position: relative; }
.mega-col ul li a::before {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--amber-500);
    border-radius: 2px;
    transition: height 0.2s var(--ease-out);
    transform: translateY(-50%);
}
.mega-col ul li a:hover::before { height: 14px; }

/* Hero refinements */
.hero-badge { animation: none !important; }
.hero-title { text-shadow: 0 2px 40px rgba(0,0,0,0.2); }
.hero-subtitle { text-shadow: 0 1px 10px rgba(0,0,0,0.1); }

/* Hero nav arrows */
.hero-nav.swiper-button-next,
.hero-nav.swiper-button-prev {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    transition: all 0.3s var(--ease-out) !important;
}
.hero-nav.swiper-button-next:hover,
.hero-nav.swiper-button-prev:hover {
    background: var(--amber-500) !important;
    border-color: var(--amber-500) !important;
}
.hero-nav::after { font-size: 15px !important; }

.hero-pagination { bottom: 28px !important; }

/* Scroll progress */
.scroll-progress {
    height: 3px !important;
    box-shadow: 0 0 8px rgba(149, 104, 59, 0.3) !important;
}

/* Section z-index */
.products-section,
.categories-section,
.testimonials-section,
.newsletter-section,
.promo-banner {
    position: relative;
    z-index: 1;
}

/* ============================================
   COMPLETE MOBILE FIX
   ============================================ */
@media (max-width: 991px) {
    .main-header .container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .header-wrapper {
        gap: 8px !important;
        justify-content: space-between;
    }
    .header-logo img { height: 40px !important; }
    .header-actions { gap: 0 !important; order: 0; }
    .header-action-btn { padding: 5px 6px !important; }
    .header-action-btn i { font-size: 17px !important; }
    .badge-count {
        width: 15px !important;
        height: 15px !important;
        font-size: 8px !important;
        top: 0 !important;
        left: 3px !important;
        border-width: 1.5px !important;
    }
    .dark-mode-toggle-header {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
        margin-right: 2px !important;
    }
    .mobile-menu-toggle {
        width: 34px !important;
        height: 34px !important;
        padding: 7px !important;
        border-radius: 9px !important;
        order: -1;
    }
    .mobile-menu-toggle span {
        width: 18px !important;
        height: 1.5px !important;
    }
    .cart-hover-dropdown { display: none !important; }
    .language-switch { display: none !important; }
    .header-search { display: none !important; }
    .action-text { display: none !important; }
}

/* Mobile Menu */
#mobileMenu { max-width: 300px !important; }
#mobileMenu .offcanvas-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--sand);
}
#mobileMenu .mobile-logo { height: 38px !important; }
#mobileMenu .offcanvas-body { padding: 16px !important; }

body.dark-mode #mobileMenu {
    background: var(--card-dark);
}
body.dark-mode #mobileMenu .offcanvas-header { border-color: var(--border-dark); }
body.dark-mode .mobile-nav-list li a { color: var(--text-dark); }
body.dark-mode .mobile-nav-list li a:hover,
body.dark-mode .mobile-nav-list li a.active { background: rgba(197, 156, 109, 0.06); }
body.dark-mode .mobile-search .form-control {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-dark);
    color: var(--text-dark);
}
body.dark-mode .mobile-footer-actions { border-color: var(--border-dark); }
body.dark-mode .mobile-footer-actions a { color: var(--text-secondary-dark); }

/* ── Smooth Page Load ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.features-bar .feature-item {
    animation: fadeInUp 0.6s var(--ease-out) backwards;
}
.features-bar .col-6:nth-child(1) .feature-item { animation-delay: 0.1s; }
.features-bar .col-6:nth-child(2) .feature-item { animation-delay: 0.15s; }
.features-bar .col-6:nth-child(3) .feature-item { animation-delay: 0.2s; }
.features-bar .col-6:nth-child(4) .feature-item { animation-delay: 0.25s; }

/* ==========================================================================
   BRAND ENHANCEMENTS — Le Coin Yéménite palette
   #62391C brown · #C59C6D camel · #FBF6ED cream
   (loaded last, overrides earlier rules)
   ========================================================================== */

/* ---- Footer: layered brown depth + camel accent + readable cream text ---- */
.main-footer {
    background: linear-gradient(180deg, #45270F 0%, #62391C 50%, #4F2D15 100%);
    color: rgba(251, 246, 237, 0.62);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, transparent, #C59C6D, #D9BC93, #C59C6D, transparent) 1;
}
.main-footer::before { opacity: 0.05; width: 460px; height: 460px; }
.footer-logo { filter: brightness(1.15) saturate(1.05); }

.footer-brand p { color: rgba(251, 246, 237, 0.56); }
.footer-links ul li a,
.footer-contact ul li { color: rgba(251, 246, 237, 0.64); }
.footer-links ul li a:hover { color: var(--gold-light); }

.footer-links h4, .footer-contact h4 { color: #FBF6ED; }
.footer-links h4::after, .footer-contact h4::after {
    width: 38px; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.footer-contact ul li i { color: var(--gold-light); }

.footer-social a {
    background: rgba(197, 156, 109, 0.10);
    border: 1px solid rgba(197, 156, 109, 0.24);
    color: var(--gold-light);
}
.footer-social a:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    border-color: var(--gold-light);
    color: #3A2212;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(98, 57, 28, 0.45);
}

.footer-bottom { border-top: 1px solid rgba(197, 156, 109, 0.18); }
.footer-bottom p { color: rgba(251, 246, 237, 0.46); }
.footer-bottom p a .dev-name,
.footer-bottom .dev-name { color: var(--gold-light); }

/* ---- Scroll-to-top: camel→brown gradient pill matching the brand ---- */
.scroll-to-top {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 4px 18px rgba(98, 57, 28, 0.30);
}
.scroll-to-top:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #3A2212;
    box-shadow: 0 8px 26px rgba(98, 57, 28, 0.42);
}

/* ---- Header top-bar: depth gradient + brighter camel accents ---- */
.top-bar {
    background: linear-gradient(90deg, #45270F 0%, #62391C 50%, #45270F 100%);
    color: rgba(251, 246, 237, 0.78);
    border-bottom: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: inset 0 -1px 0 rgba(197, 156, 109, 0.07);
}
.top-bar-item i { color: var(--gold-light); }
.top-bar-content .separator { color: rgba(197, 156, 109, 0.45); }
.top-bar-close { color: var(--gold-light); opacity: 0.6; }
.top-bar-close:hover { opacity: 1; background: rgba(197, 156, 109, 0.14); }

/* ---- Product cards: premium camel framing + reveal accent + gradient CTAs ---- */
.product-card {
    border: 1px solid rgba(98, 57, 28, 0.07);
    box-shadow: 0 2px 14px rgba(98, 57, 28, 0.05);
}
.product-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s var(--ease-out);
    z-index: 6;
}
.product-card:hover::after { transform: scaleX(1); }
.product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 44px rgba(98, 57, 28, 0.14), 0 0 0 1px rgba(197, 156, 109, 0.22);
    border-color: rgba(197, 156, 109, 0.30);
}
.product-image { background: linear-gradient(135deg, var(--amber-50), var(--cream-dark)); }

.product-category { color: var(--gold-dark); }
.product-card:hover .product-title,
.product-card:hover .product-title a { color: var(--gold-dark); }
.current-price { color: var(--gold-dark); }

.badge-best { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }

.overlay-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
}
.btn-cart-icon {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 3px 10px rgba(98, 57, 28, 0.22);
}
.btn-cart-icon:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #3A2212;
}
.btn-details:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}

/* ---- Hero: warm brand overlay + camel glow, premium badge & controls ---- */
.hero-overlay {
    background:
        radial-gradient(72% 92% at 88% 45%, rgba(197, 156, 109, 0.16), transparent 62%),
        linear-gradient(to left, rgba(42, 24, 8, 0.34) 0%, rgba(50, 29, 14, 0.60) 42%, rgba(28, 16, 6, 0.84) 100%);
}
.hero-overlay-dark {
    background:
        radial-gradient(72% 92% at 88% 45%, rgba(197, 156, 109, 0.14), transparent 60%),
        linear-gradient(to left, rgba(42, 24, 8, 0.40) 0%, rgba(50, 29, 14, 0.66) 42%, rgba(24, 14, 5, 0.88) 100%);
}
.text-gradient {
    background: linear-gradient(135deg, #E8D4B8, #D9BC93, #C59C6D);
    -webkit-background-clip: text;
    background-clip: text;
}
.hero-badge {
    background: rgba(197, 156, 109, 0.16);
    border: 1px solid rgba(197, 156, 109, 0.40);
    color: var(--gold-light);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.hero-badge i { color: var(--gold-light); }

.hero-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    box-shadow: 0 0 14px rgba(197, 156, 109, 0.55);
}
.swiper .swiper-button-next.hero-nav:hover,
.swiper .swiper-button-prev.hero-nav:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    transform: scale(1.08);
}

/* ---- Primary buttons: camel→brown gradient with depth (site-wide) ---- */
.btn-honey {
    background: linear-gradient(135deg, #C59C6D 0%, #95683B 100%);
    box-shadow: 0 4px 16px rgba(98, 57, 28, 0.28);
}
.btn-honey:hover {
    background: linear-gradient(135deg, #B0824F 0%, #7A5029 100%);
    color: #fff;
    box-shadow: 0 8px 28px rgba(98, 57, 28, 0.40);
}
.btn-outline-honey:hover,
.btn-outline-honey.on-dark:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}
.btn-outline-honey.on-dark {
    border-color: rgba(197, 156, 109, 0.45);
}

/* ---- Category cards: cohesive camel→brown hexagon range + camel hover ---- */
.honey-cat .hexagon-shape   { background: linear-gradient(135deg, #D9BC93, #C59C6D); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.28); }
.oil-cat .hexagon-shape     { background: linear-gradient(135deg, #C59C6D, #A87A4A); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.28); }
.coffee-cat .hexagon-shape  { background: linear-gradient(135deg, #7A5029, #62391C); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.34); }
.incense-cat .hexagon-shape { background: linear-gradient(135deg, #B0824F, #8A5A2A); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.30); }
.spice-cat .hexagon-shape   { background: linear-gradient(135deg, #A56A3B, #7A5029); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.30); }
.herbal-cat .hexagon-shape  { background: linear-gradient(135deg, #95683B, #62391C); box-shadow: 0 6px 18px rgba(98, 57, 28, 0.32); }

.category-card:hover .category-card-inner {
    box-shadow: 0 16px 38px rgba(98, 57, 28, 0.12), 0 0 0 1px rgba(197, 156, 109, 0.18);
    border-color: rgba(197, 156, 109, 0.30);
}
.category-count { color: var(--gold-dark); background: var(--amber-50); }

/* ---- Forms & inputs: unified camel focus ring (site-wide baseline) ---- */
.form-control,
.form-select {
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16);
}
.form-control::placeholder { color: var(--stone); opacity: 1; font-weight: 300; }
.form-check-input:checked { background-color: var(--gold-dark); border-color: var(--gold-dark); }
.form-check-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.18); }

/* Scoped form contexts — clearer camel focus (border + warm ring + subtle lift) */
.form-floating-custom .form-control:focus,
.checkout-form-card .form-control:focus,
.checkout-form-card .form-select:focus,
.contact-form .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16), 0 4px 14px rgba(98, 57, 28, 0.07);
    background: #fff;
}
.form-floating-custom .input-icon { color: var(--gold-dark); }
.form-floating-custom .form-control:focus ~ .input-icon { color: var(--gold); }

/* ---- Section headings: camel accent underline + gradient badge & link ---- */
.section-badge {
    background: linear-gradient(135deg, var(--amber-50), var(--amber-100));
    border: 1px solid rgba(197, 156, 109, 0.30);
    color: var(--gold-dark);
}
.section-badge i { color: var(--gold); }

.section-header-row .section-header-start { position: relative; }
.section-header-row .section-title { position: relative; padding-bottom: 14px; }
.section-header-row .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.section-view-all {
    border-color: rgba(197, 156, 109, 0.30);
    color: var(--gold-dark);
}
.section-view-all:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}

/* Centered section dividers (.section-line) + hex icon in brand camel */
.section-line::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.section-line::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hex-icon { color: var(--gold); }

/* ---- Cart & checkout summary panels: premium branded styling ---- */
.cart-summary,
.checkout-form-card {
    background: linear-gradient(180deg, #ffffff 0%, #FDFAF4 100%);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.26);
}
.cart-summary h3,
.checkout-form-card h3 { border-bottom-color: rgba(197, 156, 109, 0.28); }

/* Camel top-accent strip on the focal order-summary panel */
.cart-summary { position: relative; overflow: hidden; }
.cart-summary::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

/* Highlighted cream total panel (cart + checkout) */
.summary-row.total {
    background: linear-gradient(135deg, var(--cream-dark), var(--sand));
    border: 1px solid rgba(197, 156, 109, 0.30);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 16px;
}
.summary-row.total .label { color: var(--walnut); }
.summary-row.total .value { color: var(--gold-dark); }

/* Coupon input + continue-shopping link */
.coupon-form input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16);
    background: #fff;
}
.cart-summary .continue-shopping { color: var(--gold-dark); transition: color 0.2s var(--ease-out); }
.cart-summary .continue-shopping:hover { color: var(--gold); text-decoration: underline; }

/* Checkout order line items */
.order-item { border-bottom-color: rgba(197, 156, 109, 0.14); }
.order-item-img { background: linear-gradient(135deg, var(--amber-50), var(--cream-dark)); }
.order-item-price { color: var(--gold-dark); }

/* ---- Pagination: camel→brown active, subtle camel hover, gentle lift ---- */
.pagination-wrap a {
    border-color: var(--sand);
    box-shadow: 0 2px 8px -4px rgba(98, 57, 28, 0.16);
}
.pagination-wrap a:hover {
    background: var(--amber-50);
    color: var(--gold-dark);
    border-color: rgba(197, 156, 109, 0.45);
    transform: translateY(-2px);
}
.pagination-wrap a.active,
.pagination-wrap a.active:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    border-color: var(--gold-dark);
    box-shadow: 0 6px 18px -6px rgba(98, 57, 28, 0.45);
    transform: translateY(-2px);
}

/* ---- Breadcrumb: warm depth glow + camel link/separator polish ---- */
.breadcrumb-section {
    background:
        radial-gradient(62% 130% at 86% 0%, rgba(197, 156, 109, 0.16), transparent 60%),
        linear-gradient(135deg, var(--walnut) 0%, var(--bark) 100%);
    border-bottom: 1px solid rgba(197, 156, 109, 0.26);
}
.breadcrumb-content h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.22); }
.breadcrumb-nav a { color: var(--gold-light); }
.breadcrumb-nav a:hover { color: #F4EBDA; }
.breadcrumb-nav i { color: rgba(197, 156, 109, 0.55); }

/* ---- SweetAlert dialogs: branded chrome (color stays semantic) ---- */
.swal2-popup {
    border-radius: 20px !important;
    font-family: var(--font-body) !important;
    border: 1px solid rgba(197, 156, 109, 0.22) !important;
    box-shadow: 0 24px 60px -20px rgba(98, 57, 28, 0.45) !important;
}
.swal2-title { font-family: var(--font-display) !important; color: var(--walnut) !important; }
.swal2-html-container { color: #6b5d4a !important; }
.swal2-styled { border-radius: 12px !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.32) !important; }
.swal2-icon.swal2-warning { border-color: var(--gold) !important; color: var(--gold-dark) !important; }

/* ---- Bootstrap alerts: rounded + warm camel "warning" (success/danger stay semantic) ---- */
.alert { border-radius: 12px; }
.alert.alert-warning {
    background: linear-gradient(135deg, #FBF6ED, #F4EBDA);
    border-color: rgba(197, 156, 109, 0.40);
    color: #7A5029;
}

/* ---- Fallback toast (when toastr is absent): camel→brown gradient ---- */
.toast-notification {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 8px 28px -8px rgba(98, 57, 28, 0.45);
}

/* ---- Account & orders pages: branded panels, accents, gradient states ---- */
.account-sidebar,
.account-content {
    background: linear-gradient(180deg, #ffffff 0%, #FDFAF4 100%);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.22);
}
.account-sidebar { position: relative; overflow: hidden; }
.account-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.account-user { border-bottom-color: rgba(197, 156, 109, 0.25); }

.account-nav li a:hover { background: var(--amber-50); color: var(--gold-dark); }
.account-nav li.active a {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 6px 18px -6px rgba(98, 57, 28, 0.45);
}
.account-content h2 { border-bottom-color: rgba(197, 156, 109, 0.25); }
.account-content h2 i { color: var(--gold-dark); }

/* Dashboard stat cards */
.stat-card { border-color: rgba(197, 156, 109, 0.25); }
.stat-card:hover {
    border-color: rgba(197, 156, 109, 0.50);
    box-shadow: 0 14px 34px -16px rgba(98, 57, 28, 0.22);
}
.stat-card .stat-icon { color: var(--gold-dark); }

/* Orders table */
.orders-table thead { background: linear-gradient(135deg, var(--amber-50), var(--cream-dark)); }
.orders-table th { border-bottom-color: rgba(197, 156, 109, 0.30); }
.order-id { color: var(--gold-dark); }
.order-action-btn { border-color: rgba(197, 156, 109, 0.35); }
.order-action-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold-dark);
    color: #fff;
}

/* ---- Wishlist empty state: warm card + camel heart ---- */
.wishlist-empty {
    background: linear-gradient(180deg, #ffffff, #FDFAF4);
    border: 1.5px dashed rgba(197, 156, 109, 0.45);
}
.wishlist-empty .empty-heart {
    background: linear-gradient(135deg, var(--amber-100), var(--cream-dark));
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(197, 156, 109, 0.25), 0 10px 26px -14px rgba(98, 57, 28, 0.30);
}

/* ---- Wallet / Points balance heroes: honeycomb texture + depth ---- */
.wallet-hero,
.points-hero {
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 38px -16px rgba(98, 57, 28, 0.50);
}
.wallet-hero > *,
.points-hero > * { position: relative; z-index: 1; }
.wallet-hero::before,
.points-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66ZM28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='%23FBF6ED' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}
.wallet-hero .btn-light,
.points-hero .btn-light {
    color: var(--gold-dark);
    font-weight: 600;
    border: none;
    transition: var(--transition);
}
.wallet-hero .btn-light:hover,
.points-hero .btn-light:hover {
    background: #fff;
    color: var(--walnut);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.30);
}

/* ---- Product details: gradient accents on gallery, qty, tabs, reviews ---- */
.detail-category {
    background: linear-gradient(135deg, var(--amber-50), var(--amber-100));
    border: 1px solid rgba(197, 156, 109, 0.30);
    color: var(--gold-dark);
}
.gallery-main:hover {
    border-color: rgba(197, 156, 109, 0.45);
    box-shadow: 0 16px 40px -18px rgba(98, 57, 28, 0.30);
}
.gallery-zoom-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
}
.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.22);
}
.qty-btn:hover { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #fff; }
.share-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    border-color: var(--gold-dark);
}

/* Tabs: gradient underline + camel-dark active */
.product-tabs .nav-link::after {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.product-tabs .nav-link.active,
.product-tabs .nav-link:hover {
    color: var(--gold-dark);
    background: var(--amber-50);
}

/* Reviews */
.review-card:hover {
    border-color: rgba(197, 156, 109, 0.40);
    box-shadow: 0 10px 26px -16px rgba(98, 57, 28, 0.22);
}
.reviewer-avatar { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.review-stars i, .detail-rating .stars i { color: var(--gold); }

/* ---- Auth pages (login/register): premium card + warm visual panel ---- */
.auth-card {
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 24px 60px -22px rgba(98, 57, 28, 0.40);
}
.auth-visual {
    background:
        radial-gradient(70% 85% at 50% 2%, rgba(197, 156, 109, 0.22), transparent 60%),
        linear-gradient(160deg, #62391C 0%, #784625 50%, #62391C 100%);
}
.auth-visual p { color: rgba(251, 246, 237, 0.55); }
.auth-form-side .auth-subtitle { color: var(--earth); }
.social-auth-btn:hover {
    border-color: rgba(197, 156, 109, 0.50);
    background: var(--amber-50);
}
.auth-switch a { color: var(--gold-dark); }
.auth-switch a:hover { color: var(--gold); }

/* ---- Footer newsletter: warm glow + camel input focus ---- */
.newsletter-card {
    background:
        radial-gradient(60% 120% at 85% 0%, rgba(197, 156, 109, 0.16), transparent 58%),
        linear-gradient(135deg, #62391C, #784625, #62391C);
    box-shadow: 0 16px 40px -18px rgba(98, 57, 28, 0.45);
}
.newsletter-card p { color: rgba(251, 246, 237, 0.55); }
.newsletter-form .input-group {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(197, 156, 109, 0.22);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.newsletter-form .input-group:focus-within {
    border-color: rgba(197, 156, 109, 0.50);
    box-shadow: 0 0 0 3px rgba(197, 156, 109, 0.16);
}

/* ---- About page: warm camel card hovers ---- */
.about-stat:hover { border-color: rgba(197, 156, 109, 0.45); box-shadow: 0 14px 34px -16px rgba(98, 57, 28, 0.22); }
.value-card:hover { border-color: rgba(197, 156, 109, 0.40); box-shadow: 0 14px 34px -16px rgba(98, 57, 28, 0.22); }

/* ---- Contact page: gradient accent + camel hex icon + warm form card ---- */
.contact-info-card::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); height: 4px; }
.contact-info-card:hover { border-color: rgba(197, 156, 109, 0.40); }
.contact-info-icon {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 6px 18px rgba(98, 57, 28, 0.28);
}
.contact-form-card {
    background: linear-gradient(180deg, #ffffff, #FDFAF4);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.22);
}

/* FAQ open-state is handled directly in home-sections.css (.faq-q/.faq-a —
   the classes the markup actually uses; the .faq-question block in pages.css
   is unused/legacy). */

/* ---- Product "new" badge: brand deep-brown (was sage green) ----
   Distinct from the camel "best seller" badge and the red "sale" badge;
   all three are also differentiated by their label text. */
.badge-new {
    background: linear-gradient(135deg, #62391C, #95683B);
    box-shadow: 0 2px 8px rgba(98, 57, 28, 0.28);
}

/* ---- OTP / verify page: gradient badge + standard camel focus ring ---- */
.otp-card .otp-badge {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    box-shadow: 0 8px 22px -6px rgba(98, 57, 28, 0.40);
}
.otp-digit:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 156, 109, 0.16);
}
.otp-digit:not(:placeholder-shown) { border-color: var(--gold); }

/* ---- Order tracking + thank-you: warm panels (green→camel handled in pages.css) ---- */
.tracking-card,
.ty-info-card {
    background: linear-gradient(180deg, #ffffff, #FDFAF4);
    border: 1px solid rgba(197, 156, 109, 0.20);
    box-shadow: 0 10px 30px -18px rgba(98, 57, 28, 0.20);
}
.tracking-header { border-bottom-color: rgba(197, 156, 109, 0.25); }
.ty-info-card i { color: var(--gold-dark); }
.thankyou-order-num { border-color: rgba(197, 156, 109, 0.40); }