@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Outfit:wght@500;600;700;800;900&family=Urbanist:wght@600;700;800;900&family=Syne:wght@700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

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

html, body {
  margin: 0;
  padding: 0;
}

/* ─── White Theme CSS Custom Properties (Default Storefront Theme) ─── */
:root,
.light {
  --bg-base:      #F5F7FA;
  --bg-surface:   #FFFFFF;
  --bg-surface-2: #EEF2F8;
  --bg-surface-3: #DDE4F0;

  --text-primary:   #0D1326;
  --text-secondary: #4A5568;
  --text-tertiary:  rgba(13, 19, 38, 0.45);

  --border-color:   rgba(13, 19, 38, 0.10);
  --border-strong:  rgba(13, 19, 38, 0.20);

  --color-navy:     #F5F7FA;
  --color-surface:  #FFFFFF;
  --color-surface-2:#EEF2F8;
  --color-surface-3:#DDE4F0;
  --color-primary:  #4063B2;
  --color-accent:   #4D63C7;
  --color-accent-hover: #3551B0;
  --color-violet:   #7B5EA7;
  --color-sage:     #4D63C7;
  --color-taupe:    #4A5568;
  --color-muted:    #4A5568;
  --color-cyan:     #4D63C7;
  --color-soft-blue:#7B5EA7;
  --color-white:    #0D1326;

  --scrollbar-track: #E2E8F0;
  --scrollbar-thumb: #A0AEC0;
  --scrollbar-hover: #4D63C7;

  --selection-bg:   #4063B2;
  --selection-text: #ffffff;

  --font-guminert: 'Space Grotesk', 'Outfit', 'Urbanist', system-ui, sans-serif;
  --font-condenso: 'Space Grotesk', 'Outfit', sans-serif;
  --font-tall:     'Space Grotesk', 'Outfit', sans-serif;
  --font-anton:    'Space Grotesk', 'Outfit', sans-serif;
  --font-inter:    'Inter', system-ui, -apple-system, sans-serif;
  --font-outfit:   'Outfit', sans-serif;

  --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark mode fallback if explicitly needed */
.dark {
  --bg-base:      #070B14;
  --bg-surface:   #0B1120;
  --bg-surface-2: #10192D;
  --bg-surface-3: #16223D;

  --text-primary:   #F1F5FE;
  --text-secondary: #94A3B8;
  --text-tertiary:  rgba(241, 245, 254, 0.40);

  --border-color:   rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.15);

  --color-navy:     #070B14;
  --color-surface:  #0B1120;
  --color-surface-2:#10192D;
  --color-surface-3:#16223D;
  --color-primary:  #4063B2;
  --color-accent:   #8D9CF5;
  --color-accent-hover: #A8B4F8;
  --color-violet:   #BB9AED;
  --color-sage:     #8D9CF5;
  --color-taupe:    #94A3B8;
  --color-muted:    #94A3B8;
  --color-cyan:     #8D9CF5;
  --color-soft-blue:#BB9AED;
  --color-white:    #F1F5FE;

  --scrollbar-track: #070B14;
  --scrollbar-thumb: #16223D;
  --scrollbar-hover: #8D9CF5;

  --selection-bg:   #4063B2;
  --selection-text: #ffffff;
}

