/* ================================
   ToolBase — professional tools storefront (white / blue)
   ================================ */

:root {
    /* Brand tokens */
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-primary-muted: #dbeafe;
    /* Listing + product detail “Add to cart” — one visual system */
    --product-cta-gradient: linear-gradient(180deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%);
    --product-cta-gradient-hover: linear-gradient(180deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
    --product-cta-border: 1px solid rgba(29, 78, 216, 0.55);
    --color-border: #e2e8f0;

    /* Legacy aliases (existing rules reference these) */
    --fashion-black: var(--color-text);
    --fashion-white: var(--color-surface);
    --fashion-gold: var(--color-primary);
    --fashion-rose: var(--color-primary-muted);
    --fashion-charcoal: #334155;
    --fashion-silver: #94a3b8;

    /* Bootstrap alignment */
    --bs-primary: var(--color-primary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);

    /* Accent Colors */
    --accent-blue: var(--color-primary);
    --accent-purple: #6366f1;
    --accent-green: #16a34a;
    --accent-red: #dc2626;
    --accent-warning: #d97706;
    
    /* Neutral Palette */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Spacing & Sizing */
    --nav-height: 80px;
    --max-width: 1400px;
    --border-radius: 12px;
    --transition-speed: 0.3s;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);
    --shadow-3d: 0 25px 50px rgba(0, 0, 0, 0.20);
    
    /* Animation Curves */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Scrollbar (viewport + overflow areas) */
    --scrollbar-size: 12px;
    --scrollbar-radius: 999px;
    --scrollbar-track: #e8edf5;
    --scrollbar-track-border: rgba(37, 99, 235, 0.08);
    --scrollbar-thumb: linear-gradient(180deg, #3b82f6 0%, var(--color-primary) 100%);
    --scrollbar-thumb-hover: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    --scrollbar-thumb-border: rgba(30, 64, 175, 0.45);

    /* Google Fonts — loaded from base.html; stacks switch by html[lang] */
    --font-stack-latin: 'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-stack-he: 'Noto Sans Hebrew', 'Heebo', 'Inter', system-ui, sans-serif;
    --font-stack-ar: 'Noto Kufi Arabic', 'Cairo', 'Montserrat', system-ui, sans-serif;
    --font-stack-ru: 'Noto Sans', 'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-stack-ui: var(--font-stack-latin);
    --font-accent-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-a11y-readable: 'Lexend', 'Inter', system-ui, sans-serif;
    /* Bootstrap 5 typography */
    --bs-font-sans-serif: var(--font-stack-ui);
}

html[lang='he'] {
    --font-stack-ui: var(--font-stack-he);
    --bs-font-sans-serif: var(--font-stack-he);
}

html[lang='ar'] {
    --font-stack-ui: var(--font-stack-ar);
    --bs-font-sans-serif: var(--font-stack-ar);
}

html[lang='ru'] {
    --font-stack-ui: var(--font-stack-ru);
    --bs-font-sans-serif: var(--font-stack-ru);
}

/* ================================
   Base Styles & Reset
   ================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--scrollbar-track);
}

body {
    font-family: var(--font-stack-ui);
    background-color: var(--color-bg);
    color: var(--fashion-charcoal);
    line-height: 1.6;
    font-size: 1rem;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent dragging images out of the browser (product grids, hero, logo, etc.) */
img,
picture img {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

::selection {
    background: #7dd3fc;
    color: #0f172a;
}

::-moz-selection {
    background: #7dd3fc;
    color: #0f172a;
}

/* Apply locale Google Font stack across UI (Bootstrap + forms + headings) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-stack-ui);
}

input, button, select, textarea, optgroup,
.btn,
.navbar-brand,
.nav-link,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.dropdown-item,
.modal-title,
.breadcrumb,
.card-title,
.list-group-item,
.table,
.badge,
.alert,
.nav-tabs .nav-link,
.offcanvas-title,
.toast,
.pagination {
    font-family: var(--font-stack-ui);
}

/* Custom scrollbar — Chromium / Safari / Edge (matches ToolBase blue) */
::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-inline-start: 1px solid var(--scrollbar-track-border);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-border);
}

::-webkit-scrollbar-thumb:active {
    background: var(--color-primary-hover);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* ================================
   Toast Notifications (right-aligned stack)
   ================================ */

#toast-notification-container {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    inset-inline-end: max(20px, env(safe-area-inset-end)) !important;
    inset-inline-start: auto !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
}

.custom-toast-notification {
    --toast-accent: var(--color-primary, #2563eb);
    color: var(--color-text, #0f172a) !important;
    background: var(--color-surface, #ffffff) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-inline-start: 4px solid var(--toast-accent) !important;
    border-radius: 14px !important;
    padding: 0.85rem 0.65rem 0.85rem 0.9rem !important;
    min-width: min(260px, calc(100vw - 32px)) !important;
    width: auto !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.08),
        0 18px 40px -12px rgba(15, 23, 42, 0.18) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    font-family: var(--font-stack-ui) !important;
    pointer-events: auto !important;
    opacity: 0;
    transform: translateX(calc(100% + 28px));
    transition:
        opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.custom-toast-notification__body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.custom-toast-notification__icon-wrap {
    flex-shrink: 0 !important;
    width: 2.375rem !important;
    height: 2.375rem !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    background: rgba(37, 99, 235, 0.1) !important;
    color: var(--color-primary, #1d4ed8) !important;
}

.custom-toast-notification__message {
    margin: 0 !important;
    padding: 0.15rem 0 0 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em !important;
    color: var(--color-text, #0f172a) !important;
}

[dir="rtl"] .custom-toast-notification {
    transform: translateX(calc(-100% - 28px));
}

.custom-toast-notification.toast-warning {
    --toast-accent: #d97706;
    background: linear-gradient(165deg, #fffbeb 0%, #ffffff 55%) !important;
    border-color: rgba(217, 119, 6, 0.28) !important;
}

.custom-toast-notification.toast-warning .custom-toast-notification__icon-wrap {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #b45309 !important;
}

.custom-toast-notification.toast-warning .custom-toast-notification__message {
    color: #78350f !important;
    font-weight: 600 !important;
}

.custom-toast-notification.toast-danger {
    --toast-accent: #dc2626;
    background: linear-gradient(165deg, #fef2f2 0%, #ffffff 55%) !important;
    border-color: rgba(220, 38, 38, 0.22) !important;
}

.custom-toast-notification.toast-danger .custom-toast-notification__icon-wrap {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}

.custom-toast-notification.toast-danger .custom-toast-notification__message {
    color: #7f1d1d !important;
}

.custom-toast-notification.toast-success {
    --toast-accent: #16a34a;
    background: linear-gradient(165deg, #f0fdf4 0%, #ffffff 55%) !important;
    border-color: rgba(22, 163, 74, 0.22) !important;
}

.custom-toast-notification.toast-success .custom-toast-notification__icon-wrap {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
}

.custom-toast-notification.toast-success .custom-toast-notification__message {
    color: #14532d !important;
}

.custom-toast-notification.toast-info {
    --toast-accent: #0284c7;
    background: linear-gradient(165deg, #f0f9ff 0%, #ffffff 55%) !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
}

.custom-toast-notification.toast-info .custom-toast-notification__icon-wrap {
    background: rgba(2, 132, 199, 0.1) !important;
    color: #0369a1 !important;
}

.custom-toast-notification.toast-info .custom-toast-notification__message {
    color: #0c4a6e !important;
}

body.dark-mode .custom-toast-notification {
    color: #e2e8f0 !important;
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.25),
        0 20px 44px -12px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .custom-toast-notification .custom-toast-notification__message {
    color: #f1f5f9 !important;
}

body.dark-mode .custom-toast-notification.toast-warning {
    background: linear-gradient(165deg, rgba(120, 53, 15, 0.35) 0%, rgba(15, 23, 42, 0.98) 55%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

body.dark-mode .custom-toast-notification.toast-warning .custom-toast-notification__message {
    color: #fde68a !important;
}

body.dark-mode .custom-toast-notification.toast-warning .custom-toast-notification__icon-wrap {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fcd34d !important;
}

body.dark-mode .custom-toast-notification.toast-danger .custom-toast-notification__icon-wrap {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #fca5a5 !important;
}

body.dark-mode .custom-toast-notification.toast-success .custom-toast-notification__icon-wrap {
    background: rgba(74, 222, 128, 0.12) !important;
    color: #86efac !important;
}

body.dark-mode .custom-toast-notification.toast-info .custom-toast-notification__icon-wrap {
    background: rgba(125, 211, 252, 0.12) !important;
    color: #7dd3fc !important;
}

.toast-close-btn {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease !important;
    opacity: 0.55 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    align-self: flex-start !important;
}

.toast-close-btn:hover {
    opacity: 1 !important;
    background: rgba(15, 23, 42, 0.07) !important;
}

body.dark-mode .toast-close-btn:hover {
    background: rgba(248, 250, 252, 0.12) !important;
}

@media (max-width: 768px) {
    #toast-notification-container {
        top: max(12px, env(safe-area-inset-top)) !important;
        inset-inline-end: max(14px, env(safe-area-inset-end)) !important;
        inset-inline-start: auto !important;
        align-items: flex-end !important;
    }

    .custom-toast-notification {
        min-width: min(280px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
    }
}

/* ================================
   Typography
   ================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Montserrat', 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fashion-black);
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

p {
    margin-bottom: 1rem;
    color: var(--gray-700);
}

a {
    color: var(--fashion-black);
    text-decoration: none;
    transition: all var(--transition-speed) var(--ease-out-expo);
}

a:hover {
    color: var(--fashion-gold);
}

/* ================================
   Navigation Bar with 3D Effect
   ================================ */

/* Belt-and-suspenders: keep links readable if framework load order changes */
.navbar.navbar-light {
    --bs-navbar-color: var(--color-text, #0f172a);
    --bs-navbar-hover-color: var(--color-primary, #2563eb);
    --bs-navbar-active-color: var(--color-primary-hover, #1d4ed8);
    --bs-navbar-disabled-color: rgba(15, 23, 42, 0.45);
    --bs-navbar-brand-color: var(--color-text, #0f172a);
    --bs-navbar-brand-hover-color: var(--color-primary, #2563eb);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(15, 23, 42, 0.2);
}

.navbar {
    background: rgba(255, 255, 255, 0.98);
    background-color: var(--color-surface, #ffffff);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s var(--ease-out-expo);
}

.navbar.scrolled {
    padding: 0.5rem 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-family: 'Inter', 'Montserrat', 'Heebo', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text, #0f172a) !important;
    letter-spacing: -0.02em;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 992px) {
    [dir="ltr"] .navbar-brand {
        margin-inline-end: 1.85rem;
    }

    [dir="ltr"] .navbar-nav--primary {
        padding-inline-start: 0.35rem;
    }
}

/* Layout slot stays short so navbar height does not grow; logo scales visually inside */
.navbar-brand-logo-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    line-height: 0;
    /* Prevents scaled artwork from sitting under the next flex items (layout width stays small) */
    margin-inline-end: 0.5rem;
}

.navbar-brand-logo {
    flex-shrink: 0;
    display: block;
    width: auto;
    max-width: min(300px, 56vw);
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    transform: scale(1.72);
    transform-origin: left center;
    transition:
        transform 0.4s var(--ease-out-expo),
        filter 0.45s ease;
    filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.08));
}

/* Desktop LTR locales (en/ru/etc): reserve full logo footprint so it cannot overlap nav links */
@media (min-width: 992px) {
    html[dir="ltr"] .navbar-brand-logo-wrap {
        height: 46px;
        margin-inline-end: 0.85rem;
    }

    html[dir="ltr"] .navbar-brand-logo {
        height: 46px;
        max-width: min(240px, 38vw);
        transform: scale(1);
        transform-origin: left center;
    }

    html[dir="ltr"] .navbar-brand:hover .navbar-brand-logo {
        transform: scale(1.06);
    }
}

[dir="rtl"] .navbar-brand-logo {
    transform-origin: right center;
}

/* Hover: soft lift + glow (replaces old underline bar) */
.navbar-brand:hover .navbar-brand-logo {
    transform: scale(1.82);
    filter:
        drop-shadow(0 8px 22px rgba(37, 99, 235, 0.22))
        drop-shadow(0 2px 12px rgba(56, 189, 248, 0.18))
        brightness(1.05);
}

.navbar-brand-text {
    line-height: 1.15;
    transition:
        color 0.35s ease,
        transform 0.4s var(--ease-out-expo);
}

.navbar-brand:hover .navbar-brand-text {
    color: var(--color-primary, #2563eb) !important;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .navbar-brand-logo {
        transition: none;
    }

    .navbar-brand:hover .navbar-brand-logo {
        transform: scale(1.72);
        filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.08));
    }

    .navbar-brand-text {
        transition: color 0.2s ease;
    }

    .navbar-brand:hover .navbar-brand-text {
        transform: none;
    }
}

.navbar.navbar-light .navbar-nav .nav-link,
.navbar .nav-link {
    color: var(--color-text, #0f172a) !important;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-out-expo);
}

/* Toolbar count badges extend past the icon; keep link clipping off */
.navbar .nav-link--cart,
.navbar .nav-link--toolbar-icon,
.navbar .nav-link:has(.cart-badge) {
    overflow: visible;
}

.navbar .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.08), transparent);
    transition: left 0.5s var(--ease-out-expo);
}

.navbar .nav-link:hover::before {
    left: 100%;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: var(--color-primary, #2563eb) !important;
    background: rgba(37, 99, 235, 0.05);
    transform: translateY(-2px);
}

/* User Avatar */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-out-expo);
}

.user-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* Cart Badge with 3D Effect */
.cart-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #fff;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
    animation: pulse-badge 2s infinite;
    transform-style: preserve-3d;
    min-width: 20px;
    text-align: center;
}

/* Icon-sized box so the count sits on the corner of the glyph, not above a wide flex row */
.navbar-toolbar-glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.navbar-toolbar-glyph > i.d-lg-inline-block {
    font-size: 1.15rem;
}

.navbar .navbar-toolbar-glyph .cart-badge {
    position: absolute;
    inset-block-start: -0.28rem;
    inset-inline-end: -0.42rem;
    inset-inline-start: auto;
    left: auto;
    z-index: 2;
    animation: none;
    transform-origin: center;
    min-width: 1.125rem;
    min-height: 1.125rem;
    padding: 0.12rem 0.32rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

[dir="rtl"] .navbar .navbar-toolbar-glyph .cart-badge {
    inset-inline-end: auto;
    inset-inline-start: -0.42rem;
}

/* Strong bump when cart count changes */
.cart-badge.cart-badge-bump {
    animation: cart-badge-bump 0.5s ease-out;
}

@keyframes cart-badge-bump {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6);
    }
}

/* ---------- Navbar: mobile / collapsed menu (fix centering + sweep + badge glitches) ---------- */
.navbar-mobile-inner {
    min-width: 0;
}

.navbar-mobile-divider {
    border: 0;
    height: 1px;
    background: var(--color-border, #e2e8f0);
    opacity: 1;
}

.navbar-nav--primary .nav-link,
.navbar-nav--toolbar .nav-link {
    display: flex;
    align-items: center;
    text-align: start;
}

.navbar-btn-cta {
    width: 100%;
    margin: 0 !important;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-weight: 600;
}

@media (min-width: 992px) {
    .navbar-btn-cta {
        width: auto;
        margin-inline-start: 0.35rem !important;
    }

    .nav-item--cta {
        display: list-item !important;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .navbar-nav--primary,
    .navbar-nav--toolbar {
        width: 100%;
    }

    .navbar-nav--toolbar .nav-item {
        width: 100%;
    }

    /* Stop hover sweep + lift from looking like a “blob” behind icons */
    .navbar .nav-link::before {
        display: none;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link:focus-visible {
        transform: none;
        background: rgba(37, 99, 235, 0.06);
    }

    .navbar .nav-link {
        margin: 0 !important;
        padding: 0.65rem 0.75rem !important;
        border-radius: 10px;
        overflow: visible;
    }

    .cart-badge {
        animation: none;
        transform: none;
        box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
    }

    .navbar .navbar-toolbar-glyph .cart-badge {
        inset-block-start: -0.2rem;
        inset-inline-end: -0.28rem;
    }

    [dir="rtl"] .navbar .navbar-toolbar-glyph .cart-badge {
        inset-inline-end: auto;
        inset-inline-start: -0.28rem;
    }

    /* Dropdowns as stacked panels inside the drawer */
    .navbar .navbar-dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        width: 100%;
        margin: 0.35rem 0 0.5rem !important;
        padding: 0.35rem 0;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 10px;
        box-shadow: none;
        background: #f8fafc;
    }

    .navbar .navbar-dropdown-menu .dropdown-item {
        padding: 0.55rem 1rem;
        border-radius: 6px;
    }
}

/* Dropdown Menu with 3D Effect
   Do not animate `transform` here: Bootstrap 5 + Popper position menus via inline
   transform (translate3d). A transform keyframe fights Popper and causes a visible jump. */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    transform-origin: top;
    animation: dropdownFadeIn 0.22s var(--ease-out-expo);
}

.navbar .navbar-dropdown-menu {
    max-width: min(92vw, 340px);
}

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

.dropdown-item {
    padding: 0.75rem 1.5rem;
    color: var(--fashion-charcoal);
    font-weight: 500;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
    transition: all 0.2s var(--ease-out-expo);
}

.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
    color: var(--color-primary);
    padding-inline-start: 2rem;
}

/* ================================
   Hero Section with 3D Parallax
   ================================ */

.luxury-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(165deg, #f8fafc 0%, #e0f2fe 42%, #f1f5f9 100%);
    background-size: 200% 200%;
    animation: gradientShift 18s ease-in-out infinite;
}

.luxury-hero--compact {
    min-height: clamp(420px, 72vh, 820px);
    padding-block: 3rem 4rem;
}

.luxury-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.85;
    animation: backgroundMove 60s linear infinite;
    pointer-events: none;
}

.luxury-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(37, 99, 235, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
        repeating-linear-gradient(
            -18deg,
            transparent,
            transparent 11px,
            rgba(37, 99, 235, 0.035) 11px,
            rgba(37, 99, 235, 0.035) 12px
        );
    pointer-events: none;
    z-index: 0;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
}

@keyframes backgroundMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .luxury-hero {
        animation: none;
        background-size: auto;
    }
    .luxury-hero::before {
        animation: none;
    }
}

.luxury-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem 1rem;
    width: 100%;
}

.luxury-hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* 3D-style mockup panels behind copy */
.luxury-hero-mockups-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    perspective: 1400px;
    pointer-events: none;
    overflow: hidden;
}

.luxury-hero-mockup-panel {
    position: absolute;
    top: 50%;
    width: min(32vw, 240px);
    max-width: 280px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.06),
        0 25px 50px -12px rgba(37, 99, 235, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.luxury-hero-mockup-panel img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    opacity: 0.88;
}

.luxury-hero-mockup-panel--left {
    left: -2%;
    animation: heroMockupFloatLeft 9s ease-in-out infinite;
    animation-delay: -2s;
}

.luxury-hero-mockup-panel--center {
    left: 50%;
    width: min(38vw, 300px);
    max-width: 340px;
    opacity: 0.95;
    z-index: 0;
    animation: heroMockupFloatCenter 9s ease-in-out infinite;
    animation-delay: -4s;
}

/* Official brand artwork (PNG): no frosted panel behind, so logo reads clearly */
.luxury-hero-mockup-panel--brand {
    background: transparent;
    border: none;
    box-shadow: none;
}

.luxury-hero-mockup-panel--brand img {
    opacity: 1;
    border-radius: 0;
    filter: drop-shadow(0 24px 48px rgba(15, 23, 42, 0.18));
}

.luxury-hero-mockup-panel--right {
    right: -2%;
    animation: heroMockupFloatRight 9s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes heroMockupFloatLeft {
    0%, 100% {
        transform: translateY(-50%) rotateY(28deg) rotateX(6deg) translateZ(-40px) scale(0.95);
    }
    50% {
        transform: translateY(calc(-50% - 14px)) rotateY(26deg) rotateX(5deg) translateZ(-20px) scale(0.95);
    }
}

@keyframes heroMockupFloatRight {
    0%, 100% {
        transform: translateY(-50%) rotateY(-28deg) rotateX(6deg) translateZ(-40px) scale(0.95);
    }
    50% {
        transform: translateY(calc(-50% - 14px)) rotateY(-26deg) rotateX(5deg) translateZ(-20px) scale(0.95);
    }
}

@keyframes heroMockupFloatCenter {
    0%, 100% {
        transform: translate(-50%, -50%) translateZ(-80px) rotateX(4deg) scale(0.92);
    }
    50% {
        transform: translate(-50%, calc(-50% - 14px)) translateZ(-55px) rotateX(7deg) scale(0.94);
    }
}

/* Moving TOOLBASE marquee behind text, above mockups */
/* Force LTR so duplicated flex groups + translateX(-50%) loop stay aligned (RTL page dir reverses row and breaks the seam in he/ar). */
.luxury-hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-42%);
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.1;
    direction: ltr;
    unicode-bidi: isolate;
    /* Perf: mask-image on huge animated text is costly while scrolling */
    mask-image: none;
    -webkit-mask-image: none;
    contain: paint;
}

.luxury-hero-marquee-track {
    display: flex;
    width: max-content;
    animation: makitaMarquee 44s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.luxury-hero-marquee-group {
    display: flex;
    flex-shrink: 0;
}

.luxury-hero-marquee-text {
    position: relative;
    flex-shrink: 0;
    font-size: clamp(4rem, 14vw, 9rem);
    font-weight: 900;
    letter-spacing: 0.35em;
    line-height: 1;
    color: var(--color-primary);
    padding-inline-end: 2rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.luxury-hero-marquee-text::after {
    content: none;
}

[dir="rtl"] .luxury-hero-marquee-track {
    animation-name: makitaMarquee;
    animation-direction: normal;
    direction: ltr;
}

/* Marquee above mockups (0), below noise overlay (2) and copy (3) */

.luxury-hero-content {
    position: relative;
    z-index: 3;
}

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

@media (prefers-reduced-motion: reduce) {
    .luxury-hero-marquee-track {
        animation: none;
    }
    .luxury-hero-mockup-panel--left,
    .luxury-hero-mockup-panel--center,
    .luxury-hero-mockup-panel--right {
        animation: none;
    }
    .luxury-hero-mockup-panel--left {
        transform: translateY(-50%) rotateY(28deg) rotateX(6deg) translateZ(-40px) scale(0.95);
    }
    .luxury-hero-mockup-panel--right {
        transform: translateY(-50%) rotateY(-28deg) rotateX(6deg) translateZ(-40px) scale(0.95);
    }
    .luxury-hero-mockup-panel--center {
        transform: translate(-50%, -50%) translateZ(-80px) rotateX(4deg) scale(0.92);
    }
}

.luxury-hero-simple {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin-inline: auto;
}

/* Readable frosted panel behind hero headline + subcopy */
.luxury-hero-copy-panel {
    max-width: min(48rem, 100%);
    margin-inline: auto;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.35rem, 3.5vw, 3.25rem);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 24px 48px -12px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 18px 34px rgba(2, 6, 23, 0.22));
}

.luxury-hero-copy-panel .luxury-hero-kicker {
    font-size: clamp(0.72rem, 1.1vw, 0.82rem);
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.4rem;
    animation: heroKickerFloat 4.8s ease-in-out infinite;
}

.luxury-hero-copy-panel .luxury-hero-kicker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.35rem;
    width: 72%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.8), rgba(37, 99, 235, 0));
    transform: translateX(-50%);
    animation: heroKickerSweep 2.4s linear infinite;
}