/* ─── RTL Support ────────────────────────────────────────── */
[dir="rtl"] {
  font-family: var(--font-cairo), system-ui, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .font-display {
  font-family: var(--font-cairo), system-ui, sans-serif;
  letter-spacing: 0 !important;
}

/* Flip directional arrow/chevron icons in RTL */
[dir="rtl"] .lucide-arrow-left,
[dir="rtl"] .lucide-arrow-right,
[dir="rtl"] .lucide-arrow-up-right,
[dir="rtl"] .lucide-chevron-right,
[dir="rtl"] .lucide-chevron-left {
  transform: scaleX(-1);
}

/* Badge positions flip: top-left badge in RTL */
[dir="rtl"] .absolute.-top-1.-right-1 {
  right: auto;
  left: -0.25rem;
}

/* Dropdown menus flip to left-aligned in RTL */
[dir="rtl"] .absolute.right-0.top-full {
  right: auto;
  left: 0;
}

/* Input icon positions flip */
[dir="rtl"] .absolute.left-4 {
  left: auto;
  right: 1rem;
}
[dir="rtl"] .pl-11 {
  padding-left: 1rem;
  padding-right: 2.75rem;
}
[dir="rtl"] .pl-12 {
  padding-left: 1rem;
  padding-right: 3rem;
}

/* Scroll-to-top & WhatsApp widget: flip to left side */
[dir="rtl"] .fixed.bottom-6.right-6,
[dir="rtl"] .fixed.bottom-8.right-8 {
  right: auto;
  left: 1.5rem;
}
[dir="rtl"] .fixed.bottom-24.right-6 {
  right: auto;
  left: 1.5rem;
}

/* Text alignment defaults */
[dir="rtl"] p,
[dir="rtl"] label,
[dir="rtl"] span,
[dir="rtl"] li {
  text-align: right;
}

/* Center-aligned items should stay centered */
[dir="rtl"] .text-center p,
[dir="rtl"] .text-center label,
[dir="rtl"] .text-center span {
  text-align: center;
}

/* ─── Base Styles ────────────────────────────────────────── */
@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Smooth theme transition on all color properties */
  *,
  *::before,
  *::after {
    transition:
      background-color 200ms ease,
      border-color 200ms ease,
      color 150ms ease,
      box-shadow 200ms ease;
  }

  /* But don't slow down animations/transforms or conflict with theme switch */
  *[class*="animate-"],
  *[class*="transition-"],
  *[class*="duration-"],
  .theme-switch,
  .theme-switch *,
  .theme-switch *::before,
  .theme-switch *::after {
    transition: none;
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-base);
    color: var(--text-primary);
  }

  body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-inter), 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* Custom Clean Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
  }

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

  ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-anton), var(--font-tall), sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
  }
}

/* ─── Component Layer ────────────────────────────────────── */
@layer components {
  /* Text Stroke / Outline Utility */
  .text-outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-accent);
  }

  .text-outline-white {
    color: transparent;
    -webkit-text-stroke: 1px rgba(241, 245, 254, 0.85);
  }

  .text-outline-navy {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--bg-base);
  }

  /* Button Styles */
  .btn-primary {
    background: linear-gradient(to right, #4063B2, #5A7BEA, #8D9CF5);
    color: #ffffff;
    font-family: Inter, Outfit, system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-primary:hover {
    background: linear-gradient(to right, #35529A, #5A7BEA, #7B8BE5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .btn-secondary {
    background-color: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: Inter, Outfit, system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-secondary:hover {
    border-color: rgba(141, 156, 245, 0.5);
  }

  .btn-ghost {
    color: var(--color-accent);
    font-family: Inter, Outfit, system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: color 200ms ease, background-color 200ms ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-ghost:hover {
    color: var(--color-violet);
    background-color: rgba(255, 255, 255, 0.05);
  }

  .btn-editorial {
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font-family: Inter, Outfit, system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-editorial:hover {
    background-color: var(--text-primary);
    color: var(--bg-base);
  }

  .btn-editorial-sage {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-family: Inter, Outfit, system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-editorial-sage:hover {
    background-color: var(--color-accent);
    color: var(--bg-base);
  }

  .btn-editorial-navy {
    border: 1px solid var(--color-primary);
    color: var(--color-accent);
    font-family: Inter, Outfit, system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-editorial-navy:hover {
    background-color: var(--color-primary);
    color: white;
  }

  .input {
    width: 100%;
    background-color: var(--bg-surface);
    border: 1.5px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 200ms ease;
  }

  .input:focus {
    border-color: var(--color-accent);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(64, 99, 178, 0.25);
  }

  .input::placeholder {
    color: var(--text-tertiary);
  }

  .dark .input {
    background-color: #070B14;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: #F1F5FE;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .dark .input:focus {
    background-color: #0B1120;
    border-color: #8D9CF5;
    box-shadow: 0 0 0 3px rgba(141, 156, 245, 0.3);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* 1px Borders */
  .border-1px {
    border-width: 1px;
  }

  /* Containers - Strict, elegant responsive margins and max-width */
  .container-custom,
  .container-wide {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (min-width: 640px) {
    .container-custom,
    .container-wide {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 768px) {
    .container-custom,
    .container-wide {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .container-custom,
    .container-wide {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }

  @media (min-width: 1280px) {
    .container-custom,
    .container-wide {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }

  @media (min-width: 1536px) {
    .container-custom,
    .container-wide {
      padding-left: 4rem;
      padding-right: 4rem;
    }
  }

  /* Floating Ambient Orbs */
  .ambient-orb {
    position: absolute;
    width: 384px;
    height: 384px;
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.18;
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
  }

  /* Divider */
  .divider {
    height: 1px;
    background-color: var(--border-color);
  }

  /* Progress bar */
  .progress-bar {
    width: 100%;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--bg-surface-3);
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(to right, #4063B2, #8D9CF5);
    transition: width 300ms ease;
  }

  /* Card base */
  .card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
  }

  /* Product card */
  .product-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }

  .product-card:hover {
    border-color: rgba(141, 156, 245, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  }

  /* Light mode product card shadow */
  .light .product-card:hover {
    box-shadow: 0 8px 32px rgba(64, 99, 178, 0.12);
  }

  /* badge-error utility */
  .badge-error {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
  }

  /* btn-icon utility */
  .btn-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: colors 200ms ease;
    cursor: pointer;
  }
}

/* Hide Next.js Development Indicator */
nextjs-portal,
[data-nextjs-toast],
[data-nextjs-dev-indicator],
#nextjs-dev-indicator {
  display: none !important;
}

/* ==========================================================================
   Day/Night Sky Theme Switch (components/ui/sky-toggle.tsx)
   Ultra-smooth GPU-accelerated spring transitions with zero layout reflow
   ========================================================================== */

.theme-switch {
  --toggle-size: 11.5px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #ffffff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --smooth-easing: cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
  direction: ltr;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: background-color 0.45s var(--smooth-easing), box-shadow 0.45s var(--smooth-easing);
  position: relative;
  contain: paint;
  will-change: background-color, box-shadow;
  transform: translateZ(0);
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
  pointer-events: none;
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s var(--smooth-easing);
  will-change: transform;
  pointer-events: none;
}

.theme-switch:hover .theme-switch__circle-container {
  filter: brightness(1.06);
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: background-color 0.45s var(--smooth-easing), box-shadow 0.45s var(--smooth-easing);
  transform: translateZ(0);
}

.theme-switch__moon {
  transform: translate3d(100%, 0, 0) rotate(15deg);
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: transform 0.45s var(--smooth-easing), opacity 0.35s ease;
  will-change: transform, opacity;
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform 0.45s var(--smooth-easing), opacity 0.35s ease;
  will-change: transform, opacity;
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: 50%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transform: translate3d(0, -140%, 0) scale(0.6);
  opacity: 0;
  transition: transform 0.45s var(--smooth-easing), opacity 0.35s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ── Actions on Checked (Night Mode) ────────────────────────── */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.4), 0em 0.062em 0.125em rgba(255, 255, 255, 0.12);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  transform: translate3d(3.125em, 0, 0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  transform: translate3d(0, 3.4em, 0);
  opacity: 0;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  transform: translate3d(0, -50%, 0) scale(1);
  opacity: 1;
}

/* ═══ Vertical Brand Marquee ═══ */
@keyframes verticalScrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-33.333%); }
}

@keyframes verticalScrollDown {
  0% { transform: translateY(-33.333%); }
  100% { transform: translateY(0); }
}

.vertical-marquee-up {
  animation: verticalScrollUp 45s linear infinite;
}

.vertical-marquee-down {
  animation: verticalScrollDown 45s linear infinite;
}

.vertical-marquee-up:hover,
.vertical-marquee-down:hover {
  animation-play-state: paused;
}

/* ═══ Horizontal Marquee (Left to Right) ═══ */
@keyframes marqueeLTR {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes marqueeRTL {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.marquee-ltr {
  display: flex !important;
  width: max-content !important;
  animation: marqueeLTR 65s linear infinite !important;
  will-change: transform;
}

.marquee-ltr:hover {
  animation-play-state: paused !important;
}

.marquee-rtl {
  display: flex !important;
  width: max-content !important;
  animation: marqueeRTL 65s linear infinite !important;
  will-change: transform;
}

.marquee-rtl:hover {
  animation-play-state: paused !important;
}

.font-guminert {
  font-family: var(--font-guminert), 'Space Grotesk', Outfit, Urbanist, sans-serif;
}

.text-outline {
  -webkit-text-stroke: 1.5px rgba(141, 156, 245, 0.4);
  color: transparent;
}

.dark .text-outline {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
  color: transparent;
}

/* ═══ Dynamic Navbar Colors (Dark vs Light Mode) ═══ */
html.dark #main-navbar.navbar-transparent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.dark #main-navbar.navbar-scrolled {
  background: rgba(7, 11, 20, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
}

html.dark #main-navbar .nav-btn,
html.dark #main-navbar .nav-link,
html.dark #main-navbar #user-menu-btn,
html.dark #main-navbar .user-name {
  color: #ffffff !important;
}

html.dark #main-navbar .nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

html.dark #main-navbar .nav-link:hover {
  color: #8D9CF5 !important;
}

html.dark #main-navbar .nav-link-active {
  color: #ffffff !important;
  font-weight: 800 !important;
}

html:not(.dark) #main-navbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(13, 19, 38, 0.10) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(16px);
}

html:not(.dark) #main-navbar .nav-btn,
html:not(.dark) #main-navbar #search-btn,
html:not(.dark) #main-navbar [data-open-cart],
html:not(.dark) #main-navbar a[aria-label="Wishlist"],
html:not(.dark) #main-navbar #mobile-menu-btn,
html:not(.dark) #main-navbar #user-menu-btn,
html:not(.dark) #main-navbar .user-name {
  color: #0F172A !important;
}

html:not(.dark) #main-navbar .nav-btn:hover,
html:not(.dark) #main-navbar #search-btn:hover,
html:not(.dark) #main-navbar [data-open-cart]:hover,
html:not(.dark) #main-navbar #mobile-menu-btn:hover {
  background-color: rgba(15, 23, 42, 0.07) !important;
  color: #4063B2 !important;
}

html:not(.dark) #main-navbar .nav-link {
  color: #1E293B !important;
  text-shadow: none !important;
  filter: none !important;
}

html:not(.dark) #main-navbar .nav-link:hover {
  color: #4063B2 !important;
}

html:not(.dark) #main-navbar .nav-link-active {
  color: #4063B2 !important;
  font-weight: 900 !important;
}