.luxury-hero-subtitle--short {
    max-width: 32rem;
    margin-bottom: 1.5rem;
}

.luxury-hero-copy-panel .luxury-hero-subtitle--short {
    max-width: 38rem;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.65;
    color: var(--color-text-muted);
    animation: heroSubtitleGlow 5.4s ease-in-out infinite;
}

.luxury-hero-buttons--center {
    margin-top: 0.25rem;
}

.luxury-hero-copy-panel {
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), filter 0.5s var(--ease-out-expo);
}

.luxury-hero-copy-panel:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 14px rgba(15, 23, 42, 0.05),
        0 32px 56px -12px rgba(37, 99, 235, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 24px 42px rgba(2, 6, 23, 0.3));
}

.luxury-hero-buttons .btn-luxury-primary i,
.luxury-hero-buttons .btn-luxury-secondary i,
.luxury-hero-buttons .btn-luxury-outline i {
    transition: transform 0.3s var(--ease-out-expo);
}

.luxury-hero-buttons .btn-luxury-primary:hover i,
.luxury-hero-buttons .btn-luxury-secondary:hover i,
.luxury-hero-buttons .btn-luxury-outline:hover i {
    transform: translateX(4px);
}

.luxury-hero-buttons .btn-luxury-primary {
    animation: heroPrimaryPulse 3.2s ease-in-out infinite;
}

@keyframes heroKickerFloat {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.95;
    }
    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

@keyframes heroKickerSweep {
    from {
        background-position: 0% 0;
    }
    to {
        background-position: 200% 0;
    }
}

@keyframes heroSubtitleGlow {
    0%,
    100% {
        text-shadow: 0 0 0 rgba(37, 99, 235, 0);
    }
    50% {
        text-shadow: 0 8px 28px rgba(37, 99, 235, 0.18);
    }
}

@keyframes heroPrimaryPulse {
    0%,
    100% {
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
    }
    50% {
        box-shadow: 0 12px 34px rgba(37, 99, 235, 0.46);
    }
}

@media (max-width: 767.98px) {
    .luxury-hero-mockup-panel--left,
    .luxury-hero-mockup-panel--right {
        width: min(42vw, 160px);
        opacity: 0.45;
    }

    .luxury-hero-mockup-panel--center {
        width: min(52vw, 220px);
        opacity: 0.65;
    }

    .luxury-hero-marquee {
        opacity: 0.06;
    }

    .luxury-hero-marquee-track {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

.luxury-hero-text {
    text-align: start;
}

.luxury-hero-text .luxury-hero-stats {
    justify-content: flex-start;
}

.luxury-hero-text .luxury-hero-buttons {
    justify-content: flex-start;
}

.luxury-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
    animation: fadeInUp 0.8s var(--ease-out-expo);
}

.luxury-hero-title {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s var(--ease-out-expo) 0.2s backwards;
    color: var(--color-text);
    background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.luxury-hero-title.luxury-hero-title--center {
    font-size: clamp(2.1rem, 5vw + 0.35rem, 3.85rem);
    line-height: 1.12;
    margin-bottom: 1rem;
    /* Solid headline on panel — easier to read than clipped gradient on busy hero */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: var(--color-text, #0f172a);
}

/* Animated gradient headline — two stacked lines (brand, then tagline) */
.luxury-hero-title.luxury-hero-title--center.luxury-hero-title--headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12em;
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 46rem);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: inherit;
    animation: luxury-hero-headline-in 0.9s var(--ease-out-expo) 0.12s backwards;
}

.luxury-hero-title__line {
    display: block;
    width: 100%;
    text-align: center;
}

.luxury-hero-title__line--brand {
    position: relative;
    padding-bottom: 0.22em;
    margin-bottom: 0.06em;
}

/* Subtle underline accent (replaces dot separator) */
.luxury-hero-title__line--brand::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(7.5rem, 55%);
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.25) 20%,
        rgba(37, 99, 235, 0.65) 50%,
        rgba(59, 130, 246, 0.25) 80%,
        transparent 100%
    );
    opacity: 0.9;
    pointer-events: none;
    animation: luxury-hero-underline-glow 5s ease-in-out infinite;
}

@keyframes luxury-hero-underline-glow {
    0%,
    100% {
        opacity: 0.75;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.06);
    }
}

.luxury-hero-title__brand {
    display: inline-block;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    background: linear-gradient(
        130deg,
        #38bdf8 0%,
        #22d3ee 18%,
        #3b82f6 40%,
        #6366f1 58%,
        #2563eb 76%,
        #1d4ed8 90%,
        #0f172a 100%
    );
    background-size: 260% 260%;
    background-position: 10% 30%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 10px 30px rgba(37, 99, 235, 0.22);
    animation: luxury-hero-gradient-mesh 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
               luxury-hero-text-float 3.4s ease-in-out infinite;
}

.luxury-hero-title__line--tagline {
    max-width: 100%;
    font-size: 0.86em;
    line-height: 1.2;
}

.luxury-hero-title__tagline {
    display: inline-block;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.18;
    text-align: center;
    max-width: 100%;
    color: #111111;
    background: linear-gradient(
        135deg,
        #000000 0%,
        #0f172a 24%,
        #1f2937 48%,
        #111827 70%,
        #374151 86%,
        #000000 100%
    );
    background-size: 280% 280%;
    background-position: 42% 28%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    text-shadow: 0 10px 28px rgba(15, 23, 42, 0.24);
    animation: luxury-hero-gradient-mesh-alt 6.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
               luxury-hero-text-float 2.6s ease-in-out infinite;
    transition: transform 220ms ease, letter-spacing 220ms ease, filter 220ms ease;
}

.luxury-hero-title__tagline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0) 24%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0) 76%
    );
    background-size: 220% 100%;
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000);
    animation: luxury-hero-tagline-shimmer 1.9s linear infinite;
}

.luxury-hero-title__line--tagline:hover .luxury-hero-title__tagline,
.luxury-hero-title__tagline:hover {
    transform: translateY(-0.06em) scale(1.03);
    letter-spacing: -0.018em;
    filter: brightness(1.08) contrast(1.1);
}

/* Slow diagonal “mesh breathing” — distinct from linear L↔R shift */
@keyframes luxury-hero-gradient-mesh {
    0% {
        background-position: 12% 35%;
        background-size: 220% 220%;
    }
    33% {
        background-position: 88% 42%;
        background-size: 235% 235%;
    }
    66% {
        background-position: 45% 88%;
        background-size: 225% 225%;
    }
    100% {
        background-position: 12% 35%;
        background-size: 220% 220%;
    }
}

@keyframes luxury-hero-gradient-mesh-alt {
    0% {
        background-position: 45% 24%;
        background-size: 280% 280%;
    }
    40% {
        background-position: 10% 78%;
        background-size: 300% 300%;
    }
    70% {
        background-position: 90% 18%;
        background-size: 286% 286%;
    }
    100% {
        background-position: 45% 24%;
        background-size: 280% 280%;
    }
}

@keyframes luxury-hero-text-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.045em);
    }
}

@keyframes luxury-hero-tagline-shimmer {
    0% {
        background-position: 140% 50%;
    }
    100% {
        background-position: -40% 50%;
    }
}

@keyframes luxury-hero-headline-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero H1: logo + continuous motion + dual shine + hover (tilt via JS on #hero-logo-interactive) */
.luxury-hero-heading-logo {
    margin: 0 auto 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    perspective: 1000px;
    animation: luxury-hero-headline-in 0.9s var(--ease-out-expo) 0.12s backwards;
}

.luxury-hero-logo-motion {
    display: inline-block;
    line-height: 0;
    transform-style: preserve-3d;
    animation: luxury-hero-logo-float 5.8s ease-in-out infinite;
}

.luxury-hero-logo-shine {
    --hero-tilt-x: 0deg;
    --hero-tilt-y: 0deg;
    --hero-hover-glow: 1;
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: min(380px, 90vw);
    border-radius: 14px;
    overflow: hidden;
    cursor: default;
    touch-action: manipulation;
    /* No transition on transform — JS updates tilt every frame; transitioning it caused “jumps” */
    transform: rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
    transform-style: preserve-3d;
    will-change: transform;
    transition: filter 0.35s ease;
    filter: drop-shadow(0 14px 36px rgba(15, 23, 42, 0.14))
        drop-shadow(0 0 calc(22px * var(--hero-hover-glow)) rgba(56, 189, 248, 0.22));
}

/* Glow only on hover — no extra scale (scale + tilt felt like the logo was “jumping”) */
.luxury-hero-logo-shine:hover {
    --hero-hover-glow: 1.28;
    filter: drop-shadow(0 16px 40px rgba(37, 99, 235, 0.18))
        drop-shadow(0 0 32px rgba(56, 189, 248, 0.32));
}

.luxury-hero-logo-img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Sweeping highlight on top of artwork */
.luxury-hero-logo-shine::after {
    content: "";
    position: absolute;
    inset: -35% -60%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        transparent 36%,
        rgba(255, 255, 255, 0.08) 44%,
        rgba(255, 255, 255, 0.88) 50%,
        rgba(255, 255, 255, 0.1) 56%,
        transparent 64%,
        transparent 100%
    );
    transform: translateX(-55%) skewX(-14deg);
    animation: luxury-hero-logo-shine-sweep 4.2s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

@keyframes luxury-hero-logo-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes luxury-hero-logo-shine-sweep {
    0% {
        transform: translateX(-55%) skewX(-14deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    38% {
        transform: translateX(55%) skewX(-14deg);
        opacity: 1;
    }
    45%,
    100% {
        transform: translateX(55%) skewX(-14deg);
        opacity: 0;
    }
}

@media (min-width: 640px) {
    .luxury-hero-title__tagline {
        white-space: normal;
    }

    .luxury-hero-heading-logo .luxury-hero-logo-shine {
        max-width: min(440px, 86vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .luxury-hero-title.luxury-hero-title--center.luxury-hero-title--headline {
        animation: none;
    }

    .luxury-hero-heading-logo {
        animation: none;
    }

    .luxury-hero-logo-shine::after {
        animation: none;
        opacity: 0;
    }

    .luxury-hero-logo-motion {
        animation: none !important;
    }

    .luxury-hero-logo-shine:hover {
        --hero-hover-glow: 1;
    }

    .luxury-hero-title__brand,
    .luxury-hero-title__tagline {
        animation: none;
        background-size: 100% 100%;
        background-position: 50% 50%;
    }

    .luxury-hero-title__tagline::after {
        animation: none;
        opacity: 0;
    }

    .luxury-hero-title__line--brand::after {
        animation: none;
        opacity: 0.85;
        transform: translateX(-50%) scaleX(1);
    }

    .luxury-hero-copy-panel,
    .luxury-hero-copy-panel:hover,
    .luxury-hero-copy-panel .luxury-hero-kicker,
    .luxury-hero-copy-panel .luxury-hero-kicker::after,
    .luxury-hero-copy-panel .luxury-hero-subtitle--short,
    .luxury-hero-buttons .btn-luxury-primary {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

.luxury-hero-copy-panel .luxury-hero-title.luxury-hero-title--center {
    font-size: clamp(2.25rem, 5.5vw + 0.5rem, 4.15rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.luxury-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--color-text-muted);
    max-width: 36rem;
    margin: 0 0 3rem;
    line-height: 1.8;
    animation: fadeInUp 1.2s var(--ease-out-expo) 0.4s backwards;
}

.luxury-hero-subtitle.luxury-hero-subtitle--short {
    font-size: clamp(0.95rem, 2.1vw, 1.1rem);
    line-height: 1.55;
    margin: 0 auto 1.5rem;
}

/* Hero Stats */
.luxury-hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 3rem 0;
    flex-wrap: wrap;
    animation: fadeInUp 1.4s var(--ease-out-expo) 0.6s backwards;
}

.luxury-stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-surface);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-out-expo);
    min-width: 150px;
}

.luxury-stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: rgba(37, 99, 235, 0.25);
}

.luxury-stat-icon {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.luxury-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.luxury-stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Hero Buttons */
.luxury-hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1.6s var(--ease-out-expo) 0.8s backwards;
}

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

/* ================================
   Modern Buttons with 3D Effect
   ================================ */

.btn-luxury-primary,
.btn-luxury-secondary,
.btn-luxury-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.btn-luxury-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.btn-luxury-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s var(--ease-out-expo);
}

.btn-luxury-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5);
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.35);
}

.btn-luxury-primary:hover::before {
    left: 100%;
}

.btn-luxury-primary:hover span,
.btn-luxury-primary:hover i {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.35);
}

.btn-luxury-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    backdrop-filter: none;
}

.btn-luxury-secondary:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}

.btn-luxury-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-luxury-outline:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

/* Scroll Indicator */
.luxury-hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: float 3s ease-in-out infinite;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-indicator i {
    animation: bounce 2s infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* ================================
   Trust Bar with Icons
   ================================ */

.luxury-trust-bar {
    background: var(--color-surface);
    padding: 1.5rem 0;
    border-bottom: 2px solid var(--color-primary-muted);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.luxury-trust-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.luxury-trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-text);
    font-weight: 500;
    transition: all 0.3s var(--ease-out-expo);
}

.luxury-trust-item i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.luxury-trust-item:hover {
    transform: translateY(-2px);
    color: var(--color-primary-hover);
}

/* Homepage section depth: subtle wallpapers + separators + gentle motion */
.maka-home-trust-bar {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.maka-home-trust-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1000px 340px at 10% -40%, rgba(14, 165, 233, 0.14), transparent 62%),
        radial-gradient(920px 300px at 88% 130%, rgba(56, 189, 248, 0.12), transparent 65%);
    z-index: -1;
    pointer-events: none;
}

.maka-home-section {
    position: relative;
    overflow: clip;
    isolation: isolate;
}

.maka-home-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(560px 260px at 8% 22%, rgba(14, 165, 233, 0.1), transparent 70%),
        radial-gradient(620px 290px at 92% 80%, rgba(56, 189, 248, 0.08), transparent 74%);
    pointer-events: none;
}

.maka-home-section:nth-of-type(even)::before {
    background:
        radial-gradient(700px 260px at 84% 18%, rgba(14, 165, 233, 0.11), transparent 72%),
        radial-gradient(560px 250px at 18% 84%, rgba(56, 189, 248, 0.09), transparent 73%);
}

.maka-home-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: min(92vw, 1280px);
    height: 58px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.78;
    background:
        linear-gradient(180deg, transparent 0 38%, rgba(148, 163, 184, 0.14) 39% 41%, transparent 42% 100%),
        radial-gradient(120% 100% at 50% 0%, rgba(56, 189, 248, 0.17), rgba(255, 255, 255, 0) 68%);
    clip-path: polygon(0 36%, 8% 41%, 16% 35%, 24% 42%, 32% 34%, 40% 43%, 50% 35%, 60% 43%, 68% 34%, 76% 42%, 84% 35%, 92% 41%, 100% 36%, 100% 100%, 0 100%);
}

.maka-home-section:last-of-type::after {
    display: none;
}

.maka-home-section .container {
    position: relative;
    z-index: 1;
}

.maka-home-section .container::before {
    content: "";
    position: absolute;
    top: 10%;
    right: clamp(-3rem, -4vw, -1rem);
    width: clamp(170px, 28vw, 330px);
    height: clamp(170px, 28vw, 330px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 35%, rgba(14, 165, 233, 0.22), rgba(14, 165, 233, 0) 70%);
    filter: blur(3px);
    opacity: 0.42;
    z-index: -1;
    pointer-events: none;
    animation: makaHomeGlowFloat 13s ease-in-out infinite;
}

.maka-home-section:nth-of-type(even) .container::before {
    right: auto;
    left: clamp(-3rem, -4vw, -1rem);
    top: auto;
    bottom: 12%;
    animation-duration: 15s;
    animation-delay: -2.6s;
}

@keyframes makaHomeGlowFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.36;
    }
    50% {
        transform: translate3d(0, -12px, 0) scale(1.04);
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maka-home-section .container::before {
        animation: none;
    }
}

/* Cloud-wave section separators (Tailwind slate/sky–style soft gradients via SVG) */
.maka-cloud-divider {
    display: block;
    width: 100%;
    line-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.maka-cloud-divider__svg {
    display: block;
    width: 100%;
    height: clamp(44px, 7.5vw, 84px);
    vertical-align: middle;
}

.maka-cloud-divider--flip .maka-cloud-divider__svg {
    transform: scaleY(-1);
}

/* ================================
   Product Grid with 3D Cards
   ================================ */

.luxury-section {
    padding: 6rem 0;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-expo);
}

.luxury-section.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered slide-up when section enters view (IntersectionObserver adds .animate-on-scroll) */
@keyframes luxuryEntranceSlideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Headers, footers, FAQ rows: CSS transitions (no hover transform conflicts) */
.luxury-section .luxury-section-header,
.luxury-section .luxury-accordion > .luxury-accordion-item,
.luxury-section .luxury-section-footer,
.luxury-section .featured-empty-state {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.6s var(--ease-out-expo),
        transform 0.6s var(--ease-out-expo);
}

/* Cards & tiles with hover transforms: keyframe entrance so hover stays snappy */
.luxury-section .luxury-features-grid > .luxury-feature-item,
.luxury-section .maka-trust-grid > .maka-trust-card,
.luxury-section .featured-tools-grid .luxury-product-card,
.luxury-section .luxury-categories-grid > .luxury-category-card,
.luxury-section .luxury-testimonials-grid > .luxury-testimonial-card {
    opacity: 0;
}

.luxury-section.animate-on-scroll .luxury-section-header {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.06s;
}

.luxury-section.animate-on-scroll .luxury-features-grid > .luxury-feature-item:nth-child(1) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.08s both;
}
.luxury-section.animate-on-scroll .luxury-features-grid > .luxury-feature-item:nth-child(2) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.12s both;
}
.luxury-section.animate-on-scroll .luxury-features-grid > .luxury-feature-item:nth-child(3) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.16s both;
}
.luxury-section.animate-on-scroll .luxury-features-grid > .luxury-feature-item:nth-child(4) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.2s both;
}
.luxury-section.animate-on-scroll .luxury-features-grid > .luxury-feature-item:nth-child(n + 5) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.24s both;
}

.luxury-section.animate-on-scroll .maka-trust-grid > .maka-trust-card:nth-child(1) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.08s both;
}
.luxury-section.animate-on-scroll .maka-trust-grid > .maka-trust-card:nth-child(2) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.11s both;
}
.luxury-section.animate-on-scroll .maka-trust-grid > .maka-trust-card:nth-child(3) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.14s both;
}
.luxury-section.animate-on-scroll .maka-trust-grid > .maka-trust-card:nth-child(4) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.17s both;
}
.luxury-section.animate-on-scroll .maka-trust-grid > .maka-trust-card:nth-child(5) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.2s both;
}
.luxury-section.animate-on-scroll .maka-trust-grid > .maka-trust-card:nth-child(n + 6) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.23s both;
}

.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(1) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.09s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(2) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.13s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(3) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.17s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(4) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.21s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(5) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.25s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(6) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.29s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(7) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.33s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(8) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.37s both;
}
.luxury-section.animate-on-scroll .featured-tools-grid .luxury-product-card:nth-child(n + 9) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.41s both;
}

.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(1) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.08s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(2) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.11s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(3) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.14s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(4) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.17s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(5) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.2s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(6) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.23s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(7) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.26s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(8) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.29s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(9) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.32s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(10) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.35s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(11) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.38s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(12) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.41s both;
}
.luxury-section.animate-on-scroll .luxury-categories-grid > .luxury-category-card:nth-child(n + 13) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.44s both;
}

.luxury-section.animate-on-scroll .luxury-testimonials-grid > .luxury-testimonial-card:nth-child(1) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.09s both;
}
.luxury-section.animate-on-scroll .luxury-testimonials-grid > .luxury-testimonial-card:nth-child(2) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.15s both;
}
.luxury-section.animate-on-scroll .luxury-testimonials-grid > .luxury-testimonial-card:nth-child(3) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.21s both;
}
.luxury-section.animate-on-scroll .luxury-testimonials-grid > .luxury-testimonial-card:nth-child(n + 4) {
    animation: luxuryEntranceSlideUp 0.58s var(--ease-out-expo) 0.26s both;
}

.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(1) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.08s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(2) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.11s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(3) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.14s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(4) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.17s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(5) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.2s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(6) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.23s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(7) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.26s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(8) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.29s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(9) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.32s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(10) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.35s;
}
.luxury-section.animate-on-scroll .luxury-accordion > .luxury-accordion-item:nth-child(n + 11) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.38s;
}

.luxury-section.animate-on-scroll .luxury-section-footer {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.35s;
}

.luxury-section.animate-on-scroll .featured-empty-state {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
    .luxury-section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .luxury-section .luxury-section-header,
    .luxury-section .luxury-accordion > .luxury-accordion-item,
    .luxury-section .luxury-section-footer,
    .luxury-section .featured-empty-state {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .luxury-section .luxury-features-grid > .luxury-feature-item,
    .luxury-section .maka-trust-grid > .maka-trust-card,
    .luxury-section .featured-tools-grid .luxury-product-card,
    .luxury-section .luxury-categories-grid > .luxury-category-card,
    .luxury-section .luxury-testimonials-grid > .luxury-testimonial-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .luxury-section .luxury-section-title,
    .luxury-section .luxury-section-title::after,
    .luxury-section .luxury-section-label,
    .luxury-section .luxury-section-label i {
        animation: none !important;
        transition: none !important;
    }
}

.luxury-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.luxury-section-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.luxury-section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--fashion-black);
    margin-bottom: 1rem;
}

.luxury-section-description {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Landing page micro-interactions: headings and labels */
@keyframes landingHeaderGlow {
    0%,
    100% {
        text-shadow: 0 0 0 rgba(37, 99, 235, 0);
    }
    50% {
        text-shadow: 0 6px 24px rgba(37, 99, 235, 0.2);
    }
}

@keyframes landingIconNudge {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes landingUnderlineSweep {
    from {
        background-position: 0% 0;
    }
    to {
        background-position: 100% 0;
    }
}

.luxury-section .luxury-section-title {
    position: relative;
    display: inline-block;
    transition:
        transform 0.35s var(--ease-out-expo),
        color 0.35s var(--ease-out-expo),
        letter-spacing 0.35s var(--ease-out-expo);
}

.luxury-section .luxury-section-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    bottom: -0.22em;
    width: min(60%, 220px);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(37, 99, 235, 0),
        rgba(37, 99, 235, 0.8),
        rgba(37, 99, 235, 0)
    );
    background-size: 180% 100%;
    transform: translateX(-50%) scaleX(0.72);
    opacity: 0.75;
    transition:
        opacity 0.3s ease,
        transform 0.35s var(--ease-out-expo);
}

.luxury-section-header:hover .luxury-section-title {
    color: var(--color-primary-hover);
    transform: translateY(-2px);
    letter-spacing: -0.005em;
    animation: landingHeaderGlow 1.15s ease-in-out 1;
}

.luxury-section-header:hover .luxury-section-title::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
    animation: landingUnderlineSweep 1.2s linear infinite;
}

.luxury-section-label {
    transition:
        transform 0.35s var(--ease-out-expo),
        box-shadow 0.35s var(--ease-out-expo),
        border-color 0.35s var(--ease-out-expo);
}