html:not(.dark) #main-navbar .lang-switcher-wrap {
  border-color: rgba(15, 23, 42, 0.15) !important;
  background-color: rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) #main-navbar .lang-switcher-wrap button:not([style*="background:#4063B2"]):not([style*="background: rgb(64, 99, 178)"]) {
  color: #334155 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   STOREFRONT RESPONSIVE DESIGN SYSTEM (MOBILE, TABLET, LAPTOP, DESKTOP)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. MOBILE PHONES (< 640px) ─────────────────────────────────────────── */
@media (max-width: 639.98px) {
  /* Fluid Hero Typography */
  h1.hero-title,
  .hero-headline {
    font-size: clamp(1.85rem, 7.5vw, 2.75rem) !important;
    line-height: 1.15 !important;
  }

  /* Compact Product Grid Cards on Phone (2 Columns) */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .product-card {
    padding: 0.75rem !important;
    border-radius: 1rem !important;
  }

  .product-card .product-title {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }

  .product-card .price-tag {
    font-size: 0.95rem !important;
  }

  /* Category Scroll Container */
  .category-scroll-strip {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    gap: 0.75rem !important;
    padding-bottom: 0.5rem !important;
  }

  .category-scroll-strip > * {
    flex: 0 0 130px !important;
    scroll-snap-align: start;
  }

  /* Mobile Checkout Stepper & Summary */
  .checkout-container {
    flex-direction: column !important;
  }

  .checkout-sidebar {
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  /* Payment Method Options Grid */
  .payment-method-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Touch-friendly Action Buttons */
  button,
  .btn-primary,
  .btn-secondary,
  a.btn {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ─── 2. TABLETS & SMALL LAPTOPS (640px to 1023.98px) ─────────────────────── */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .product-detail-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 3. LAPTOPS & DESKTOPS (1024px to 1535.98px) ─────────────────────────── */
@media (min-width: 1024px) and (max-width: 1535.98px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

/* ─── 4. ULTRA-WIDE SCREENS (min-width: 1536px) ───────────────────────────── */
@media (min-width: 1536px) {
  .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}