.luxury-section-header:hover .luxury-section-label {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.luxury-section-label i {
    transition: transform 0.3s var(--ease-out-expo);
}

.luxury-section-header:hover .luxury-section-label i {
    animation: landingIconNudge 0.7s ease-in-out 2;
}

.maka-trust-card__title,
.luxury-category-name,
.luxury-product-name,
.luxury-accordion-button span {
    transition:
        color 0.25s ease,
        letter-spacing 0.25s ease;
}

.maka-trust-card:hover .maka-trust-card__title,
.luxury-category-card:hover .luxury-category-name,
.luxury-product-card:hover .luxury-product-name,
.luxury-accordion-item:hover .luxury-accordion-button span {
    color: var(--color-primary-hover);
    letter-spacing: 0.01em;
}

/* Featured tools (home): full opacity immediately — scroll animation was optional; grid must not sit under a phantom layer */
#featured.luxury-section {
    opacity: 1;
    transform: none;
}

.luxury-featured {
    background: linear-gradient(
        180deg,
        rgba(37, 99, 235, 0.04) 0%,
        var(--fashion-white) 35%,
        rgba(37, 99, 235, 0.03) 100%
    );
    border-block: 1px solid var(--color-border);
}

.luxury-featured .luxury-section-header {
    margin-bottom: 2.5rem;
}

.featured-tools-grid.luxury-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 991.98px) {
    .featured-tools-grid.luxury-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .featured-tools-grid.luxury-products-grid {
        grid-template-columns: 1fr;
    }
}

.luxury-featured .luxury-product-card {
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.luxury-featured .luxury-product-card:hover {
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}

.luxury-featured .luxury-section-footer {
    margin-top: 2.75rem;
    padding-top: 0;
}

/* Product Grid */
.luxury-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin: 0 auto;
    max-width: var(--max-width);
}

@media (max-width: 768px) {
    .luxury-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }
}

/* Product Card with 3D Effect */
.luxury-product-card {
    position: relative;
    background: var(--fashion-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
    transform-style: preserve-3d;
    perspective: 1000px;
    max-width: 290px;
    margin-inline: auto;
}

.luxury-product-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-3d);
}

.luxury-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Product Image with 3D Hover */
.luxury-product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background: var(--gray-100);
}

/* Featured / luxury cards: image links to product page */
.luxury-product-image-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.luxury-product-image-link:focus-visible {
    outline: 3px solid var(--color-primary, #2563eb);
    outline-offset: -3px;
}

.luxury-featured .luxury-product-badges {
    z-index: 4;
}

.luxury-product-link--below-image {
    display: block;
    text-decoration: none;
    color: inherit;
}

.luxury-product-card-actions.product-card-actions {
    padding: 0 1rem 1.25rem;
    margin-top: 0;
}

/* Action buttons sit on card body; product list uses .product-card-modern:hover */
.luxury-featured .luxury-product-card .product-card-action-btn {
    transform: translateY(0);
    opacity: 1;
}

.luxury-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s var(--ease-out-expo);
}

.luxury-product-card:has(.luxury-product-image-hover):hover .luxury-product-image-main {
    opacity: 0;
    transform: none;
}

.luxury-product-image-hover {
    opacity: 0;
    display: block !important;
}

.luxury-product-card:has(.luxury-product-image-hover):hover .luxury-product-image-hover {
    opacity: 1;
    transform: none;
}

/* Product Overlay */
.luxury-product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: all 0.4s var(--ease-out-expo);
}

.luxury-product-card:hover .luxury-product-overlay {
    opacity: 1;
}

.luxury-product-quick-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    transform: translateY(20px);
    transition: all 0.4s var(--ease-out-expo) 0.1s;
}

.luxury-product-card:hover .luxury-product-quick-actions {
    transform: translateY(0);
}

.luxury-quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--fashion-black);
    border: none;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    backdrop-filter: blur(10px);
    min-width: 0;
    max-width: 100%;
}

.luxury-quick-action-btn:hover {
    background: var(--fashion-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.luxury-quick-action-btn span {
    display: none;
}

@media (min-width: 768px) {
    .luxury-quick-action-btn span {
        display: inline;
    }
}

/* Product Badges */
.luxury-product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.luxury-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    animation: slideInLeft 0.5s var(--ease-out-expo);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.luxury-badge-new {
    background: linear-gradient(135deg, var(--accent-blue) 0%, #3a7bc8 100%);
    color: white;
}

.luxury-badge-sale {
    background: linear-gradient(135deg, var(--accent-red) 0%, #c0392b 100%);
    color: white;
}

.luxury-badge-bestseller {
    background: linear-gradient(135deg, var(--fashion-gold) 0%, var(--color-primary-hover) 100%);
    color: var(--fashion-black);
}

.luxury-badge-limited_edition {
    background: linear-gradient(135deg, var(--accent-purple) 0%, #7d3c98 100%);
    color: white;
}

/* Wishlist Button */
.luxury-wishlist-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    backdrop-filter: blur(10px);
}

.luxury-wishlist-btn:hover {
    background: var(--fashion-white);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.luxury-wishlist-btn i {
    color: var(--fashion-black);
    font-size: 1.1rem;
    transition: all 0.3s var(--ease-out-expo);
}

.luxury-wishlist-btn:hover i,
.luxury-wishlist-btn.active i {
    color: var(--accent-red);
}

.luxury-wishlist-btn.active i {
    font-weight: 900;
}

/* Product Info */
.luxury-product-info {
    padding: 1.5rem;
}

.luxury-product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fashion-black);
    margin-bottom: 0.75rem;
    transition: all 0.3s var(--ease-out-expo);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.luxury-product-card:hover .luxury-product-name {
    color: var(--fashion-gold);
}

/* Product Rating */
.luxury-product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.luxury-stars {
    display: flex;
    gap: 0.25rem;
}

.luxury-stars i {
    color: var(--gray-300);
    font-size: 0.9rem;
}

.luxury-stars i.active {
    color: var(--fashion-gold);
}

.luxury-rating-text {
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* Product Price */
.luxury-product-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.luxury-product-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--fashion-black);
}

/* Stock Alert */
.luxury-stock-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 193, 7, 0.1);
    color: #f57c00;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.luxury-stock-alert.out-of-stock {
    background: rgba(244, 67, 54, 0.1);
    color: #d32f2f;
}

/* ================================
   Categories Section
   ================================ */

.luxury-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.luxury-category-card {
    position: relative;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--fashion-white) 100%);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
    border: 2px solid transparent;
}

.luxury-category-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--fashion-gold);
}

.luxury-category-card::before {
    content: "";
    position: absolute;
    inset: -32% -20% auto;
    height: 65%;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 72%);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    transition: all 0.45s var(--ease-out-expo);
    pointer-events: none;
}

.luxury-category-card:hover::before {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.luxury-category-link {
    display: block;
    padding: 3rem 2rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.luxury-category-icon {
    position: relative;
    font-size: 3rem;
    color: var(--fashion-gold);
    margin-bottom: 1rem;
    transition: transform 0.4s var(--ease-out-expo);
    width: 90px;
    height: 90px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    perspective: 700px;
}

.luxury-category-icon i {
    position: relative;
    z-index: 4;
    font-size: 2.2rem;
    color: #3b82f6;
    text-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    transform: translateZ(20px);
}

.luxury-category-icon-glow {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, rgba(37, 99, 235, 0.08) 45%, rgba(37, 99, 235, 0) 72%);
    filter: blur(2px);
    opacity: 0.72;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.luxury-category-icon-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, 0.28);
    pointer-events: none;
}

.luxury-category-icon-ring--outer {
    inset: 2px;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2);
}

.luxury-category-icon-ring--inner {
    inset: 14px;
    border-color: rgba(37, 99, 235, 0.4);
}

@keyframes categoryIconFloat {
    0%, 100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: translateY(-4px) rotateX(8deg) rotateY(-8deg);
    }
}

@keyframes categoryGlowPulse {
    0%, 100% {
        opacity: 0.72;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes categoryRingSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.luxury-category-card:hover .luxury-category-icon {
    transform: scale(1.1) rotate(2deg);
    animation: categoryIconFloat 1.5s ease-in-out infinite;
}

.luxury-category-card:hover .luxury-category-icon i {
    transform: translateZ(26px) rotateY(10deg);
    color: var(--color-primary-hover);
}

.luxury-category-card:hover .luxury-category-icon-glow {
    animation: categoryGlowPulse 1.4s ease-in-out infinite;
}

.luxury-category-card:hover .luxury-category-icon-ring--outer {
    animation: categoryRingSpin 4.5s linear infinite;
}

.luxury-category-card:hover .luxury-category-icon-ring--inner {
    animation: categoryRingSpin 3.2s linear infinite reverse;
}

.luxury-category-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fashion-black);
    margin-bottom: 0.5rem;
}

.luxury-category-arrow {
    display: inline-block;
    margin-top: 1rem;
    color: var(--fashion-gold);
    transition: all 0.3s var(--ease-out-expo);
}

.luxury-category-card:hover .luxury-category-arrow {
    transform: translateX(10px);
}

@media (prefers-reduced-motion: reduce) {
    .luxury-category-card::before,
    .luxury-category-icon,
    .luxury-category-icon i,
    .luxury-category-icon-glow,
    .luxury-category-icon-ring {
        animation: none !important;
        transition: none !important;
    }
}

/* ================================
   Testimonials Section
   ================================ */

.luxury-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.luxury-testimonials-carousel {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.luxury-testimonials-track {
    display: block;
    width: 100%;
}

.luxury-testimonial-card {
    width: 100%;
    background: var(--fashion-white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    border: 1px solid rgba(37, 99, 235, 0.12);
    opacity: 0.84;
    transform: scale(0.98);
}

.luxury-testimonial-card.is-active {
    display: block;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.24);
}

.luxury-testimonial-card[hidden] {
    display: none !important;
}

.luxury-testimonial-card::before {
    content: '"';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 5rem;
    color: rgba(37, 99, 235, 0.1);
    font-family: var(--font-accent-serif);
    line-height: 1;
}

.luxury-testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.luxury-testimonial-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.luxury-proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1e3a8a;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    padding: 0.28rem 0.58rem;
}

.luxury-proof-chip i {
    color: var(--color-primary);
}

.luxury-testimonial-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.luxury-testimonial-stars i {
    color: var(--fashion-gold);
    font-size: 1rem;
}

.luxury-testimonial-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.luxury-testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.luxury-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
    flex-shrink: 0;
}

.luxury-testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.luxury-testimonial-author strong {
    font-size: 1.1rem;
    color: var(--fashion-black);
}

.luxury-testimonial-meta span {
    font-size: 0.9rem;
    color: var(--gray-500);
}

.luxury-testimonial-meta small {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.luxury-testimonials-controls {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.luxury-testimonial-nav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: #fff;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--ease-out-expo);
}

.luxury-testimonial-nav:hover {
    transform: translateY(-2px);
    background: var(--color-primary-soft);
    border-color: rgba(37, 99, 235, 0.45);
}

.luxury-testimonial-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.luxury-testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(37, 99, 235, 0.24);
    transition: all 0.2s ease;
}

.luxury-testimonial-dot.is-active {
    width: 24px;
    border-radius: 999px;
    background: var(--color-primary);
}

[dir='rtl'] .luxury-testimonial-nav i {
    transform: scaleX(-1);
}

@media (max-width: 768px) {
    .luxury-testimonial-card {
        padding: 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .luxury-testimonials-track,
    .luxury-testimonial-dot,
    .luxury-testimonial-nav,
    .luxury-testimonial-card {
        transition: none !important;
    }
}

/* ================================
   Features Section
   ================================ */

.luxury-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.luxury-features-grid--about {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 1100px;
}

@media (max-width: 699.98px) {
    .luxury-features-grid--about {
        grid-template-columns: 1fr;
    }
}

.luxury-feature-item {
    text-align: center;
    padding: 2rem;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    transition:
        background 0.35s var(--ease-out-expo),
        box-shadow 0.35s var(--ease-out-expo),
        border-color 0.35s var(--ease-out-expo);
}

.luxury-feature-item:hover {
    background: var(--fashion-white);
    box-shadow: var(--shadow-md);
    border-color: rgba(37, 99, 235, 0.12);
}

/* About cards: continuous motion + stronger hover (motion pauses on hover/focus) */
.luxury-feature-item--interactive {
    cursor: default;
}

/* 1 — Team: gentle collective “breathing” float */
@keyframes aboutMotionFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

.luxury-feature-item--float {
    animation: aboutMotionFloat 5.5s ease-in-out infinite;
}

.luxury-feature-item--float .luxury-feature-icon {
    animation: aboutIconBob 4s ease-in-out infinite;
}

@keyframes aboutIconBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* 2 — Catalog / power: sharp “electric” micro-pulse on the bolt */
@keyframes aboutMotionSpark {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    15% {
        transform: translateY(-2px) scale(1.01);
    }
    30% {
        transform: translateY(0) scale(1);
    }
}

@keyframes aboutIconBolt {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.08) rotate(-6deg);
        filter: brightness(1.15);
    }
    50% {
        transform: scale(1.02) rotate(4deg);
        filter: brightness(1.05);
    }
    75% {
        transform: scale(1.06) rotate(-3deg);
        filter: brightness(1.12);
    }
}

.luxury-feature-item--spark {
    animation: aboutMotionSpark 4.2s ease-in-out infinite;
}

.luxury-feature-item--spark .luxury-feature-icon {
    animation: aboutIconBolt 2.8s ease-in-out infinite;
}

/* 3 — Shipping route: slow lateral drift like movement on a map */
@keyframes aboutMotionDrift {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

@keyframes aboutIconPin {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(-4px) scale(1.05);
    }
}

.luxury-feature-item--drift {
    animation: aboutMotionDrift 7s ease-in-out infinite;
}

[dir='rtl'] .luxury-feature-item--drift {
    animation-name: aboutMotionDriftRtl;
}

@keyframes aboutMotionDriftRtl {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-6px);
    }
}

.luxury-feature-item--drift .luxury-feature-icon {
    animation: aboutIconPin 3.5s ease-in-out infinite;
}

[dir='rtl'] .luxury-feature-item--drift .luxury-feature-icon {
    animation-name: aboutIconPinRtl;
}

@keyframes aboutIconPinRtl {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(4px) scale(1.05);
    }
}

/* 4 — Value tag: subtle pendulum sway */
@keyframes aboutMotionSway {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0.9deg);
    }
    75% {
        transform: rotate(-0.9deg);
    }
}

@keyframes aboutIconTag {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

.luxury-feature-item--sway {
    animation: aboutMotionSway 6s ease-in-out infinite;
    transform-origin: center top;
}

.luxury-feature-item--sway .luxury-feature-icon {
    animation: aboutIconTag 5s ease-in-out infinite;
    transform-origin: center top;
}

.luxury-feature-item--interactive:hover {
    animation-play-state: paused;
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}

.luxury-feature-item--interactive:hover .luxury-feature-icon {
    animation-play-state: paused;
    transform: scale(1.08) rotateY(12deg);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35);
}

.luxury-feature-item--sway:hover {
    transform: translateY(-8px) rotate(0deg) !important;
}

@media (prefers-reduced-motion: reduce) {
    .luxury-feature-item--float,
    .luxury-feature-item--spark,
    .luxury-feature-item--drift,
    .luxury-feature-item--sway,
    .luxury-feature-item--float .luxury-feature-icon,
    .luxury-feature-item--spark .luxury-feature-icon,
    .luxury-feature-item--drift .luxury-feature-icon,
    .luxury-feature-item--sway .luxury-feature-icon {
        animation: none !important;
    }

    .luxury-feature-item--interactive:hover {
        transform: translateY(-4px) !important;
    }

    .luxury-feature-item--interactive:hover .luxury-feature-icon {
        transform: scale(1.05);
    }
}

.luxury-feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--fashion-gold) 0%, var(--color-primary-hover) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition:
        transform 0.4s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-out-expo);
}

.luxury-feature-icon i {
    font-size: 2rem;
    color: var(--fashion-black);
}

.luxury-feature-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--fashion-black);
    margin-bottom: 1rem;
}

.luxury-feature-description {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* ================================
   ToolBase About — parallel import, trust-first
   ================================ */
.maka-about {
    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 35%, #eff6ff 100%);
    position: relative;
}

.maka-about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.08), transparent 55%);
    pointer-events: none;
}

.maka-about .container {
    position: relative;
    z-index: 1;
}

.maka-about__header {
    margin-bottom: 2.5rem !important;
}

.maka-about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 1.5rem 2rem;
    align-items: center;
    margin-bottom: 2.25rem;
}

.maka-about__lead {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.maka-about-shield {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maka-about-shield__halo {
    position: absolute;
    width: min(32vw, 280px);
    height: min(32vw, 280px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.08) 48%, rgba(37, 99, 235, 0) 70%);
    filter: blur(8px);
    animation: makaShieldHalo 4.8s ease-in-out infinite;
}

.maka-about-shield__core {
    position: relative;
    width: min(26vw, 220px);
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    transform-style: preserve-3d;
    animation: makaShieldFloat 5.6s ease-in-out infinite;
}

.maka-about-shield__shape {
    position: absolute;
    inset: 12%;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: clamp(3.2rem, 7vw, 4.7rem);
    background: linear-gradient(160deg, #60a5fa 0%, #2563eb 42%, #1d4ed8 76%, #1e3a8a 100%);
    box-shadow:
        0 18px 36px rgba(37, 99, 235, 0.42),
        0 8px 14px rgba(15, 23, 42, 0.2),
        inset 0 2px 3px rgba(255, 255, 255, 0.55),
        inset 0 -8px 16px rgba(15, 23, 42, 0.24);
}

.maka-about-shield__ring {
    position: absolute;
    border-radius: 28px;
    border: 1px solid rgba(37, 99, 235, 0.32);
}

.maka-about-shield__ring--outer {
    inset: 0;
    animation: makaShieldSpin 10s linear infinite;
}

.maka-about-shield__ring--inner {
    inset: 9%;
    border-color: rgba(147, 197, 253, 0.46);
    animation: makaShieldSpinReverse 7s linear infinite;
}

.maka-about-shield__spark {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dbeafe;
    box-shadow: 0 0 14px rgba(147, 197, 253, 0.9);
}

.maka-about-shield__spark--a {
    top: 14%;
    right: 10%;
    animation: makaShieldSparkA 2.8s ease-in-out infinite;
}

.maka-about-shield__spark--b {
    bottom: 15%;
    left: 10%;
    animation: makaShieldSparkB 3.1s ease-in-out infinite;
}

@keyframes makaShieldFloat {
    0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(-8deg); }
    50% { transform: translateY(-10px) rotateX(7deg) rotateY(7deg); }
}

@keyframes makaShieldHalo {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.82; transform: scale(1.08); }
}

@keyframes makaShieldSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes makaShieldSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes makaShieldSparkA {
    0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.72; }
    50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
}

@keyframes makaShieldSparkB {
    0%, 100% { transform: translateY(0) scale(1.05); opacity: 0.88; }
    50% { transform: translateY(8px) scale(0.86); opacity: 0.62; }
}

.maka-pi-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0 auto 1.25rem;
    padding: 0.5rem 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #0f172a;
    background: linear-gradient(135deg, #fff 0%, #e0f2fe 100%);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12);
}

.maka-pi-badge__text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e3a8a;
}

[dir="rtl"] .maka-pi-badge__text {
    font-family: "Heebo", "Noto Sans Hebrew", "Inter", sans-serif;
}

html[lang="ar"] .maka-pi-badge__text {
    font-family: "Cairo", "Noto Kufi Arabic", "Inter", sans-serif;
}

.maka-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    max-width: 56rem;
    margin: 1.75rem auto 0;
    padding: 0 0.25rem;
}

.maka-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.maka-trust-chip i {
    color: #2563eb;
    font-size: 0.95rem;
    opacity: 0.9;
}

.maka-trust-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.maka-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .maka-trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.maka-trust-card {
    text-align: start;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 18px 44px rgba(37, 99, 235, 0.07);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.maka-trust-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08),
        0 28px 56px rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.22);
}

.maka-trust-card--honest {
    border-color: rgba(37, 99, 235, 0.2);
    background: linear-gradient(165deg, #fff 0%, #f0f9ff 55%, #fff 100%);
}

/* —— 3D mockup stage (per card) —— */
.maka-trust-card__mockup {
    position: relative;
    min-height: 200px;
    flex-shrink: 0;
    background: linear-gradient(165deg, #e0f2fe 0%, #f8fafc 45%, #eef2ff 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.maka-trust-card--honest .maka-trust-card__mockup {
    background: linear-gradient(165deg, #e2e8f0 0%, #f8fafc 50%, #e0e7ff 100%);
}

.maka-trust-card__body {
    padding: 1.25rem 1.35rem 1.5rem;
}

.maka-3d {
    position: relative;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 900px;
    overflow: hidden;
}

.maka-3d__glow {
    position: absolute;
    inset: auto 10% -20%;
    height: 55%;
    border-radius: 50%;
    filter: blur(36px);
    opacity: 0.55;
    pointer-events: none;
}

.maka-3d__glow--network {
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.45) 0%, transparent 70%);
    animation: maka3dGlowPulse 5s ease-in-out infinite;
}

.maka-3d__glow--catalog {
    background: radial-gradient(ellipse, rgba(14, 165, 233, 0.4) 0%, transparent 70%);
    animation: maka3dGlowPulse 4.2s ease-in-out infinite 0.5s;
}

@keyframes maka3dGlowPulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }
    50% {
        opacity: 0.65;
        transform: scale(1.06);
    }
}

/* 1 — Supply network */
.maka-3d-network {
    position: relative;
    width: 160px;
    height: 160px;
    transform-style: preserve-3d;
}

.maka-3d-network__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.9),
        0 12px 28px rgba(37, 99, 235, 0.45);
    animation: maka3dHubPulse 3.2s ease-in-out infinite;
}

@keyframes maka3dHubPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

.maka-3d-network__orbit {
    position: absolute;
    inset: 0;
    animation: maka3dOrbitSpin 22s linear infinite;
    transform-style: preserve-3d;
}

.maka-3d-network__node {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #bae6fd);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.45);
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
}

.maka-3d-network__node:nth-child(1) {
    transform: rotate(0deg) translateX(58px) rotate(0deg);
}
.maka-3d-network__node:nth-child(2) {
    transform: rotate(120deg) translateX(58px) rotate(-120deg);
}
.maka-3d-network__node:nth-child(3) {
    transform: rotate(240deg) translateX(58px) rotate(-240deg);
}

@keyframes maka3dOrbitSpin {
    to {
        transform: rotateY(360deg) rotateX(8deg);
    }
}

/* 2 — Product stack */
.maka-3d-catalog {
    position: relative;
    width: 200px;
    height: 180px;
    transform-style: preserve-3d;
    animation: maka3dCatalogRock 7s ease-in-out infinite;
}

@keyframes maka3dCatalogRock {
    0%,
    100% {
        transform: rotateY(-12deg) rotateX(6deg);
    }
    50% {
        transform: rotateY(10deg) rotateX(-4deg);
    }
}

.maka-3d-catalog__img {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(15, 23, 42, 0.18));
    transition: filter 0.3s ease;
}

.maka-3d-catalog__img--back {
    left: 8%;
    bottom: 12%;
    width: 120px;
    height: auto;
    transform: translateZ(-28px) scale(0.92);
    opacity: 0.85;
}

.maka-3d-catalog__img--mid {
    left: 22%;
    bottom: 18%;
    width: 110px;
    height: auto;
    transform: translateZ(-8px);
}

.maka-3d-catalog__img--front {
    right: 4%;
    bottom: 8%;
    width: 140px;
    height: auto;
    transform: translateZ(24px);
    animation: maka3dCatalogFloat 4s ease-in-out infinite;
}

@keyframes maka3dCatalogFloat {
    0%,
    100% {
        transform: translateZ(24px) translateY(0);
    }
    50% {
        transform: translateZ(28px) translateY(-6px);
    }
}

.maka-3d-catalog__shadow {
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: 70%;
    height: 14px;
    margin-left: -35%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(15, 23, 42, 0.22) 0%, transparent 72%);
    filter: blur(4px);
    transform: rotateX(78deg);
    animation: maka3dShadowPulse 4s ease-in-out infinite;
}

@keyframes maka3dShadowPulse {
    0%,
    100% {
        opacity: 0.7;
        transform: rotateX(78deg) scale(1);
    }
    50% {
        opacity: 0.95;
        transform: rotateX(78deg) scale(1.08);
    }
}

/* 3 — Map + route */
.maka-3d--ship {
    perspective: 700px;
}

.maka-3d-ship__map {
    position: absolute;
    inset: 12% 8%;
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(224, 242, 254, 0.95) 0%, rgba(241, 245, 249, 0.98) 100%),
        repeating-linear-gradient(-8deg, transparent, transparent 9px, rgba(37, 99, 235, 0.04) 9px, rgba(37, 99, 235, 0.04) 10px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
    transform: rotateX(8deg);
}

.maka-3d-ship__warehouse {
    position: absolute;
    left: 15%;
    bottom: 15%;
    z-index: 3;
    width: 68px;
    height: 50px;
    transform: perspective(320px) rotateY(-12deg);
    filter: drop-shadow(0 10px 12px rgba(15, 23, 42, 0.23));
    animation: maka3dWarehouseIdle 3.6s ease-in-out infinite;
}

.maka-3d-ship__warehouse-roof {
    position: absolute;
    left: 3px;
    right: 3px;
    top: -11px;
    height: 14px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(150deg, #1e40af 0%, #2563eb 62%, #60a5fa 100%);
    box-shadow: inset 0 -1px 0 rgba(191, 219, 254, 0.5);
}

.maka-3d-ship__warehouse-body {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fafc 0%, #dbeafe 100%);
    border: 1px solid rgba(37, 99, 235, 0.33);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.maka-3d-ship__warehouse-sign {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 24px;
    height: 10px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 7px;
    line-height: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    color: #1e3a8a;
    background: #e0f2fe;
    border: 1px solid rgba(56, 189, 248, 0.5);
}

.maka-3d-ship__warehouse-window {
    position: absolute;
    top: 17px;
    width: 12px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #bae6fd 0%, #60a5fa 100%);
    border: 1px solid rgba(30, 64, 175, 0.25);
}

.maka-3d-ship__warehouse-window--left {
    left: 8px;
}

.maka-3d-ship__warehouse-window--right {
    right: 8px;
}

.maka-3d-ship__warehouse-door {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 4px 4px 0 0;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(147, 197, 253, 0.95) 0 3px,
            rgba(96, 165, 250, 0.95) 3px 6px
        );
    border: 1px solid rgba(30, 64, 175, 0.35);
    border-bottom: 0;
}

.maka-3d-ship__warehouse-door::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: rgba(30, 64, 175, 0.6);
}

.maka-3d-ship__svg {
    position: relative;
    z-index: 2;
    width: 86%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.maka-3d-ship__path {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: maka3dShipDraw 3.8s ease-in-out infinite;
}

@keyframes maka3dShipDraw {
    0%,
    100% {
        stroke-dashoffset: 280;
        opacity: 0.85;
    }
    45%,
    55% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.maka-3d-ship__pin {
    position: absolute;
    right: 23%;
    top: 18%;
    z-index: 3;
    font-size: 1.75rem;
    color: #ef4444;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.45));
    animation: maka3dPinBob 2.2s ease-in-out infinite;
}

@keyframes maka3dPinBob {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.08);
    }
}

@keyframes maka3dWarehouseIdle {
    0%,
    100% {
        transform: perspective(320px) rotateY(-12deg) translateY(0);
    }
    50% {
        transform: perspective(320px) rotateY(-12deg) translateY(-2px);
    }
}

/* 4 — Checklist stack */
.maka-3d-list {
    position: relative;
    width: 150px;
    height: 130px;
    transform-style: preserve-3d;
    animation: maka3dListTilt 8s ease-in-out infinite;
}

@keyframes maka3dListTilt {
    0%,
    100% {
        transform: rotateX(8deg) rotateY(-10deg);
    }
    50% {
        transform: rotateX(4deg) rotateY(8deg);
    }
}

.maka-3d-list__slab {
    position: absolute;
    left: 0;
    right: 0;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.maka-3d-list__slab--a {
    bottom: 0;
    transform: translateZ(-16px) translateY(0);
    opacity: 0.75;
}

.maka-3d-list__slab--b {
    bottom: 22px;
    transform: translateZ(-6px);
    opacity: 0.9;
}

.maka-3d-list__slab--c {
    bottom: 44px;
    transform: translateZ(8px);
}

.maka-3d-list__check {
    position: absolute;
    right: 10px;
    bottom: 58px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.45);
    transform: translateZ(28px);
    animation: maka3dCheckPop 2.6s ease-in-out infinite;
}

@keyframes maka3dCheckPop {
    0%,
    100% {
        transform: translateZ(28px) scale(1);
    }
    40% {
        transform: translateZ(32px) scale(1.12);
    }
}

/* 5 — Support bubbles */
.maka-3d-support {
    position: relative;
    width: 180px;
    height: 150px;
}

.maka-3d-support__bubble {
    position: absolute;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #fff 0%, #e0f2fe 100%);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.maka-3d-support__bubble--1 {
    width: 88px;
    height: 52px;
    left: 8%;
    top: 18%;
    animation: maka3dBubbleA 4s ease-in-out infinite;
}

.maka-3d-support__bubble--2 {
    width: 72px;
    height: 44px;
    right: 6%;
    top: 42%;
    animation: maka3dBubbleB 4s ease-in-out infinite 0.4s;
}

@keyframes maka3dBubbleA {
    0%,
    100% {
        transform: translate(0, 0) rotate(-2deg);
    }
    50% {
        transform: translate(6px, -4px) rotate(2deg);
    }
}

@keyframes maka3dBubbleB {
    0%,
    100% {
        transform: translate(0, 0) rotate(3deg);
    }
    50% {
        transform: translate(-5px, 5px) rotate(-3deg);
    }
}

.maka-3d-support__headset {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: #fff;
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.45);
    animation: maka3dHeadset 3.5s ease-in-out infinite;
}

@keyframes maka3dHeadset {
    0%,
    100% {
        transform: translateX(-50%) translateY(0) rotateY(0deg);
    }
    50% {
        transform: translateX(-50%) translateY(-6px) rotateY(8deg);
    }
}

/* 6 — Honest / balance */
.maka-3d-honest {
    position: relative;
    width: 170px;
    height: 150px;
    transform-style: preserve-3d;
    animation: maka3dHonestSway 9s ease-in-out infinite;
}

@keyframes maka3dHonestSway {
    0%,
    100% {
        transform: rotateY(-6deg) rotateX(4deg);
    }
    50% {
        transform: rotateY(6deg) rotateX(-3deg);
    }
}

.maka-3d-honest__plate {
    position: absolute;
    inset: 28% 8% 18%;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    box-shadow: 0 14px 32px rgba(51, 65, 85, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.maka-3d-honest__beam {
    position: absolute;
    left: 50%;
    top: 12%;
    width: 4px;
    height: 42%;
    margin-left: -2px;
    border-radius: 4px;
    background: linear-gradient(180deg, #94a3b8, #64748b);
    transform-origin: 50% 100%;
    animation: maka3dBeam 5s ease-in-out infinite;
}

@keyframes maka3dBeam {
    0%,
    100% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(4deg);
    }
}

.maka-3d-honest__icon {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #334155;
    background: linear-gradient(180deg, #fff 0%, #e2e8f0 100%);
    box-shadow: 0 8px 20px rgba(51, 65, 85, 0.25);
}

.maka-trust-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.55rem;
    line-height: 1.35;
}

.maka-trust-card__text {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.58;
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .maka-3d-network__orbit,
    .maka-3d-network__hub,
    .maka-3d-network__node,
    .maka-3d-catalog,
    .maka-3d-catalog__img--front,
    .maka-3d-catalog__shadow,
    .maka-3d-ship__path,
    .maka-3d-ship__pin,
    .maka-3d-ship__warehouse,
    .maka-3d-list,
    .maka-3d-list__check,
    .maka-3d-support__bubble--1,
    .maka-3d-support__bubble--2,
    .maka-3d-support__headset,
    .maka-3d-honest,
    .maka-3d-honest__beam,
    .maka-3d__glow--network,
    .maka-3d__glow--catalog {
        animation: none !important;
    }

    .maka-3d-catalog {
        transform: rotateY(-8deg) rotateX(4deg);
    }

    .maka-3d-ship__path {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 575.98px) {
    .maka-3d-ship__warehouse {
        left: 12%;
        bottom: 14%;
        width: 60px;
        height: 44px;
    }

    .maka-trust-strip {
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        overflow-x: visible;
    }

    .maka-trust-chip:not(.maka-trust-chip--strip-extra) {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        justify-content: center;
        text-align: center;
        font-size: 0.76rem;
        padding: 0.4rem 0.55rem;
    }

    .maka-trust-chip--strip-extra {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .maka-about-intro {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .maka-about-shield {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maka-trust-chip:hover,
    .maka-trust-card:hover {
        transform: none;
    }

    .maka-about-shield__halo,
    .maka-about-shield__core,
    .maka-about-shield__ring--outer,
    .maka-about-shield__ring--inner,
    .maka-about-shield__spark--a,
    .maka-about-shield__spark--b {
        animation: none !important;
    }
}

/* ================================
   FAQ Section
   ================================ */

.luxury-faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.luxury-accordion-item {
    background: var(--fashion-white);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease-out-expo);
}

.luxury-accordion-item:hover {
    box-shadow: var(--shadow-md);
}

.luxury-accordion-header {
    margin: 0;
}

.luxury-accordion-button {
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--fashion-white);
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fashion-black);
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.luxury-accordion-button:hover {
    color: var(--fashion-gold);
}

.luxury-accordion-button i {
    transition: transform 0.3s var(--ease-out-expo);
}

.luxury-accordion-button:not(.collapsed) i {
    transform: rotate(180deg);
}

.luxury-accordion-collapse {
    transition: all 0.3s var(--ease-out-expo);
}

.luxury-accordion-body {
    padding: 1.5rem 2rem;
    color: var(--gray-700);
    line-height: 1.8;
    border-top: 1px solid var(--gray-200);
}

/* ================================
   Footer (compact)
   ================================ */

.footer {
    --footer-pad-y: clamp(1.5rem, 4vw, 2rem);
    background:
        linear-gradient(180deg, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0) 42%),
        linear-gradient(135deg, #f8fbff 0%, #f4f8ff 45%, #f9fbff 100%);
    color: var(--color-text-muted);
    padding: var(--footer-pad-y) 0 calc(var(--footer-pad-y) * 0.65);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    position: relative;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(37, 99, 235, 0.35) 45%,
        var(--color-primary) 50%,
        rgba(37, 99, 235, 0.35) 55%,
        transparent 100%
    );
}

.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
    background:
        radial-gradient(540px 220px at 8% 16%, rgba(56, 189, 248, 0.13), transparent 72%),
        radial-gradient(620px 280px at 92% 82%, rgba(37, 99, 235, 0.12), transparent 74%),
        linear-gradient(120deg, rgba(148, 163, 184, 0.08) 0 2px, transparent 2px 24px),
        linear-gradient(30deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 18px);
    background-size: auto, auto, 24px 24px, 18px 18px;
}

.footer__main {
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.footer__brand-mark {
    line-height: 0;
}

.footer__brand-logo {
    width: auto;
    max-width: min(220px, 85vw);
    height: 44px;
    object-fit: contain;
}

.footer__brand {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.footer__tagline {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 28ch;
}

.footer__heading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.footer__links li,
.footer__contact li {
    margin-bottom: 0.35rem;
}

.footer__links li:last-child,
.footer__contact li:last-child {
    margin-bottom: 0;
}

.footer a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 0.1rem 0;
}

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

.footer__contact a {
    color: var(--color-text-muted);
}

.footer__contact-address {
    color: var(--color-text-muted);
    padding: 0.1rem 0;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
}

.footer__copy {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    text-decoration: none;
    font-size: 0.75rem;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.footer__social-link:hover {
    color: var(--color-primary);
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--color-primary-soft, rgba(37, 99, 235, 0.06));
}

@media (max-width: 767.98px) {
    .footer::after {
        opacity: 0.62;
        background:
            radial-gradient(420px 200px at 12% 14%, rgba(56, 189, 248, 0.11), transparent 72%),
            radial-gradient(460px 220px at 88% 84%, rgba(37, 99, 235, 0.1), transparent 74%),
            linear-gradient(120deg, rgba(148, 163, 184, 0.06) 0 2px, transparent 2px 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer a,
    .footer__social-link {
        transition: none;
    }
}

/* Legacy mini-cart / elsewhere may still reference .social-links */
.social-links {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    text-decoration: none;
    font-size: 0.75rem;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.social-links a:hover {
    color: var(--color-primary);
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--color-primary-soft, rgba(37, 99, 235, 0.06));
    transform: none;
}

/* ================================
   Checkout Page Enhancements
   ================================ */

.checkout-container {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--fashion-white) 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.checkout-header {
    margin-bottom: 3rem;
}

.checkout-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--fashion-black);
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    letter-spacing: -0.02em;
}

.checkout-title__badge {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #16a34a 0%, #0ea5e9 100%);
    box-shadow:
        0 10px 22px rgba(14, 165, 233, 0.22),
        0 6px 16px rgba(22, 163, 74, 0.18);
    animation: checkoutSecurePulse 2.8s ease-in-out infinite;
}

.checkout-title__badge i {
    font-size: 0.95rem;
}

.checkout-title__text {
    display: inline-block;
    background: linear-gradient(100deg, #0f172a 0%, #0f172a 45%, #0ea5e9 65%, #16a34a 86%, #0f172a 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: checkoutSecureSheen 11s ease-in-out infinite;
}

@keyframes checkoutSecurePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 10px 22px rgba(14, 165, 233, 0.22),
            0 6px 16px rgba(22, 163, 74, 0.18);
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 14px 28px rgba(14, 165, 233, 0.3),
            0 9px 20px rgba(22, 163, 74, 0.24);
    }
}

@keyframes checkoutSecureSheen {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@supports not (background-clip: text) {
    .checkout-title__text {
        color: var(--fashion-black);
        background: none;
        animation: none;
    }
}

.checkout-subtitle {
    font-size: 1.1rem;
    color: var(--gray-600);
}

/* Guest Checkout Banner */
.guest-checkout-banner {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.05) 0%, 
        rgba(74, 144, 226, 0.02) 100%);
    border: 2px solid rgba(74, 144, 226, 0.2);
    border-radius: var(--border-radius);
    padding: 2rem;
    animation: slideDown 0.6s var(--ease-out-expo);
}

.guest-checkout-banner h3 {
    color: var(--fashion-black);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Checkout Cards */
.checkout-card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: all 0.3s var(--ease-out-expo);
    overflow: hidden;
}

.checkout-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.checkout-card .card-header {
    background: linear-gradient(135deg, var(--fashion-black) 0%, var(--fashion-charcoal) 100%);
    color: var(--fashion-white);
    padding: 1.5rem 2rem;
    border: none;
}

.checkout-card .card-header h5 {
    color: var(--fashion-white);
    margin: 0;
    font-size: 1.2rem;
}

.checkout-card .card-header .checkout-optional-label {
    color: #cbd5e1 !important;
    font-weight: 500;
}

.checkout-card .card-header i {
    color: var(--fashion-gold);
}

.checkout-shipping-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
}

.checkout-shipping-title__icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.checkout-shipping-title__icon i {
    color: #f8fafc;
    font-size: 0.9rem;
}

.checkout-shipping-title__text {
    position: relative;
    padding-bottom: 2px;
}

.checkout-shipping-title__text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.95), rgba(255, 255, 255, 0.85));
}

.checkout-summary {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--fashion-white) 100%);
}

/* Sticky summary: show loyalty without clipping; scroll inside card when content is tall */
.checkout-summary.checkout-card {
    overflow: visible;
}

.checkout-summary.checkout-card:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

.checkout-summary .card-body {
    max-height: min(90vh, 56rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.checkout-summary .checkout-total-row {
    position: relative;
    align-items: baseline;
}

.checkout-summary .checkout-total-amount {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    padding-inline-start: 0.2rem;
    min-width: max-content;
    flex-shrink: 0;
    overflow: visible;
}

/* Checkout loyalty — blue theme (replaces warning/yellow) */
.checkout-loyalty-earn {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.07) 0%, rgba(59, 130, 246, 0.14) 100%);
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1);
    color: var(--color-text);
}

.checkout-loyalty-earn__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
    font-weight: 700;
}

.checkout-loyalty-earn__head i {
    color: var(--color-primary);
}

.checkout-loyalty-earn__highlight {
    background: var(--color-surface);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}

.checkout-loyalty-earn__points {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 1.1rem;
}

.checkout-loyalty-earn__balance {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(37, 99, 235, 0.15);
}

.checkout-loyalty-earn__balance strong {
    color: var(--color-primary);
    font-size: 1.15rem;
}

.checkout-loyalty-earn__tier {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 0;
}

.checkout-loyalty-earn__tier i {
    color: var(--color-primary);
}

.checkout-loyalty-redeem {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.05) 0%, rgba(241, 245, 249, 0.95) 100%);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.checkout-loyalty-redeem .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.checkout-loyalty-redeem .badge {
    background: var(--color-primary) !important;
}

/* Checkout — strict return policy summary */
.checkout-return-policy {
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.06) 0%, rgba(241, 245, 249, 0.9) 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.checkout-return-policy__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.checkout-return-policy__head i {
    font-size: 1.05rem;
    opacity: 0.9;
}

.checkout-return-policy__list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text);
    margin-bottom: 0.65rem;
}

.checkout-return-policy__list li:last-of-type {
    margin-bottom: 0;
}

.checkout-return-policy__icon {
    flex-shrink: 0;
    width: 1.35rem;
    text-align: center;
    margin-top: 0.12rem;
    color: var(--color-primary);
    opacity: 0.85;
}

.checkout-return-policy__foot {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(37, 99, 235, 0.12);
    color: var(--color-text-muted);
}

.checkout-return-policy__foot a {
    font-weight: 600;
}

/* Checkout Submit Button */
.checkout-submit-btn {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 55%, #0b1220 100%);
    border: none;
    padding: 1rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 14px;
}

.checkout-submit-btn__icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-submit-btn__text {
    flex: 1;
    text-align: center;
}

.checkout-submit-btn__chevron {
    opacity: 0.9;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.checkout-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s var(--ease-out-expo);
}

.checkout-submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.45);
}

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

.checkout-submit-btn:hover .checkout-submit-btn__chevron {
    transform: translateX(4px);
}

.checkout-submit-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Security Notice */
.security-notice {
    padding: 1rem;
    background: rgba(39, 174, 96, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.security-notice i {
    font-size: 1.2rem;
}

/* Checkout Progress — 3D moving step mockups */
.checkout-progress-3d {
    background: linear-gradient(160deg, #f0f7ff 0%, var(--fashion-white) 45%, #e8f0fe 100%);
    padding: 2rem 1.5rem 2.25rem;
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(37, 99, 235, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    border: 1px solid rgba(37, 99, 235, 0.12);
    animation: fadeInUp 0.8s var(--ease-out-expo);
    perspective: 1200px;
}

.checkout-progress-3d__rail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
    max-width: 920px;
    margin: 0 auto;
}

.checkout-progress-3d__step {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 5.5rem;
    cursor: pointer;
}

@media (min-width: 576px) {
    .checkout-progress-3d__step {
        max-width: 6.5rem;
    }
}

.checkout-progress-3d__mockup {
    --mockup-tilt-x: 14deg;
    --mockup-tilt-y: -10deg;
    width: 4.25rem;
    height: 4.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    border-radius: 14px;
    transform-style: preserve-3d;
    transform: perspective(380px) rotateX(var(--mockup-tilt-x)) rotateY(var(--mockup-tilt-y)) translateZ(0);
    background: linear-gradient(155deg, #dfe8f8 0%, #ffffff 38%, #c7d9f8 100%);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.18),
        0 4px 8px rgba(37, 99, 235, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -6px 16px rgba(37, 99, 235, 0.08) inset;
    color: var(--color-primary);
    font-size: 1.35rem;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
    animation: checkout3d-float 5s ease-in-out infinite;
    animation-delay: var(--step-delay, 0s);
}

@media (min-width: 576px) {
    .checkout-progress-3d__mockup {
        width: 4.75rem;
        height: 4.75rem;
        font-size: 1.5rem;
    }
}

.checkout-progress-3d__sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg, transparent 35%, rgba(255, 255, 255, 0.65) 48%, transparent 62%);
    pointer-events: none;
    opacity: 0.85;
    transform: translateZ(1px);
}

.checkout-progress-3d__icon {
    transform: translateZ(12px);
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.15));
    transition: transform 0.28s var(--ease-out-expo), filter 0.28s ease, color 0.28s ease;
}

.checkout-progress-3d__check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.45);
    transform: translateZ(20px);
}

.checkout-progress-3d__step:not(.is-done) .checkout-progress-3d__check {
    display: none;
}

.checkout-progress-3d__step.is-done .checkout-progress-3d__mockup {
    background: linear-gradient(155deg, #bfdbfe 0%, #eff6ff 45%, #93c5fd 100%);
    color: var(--color-primary-hover);
    box-shadow:
        0 14px 28px rgba(37, 99, 235, 0.22),
        0 2px 0 rgba(255, 255, 255, 0.85) inset;
}

.checkout-progress-3d__step.is-active .checkout-progress-3d__mockup {
    background: linear-gradient(155deg, var(--color-primary) 0%, #3b82f6 50%, #2563eb 100%);
    color: #fff;
    --mockup-tilt-x: 10deg;
    --mockup-tilt-y: -14deg;
    box-shadow:
        0 18px 36px rgba(37, 99, 235, 0.45),
        0 0 0 2px rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(255, 255, 255, 0.25) inset;
    animation-name: checkout3d-float, checkout3d-glow;
    animation-duration: 5s, 3.2s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-delay: var(--step-delay, 0s), 0s;
}

.checkout-progress-3d__step.is-active .checkout-progress-3d__sheen {
    background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
}

.checkout-progress-3d__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.checkout-progress-3d__num {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    line-height: 1;
    opacity: 0.85;
}

.checkout-progress-3d__step:not(.is-active):not(.is-done) .checkout-progress-3d__num {
    color: var(--gray-500);
}

.checkout-progress-3d__name {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--fashion-black);
    line-height: 1.2;
}

@media (min-width: 576px) {
    .checkout-progress-3d__name {
        font-size: 0.82rem;
    }
}

.checkout-progress-3d__step.is-active .checkout-progress-3d__name {
    color: var(--color-primary);
}

.checkout-progress-3d__bridge {
    flex: 1 1 auto;
    min-width: 0.5rem;
    height: 5px;
    align-self: center;
    margin-top: 2rem;
    border-radius: 4px;
    background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transform: translateY(-14px);
}

.checkout-progress-3d__bridge.is-done {
    background: linear-gradient(90deg, var(--color-primary), #60a5fa, var(--color-primary));
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}

@keyframes checkout3d-icon-bounce {
    0%,
    100% {
        transform: translateZ(12px) translateY(0) rotate(0deg) scale(1);
    }
    35% {
        transform: translateZ(18px) translateY(-2px) rotate(-5deg) scale(1.08);
    }
    70% {
        transform: translateZ(15px) translateY(0) rotate(4deg) scale(1.03);
    }
}

@keyframes checkout3d-icon-ripple {
    0% {
        box-shadow:
            0 12px 24px rgba(37, 99, 235, 0.2),
            0 2px 0 rgba(255, 255, 255, 0.9) inset;
    }
    50% {
        box-shadow:
            0 18px 34px rgba(37, 99, 235, 0.34),
            0 0 0 3px rgba(59, 130, 246, 0.25),
            0 2px 0 rgba(255, 255, 255, 0.9) inset;
    }
    100% {
        box-shadow:
            0 12px 24px rgba(37, 99, 235, 0.2),
            0 2px 0 rgba(255, 255, 255, 0.9) inset;
    }
}

@keyframes checkout3d-float {
    0%, 100% {
        transform: perspective(380px) rotateX(var(--mockup-tilt-x)) rotateY(var(--mockup-tilt-y)) translateY(0) translateZ(0);
    }
    50% {
        transform: perspective(380px) rotateX(calc(var(--mockup-tilt-x) - 3deg)) rotateY(calc(var(--mockup-tilt-y) + 4deg)) translateY(-6px) translateZ(10px);
    }
}

@keyframes checkout3d-glow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.08);
    }
}

@media (hover: hover) {
    .checkout-progress-3d__step:hover .checkout-progress-3d__mockup {
        transform: perspective(380px) rotateX(calc(var(--mockup-tilt-x) - 4deg)) rotateY(calc(var(--mockup-tilt-y) + 6deg)) translateY(-4px) translateZ(14px);
        animation-name: checkout3d-float, checkout3d-icon-ripple;
        animation-duration: 5s, 0.75s;
        animation-iteration-count: infinite, 1;
        animation-timing-function: ease-in-out, ease-out;
    }

    .checkout-progress-3d__step:hover .checkout-progress-3d__icon {
        animation: checkout3d-icon-bounce 0.58s cubic-bezier(0.34, 1.56, 0.64, 1);
        color: #1d4ed8;
        filter: drop-shadow(0 5px 10px rgba(37, 99, 235, 0.35));
    }
}

.checkout-progress-3d__step.is-interacting .checkout-progress-3d__mockup {
    transform: perspective(380px) rotateX(var(--hover-tilt-x, 9deg)) rotateY(var(--hover-tilt-y, -9deg)) translateY(-3px) translateZ(12px);
}

.checkout-progress-3d__step.is-interacting .checkout-progress-3d__icon {
    animation: checkout3d-icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .checkout-progress-3d__mockup {
        animation: none !important;
    }

    .checkout-progress-3d__step.is-active .checkout-progress-3d__mockup {
        animation: none !important;
    }

    .checkout-progress-3d__step .checkout-progress-3d__icon {
        animation: none !important;
    }
}

@media (max-width: 575px) {
    .checkout-progress-3d {
        padding: 1.35rem 0.65rem 1.65rem;
    }

    .checkout-progress-3d__rail {
        gap: 0.15rem;
    }

    .checkout-progress-3d__bridge {
        margin-top: 1.65rem;
        transform: translateY(-10px);
        height: 4px;
    }
}

/* ================================
   Cards & Forms
   ================================ */

.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease-out-expo);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.card-body {
    padding: 2rem;
}

.form-control,
.form-select {
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s var(--ease-out-expo);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Checkout state dropdown: remove RTL leading gap/clipping in mixed EN/HE labels */
#state_select {
    direction: ltr;
    text-align: left;
    /* Keep text clear of native select arrow for long labels */
    padding-right: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#state_select option {
    direction: ltr;
    text-align: left;
}

.form-label {
    font-weight: 600;
    color: var(--fashion-black);
    margin-bottom: 0.5rem;
}

.form-check-input {
    border: 2px solid var(--gray-300);
    width: 1.25rem;
    height: 1.25rem;
}

.form-check-input:checked {
    background-color: var(--fashion-gold);
    border-color: var(--fashion-gold);
}

.checkout-legal-check {
    align-items: flex-start;
}

.checkout-legal-check__input {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.24s ease, border-color 0.2s ease;
}

.checkout-legal-check__label {
    cursor: pointer;
    transition: color 0.22s ease, transform 0.22s ease;
}

.checkout-legal-check:hover .checkout-legal-check__input {
    transform: translateY(-1px) scale(1.04);
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.16);
}

.checkout-legal-check:hover .checkout-legal-check__label {
    color: var(--fashion-black);
    transform: translateX(1px);
}

.checkout-legal-check__input:checked {
    animation: checkoutLegalCheckPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 0 0.2rem rgba(234, 179, 8, 0.2);
}

.checkout-legal-check__input:checked + .checkout-legal-check__label {
    animation: checkoutLegalLabelGlow 0.55s ease;
}

@keyframes checkoutLegalCheckPop {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes checkoutLegalLabelGlow {
    0% {
        color: inherit;
        text-shadow: none;
    }
    50% {
        color: var(--color-primary, #2563eb);
        text-shadow: 0 1px 8px rgba(37, 99, 235, 0.16);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

/* ================================
   Buttons
   ================================ */

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s var(--ease-out-expo);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
}

.btn-outline-primary {
    border: 2px solid var(--fashion-gold);
    color: var(--fashion-gold);
    background: transparent;
}

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

.btn-secondary {
    background: var(--gray-600);
    color: white;
}

.btn-secondary:hover {
    background: var(--gray-700);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* ================================
   Alerts & Flash Messages
   ================================ */

.alert {
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    border: none;
    box-shadow: var(--shadow-sm);
    animation: slideDown 0.4s var(--ease-out-expo);
}

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

.alert-success {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1) 0%, rgba(39, 174, 96, 0.05) 100%);
    color: #1e7e34;
    border-left: 4px solid var(--accent-green);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
    color: #c82333;
    border-left: 4px solid var(--accent-red);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    color: #856404;
    border-left: 4px solid var(--accent-warning);
}

.alert-info {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.05) 100%);
    color: #004085;
    border-left: 4px solid var(--accent-blue);
}

/* Keep flash text clear of dismiss "X" in LTR/RTL */
.site-flash-alert.alert-dismissible {
    padding-inline-end: 3.25rem;
}

[dir="rtl"] .site-flash-alert.alert-dismissible {
    padding-inline-start: 3.25rem;
    padding-inline-end: 1.5rem;
}

/* Special checkout-selection flash */
.site-flash-alert.cart-select-required {
    border-left-color: #f59e0b;
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(251, 191, 36, 0.08) 100%);
    color: #7c2d12;
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.16);
    animation: cart-select-required-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    position: relative;
}
.site-flash-alert.cart-select-required::before {
    content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-inline-end: 0.55rem;
    color: #d97706;
}
[dir="rtl"] .site-flash-alert.cart-select-required {
    border-left-color: transparent;
    border-right: 4px solid #f59e0b;
}
@keyframes cart-select-required-pop {
    0% { transform: translateY(-8px) scale(0.98); opacity: 0.55; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ================================
   Loading & Skeleton
   ================================ */

.skeleton-container {
    animation: fadeIn 0.3s var(--ease-out-expo);
}

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

.content-container {
    animation: fadeIn 0.6s var(--ease-out-expo);
}

.skeleton-luxury-product-image {
    width: 100%;
    padding-top: 125%;
    background: linear-gradient(90deg, 
        var(--gray-200) 0%, 
        var(--gray-100) 50%, 
        var(--gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--border-radius);
}

.skeleton-luxury-product-info {
    padding: 1rem;
}

.skeleton-luxury-product-name,
.skeleton-luxury-product-rating,
.skeleton-luxury-product-price {
    height: 20px;
    background: linear-gradient(90deg, 
        var(--gray-200) 0%, 
        var(--gray-100) 50%, 
        var(--gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

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

/* ================================
   Modal Improvements
   ================================ */

.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 1.5rem 2rem;
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 1.5rem 2rem;
}

/* Cookie + language preference modal */
.cookie-preference-dialog {
    max-width: 700px;
    padding: 1rem;
}

.cookie-preference-content {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    background:
        radial-gradient(1200px 420px at 18% -8%, rgba(59, 130, 246, 0.2), transparent 60%),
        radial-gradient(1000px 360px at 90% 110%, rgba(14, 165, 233, 0.16), transparent 64%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.88));
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.25);
    backdrop-filter: blur(8px);
    transform-style: preserve-3d;
    transition: transform 0.18s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: modalFloatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade out entire modal panel on Continue (avoids empty-looking shell from hiding inner sections only) */
.cookie-preference-content.is-closing-fade {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.38s ease, transform 0.38s ease;
    pointer-events: none;
}

.cookie-preference-bg-shape {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
}

.cookie-preference-bg-shape--one {
    width: 220px;
    height: 220px;
    inset-inline-end: -60px;
    top: -80px;
    background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.45), rgba(14, 165, 233, 0.08) 72%);
    animation: modalBlobDrift 9s ease-in-out infinite;
}

.cookie-preference-bg-shape--two {
    width: 180px;
    height: 180px;
    inset-inline-start: -50px;
    bottom: -70px;
    background: radial-gradient(circle at 70% 40%, rgba(99, 102, 241, 0.28), rgba(59, 130, 246, 0.05) 70%);
    animation: modalBlobDrift 7s ease-in-out infinite reverse;
}

.cookie-preference-header {
    position: relative;
    z-index: 2;
    background: linear-gradient(120deg, rgba(37, 99, 235, 0.16), rgba(14, 165, 233, 0.12));
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

.cookie-preference-header .modal-title i {
    color: var(--primary-color);
}

.cookie-preference-body {
    position: relative;
    z-index: 2;
    padding-top: 1.5rem;
}

.cookie-preference-text {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.65;
}

.language-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.language-choice-card {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.65));
    border-radius: 1.1rem;
    min-height: 132px;
    padding: 0.85rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    position: relative;
    width: 100%;
    text-align: center;
}

.language-choice-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.16s ease;
}

.language-choice-card:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(37, 99, 235, 0.54);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
}

.language-choice-card.active {
    border-color: rgba(37, 99, 235, 0.74);
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.16));
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25);
}

.language-choice-card.active::after {
    border-color: rgba(255, 255, 255, 0.65);
}

.language-choice-flag {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.language-choice-flag--sm {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
    vertical-align: middle;
}

.language-choice-name {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 1rem;
    margin-top: 0.15rem;
}

.flag-en {
    background:
        linear-gradient(0deg, #b22234 0 14%, #ffffff 14% 28%, #b22234 28% 42%, #ffffff 42% 56%, #b22234 56% 70%, #ffffff 70% 84%, #b22234 84% 100%);
}

.flag-en::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 52%;
    height: 55%;
    background: #3c3b6e;
}

.flag-en::after {
    content: "";
    position: absolute;
    left: 7%;
    top: 7%;
    width: 38%;
    height: 41%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.1px, transparent 1.2px);
    background-size: 6px 6px;
    background-position: 0 0;
    opacity: 0.95;
}

.flag-he {
    background: linear-gradient(
        to bottom,
        #1d4ed8 0 16%,
        #ffffff 16% 84%,
        #1d4ed8 84% 100%
    );
    position: relative;
    border-radius: 2px;
}

.flag-he::before {
    content: none;
}

.flag-he::after {
    content: "✡";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #1d4ed8;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
}

.flag-ar {
    background:
        linear-gradient(0deg, #000000 0 33.33%, #ffffff 33.33% 66.66%, #16a34a 66.66% 100%);
}

.flag-ar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background: #dc2626;
}

.flag-ru {
    background: linear-gradient(
        to bottom,
        #ffffff 0 33.33%,
        #2563eb 33.33% 66.66%,
        #dc2626 66.66% 100%
    );
}

.cookie-preference-subnote {
    color: var(--gray-600);
    font-size: 0.88rem;
}

.cookie-preference-footer .btn {
    min-width: 190px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24);
}

@media (max-width: 992px) {
    .language-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cookie-preference-footer .btn:hover {
    transform: translateY(-1px);
}

.cookie-preference-footer {
    position: relative;
    z-index: 2;
}

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

@keyframes modalBlobDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -8px, 0) scale(1.04);
    }
}

@media (max-width: 576px) {
    .cookie-preference-dialog {
        margin: 0.75rem;
        padding: 0;
    }

    .cookie-preference-body,
    .cookie-preference-header,
    .cookie-preference-footer {
        padding: 1rem;
    }

    .cookie-preference-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .cookie-preference-footer .btn {
        width: 100%;
        margin: 0;
        min-width: 0;
        font-size: 0.95rem;
        padding: 0.55rem 0.9rem;
    }

    .language-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .language-choice-card {
        min-height: 84px;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 0.45rem;
        border-radius: 0.95rem;
        gap: 0.2rem;
    }

    .language-choice-flag {
        width: 34px;
        height: 34px;
    }

    .language-choice-name {
        font-size: 0.92rem;
    }
}

/* ================================
   Responsive Design
   ================================ */

@media (max-width: 992px) {
    :root {
        --nav-height: 70px;
    }
    
    .luxury-hero {
        min-height: 70vh;
    }
    
    .luxury-section {
        padding: 4rem 0;
    }
    
    .luxury-hero-stats {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .luxury-hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-luxury-primary,
    .btn-luxury-secondary,
    .btn-luxury-outline {
        width: 100%;
        justify-content: center;
    }
    
    .luxury-trust-items {
        flex-direction: column;
        gap: 1rem;
    }

    .luxury-trust-item {
        display: none;
    }

    .luxury-trust-item.luxury-trust-item-mobile-primary {
        display: flex;
    }
    
    .luxury-section-header {
        margin-bottom: 2rem;
    }
}

/* ================================
   Utility Classes
   ================================ */

.text-gold {
    color: var(--fashion-gold) !important;
}

.bg-gold {
    background-color: var(--fashion-gold) !important;
}

.text-fashion-black {
    color: var(--fashion-black) !important;
}

.bg-fashion-black {
    background-color: var(--fashion-black) !important;
}

/* RTL Support */
[dir="rtl"] .luxury-hero-buttons {
    flex-direction: row-reverse;
}

[dir="rtl"] .luxury-product-badges {
    left: auto;
    right: 1rem;
}

[dir="rtl"] .luxury-wishlist-btn {
    right: auto;
    left: 1rem;
}


/* ================================
   Mini Cart Sidebar
   ================================ */

.mini-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none !important;
    pointer-events: none;
}

.mini-cart[aria-hidden="false"] {
    display: flex !important;
    pointer-events: auto;
}

.mini-cart-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mini-cart[aria-hidden="false"] .mini-cart-overlay {
    opacity: 1;
}

.mini-cart-panel {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

[dir="rtl"] .mini-cart-panel {
    transform: translateX(-100%);
}

.mini-cart[aria-hidden="false"] .mini-cart-panel {
    transform: translateX(0);
}

.mini-cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-cart-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.mini-cart-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: #6b7280;
    transition: color 0.2s;
}

.mini-cart-close:hover {
    color: #111827;
}

.mini-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.mini-cart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    gap: 1rem;
    color: #6b7280;
}

.mini-cart-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.mini-cart-total {
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.mini-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ================================
   Accessibility Widget
   ================================ */

.accessibility-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
    top: auto;
    transform: none;
    z-index: 9998;
    isolation: isolate;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: min(92vw, 420px);
}

.accessibility-widget--open {
    filter: drop-shadow(0 10px 28px rgba(37, 99, 235, 0.22));
}

.accessibility-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 50px;
    padding: 0.75rem 1rem;
    background: linear-gradient(140deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow:
        0 10px 24px rgba(37, 99, 235, 0.35),
        0 4px 10px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        background 0.28s ease,
        transform 0.22s cubic-bezier(0.34, 1.45, 0.64, 1),
        box-shadow 0.28s ease,
        filter 0.25s ease;
}

.accessibility-toggle-text {
    display: inline;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.accessibility-toggle:hover {
    background: linear-gradient(140deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 16px 28px rgba(37, 99, 235, 0.45),
        0 8px 14px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.accessibility-toggle:active {
    transform: translateY(-1px) scale(0.97);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition-duration: 0.08s;
}

.accessibility-widget--open .accessibility-toggle {
    background: linear-gradient(140deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow:
        0 14px 26px rgba(37, 99, 235, 0.42),
        0 6px 12px rgba(15, 23, 42, 0.2);
}

.accessibility-toggle:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.accessibility-toggle i {
    font-size: 1.25rem;
    transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.accessibility-widget--open .accessibility-toggle i {
    transform: rotate(-12deg) scale(1.1);
}

.accessibility-panel {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    left: 0;
    right: auto;
    top: auto;
    width: 100%;
    min-width: min(400px, calc(100vw - 40px));
    max-width: 400px;
    max-height: 80vh;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.97);
    transform-origin: bottom left;

    transition:
        opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.34s,
        box-shadow 0.3s ease;
}

.accessibility-panel[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s,
        box-shadow 0.35s ease;
}

.accessibility-panel-header {
    padding: 1.5rem;
    background: linear-gradient(145deg, #1d4ed8 0%, #1e40af 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accessibility-panel-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.accessibility-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.4rem 0.55rem;
    line-height: 1;
    border-radius: 10px;
    transition:
        opacity 0.2s ease,
        transform 0.2s cubic-bezier(0.34, 1.45, 0.64, 1),
        background 0.2s ease;
}

.accessibility-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.08);
}

.accessibility-close:active {
    transform: scale(0.94);
}

.accessibility-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.accessibility-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.accessibility-panel[aria-hidden="false"] .accessibility-panel-body {
    animation: a11y-panel-body-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}

@keyframes a11y-panel-body-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessibility-statement {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.accessibility-statement p {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: #4b5563;
}

.accessibility-statement-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fashion-black);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 6px;
    transition:
        color 0.2s ease,
        gap 0.2s ease,
        transform 0.2s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.accessibility-statement-link:hover {
    text-decoration: underline;
    gap: 0.65rem;
    color: var(--color-primary);
}

.accessibility-statement-link:active {
    transform: scale(0.98);
}

.accessibility-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.accessibility-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.accessibility-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--fashion-black);
}

.accessibility-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.accessibility-controls button {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.2s ease,
        transform 0.18s cubic-bezier(0.34, 1.45, 0.64, 1),
        box-shadow 0.22s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.accessibility-controls button:hover {
    background: #eef2ff;
    border-color: #bfdbfe;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
}

.accessibility-controls button:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transition-duration: 0.08s;
}

.accessibility-controls button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.accessibility-controls button.active {
    background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
}

.accessibility-controls button.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25);
}

.accessibility-reset {
    width: 100%;
    padding: 0.75rem;
    background: var(--fashion-black);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.22s ease,
        transform 0.18s cubic-bezier(0.34, 1.45, 0.64, 1),
        box-shadow 0.22s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.accessibility-reset:hover {
    background: var(--fashion-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.accessibility-reset:active {
    transform: translateY(0) scale(0.98);
}

.accessibility-toggle-btn .toggle-label-on {
    display: none;
}

.accessibility-toggle-btn[data-state="on"] .toggle-label-off {
    display: none;
}

.accessibility-toggle-btn[data-state="on"] .toggle-label-on {
    display: inline;
}

.accessibility-btn.accessibility-reset-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    background: linear-gradient(145deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
    color: #fff;
    border: 1px solid #dc2626;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow:
        0 10px 20px rgba(220, 38, 38, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.accessibility-btn.accessibility-reset-btn:hover {
    background: linear-gradient(145deg, #f87171 0%, #ef4444 56%, #dc2626 100%);
    border-color: #ef4444;
    transform: translateY(-2px);
    box-shadow:
        0 14px 24px rgba(220, 38, 38, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.accessibility-btn.accessibility-reset-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Respect system reduced motion for the widget (in addition to body.a11y-reduce-motion) */
@media (prefers-reduced-motion: reduce) {
    .accessibility-widget--open {
        filter: none;
    }

    .accessibility-panel,
    .accessibility-panel[aria-hidden="false"] {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .accessibility-panel-body {
        animation: none !important;
    }

    .accessibility-toggle,
    .accessibility-toggle i,
    .accessibility-close,
    .accessibility-controls button,
    .accessibility-statement-link,
    .accessibility-reset,
    .accessibility-btn.accessibility-reset-btn {
        transition-duration: 0.01ms !important;
    }

    .accessibility-toggle:hover,
    .accessibility-widget--open .accessibility-toggle,
    .accessibility-controls button:hover,
    .accessibility-controls button.active:hover {
        transform: none;
    }
}

/* —— Accessibility menu: contrast & theme (applied to body) —— */
body.high-contrast {
    --color-bg: #000000;
    --color-surface: #0a0a0a;
    --color-text: #ffffff;
    --color-text-muted: #e5e5e5;
    --color-primary: #ffea00;
    --color-primary-hover: #fff59d;
    --color-primary-soft: #1a1a00;
    --color-primary-muted: #333300;
    --color-border: #ffffff;
    --fashion-charcoal: #f5f5f5;
}

body.high-contrast a {
    color: var(--color-primary);
    text-decoration: underline;
}

body.dark-mode {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-soft: #172554;
    --color-primary-muted: #1e3a5f;
    --color-border: #334155;
    --fashion-charcoal: #e2e8f0;
    --gray-100: #1e293b;
    --gray-200: #334155;
}

body.dark-mode .accessibility-panel {
    background: var(--color-surface);
    color: var(--color-text);
}

body.dark-mode .accessibility-panel-body {
    color: var(--color-text);
}

body.dark-mode .accessibility-controls button {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark-mode .accessibility-statement {
    background: var(--color-bg);
}

body.dark-mode .accessibility-statement p {
    color: var(--color-text-muted);
}

/* Dark mode coverage for shared layout components */
body.dark-mode .footer {
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.09) 0%, rgba(59, 130, 246, 0) 42%),
        linear-gradient(135deg, #0b1220 0%, #111b2e 45%, #0d1728 100%);
    border-top-color: rgba(148, 163, 184, 0.24);
}

body.dark-mode .footer::after {
    opacity: 0.55;
    background:
        radial-gradient(540px 220px at 8% 16%, rgba(59, 130, 246, 0.16), transparent 72%),
        radial-gradient(620px 280px at 92% 82%, rgba(37, 99, 235, 0.15), transparent 74%),
        linear-gradient(120deg, rgba(71, 85, 105, 0.2) 0 2px, transparent 2px 24px),
        linear-gradient(30deg, rgba(71, 85, 105, 0.16) 0 1px, transparent 1px 18px);
}

body.dark-mode .footer__brand,
body.dark-mode .footer__heading,
body.dark-mode .footer__copy {
    color: var(--color-text);
}

body.dark-mode .footer__tagline,
body.dark-mode .footer a,
body.dark-mode .footer__contact a,
body.dark-mode .footer__contact-address {
    color: #cbd5e1;
}

body.dark-mode .footer a:hover {
    color: #93c5fd;
}

body.dark-mode .footer__bottom {
    border-top-color: rgba(148, 163, 184, 0.2);
}

body.dark-mode .footer__social-link,
body.dark-mode .social-links a {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.35);
}

body.dark-mode .footer__social-link:hover,
body.dark-mode .social-links a:hover {
    color: #bfdbfe;
    border-color: rgba(147, 197, 253, 0.52);
    background: rgba(30, 58, 138, 0.38);
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .accordion-item,
body.dark-mode .table,
body.dark-mode .mini-cart-panel,
body.dark-mode .mini-cart-footer {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.dark-mode .card-header,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .mini-cart-header,
body.dark-mode .table-light,
body.dark-mode .accordion-button {
    background-color: rgba(15, 23, 42, 0.6) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

body.dark-mode .cookie-preference-content {
    background:
        radial-gradient(1000px 360px at 16% -8%, rgba(59, 130, 246, 0.32), transparent 60%),
        radial-gradient(860px 320px at 92% 112%, rgba(14, 165, 233, 0.24), transparent 64%),
        linear-gradient(140deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.9));
    box-shadow:
        0 22px 56px rgba(2, 6, 23, 0.55),
        inset 0 1px 0 rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.24);
}

body.dark-mode .cookie-preference-header {
    background: linear-gradient(120deg, rgba(30, 64, 175, 0.45), rgba(2, 132, 199, 0.24));
}

body.dark-mode .cookie-preference-text {
    color: #cbd5e1;
}

body.dark-mode .cookie-analytics-switch {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(148, 163, 184, 0.24);
}

body.dark-mode .cookie-preference-subnote {
    color: #94a3b8;
}

body.dark-mode .language-choice-card {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.55), rgba(30, 41, 59, 0.38));
}

body.dark-mode .language-choice-card:hover {
    border-color: rgba(96, 165, 250, 0.58);
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.45);
}

body.dark-mode .language-choice-card.active {
    border-color: rgba(147, 197, 253, 0.7);
    background: linear-gradient(145deg, rgba(30, 64, 175, 0.4), rgba(2, 132, 199, 0.28));
}

body.dark-mode .language-choice-name {
    color: #e2e8f0;
}

body.dark-mode .language-choice-meta {
    color: #94a3b8;
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark-mode .text-muted,
body.dark-mode .small.text-muted {
    color: #94a3b8 !important;
}

body.dark-mode .mini-cart-overlay {
    background: rgba(2, 6, 23, 0.7);
}

body.dark-mode .mini-cart-close {
    color: #cbd5e1;
}

body.dark-mode .mini-cart-close:hover {
    color: #ffffff;
}

/* Explicit light theme: resets palette to default tokens */
body.a11y-light-mode {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-primary-muted: #dbeafe;
    --color-border: #e2e8f0;
    --fashion-charcoal: #334155;
}

body.a11y-text-spacing {
    letter-spacing: 0.12em !important;
    word-spacing: 0.25em !important;
}

body.a11y-line-height {
    line-height: 2 !important;
}

body.a11y-line-height * {
    line-height: inherit !important;
}

/*
 * Grayscale / color-blind filters must NOT apply to `body` alone: `filter` on an ancestor
 * breaks `position:fixed` descendants (accessibility widget, mini-cart) in WebKit/Blink.
 * Do not apply `filter` to `nav.navbar` either: sticky + filter on the same element breaks
 * viewport-fixed siblings (widget appears to stick to the toolbar / scroll incorrectly).
 * Apply filters only to .a11y-page-filter-root (nav stays full-color while the page is filtered).
 */
body.a11y-grayscale .a11y-page-filter-root {
    filter: grayscale(1);
}

body.a11y-colorblind:not(.a11y-grayscale) .a11y-page-filter-root {
    filter: contrast(1.12) saturate(1.35);
}

body.a11y-grayscale.a11y-colorblind .a11y-page-filter-root {
    filter: grayscale(1) contrast(1.12) saturate(1.35);
}

body.a11y-readable-font,
body.a11y-readable-font button,
body.a11y-readable-font input,
body.a11y-readable-font select,
body.a11y-readable-font textarea {
    font-family: var(--font-a11y-readable) !important;
}

body.a11y-link-highlight a {
    text-decoration: underline !important;
    font-weight: 600 !important;
    outline: 2px dashed currentColor;
    outline-offset: 2px;
}

body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    body.a11y-reduce-motion *,
    body.a11y-reduce-motion *::before,
    body.a11y-reduce-motion *::after {
        animation: none !important;
        transition: none !important;
    }
}

body.a11y-large-cursor,
body.a11y-large-cursor button,
body.a11y-large-cursor a,
body.a11y-large-cursor input,
body.a11y-large-cursor label,
body.a11y-large-cursor select,
body.a11y-large-cursor textarea {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%232563eb' stroke='%23fff' stroke-width='1' d='M3 3 L3 26 L9 20 L14 28 L17 27 L12 19 L21 19 Z'/%3E%3C/svg%3E") 0 0, auto !important;
}

body.a11y-focus-strong a:focus,
body.a11y-focus-strong button:focus,
body.a11y-focus-strong input:focus,
body.a11y-focus-strong select:focus,
body.a11y-focus-strong textarea:focus,
body.a11y-focus-strong [tabindex]:not([tabindex="-1"]):focus {
    outline: 3px solid var(--color-primary, #2563eb) !important;
    outline-offset: 3px !important;
}

body.a11y-text-start,
body.a11y-text-start p,
body.a11y-text-start li,
body.a11y-text-start td,
body.a11y-text-start th,
body.a11y-text-start h1,
body.a11y-text-start h2,
body.a11y-text-start h3,
body.a11y-text-start h4,
body.a11y-text-start .lead {
    text-align: start !important;
}

#a11y-reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 8px;
    margin-top: -4px;
    pointer-events: none;
    z-index: 100000;
    background: rgba(37, 99, 235, 0.35);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
    display: none;
}

body.a11y-reading-guide-active #a11y-reading-guide {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mini-cart-panel {
        max-width: 100%;
    }
    
    .accessibility-panel {
        min-width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }
    
    .accessibility-widget {
        bottom: 10px;
        left: 10px;
        right: auto;
        top: auto;
        transform: none;
    }

    .accessibility-panel {
        left: 0;
        right: auto;
    }
}

/* Bit (payment app) logo — asset: static/images/payment-bit.png */
.payment-method-logo.payment-method-logo--bit {
    object-fit: contain;
    flex-shrink: 0;
}

/* Quantity control — feedback when max stock / max per order is reached */
@keyframes quantity-limit-shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60% { transform: translateX(6px); }
}

.quantity-control.quantity-control--limit-shake {
    animation: quantity-limit-shake 0.42s ease;
}

@media (prefers-reduced-motion: reduce) {
    .quantity-control.quantity-control--limit-shake {
        animation: none;
    }
}

[dir="rtl"] .quantity-control.quantity-control--limit-shake {
    animation: quantity-limit-shake-rtl 0.42s ease;
}

@media (prefers-reduced-motion: reduce) {
    [dir="rtl"] .quantity-control.quantity-control--limit-shake {
        animation: none;
    }
}

@keyframes quantity-limit-shake-rtl {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(6px); }
    30%, 60% { transform: translateX(-6px); }
}

/* Skip link — WCAG 2.4.1 Bypass Blocks */
.skip-to-main {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-main:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 11000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.65rem 1rem;
    clip: auto;
    overflow: visible;
    white-space: normal;
    background: #1e3a8a;
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

[dir="rtl"] .skip-to-main:focus {
    left: auto;
    right: 0.75rem;
}

.accessibility-israel-note {
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.accessibility-israel-actions .btn {
    font-size: 0.8rem;
}

/* ================================
   Localized file inputs (replaces browser-default file button copy)
   ================================ */

.localized-file-input {
    flex-wrap: nowrap;
}

.localized-file-input .localized-file-input__name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
    background-color: var(--bs-body-bg, #fff);
}

.localized-file-input .localized-file-input__btn {
    flex-shrink: 0;
    cursor: pointer;
}

.localized-file-input .localized-file-input__native:focus-visible + .localized-file-input__btn {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ================================
   Print Styles
   ================================ */

@media print {
    .navbar,
    .footer,
    .luxury-hero-scroll,
    .luxury-product-overlay,
    .luxury-wishlist-btn,
    .mini-cart,
    .accessibility-widget,
    .skip-to-main {
        display: none !important;
    }
}