/* ===================================================================
   DEFAULT WEBSITE — Design System & Global Styles
   Light and dark themes with green/blue luxury accents
   =================================================================== */

/* --- Inter (Latin text) is loaded non-blocking via HTML <link> tags --- */

/* --- Arabic font: Cairo, self-hosted (assets/fonts, SIL Open Font License 1.1 - see /assets/fonts/OFL.txt) ---
   Declared here once, so every page that loads style.css gets the same Arabic font; pages never load Cairo from Google Fonts. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-arabic-400-800.woff2?v=748022f5') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-latin-ext-400-800.woff2?v=da6ada83') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-latin-400-800.woff2?v=82c13cbd') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- CSS Custom Properties --- */
:root {
  color-scheme: dark;
  --on-accent: #ffffff;
  /* Colors */
  --bg-primary: #0b0b0c;
  --bg-secondary: #141416;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-glass: rgba(11, 11, 12, 0.85);

  --accent-green: #e3141c;
  --accent-green-light: #ff4d55;
  --accent-green-dark: #b10f16;
  --accent-blue: #1c7ecb;
  --accent-blue-light: #479ee3;
  --accent-blue-dark: #125488;

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(227, 20, 28, 0.3);

  --gradient-hero: linear-gradient(135deg, #0b0b0c 0%, #17171a 40%, #1e1e22 70%, #0b0b0c 100%);
  --gradient-green: linear-gradient(135deg, #e3141c, #ff4d55, #e3141c);
  --gradient-cta: linear-gradient(135deg, #e3141c 0%, #b10f16 100%);
  --gradient-cta-hover: linear-gradient(135deg, #ff4d55 0%, #e3141c 100%);
  --gradient-blue: linear-gradient(135deg, #1c7ecb, #479ee3);

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 20, 28, 0.15);
  --shadow-glow-green: 0 0 30px rgba(227, 20, 28, 0.15);
  --shadow-glow-blue: 0 0 30px rgba(26, 127, 212, 0.15);
  --shadow-btn: 0 4px 16px rgba(227, 20, 28, 0.3);
  --shadow-btn-hover: 0 8px 32px rgba(227, 20, 28, 0.45);

  /* Typography */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ar: 'Cairo', 'Inter', sans-serif;
  --font-body: var(--font-en);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

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

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout & Container */
  --site-container-max-width: 1280px;
  --max-width: var(--site-container-max-width);
  --site-gutter: 24px;

  /* Header Geometry Contract */
  --site-header-height: 80px;
  --header-height: var(--site-header-height); /* legacy alias */
  --site-header-top-bar-height: 80px;
  --site-header-mobile-height: 64px;
  --site-header-quick-nav-height: 52px;
  --site-mobile-chrome-height: calc(var(--site-header-mobile-height) + var(--site-header-quick-nav-height));
  --site-header-z-index: 1000;

  /* Official Frozen Logo Contract */
  /* Supps Mine wordmark (about 1.84:1) */
  --site-logo-width: 92px;
  --site-logo-height: 50px;

  /* Header Controls Contract */
  --site-nav-height: 40px;
  --site-nav-item-height: 38px;
  --site-nav-gap: clamp(6px, 0.75vw, 14px);
  --site-nav-icon-size: 18px;
  --site-lang-toggle-width: 98px;
  --site-lang-toggle-height: 36px;
  --site-cart-btn-size: 40px;
  --site-hamburger-size: 40px;

  /* Header -> Hero Coordinated Spacing Contract */
  --page-top-offset: calc(var(--site-header-height) + 2rem);
  --hero-top-offset: var(--site-header-height);
  --hero-safe-bottom: clamp(3rem, 5vw, 4.5rem);

  /* Hero Background Contract Tokens */
  --hero-bg-artwork: none;
  --hero-bg-overlay: linear-gradient(180deg, rgba(11, 11, 12, 0.45) 0%, rgba(11, 11, 12, 0.65) 50%, rgba(11, 11, 12, 0.90) 100%);
  --hero-bg-size: 100% 100%, contain;
  --hero-bg-position: center center;
  --hero-bg-repeat: no-repeat;

  /* Controlled Hero Variant Min-Heights */
  --hero-min-height-landing: 100vh;
  --hero-min-height-catalog: 480px;
  --hero-min-height-category: 480px;
  --hero-min-height-info: 480px;
  --hero-min-height-knowledge: 520px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-card: rgba(20, 20, 24, 0.055);
  --bg-card-hover: rgba(20, 20, 24, 0.095);
  --bg-glass: rgba(255, 255, 255, 0.94);
  --text-primary: #151518;
  --text-secondary: #3f3f46;
  --text-muted: #71717a;
  --border-subtle: rgba(20, 20, 24, 0.1);
  --border-card: rgba(20, 20, 24, 0.13);
  --border-accent: rgba(196, 16, 26, 0.35);
  --accent-green: #c4101a;
  --accent-green-light: #d81e27;
  --accent-green-dark: #960c13;
  --accent-blue: #176cae;
  --accent-blue-light: #267fc2;
  --accent-blue-dark: #0d4f83;
  --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f5f5f6 48%, #ececee 100%);
  --gradient-green: linear-gradient(135deg, #c4101a, #e3141c, #c4101a);
  --gradient-cta: linear-gradient(135deg, #d3121b 0%, #a00d14 100%);
  --gradient-cta-hover: linear-gradient(135deg, #e8333a 0%, #c4101a 100%);
  --gradient-blue: linear-gradient(135deg, #176cae, #267fc2);
  --shadow-card: 0 4px 24px rgba(20, 20, 24, 0.1);
  --shadow-card-hover: 0 12px 40px rgba(20, 20, 24, 0.16), 0 0 0 1px rgba(196, 16, 26, 0.16);
  --shadow-glow-green: 0 0 26px rgba(196, 16, 26, 0.12);
  --shadow-glow-blue: 0 0 26px rgba(23, 108, 174, 0.12);
  --shadow-btn: 0 4px 14px rgba(196, 16, 26, 0.22);
  --shadow-btn-hover: 0 8px 26px rgba(196, 16, 26, 0.3);
  --hero-bg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(248, 251, 255, 0.62) 52%, rgba(255, 255, 255, 0.94) 100%);
}

/* --- Responsive Chrome Breakpoints: 1280, 1050, 768, 430, 375, 320 px --- */
@media (max-width: 1280px) {
  :root {
    --site-gutter: 20px;
    --site-nav-gap: 8px;
    --hero-safe-bottom: 3.5rem;
  }
}

@media (max-width: 1050px) {
  :root {
    --site-header-top-bar-height: 64px;
    --site-header-quick-nav-height: 52px;
    --site-header-height: 116px; /* calc(var(--site-header-mobile-height) + var(--site-header-quick-nav-height)) */
    --page-top-offset: calc(var(--site-header-height) + 1.5rem);
    --hero-top-offset: var(--site-header-height);
    --site-gutter: 20px;
    --hero-safe-bottom: 3rem;
    --hero-min-height-landing: 90vh;
    --hero-min-height-catalog: 440px;
    --hero-min-height-category: 440px;
    --hero-min-height-info: 440px;
    --hero-min-height-knowledge: 480px;
  }
}

@media (max-width: 768px) {
  :root {
    --site-header-height: 116px;
    --page-top-offset: calc(var(--site-header-height) + 1.25rem);
    --hero-top-offset: var(--site-header-height);
    --site-gutter: 16px;
    --hero-safe-bottom: 2.5rem;
    --hero-min-height-landing: auto;
    --hero-min-height-catalog: auto;
    --hero-min-height-category: auto;
    --hero-min-height-info: auto;
    --hero-min-height-knowledge: auto;
  }
}

@media (max-width: 430px) {
  :root {
    --site-header-height: var(--site-mobile-chrome-height);
    --site-gutter: 14px;
    --hero-safe-bottom: 2rem;
  }
}

@media (max-width: 375px) {
  :root {
    --site-header-height: var(--site-mobile-chrome-height);
    --site-gutter: 12px;
    --hero-safe-bottom: 1.75rem;
  }
}

@media (max-width: 320px) {
  :root {
    --site-header-height: var(--site-mobile-chrome-height);
    --site-gutter: 10px;
    --hero-safe-bottom: 1.5rem;
  }
}

/* --- RTL / Arabic Language --- */
[dir="rtl"] {
  --font-body: var(--font-ar);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  font-size: 16px;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--accent-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-green-light);
}

ul, ol {
  list-style: none;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(227, 20, 28, 0.3);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 20, 28, 0.5);
}

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  min-width: 0;
}

.section {
  padding: var(--space-4xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ===================================================================
   HEADER / NAVIGATION
   =================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.header.scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border-subtle), 0 4px 24px rgba(0, 0, 0, 0.3);
}

.header.site-header-unified {
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border-subtle), 0 4px 20px rgba(0, 0, 0, 0.22);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-header-top-bar-height, 80px);
  max-width: var(--site-container-max-width, 1280px);
  padding: 0 var(--site-gutter, 24px);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 10px);
  text-decoration: none;
  flex-shrink: 0;
  height: var(--site-logo-height, 40px);
  line-height: 1;
}

.logo picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--site-logo-width, 40px);
  height: var(--site-logo-height, 40px);
  flex-shrink: 0;
}

.logo-icon {
  width: var(--site-logo-width, 40px);
  height: var(--site-logo-height, 40px);
  background: var(--gradient-green);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--on-accent);
  letter-spacing: -1px;
}

.logo-img {
  width: var(--site-logo-width, 40px);
  height: var(--site-logo-height, 40px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text-primary {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logo-text-secondary {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--accent-green);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 1.2rem);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.75vw, 0.95rem);
  flex-shrink: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  position: relative;
  padding: 0.44rem 0.65rem;
  border-radius: 8px;
  white-space: nowrap !important;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-green);
  transition: width var(--transition-base);
  border-radius: 1px;
}

[dir="rtl"] .nav-link::after {
  left: auto;
  right: 0;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link.active {
  color: var(--accent-green-light) !important;
  background: rgba(227, 20, 28, 0.12);
  border: 1px solid rgba(227, 20, 28, 0.35);
  box-shadow: 0 0 12px rgba(227, 20, 28, 0.15);
  border-radius: 8px;
}

.hero-breadcrumbs,
.hero-breadcrumb,
.hub-breadcrumb,
.category-breadcrumbs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
}

.hero-breadcrumbs a,
.hero-breadcrumb a,
.hub-breadcrumb a,
.category-breadcrumbs a {
  color: var(--accent-green-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-breadcrumbs a:hover,
.hero-breadcrumb a:hover,
.hub-breadcrumb a:hover,
.category-breadcrumbs a:hover {
  color: #fff;
}

.hero-breadcrumbs .sep,
.hero-breadcrumb .sep,
.hub-breadcrumb .sep,
.category-breadcrumbs .sep,
.hero-breadcrumbs span:not([class]),
.hero-breadcrumb span:not([class]),
.hub-breadcrumb span:not([class]),
.category-breadcrumbs span:not([class]) {
  color: rgba(255, 255, 255, 0.3);
}

.hero-breadcrumbs .current,
.hero-breadcrumb .current,
.hub-breadcrumb .current,
.category-breadcrumbs .current {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-quick-nav {
  display: none;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Language Toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.lang-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
  font-family: var(--font-en);
}

.lang-btn.active {
  color: var(--on-accent);
}

.lang-toggle-slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  background: var(--gradient-green);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
}

[dir="rtl"] .lang-toggle-slider {
  transform: translateX(-100%);
}

[dir="ltr"] .lang-toggle-slider {
  transform: translateX(0);
}

.lang-toggle[data-active="ar"] .lang-toggle-slider {
  transform: translateX(100%);
}

[dir="rtl"] .lang-toggle[data-active="en"] .lang-toggle-slider {
  transform: translateX(0);
}

/* Mobile menu button (completely hidden as requested - using bottom mobile-quick-nav instead) */
.mobile-menu-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 0 !important;
}

/* ===================================================================
   HERO BACKGROUND CONTRACT (.site-hero, .site-hero-bg, .site-hero-grid)
   Single authoritative hero frame & background artwork system.
   =================================================================== */
.site-hero,
.hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--site-header-height) + 1.5rem);
  padding-bottom: var(--hero-safe-bottom);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-sizing: border-box;
  background-color: #0b0b0c;
}

/* Background Artwork Layer */
.site-hero-bg,
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: #0b0b0c;
  background-image: var(--hero-bg-overlay), var(--hero-bg-artwork);
  background-size: var(--hero-bg-size, 100% 100%, contain);
  background-position: var(--hero-bg-position, center center);
  background-repeat: var(--hero-bg-repeat, no-repeat);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: none !important; /* HARD FREEZE: UPWARD BRANDED ARTWORK NEVER FLIPPED */
}

/* Pseudo-element fallback for templates without explicit child .site-hero-bg/.hero-bg layer */
.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #0b0b0c;
  background-image: var(--hero-bg-overlay), var(--hero-bg-artwork);
  background-size: var(--hero-bg-size, 100% 100%, contain);
  background-position: var(--hero-bg-position, center center);
  background-repeat: var(--hero-bg-repeat, no-repeat);
  z-index: 0;
  pointer-events: none;
  transform: none !important; /* HARD FREEZE */
}

.site-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(227, 20, 28, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 20, 28, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 20%, transparent 75%);
  pointer-events: none;
}

/* Suppress pseudo-elements when explicit child background elements are present */
.site-hero:has(.hero-bg)::before,
.site-hero:has(.hero-bg)::after,
.site-hero:has(.site-hero-bg)::before,
.site-hero:has(.site-hero-bg)::after {
  display: none !important;
}

/* Ambient Radial Glow Pseudo-Elements (from Homepage Source of Truth) */
.site-hero-bg::before,
.hero-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(26, 127, 212, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: heroGlow1 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.site-hero-bg::after,
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(227, 20, 28, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: heroGlow2 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroGlow1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 40px) scale(1.1); }
}

@keyframes heroGlow2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.15); }
}

/* Animated Grid Lines Layer (from Homepage Source of Truth) */
.site-hero-grid,
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(227, 20, 28, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 20, 28, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 20%, transparent 75%);
  pointer-events: none;
}

/* Ensure upright brand artwork in both LTR and RTL */
[dir="rtl"] .site-hero-bg,
[dir="rtl"] .hero-bg,
[dir="rtl"] .site-hero::before,
[dir="rtl"] .category-hero::before {
  transform: none !important;
}

/* --- Controlled Hero Foreground Variants (Phase 5) --- */

/* 1. Landing Hero */
.site-hero--landing,
.hero#hero,
.landing-hero {
  min-height: var(--hero-min-height-landing);
  padding-top: var(--site-header-height);
  padding-bottom: var(--hero-safe-bottom);
  border-bottom: none;
}

/* 2. Catalog Hub Hero (/products) */
.site-hero--catalog,
.products-page-hero {
  min-height: var(--hero-min-height-catalog);
  padding-top: calc(var(--site-header-height) + 3rem);
  text-align: center;
}

/* 3. Category Hub & Detail Hero (/categories, /categories/*) */
.site-hero--category,
.category-hero {
  min-height: var(--hero-min-height-category);
  padding-top: calc(var(--site-header-height) + 3rem);
  text-align: center;
}

/* 4. Info Pages Hero (/about, /why-us) */
.site-hero--info,
.info-hero {
  min-height: var(--hero-min-height-info);
  padding-top: calc(var(--site-header-height) + 3rem);
  text-align: center;
}

/* 5. Knowledge Hub Hero (/knowledge/, /ar/knowledge/) */
.site-hero--knowledge,
.hub-slider-hero {
  min-height: var(--hero-min-height-knowledge);
  max-height: 640px;
  padding-top: calc(var(--site-header-height) + 2rem);
  text-align: center;
}

/* --- Non-Hero Pages: Shared Content Top Offset --- */
.site-content-offset,
.product-detail.section,
.checkout-main.section,
.thankyou-wrapper.section,
.knowledge-main {
  padding-top: var(--page-top-offset) !important;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: var(--space-xl);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(227, 20, 28, 0.1);
  border: 1px solid rgba(227, 20, 28, 0.2);
  border-radius: var(--radius-full);
  padding: 8px 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-green);
  margin-bottom: var(--space-xl);
  animation: fadeInUp 0.6s ease-out;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hero-title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  animation: fadeInUp 0.6s ease-out 0.1s both;
  letter-spacing: -0.03em;
}

.hero-title-gradient {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-2xl);
  animation: fadeInUp 0.6s ease-out 0.2s both;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  animation: fadeInUp 0.6s ease-out 0.3s both;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent-green);
  line-height: 1.2;
}

.hero-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

@media (max-width: 768px) {
  .hero-scroll {
    display: none;
  }
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent-green), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ===================================================================
   HERO SLIDER SYSTEM (STOREFRONT & KNOWLEDGE HUB)
   =================================================================== */
.hub-slider-hero {
  position: relative;
  min-height: var(--hero-min-height-knowledge);
  max-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--site-header-height) + 2rem);
  padding-bottom: var(--hero-safe-bottom);
}

.hero-slider-track {
  position: relative;
  width: 100%;
  z-index: 2;
}

.hero-slide {
  display: none;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active {
  display: block;
  opacity: 1;
  animation: fadeInSlide 0.55s ease-out;
}

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

.hub-slider-hero .hero-content {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  padding: 0.5rem 1.5rem;
}

.hub-slider-hero .hero-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.hub-slider-hero .hero-description {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.8rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.hub-slider-hero .hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Slider Controls */
.hero-slider-arrow {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.72);
  border: 1px solid var(--border-accent, rgba(227, 20, 28, 0.3));
  color: var(--accent-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-base, 0.25s ease);
}

.hero-slider-arrow:hover {
  background: var(--gradient-green);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-50%) scale(1.08);
}

.hero-slider-arrow.prev { left: 24px; }
.hero-slider-arrow.next { right: 24px; }
[dir="rtl"] .hero-slider-arrow.prev { left: auto; right: 24px; }
[dir="rtl"] .hero-slider-arrow.next { right: auto; left: 24px; }
/* RTL: the buttons swap sides (Next on the left, Previous on the right), so their chevrons must point outward too.
   Only the categories hub shares one icon markup between EN and AR, so only that slider is flipped here; the Knowledge hub's
   Arabic template already ships mirrored icons. Other arrows, breadcrumbs and icons are unaffected. */
[dir="rtl"] .site-hero--category .hero-slider-arrow svg { transform: scaleX(-1); }

.hero-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-base, 0.25s ease);
}

/* Pause / Play control added by initHeroSlider(): it had no styles, so it sat unstyled in the middle of the hero, under the
   left-hand arrow, and could not be clicked with a mouse. Placed at the inline-start bottom corner, clear of both arrows, the dots and the floating WhatsApp button (inline-end). */
.hero-slider-pause {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 24px;
  z-index: 6;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(11, 11, 12, 0.72);
  border: 1px solid var(--border-accent, rgba(227, 20, 28, 0.3));
  color: var(--accent-green);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-slider-pause:hover,
.hero-slider-pause:focus-visible {
  background: var(--gradient-green);
  color: var(--on-accent);
}

.hero-slider-dot.active {
  width: 32px;
  background: var(--gradient-green);
  box-shadow: 0 0 12px rgba(227, 20, 28, 0.5);
}

@media (max-width: 768px) {
  .hero-slider-arrow { display: none; }
  .hub-slider-hero {
    min-height: auto;
    max-height: none;
    padding-top: calc(var(--site-header-height) + 1.25rem);
    padding-bottom: var(--hero-safe-bottom);
  }
  .hub-slider-hero .hero-title {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  .hub-slider-hero .hero-description {
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
  }
  .hub-slider-hero .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }
  .hub-slider-hero .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Breadcrumbs System */
.hub-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 1.5rem 0 1rem 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.hub-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.hub-breadcrumb a:hover {
  color: var(--accent-green);
}
.hub-breadcrumb .sep,
.hub-breadcrumb span:not(.current):not(:last-child) {
  color: var(--border-card);
}
.hub-breadcrumb .current,
.hub-breadcrumb span:last-child {
  color: var(--text-primary);
  font-weight: 600;
}

/* ===================================================================
   CATEGORY HUB & SECTION STYLES
   =================================================================== */
.category-page {
  background: var(--bg-primary);
}
.category-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.category-section-muted {
  background: rgba(20, 20, 22, 0.55);
  border-block: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}
.category-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.category-section-head h2 {
  color: var(--text-primary);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}
.category-section-head p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0.5rem 0 0;
  max-width: 720px;
}
.category-count {
  flex: 0 0 auto;
  color: var(--accent-green-light);
  font-weight: 800;
  border-bottom: 2px solid var(--accent-green);
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
}
.category-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.catalog-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed rgba(227, 20, 28, 0.3);
  border-radius: var(--radius-lg, 12px);
  background: rgba(20, 20, 22, 0.45);
}
.catalog-empty-state strong {
  color: var(--text-primary);
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.category-tile {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 1.6rem;
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-card, rgba(20, 20, 22, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-base, 0.25s ease);
  position: relative;
  overflow: hidden;
}
.category-tile:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent, rgba(227, 20, 28, 0.4));
  background: var(--bg-card-hover, rgba(22, 22, 25, 0.75));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.category-tile-label {
  color: var(--accent-green-light);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.category-tile h2,
.category-tile h3 {
  color: var(--text-primary);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0.75rem 0 0.5rem;
}
.category-tile p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  font-size: 0.92rem;
}
.category-tile-cta {
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--accent-green);
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}
.category-tile:hover .category-tile-cta {
  color: var(--accent-green-light);
}
.category-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.category-info {
  border-inline-start: 3px solid var(--accent-green);
  padding: 0.4rem 0 0.4rem 1.25rem;
}
[dir="rtl"] .category-info {
  padding: 0.4rem 1.25rem 0.4rem 0;
}
.category-info h3 {
  color: var(--text-primary);
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.category-info p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  font-size: 0.92rem;
}
.category-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.category-faq article {
  padding: 1.4rem;
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-card, rgba(20, 20, 22, 0.6));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.category-faq h3 {
  color: var(--text-primary);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}
.category-faq p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0.65rem 0 0;
  font-size: 0.92rem;
}
@media (max-width: 960px) {
  .category-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .category-info-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .category-hub-grid,
  .category-faq {
    grid-template-columns: 1fr;
  }
  .category-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-cta);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
  background: var(--gradient-cta-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-2px);
  color: var(--on-accent);
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn-primary:hover::after {
  opacity: 1;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(227, 20, 28, 0.3);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
  color: #fff;
}

.btn-messenger {
  background: linear-gradient(135deg, #0084ff, #0066cc);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 132, 255, 0.3);
}

.btn-messenger:hover {
  box-shadow: 0 8px 32px rgba(0, 132, 255, 0.45);
  transform: translateY(-2px);
  color: #fff;
}

.btn-sm {
  padding: 10px 24px;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 18px 40px;
  font-size: 1.05rem;
}

.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===================================================================
   PRODUCTS GRID
   =================================================================== */
.products-section {
  background: var(--bg-secondary);
  position: relative;
}

.products-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-accent), transparent);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, rgba(227, 20, 28, 0.2) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  background: var(--bg-card-hover);
  color: inherit;
}

.product-card:hover::before {
  opacity: 1;
}

.product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(135deg, #151517, #1c1c1f);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.product-card-image picture {
  display: contents;
}

.product-card-image img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card-image img {
  transform: scale(1.08);
}

.product-card-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  background: #fde2e3;
  color: #7f0a10;
  border: 1px solid rgba(56, 38, 0, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: calc(55% - var(--space-md));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

[dir="rtl"] .product-card-badge {
  left: auto;
  right: var(--space-md);
}

/* OUT OF STOCK BADGE */
.product-card-badge.text-red,
.product-card-badge.badge-out-of-stock,
.product-card-badge.out-of-stock,
.product-card-badge[data-en="Out of Stock"],
.product-card-badge[data-en="out of stock"],
.product-card-badge[data-ar="نفذت الكمية"],
.product-card-badge[data-ar="غير متوفر"] {
  background: #FCE4E4 !important;
  color: #991B1B !important;
  border: 1px solid rgba(153, 27, 27, 0.25) !important;
}

/* IN STOCK BADGE */
.product-card-badge.text-green,
.product-card-badge.badge-in-stock,
.product-card-badge.in-stock,
.product-card-badge[data-en="In Stock"],
.product-card-badge[data-en="in stock"],
.product-card-badge[data-ar="متوفر"] {
  background: #D9F3E6 !important;
  color: #176341 !important;
  border: 1px solid rgba(23, 99, 65, 0.25) !important;
}

.product-card-info {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.product-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

.product-card-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-green);
}

.product-card-price-currency {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

[dir="rtl"] .product-card-price-currency {
  margin-left: 0;
  margin-right: 4px;
}

/* ---- Before / After (Discount) Price Styles ---- */
.product-card-price-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-card-price-original {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 100, 80, 0.7);
  line-height: 1.2;
}

.product-card-price-currency-old {
  font-size: 0.7rem;
  font-weight: 400;
}

.product-card-price.sale {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-green);
  line-height: 1.2;
}

.product-card-discount-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #e53e3e, #c53030);
  color: #fff;
  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
  z-index: 2;
}

[dir="rtl"] .product-card-discount-badge {
  right: auto;
  left: var(--space-md);
}

.product-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-green);
  transition: gap var(--transition-base);
}

.product-card:hover .product-card-action {
  gap: 10px;
}

.product-card-action-arrow {
  transition: transform var(--transition-base);
}

[dir="rtl"] .product-card-action-arrow {
  transform: scaleX(-1);
}

.product-card:hover .product-card-action-arrow {
  transform: translateX(4px);
}

[dir="rtl"] .product-card:hover .product-card-action-arrow {
  transform: scaleX(-1) translateX(4px);
}

/* ===================================================================
   FEATURES SECTION
   =================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.feature-card {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
  transform: translateY(-4px);
}

.feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-lg);
  background: rgba(227, 20, 28, 0.08);
  border: 1px solid rgba(227, 20, 28, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all var(--transition-base);
}

.feature-card:hover .feature-icon {
  background: rgba(227, 20, 28, 0.15);
  border-color: rgba(227, 20, 28, 0.3);
  transform: scale(1.1);
}

.feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.feature-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ===================================================================
   CONTACT / CTA SECTION
   =================================================================== */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(227, 20, 28, 0.06) 0%, transparent 70%);
}

.cta-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.cta-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.cta-text {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ===================================================================
   FLOATING WHATSAPP BUTTON
   =================================================================== */
.float-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-base);
  text-decoration: none;
  animation: floatBounce 3s ease-in-out infinite;
}

[dir="rtl"] .float-whatsapp {
  right: auto;
  left: 28px;
}

.float-whatsapp.avoid-search-overlap {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(200px) scale(0.5) !important;
}

.float-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 36px rgba(37, 211, 102, 0.5);
}

.float-whatsapp svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.float-whatsapp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.4);
  animation: pulseBorder 2s infinite;
}

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

@keyframes pulseBorder {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2xl) 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.footer-link {
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent-green);
}

.footer-disclaimer {
  width: 100%;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.8;
  text-align: center;
}

/* ===================================================================
   PRODUCT DETAIL PAGE
   =================================================================== */
.product-detail,
.product-detail.section {
  padding-top: var(--page-top-offset, calc(var(--header-height) + var(--space-2xl))) !important;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.product-detail-image {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
  background: linear-gradient(135deg, #151517, #1c1c1f);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  overflow: hidden;
}

.product-detail-image img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.product-detail-image:hover img {
  transform: scale(1.05);
}

.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.product-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.product-detail-breadcrumb a {
  color: var(--text-secondary);
}

.product-detail-breadcrumb a:hover {
  color: var(--accent-green);
}

.product-detail-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  background: #fde2e3;
  color: #7f0a10;
  border: 1px solid rgba(56, 38, 0, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: fit-content;
}

.product-detail-badge.text-red,
.product-detail-badge.badge-out-of-stock,
.product-detail-badge.out-of-stock,
.product-detail-badge[data-en="Out of Stock"],
.product-detail-badge[data-en="out of stock"],
.product-detail-badge[data-ar="نفذت الكمية"],
.product-detail-badge[data-ar="غير متوفر"] {
  background: #FCE4E4 !important;
  color: #991B1B !important;
  border: 1px solid rgba(153, 27, 27, 0.25) !important;
}

.product-detail-badge.text-green,
.product-detail-badge.badge-in-stock,
.product-detail-badge.in-stock,
.product-detail-badge[data-en="In Stock"],
.product-detail-badge[data-en="in stock"],
.product-detail-badge[data-ar="متوفر"] {
  background: #D9F3E6 !important;
  color: #176341 !important;
  border: 1px solid rgba(23, 99, 65, 0.25) !important;
}

.product-detail-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.product-detail-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.product-detail-price-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-green);
}

.product-detail-price-currency {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.product-detail-specs {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-detail-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.product-detail-spec:last-child {
  border-bottom: none;
}

.product-detail-spec-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.product-detail-spec-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.product-detail-spec-value.text-green,
.product-detail-spec-value[data-en="In Stock"],
.product-detail-spec-value[data-ar="متوفر"] {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #D9F3E6 !important;
  color: #176341 !important;
  border: 1px solid rgba(23, 99, 65, 0.25) !important;
}

.product-detail-spec-value.text-red,
.product-detail-spec-value[data-en="Out of Stock"],
.product-detail-spec-value[data-ar="غير متوفر"],
.product-detail-spec-value[data-ar="نفذت الكمية"] {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #FCE4E4 !important;
  color: #991B1B !important;
  border: 1px solid rgba(153, 27, 27, 0.25) !important;
}

.badge-kit,
.badge-vial,
.badge-pen {
  background: #fde2e3 !important;
  color: #7f0a10 !important;
  border: 1px solid rgba(56, 38, 0, 0.2) !important;
}

.product-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(227, 20, 28, 0.12);
  border: 1px solid rgba(227, 20, 28, 0.35);
  color: var(--accent-green);
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  margin: 2px 4px 2px 0;
  transition: all 0.2s ease;
}

.product-category-tag:hover {
  background: rgba(227, 20, 28, 0.25);
  border-color: var(--accent-green);
  color: #fff;
  transform: translateY(-1px);
}

.product-detail-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.product-detail-actions .btn {
  flex: 1;
  min-width: 200px;
}

/* Description tabs */
.product-tabs {
  margin-top: var(--space-xl);
}

.product-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-card);
  margin-bottom: var(--space-xl);
}

.product-tab-btn {
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
}

.product-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-green);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.product-tab-btn.active {
  color: var(--accent-green);
}

.product-tab-btn.active::after {
  transform: scaleX(1);
}

.product-tab-btn:hover {
  color: var(--text-primary);
}

.product-tab-content {
  display: none;
}

.product-tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

.product-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 2;
}

.product-description h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-xl) 0 var(--space-md);
}

.product-description p {
  margin-bottom: var(--space-md);
}

.product-description ul {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

[dir="rtl"] .product-description ul {
  padding-left: 0;
  padding-right: var(--space-xl);
}

.product-description li {
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: var(--space-md);
}

[dir="rtl"] .product-description li {
  padding-left: 0;
  padding-right: var(--space-md);
}

.product-description li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--accent-green);
  border-radius: 50%;
}

[dir="rtl"] .product-description li::before {
  left: auto;
  right: 0;
}

/* Related Products */
.related-section {
  border-top: 1px solid var(--border-subtle);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

/* ===================================================================
   ANIMATIONS
   =================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.4s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.5s; }
.animate-on-scroll:nth-child(7) { transition-delay: 0.6s; }
.animate-on-scroll:nth-child(8) { transition-delay: 0.7s; }

/* ===================================================================
   STICKY ADD TO CART
   =================================================================== */
.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  padding: var(--space-md);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 1px solid var(--border-card);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
}

.sticky-atc.visible {
  transform: translateY(0);
}

.sticky-atc-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.sticky-atc-title {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.sticky-atc-price {
  font-weight: 700;
  color: var(--accent-green);
}

.sticky-atc .btn {
  width: 100%;
  font-size: 1.1rem;
  padding: var(--space-md);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .products-grid,
  .features-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .product-detail-image {
    position: static;
    max-height: 400px;
  }

  .hero-stats {
    gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: var(--site-header-height);
    --page-top-offset: calc(var(--site-header-height) + 1.5rem);
  }

  .container {
    padding: 0 14px;
  }

  .section {
    padding: 3rem 0;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 2.5rem;
  }

  .hero-content {
    width: 100%;
    padding: 1.25rem 0.25rem;
  }

  .hero-title {
    font-size: clamp(2rem, 13vw, 3.1rem);
    overflow-wrap: anywhere;
  }

  .hero-description {
    font-size: 0.98rem;
    margin-bottom: 2rem;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-link {
    font-size: 1.2rem;
  }

  .mobile-menu-btn { display: none !important; }

  .products-grid,
  .related-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    width: 100%;
    margin-top: 2rem;
  }

  .hero-stat {
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 1px solid rgba(227, 20, 28, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
  }

  .cta-card {
    padding: var(--space-2xl) var(--space-lg);
  }

  .product-detail-actions .btn {
    min-width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .float-whatsapp {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    width: 54px;
    height: 54px;
  }

  [dir="rtl"] .float-whatsapp {
    right: auto;
    left: 20px;
  }
}

@media (max-width: 480px) {
  .header .logo-text {
    display: none;
  }

  .products-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: clamp(1.75rem, 8.5vw, 2.35rem);
  }

  .hero-description {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .cta-buttons .btn {
    width: 100%;
  }

  .product-tabs-nav {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .product-tab-btn {
    flex: 1 1 100%;
    white-space: normal;
  }

  .product-search-container,
  .search-input-wrapper,
  .product-search-input,
  .seo-search-panel,
  .ai-answer-panel,
  .store-features-bar,
  .product-payment-trust-box,
  .payment-methods-grid,
  .payment-method-chip,
  .trust-badges {
    max-width: 100%;
    min-width: 0;
  }

  .payment-methods-grid,
  .trust-badges {
    grid-template-columns: 1fr;
  }

  .payment-method-chip,
  .payment-method-card,
  .partner-chip,
  .btn {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .seo-search-panel,
  .ai-answer-panel,
  .store-features-bar {
    padding: 1.1rem;
  }
}

/* ===================================================================
   UTILITY
   =================================================================== */
.text-center { text-align: center; }
.text-green { color: var(--accent-green); }
.text-red { color: #991B1B; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   SHOPPING CART & DRAWER
   =================================================================== */
.header-cart-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-card);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  margin: 0 var(--space-xs);
}

.header-cart-btn:hover {
  background: rgba(227, 20, 28, 0.1);
  border-color: rgba(227, 20, 28, 0.3);
  color: var(--accent-green);
  transform: translateY(-1px);
}

.header-cart-btn .cart-icon {
  width: 20px;
  height: 20px;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gradient-green);
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--transition-base);
}

.cart-badge.active {
  opacity: 1;
  transform: scale(1);
}

/* Bounce animation when item added */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.bounce-animation {
  animation: cartBounce 0.4s ease-out;
}

/* Backdrop */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cart-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100%;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-card);
  z-index: 1100;
  transform: translateX(110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

[dir="rtl"] .cart-drawer {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--border-card);
  transform: translateX(-110%);
}

.cart-drawer.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--transition-base), visibility 0s;
}

[dir="rtl"] .cart-drawer.active {
  right: auto;
  left: 0;
  transform: translateX(0);
}

.cart-drawer-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-drawer-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-drawer-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.cart-drawer-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Fixes iOS momentum scrolling */
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom)); /* Ensure no cut-off at bottom */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cart-empty-message {
  text-align: center;
  margin: auto 0;
  color: var(--text-secondary);
}

.cart-item {
  display: flex;
  gap: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  align-items: center;
}

.cart-item-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.cart-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cart-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.cart-item-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item-price {
  font-size: 0.9rem;
  color: var(--accent-green);
  font-weight: 600;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.qty-selector {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.qty-btn {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.qty-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.qty-val {
  padding: 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 20px;
  text-align: center;
}

.cart-item-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.cart-item-remove:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.08);
}

.cart-drawer-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  background: rgba(22, 22, 25, 0.95);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.cart-drawer-subtotal span:first-child {
  color: var(--text-secondary);
}

.cart-drawer-subtotal .subtotal-val {
  font-size: 1.15rem;
  color: var(--accent-green);
  font-weight: 700;
}

.btn-block {
  width: 100%;
  text-align: center;
}

/* ===================================================================
   CHECKOUT PAGE
   =================================================================== */
.checkout-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: calc(var(--header-height) + var(--space-md));
  margin-bottom: var(--space-xl);
}

[dir="rtl"] .checkout-breadcrumb {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.checkout-breadcrumb a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.checkout-breadcrumb a:hover {
  color: var(--accent-green);
}

.checkout-breadcrumb span {
  padding: 0 4px;
}

.checkout-empty-state {
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  background: var(--bg-secondary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  max-width: 600px;
  margin: var(--space-4xl) auto;
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: var(--space-lg);
}

.checkout-empty-state h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.checkout-empty-state p {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-4xl);
}

.checkout-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.checkout-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-md);
}

[dir="rtl"] .checkout-card-title {
  text-align: right;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

[dir="rtl"] .checkout-form {
  text-align: right;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.required-star {
  color: #ff4d4d;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
  outline: none;
}

[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea,
[dir="rtl"] .form-group select {
  text-align: right;
  direction: rtl;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(227, 20, 28, 0.15);
}

.form-group input.input-error,
.form-group textarea.input-error,
.form-group select.input-error {
  border-color: #ff4d4d;
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.15);
}

.form-group select {
  appearance: none;
  cursor: pointer;
}

.form-group select option {
  background: #18181b;
  color: var(--text-primary);
}

.form-group select option:checked {
  background: var(--accent-blue-dark);
  color: #ffffff;
}

.native-governorate-select {
  display: none;
}

.custom-select {
  position: relative;
}

.custom-select-trigger {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 12px 44px 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: all var(--transition-fast);
}

.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition-fast);
}

.custom-select.open .custom-select-trigger::after {
  transform: translateY(-30%) rotate(225deg);
}

.custom-select-trigger.placeholder {
  color: var(--text-secondary);
  font-weight: 500;
}

.custom-select-trigger:focus,
.custom-select.open .custom-select-trigger {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(227, 20, 28, 0.15);
}

.custom-select.input-error .custom-select-trigger {
  border-color: #ff4d4d;
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.15);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 2000;
  max-height: 320px;
  overflow-y: auto;
  display: none;
  padding: 6px;
  background: #141416;
  border: 1px solid rgba(227, 20, 28, 0.45);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
}

.custom-select.open .custom-select-options {
  display: block;
}

.custom-select-option {
  width: 100%;
  display: block;
  padding: 11px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option:focus {
  background: rgba(227, 20, 28, 0.15);
  color: #ffffff;
  outline: none;
}

.custom-select-option.selected {
  background: var(--accent-blue-dark);
  color: #ffffff;
}

[dir="rtl"] .custom-select-trigger,
[dir="rtl"] .custom-select-option {
  text-align: right;
}

[dir="rtl"] .custom-select-trigger {
  padding-right: 16px;
  padding-left: 44px;
}

[dir="rtl"] .custom-select-trigger::after {
  right: auto;
  left: 16px;
}

.error-message {
  color: #ff4d4d;
  font-size: 0.8rem;
  margin-top: 2px;
  display: none;
}

/* Summary styles */
.checkout-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  max-height: 350px;
  overflow-y: auto;
  padding-right: var(--space-xs);
}

[dir="rtl"] .checkout-summary-list {
  padding-right: 0;
  padding-left: var(--space-xs);
}

.checkout-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

[dir="rtl"] .checkout-summary-item {
  flex-direction: row-reverse;
}

.summary-item-left {
  display: flex;
  gap: var(--space-sm);
}

[dir="rtl"] .summary-item-left {
  flex-direction: row-reverse;
}

.summary-item-qty {
  font-weight: 700;
  color: var(--accent-green);
}

.summary-item-name {
  color: var(--text-primary);
}

.summary-item-price {
  font-weight: 600;
}

.checkout-summary-totals {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

[dir="rtl"] .checkout-total-row {
  flex-direction: row-reverse;
}

.checkout-total-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-xs) 0;
}

.grand-total {
  font-size: 1.15rem;
  color: var(--text-primary);
}

.checkout-disclaimer {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: rgba(227, 20, 28, 0.04);
  border: 1px solid rgba(227, 20, 28, 0.1);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

[dir="rtl"] .checkout-disclaimer {
  text-align: right;
  direction: rtl;
}

.checkout-disclaimer p {
  margin: 0;
}

.sticky-card {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

@media (max-width: 991px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .sticky-card {
    position: static;
  }
}

/* -------------------------------------------------------------------
   PRODUCT SEARCH BAR
   ------------------------------------------------------------------- */
.product-search-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto var(--space-xl) auto;
  position: relative;
  z-index: 10;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(20, 20, 22, 0.85);
  border: 2px solid rgba(227, 20, 28, 0.55);
  border-radius: 30px;
  padding: 0 var(--space-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 12px rgba(227, 20, 28, 0.1);
}

.search-input-wrapper:hover {
  border-color: rgba(227, 20, 28, 0.85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(227, 20, 28, 0.2);
}

.search-input-wrapper:focus-within {
  border-color: #e3141c;
  outline: 2px solid #e3141c;
  outline-offset: 3px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(227, 20, 28, 0.35), 0 0 0 4px rgba(227, 20, 28, 0.2);
  background: rgba(20, 20, 22, 0.98);
  transform: translateY(-2px);
}

.search-input-wrapper:focus-within .search-icon {
  color: var(--accent-green, #e3141c);
  transform: scale(1.1);
}

.search-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-right: var(--space-sm);
}

[dir="rtl"] .search-icon {
  margin-right: 0;
  margin-left: var(--space-sm);
}

.product-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  padding: var(--space-md) 0;
  outline: none;
}

.delivery-estimate-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(227, 20, 28, 0.05);
  border: 1px dashed var(--accent-green);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: 20px;
  margin-bottom: 24px;
}
.delivery-estimate-icon {
  font-size: 1.2rem;
}
.delivery-estimate-text {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.4;
}
.delivery-estimate-text b {
  color: var(--accent-green);
}

/* Trust Badges */
.trust-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sticky ATC (Mobile) */
.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-accent);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
.sticky-atc.visible {
  transform: translateY(0);
}
@media (min-width: 768px) {
  .sticky-atc {
    display: none;
  }
}
.sticky-atc-info {
  display: flex;
  flex-direction: column;
}
.sticky-atc-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.sticky-atc-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-green);
}
.sticky-atc .btn-primary {
  padding: 8px 16px;
  font-size: 0.9rem;
}

/* Smart Recommendations Container */
.smart-recommendations {
  margin-top: 60px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 40px;
}
.smart-recommendations h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}

/* ===================================================================
   SEARCH AUTOCOMPLETE DROPDOWN (Phase 6)
   =================================================================== */
.search-input-wrapper {
  position: relative;
}

.product-search-input::placeholder {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .product-search-container {
    padding: 0 var(--space-md);
  }
}

.search-autocomplete {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(20, 20, 22, 0.97);
  border: 1px solid rgba(227, 20, 28, 0.3);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(227, 20, 28,0.08);
  backdrop-filter: blur(20px);
  overflow: hidden;
  z-index: 999;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}

.search-autocomplete.open {
  display: block;
  animation: autocompleteIn 0.18s cubic-bezier(0.4,0,0.2,1);
}

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

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

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

.autocomplete-item:hover,
.autocomplete-item.active {
  background: rgba(227, 20, 28,0.08);
}

.autocomplete-item-icon {
  width: 16px;
  height: 16px;
  color: #e3141c;
  flex-shrink: 0;
}

.autocomplete-item-text { flex: 1; min-width: 0; }

.autocomplete-item-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #f4f4f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-item-sub {
  font-size: 0.75rem;
  color: #71717a;
  margin-top: 2px;
}

.autocomplete-no-results {
  padding: 16px 20px;
  text-align: center;
  color: #71717a;
  font-size: 0.9rem;
}

/* ===================================================================
   PRODUCT TABS & STRUCTURED DESCRIPTION STYLES (Luxury Glow Layout)
   =================================================================== */
.product-tabs {
  margin-top: 3rem;
  border-radius: 16px;
  background: rgba(20, 20, 22, 0.65);
  border: 1px solid rgba(227, 20, 28, 0.18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.product-tabs-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 11, 12, 0.75);
}

.product-tab-btn {
  padding: 0.7rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.product-tab-btn:hover {
  color: #f4f4f5;
  background: rgba(255, 255, 255, 0.05);
}

.product-tab-btn.active {
  color: #e3141c;
  background: rgba(227, 20, 28, 0.12);
  border-color: rgba(227, 20, 28, 0.4);
  box-shadow: 0 0 20px rgba(227, 20, 28, 0.15);
}

.product-tab-content {
  display: none;
  padding: 2.25rem 2.5rem;
}

.product-tab-content.active {
  display: block;
  animation: fadeInDesc 0.35s ease;
}

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

.product-description {
  font-size: 1.02rem;
  line-height: 1.85;
  color: #d6e0ea;
  word-break: break-word;
}

.product-description[dir="rtl"] {
  font-family: 'Cairo', var(--font-en), sans-serif;
  text-align: right;
  direction: rtl;
}

/* Luxury Intro Box */
.product-description .desc-intro {
  font-size: 1.04rem;
  line-height: 1.85;
  color: #e2e8f0;
  margin-bottom: 2rem;
  padding: 1.25rem 1.6rem;
  background: rgba(22, 22, 25, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-inline-start: 4px solid #e3141c;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Luxury Section Heading with Dashed Divider */
.product-description .desc-heading {
  font-size: 1.16rem;
  font-weight: 700;
  color: #e3141c;
  margin: 2.25rem 0 1.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(227, 20, 28, 0.25);
}

.product-description .desc-heading-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(227, 20, 28, 0.4));
}

/* Luxury Stacked Cards for Features */
.product-description .desc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Individual Elevated Card with Rich Shadow */
.product-description .desc-list li {
  position: relative;
  display: block;
  padding: 0.95rem 1.35rem;
  background: rgba(22, 22, 25, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
  font-size: 0.98rem;
  line-height: 1.7;
  color: #cbd5e1;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-description .desc-list li:hover {
  background: rgba(22, 22, 25, 0.95);
  border-color: rgba(227, 20, 28, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(227, 20, 28, 0.18);
  transform: translateY(-2px);
}

/* Pushpin Bullet & Formatting */
.product-description .desc-list .desc-bullet {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  margin-inline-end: 0.45rem;
  vertical-align: middle;
}

/* Fallback for lists without explicit .desc-bullet */
.product-description .desc-list li:not(:has(.desc-bullet))::before {
  content: "📌";
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  margin-inline-end: 0.45rem;
  vertical-align: middle;
}

.product-description .desc-list li strong {
  color: #f4f4f5;
  font-weight: 700;
  margin-inline-end: 0.35rem;
}

.product-description .desc-p {
  margin-bottom: 1.15rem;
  color: #c4d0dc;
  line-height: 1.85;
}

/* Generic Fallback HTML styling within descriptions */
.product-description p {
  margin-bottom: 1.15rem;
  line-height: 1.85;
}

.product-description ul:not(.desc-list) {
  padding-inline-start: 1.6rem;
  margin-bottom: 1.5rem;
}

.product-description ul:not(.desc-list) li {
  margin-bottom: 0.6rem;
  line-height: 1.75;
}

.product-description strong {
  color: #f4f4f5;
  font-weight: 600;
}

.product-description h3,
.product-description h4:not(.desc-heading) {
  color: #e3141c;
  margin: 1.8rem 0 0.85rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .product-tab-content {
    padding: 1.5rem 1.25rem;
  }
  .product-tab-btn {
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
  }
  .product-description {
    font-size: 0.95rem;
    line-height: 1.75;
  }
  .product-description .desc-intro {
    padding: 1.1rem 1.25rem;
  }
  .product-description .desc-list li {
    padding: 0.85rem 1.1rem;
  }
}

/* ===================================================================
   SHIPPING & PAYMENT METHODS (DELIVERY + PAYMENT OPTIONS)
   =================================================================== */

.text-gold {
  color: #e3141c !important;
  font-weight: 700 !important;
}

/* Product Detail Payment & Installment Trust Box */
.product-payment-trust-box {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(145deg, rgba(227, 20, 28, 0.08) 0%, rgba(20, 20, 22, 0.7) 100%);
  border: 1px solid rgba(227, 20, 28, 0.28);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.payment-trust-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.payment-trust-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-trust-icon {
  font-size: 1.15rem;
}

.payment-trust-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e3141c;
  letter-spacing: 0.2px;
}

.payment-trust-shipping-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.payment-method-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.payment-method-chip:hover {
  background: rgba(227, 20, 28, 0.08);
  border-color: rgba(227, 20, 28, 0.35);
}

.payment-method-chip .chip-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.payment-method-chip.installment-chip {
  grid-column: span 2;
  background: linear-gradient(90deg, rgba(227, 20, 28, 0.12) 0%, rgba(28, 126, 203, 0.08) 100%);
  border-color: rgba(227, 20, 28, 0.4);
  color: #fce8a6;
}

/* Trust Badges on Product Detail */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 1rem;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.trust-badge span:first-child {
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Checkout Payment Method Radio Cards */
.checkout-payment-section {
  margin-top: 1.5rem;
}

.checkout-payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.payment-method-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  user-select: none;
}

.payment-method-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(227, 20, 28, 0.35);
}

.payment-method-card.active {
  background: linear-gradient(145deg, rgba(227, 20, 28, 0.09) 0%, rgba(20, 20, 22, 0.7) 100%);
  border-color: #e3141c;
  box-shadow: 0 0 24px rgba(227, 20, 28, 0.16);
}

.payment-method-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-radio-custom {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  transition: all var(--transition-fast);
}

.payment-method-card.active .payment-method-radio-custom {
  border-color: #e3141c;
}

.payment-method-card.active .payment-method-radio-custom::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #e3141c;
  border-radius: 50%;
}

.payment-method-body {
  flex: 1;
  min-width: 0;
}

.payment-method-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.payment-method-icon {
  font-size: 1.15rem;
}

.payment-method-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
}

.payment-method-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}

.badge-popular {
  background: rgba(227, 20, 28, 0.18);
  color: #e3141c;
  border: 1px solid rgba(227, 20, 28, 0.35);
}

.badge-instant {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.badge-secure {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.badge-installment {
  background: rgba(234, 179, 8, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.payment-method-desc {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.payment-partners-chips {
  display: flex;
  gap: 7px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.partner-chip {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(227, 20, 28, 0.3);
  color: #e3141c;
  padding: 3px 10px;
  border-radius: 14px;
}

.seo-search-panel {
  margin-top: 2.75rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(227, 20, 28, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(11, 11, 12, 0.42);
}

.seo-search-title {
  color: var(--accent-green);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.65rem;
}

.seo-search-copy {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.75;
  margin: 0;
}

.seo-search-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: var(--accent-green-light);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 20, 28, 0.42);
}

.seo-search-link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent-green-light);
}

.ai-answer-panel {
  margin-top: 1rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(71, 158, 227, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(20, 20, 22, 0.56);
}

.ai-answer-title {
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.65rem;
}

.ai-answer-copy {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.75;
  margin: 0;
}

.no-results-card {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  padding: 2rem;
  border: 1px solid rgba(227, 20, 28, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(11, 11, 12, 0.42);
}

.no-results-card h3 {
  color: var(--text-primary);
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}

.no-results-card p {
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 1.25rem;
}

/* Store Features Bar on Homepage */
.store-features-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: 3.5rem;
  padding: 2rem 2.25rem;
  background: linear-gradient(135deg, rgba(20, 20, 22, 0.85) 0%, rgba(11, 11, 12, 0.95) 100%);
  border: 1px solid rgba(227, 20, 28, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.store-feature-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.store-feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
  background: rgba(227, 20, 28, 0.1);
  border: 1px solid rgba(227, 20, 28, 0.25);
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e3141c;
  margin-bottom: 6px;
}

.store-feature-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* RTL Adjustments */
[dir="rtl"] .store-features-bar,
[dir="rtl"] .store-feature-card,
[dir="rtl"] .checkout-payment-options,
[dir="rtl"] .payment-method-card,
[dir="rtl"] .product-payment-trust-box {
  text-align: right;
}

[dir="rtl"] .payment-method-radio-custom {
  margin-left: 0;
  margin-right: 0;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .store-features-bar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }
  .payment-method-chip.installment-chip {
    grid-column: span 1;
  }
  .trust-badges {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   CHECKOUT SHIPPING CLARIFICATION BOX
   =================================================================== */

.checkout-shipping-clarification {
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(227, 20, 28, 0.08) 0%, rgba(20, 20, 22, 0.5) 100%);
  border: 1px solid rgba(227, 20, 28, 0.28);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: fadeIn 0.3s ease-out;
}

.shipping-clarification-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.shipping-clarification-text {
  font-size: 0.83rem;
  color: #ff4d55;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

.shipping-call-tag {
  font-size: 0.78rem;
  color: #e3141c;
  background: rgba(227, 20, 28, 0.14);
  border: 1px solid rgba(227, 20, 28, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  text-align: right;
  letter-spacing: 0.2px;
}

.total-shipping-note {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
}

[dir="rtl"] .checkout-shipping-clarification {
  text-align: right;
}

/* Payment fee notices (admin-editable: lib/payment-fees.js) */
.checkout-fee-clarification {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.checkout-fee-clarification[hidden] { display: none; }
.checkout-fee-clarification .shipping-clarification-text { color: #bfdbfe; }
.payment-method-fee {
  font-size: 0.8rem;
  color: #fbbf24;
  line-height: 1.5;
  margin: 6px 0 0;
  font-weight: 600;
}
.payment-method-fee:empty { display: none; }
.payment-fee-notes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: #fbbf24;
  line-height: 1.5;
}
.product-policy-payment-fees:empty { display: none; }

.partner-chip.pos-chip {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.35);
  color: #4ade80;
}

/* ===================================================================
   HOME CATEGORY NAVIGATION
   =================================================================== */

.home-categories-section {
  background: rgba(20, 20, 22, 0.45);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.home-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.home-category {
  min-width: 0;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.1rem 0.8rem;
  color: var(--text-primary);
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(11, 11, 12, 0.58);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.home-category:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 20, 28, 0.42);
  background: rgba(227, 20, 28, 0.07);
}

.home-category img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35));
}

.home-category span {
  width: 100%;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.home-categories-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 1100px) {
  .home-categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .home-categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .home-categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .home-category {
    min-height: 160px;
    padding: 0.85rem 0.55rem;
  }

  .home-category img {
    width: 92px;
    height: 92px;
  }

  .home-category span {
    font-size: 0.84rem;
  }

  .home-categories-actions .btn {
    width: 100%;
  }
}

@media (max-width: 1050px) {
  :root {
    --header-height: var(--site-mobile-chrome-height, 116px);
  }

  .header {
    height: var(--header-height);
  }

  .header-inner {
    height: 64px;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    overflow-y: auto;
    padding: 2rem 1rem;
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-link {
    font-size: 1.08rem;
  }

  .mobile-menu-btn { display: none !important; }

  .mobile-quick-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 0 0.7rem 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(11, 11, 12, 0.96);
  }

  .mobile-quick-nav::-webkit-scrollbar {
    display: none;
  }

  .mobile-quick-nav .nav-link {
    flex: 0 0 auto;
    min-width: 82px;
    height: 40px;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .mobile-quick-nav .nav-link::after {
    display: none;
  }

  .mobile-quick-nav .nav-icon,
  .mobile-quick-nav .nav-icon svg {
    width: 16px;
    height: 16px;
  }
}


/* ==========================================================================
   Home Hero Search Bar & Autocomplete (Phase 7 - Luxury Search Bar)
   ========================================================================== */
.home-search-section {
  width: 100%;
  max-width: 680px;
  margin: 1.75rem auto 0 auto;
  position: relative;
  z-index: 1000;
}

.home-search-form {
  position: relative;
  width: 100%;
}

.home-search-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(20, 20, 22, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(227, 20, 28, 0.55);
  border-radius: 50px;
  padding: 6px 8px 6px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(227, 20, 28, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-search-input-wrapper:hover {
  border-color: rgba(227, 20, 28, 0.85);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(227, 20, 28, 0.22);
}

.home-search-input-wrapper:focus-within {
  border-color: #e3141c;
  outline: 2px solid #e3141c;
  outline-offset: 3px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(227, 20, 28, 0.4), 0 0 0 4px rgba(227, 20, 28, 0.22);
  background: rgba(20, 20, 22, 0.98);
  transform: translateY(-2px);
}

.home-search-icon {
  width: 20px;
  height: 20px;
  color: var(--accent-green, #e3141c);
  flex-shrink: 0;
  margin-right: 12px;
  transition: transform 0.3s ease;
}

[dir="rtl"] .home-search-icon {
  margin-right: 0;
  margin-left: 12px;
}

.home-search-input-wrapper:focus-within .home-search-icon {
  transform: scale(1.1);
}

.home-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 1.02rem;
  color: #f8fafc;
  padding: 8px 4px;
}

.home-search-input::placeholder {
  color: rgba(226, 232, 240, 0.5);
  font-weight: 400;
}

.home-search-clear-btn {
  display: none;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 8px;
  transition: all 0.2s ease;
  font-size: 13px;
  line-height: 1;
}

.home-search-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.home-search-clear-btn.visible {
  display: flex;
}

.home-search-submit-btn {
  position: relative;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #e3141c 0%, #a50e14 100%);
  color:#ffffff;
  border: none;
  border-radius: 40px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(227, 20, 28, 0.3);
}

.home-search-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(227, 20, 28, 0.5);
  filter: brightness(1.08);
}

.home-search-submit-btn:active {
  transform: translateY(1px);
}

/* Home Autocomplete Dropdown */
.home-search-autocomplete {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #0e0e10 !important;
  border: 1.5px solid rgba(227, 20, 28, 0.5);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.95), 0 0 25px rgba(227, 20, 28, 0.2);
  overflow: hidden;
  z-index: 9999;
  display: none;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 20, 28, 0.4) transparent;
}

.home-search-autocomplete.open {
  display: block;
  animation: homeSearchFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.home-search-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

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

.home-search-item:hover,
.home-search-item.active {
  background: rgba(227, 20, 28, 0.12);
}

.home-search-item-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: #141416;
  border: 1px solid rgba(227, 20, 28, 0.2);
  flex-shrink: 0;
}

.home-search-item-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-search-item-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-search-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: #94a3b8;
}

.home-search-item-brand {
  color: var(--accent-green, #e3141c);
  font-weight: 500;
}

.home-search-item-price {
  font-weight: 700;
  color: #38ef7d;
  font-size: 0.9rem;
  margin-left: auto;
  white-space: nowrap;
}

[dir="rtl"] .home-search-item-price {
  margin-left: 0;
  margin-right: auto;
}

.home-search-footer-action {
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(227, 20, 28, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--accent-green, #e3141c);
  cursor: pointer;
  transition: background 0.2s;
}

.home-search-footer-action:hover {
  background: rgba(227, 20, 28, 0.15);
}

.home-search-no-results {
  padding: 24px 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.92rem;
}

/* Trending Quick Tags */
.home-search-quick-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.home-search-tags-label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.home-search-tag {
  background: rgba(22, 22, 25, 0.65);
  border: 1px solid rgba(227, 20, 28, 0.25);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.home-search-tag:hover {
  background: rgba(227, 20, 28, 0.2);
  border-color: var(--accent-green, #e3141c);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .home-search-section {
    margin-top: 1.25rem;
  }

  .home-search-input-wrapper {
    padding: 5px 6px 5px 14px;
  }

  .home-search-input {
    font-size: 0.92rem;
  }

  .home-search-submit-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .home-search-quick-tags {
    gap: 6px;
  }

  .home-search-tag {
    font-size: 0.74rem;
    padding: 3px 10px;
  }
}

/* Ensure Mid-Page search section and its dropdown stay on top of subsequent sections */
.home-mid-search-section {
  position: relative;
  z-index: 100;
}
.home-mid-search-section .container {
  position: relative;
  z-index: 100;
}
#features {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   L6 accessibility (remediation 2026-10, additive)
   - visible keyboard focus: several inputs/selects set `outline: none` without a replacement;
     this :focus-visible rule (specificity 0,2,0, declared last) restores a visible ring for
     keyboard users only (mouse focus is unchanged).
   - prefers-reduced-motion: no smooth scrolling, animations/transitions effectively disabled.
   ========================================================================== */
:is(a, button, input, select, textarea, summary, [tabindex], .custom-select-trigger, .custom-select-option):focus-visible {
  outline: 2px solid var(--accent-green, #e3141c);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cookie / analytics consent banner (analytics-consent.js). Floating card above the page bottom; Decline and Accept
   have the same size so refusing is as easy as accepting. */
.ep-consent {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(22, 22, 25, 0.97);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: #e8edf5;
  font-size: 0.95rem;
  line-height: 1.7;
}
.ep-consent p { margin: 0; }
.ep-consent-title { font-weight: 800; font-size: 1.05rem; color: #ff6b70; margin-bottom: 6px !important; }
.ep-consent-text { color: #d5dbe6; }
.ep-consent-tools { unicode-bidi: isolate; font-weight: 600; color: #f4f4f5; }
.ep-consent-link { display: inline-block; margin-top: 6px; color: #ff6b70; text-decoration: underline; font-weight: 600; }
.ep-consent-actions { display: flex; gap: 10px; margin-top: 14px; }
.ep-consent-actions .btn { flex: 1 1 0; min-height: 44px; padding: 10px 16px; justify-content: center; }
@media (max-width: 480px) {
  .ep-consent { bottom: 12px; padding: 16px; font-size: 0.9rem; }
}

/* "Notify me when it is back" form on out-of-stock product pages (lib/stock-alerts.js) */
.stock-alert-form {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(227, 20, 28, 0.4);
  border-radius: 12px;
  background: rgba(227, 20, 28, 0.07);
}
.stock-alert-title { margin: 0 0 10px; font-weight: 800; color: var(--accent-green); }
.stock-alert-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.stock-alert-fields[hidden] { display: none; }
.stock-alert-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 20, 22, 0.85);
  color: #f8fafc;
  font: inherit;
}
.stock-alert-fields .btn { flex: 0 0 auto; padding: 11px 22px; white-space: nowrap; }
.stock-alert-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.stock-alert-status { margin: 8px 0 0; font-weight: 700; font-size: 0.9rem; }
.stock-alert-status:empty { display: none; }
.stock-alert-status.ok { color: #4ade80; }
.stock-alert-status.error { color: #f87171; }

/* Product reviews (lib/reviews.js) */
.product-rating-summary { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 0.9rem; color: var(--text-muted); text-decoration: none; }
.review-stars { color: #fbbf24; letter-spacing: 1px; }
.product-reviews { margin: 2.5rem 0; padding: 20px; border: 1px solid var(--border-color); border-radius: 12px; }
.product-reviews h2 { margin: 0 0 10px; font-size: 1.35rem; }
.reviews-summary, .reviews-empty { margin: 0 0 16px; color: var(--text-muted); }
.review-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.review-item { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-date { font-size: 0.8rem; color: var(--text-muted); }
.review-body { margin: 8px 0 0; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.review-form { display: grid; gap: 10px; max-width: 560px; }
.review-form-title { margin: 0; font-weight: 800; color: var(--accent-green); }
.review-rating-input { border: 0; margin: 0; padding: 0; }
.review-rating-input legend { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 4px; }
.review-star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
[dir="rtl"] .review-star-picker { flex-direction: row-reverse; }
.review-star-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.review-star-picker label { font-size: 1.8rem; line-height: 1; color: rgba(148, 163, 184, 0.5); cursor: pointer; }
.review-star-picker input:checked ~ label, .review-star-picker label:hover, .review-star-picker label:hover ~ label { color: #fbbf24; }
.review-star-picker input:focus-visible + label { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.review-input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(20, 20, 22, 0.85); color: #f8fafc; font: inherit; }
textarea.review-input { resize: vertical; min-height: 84px; }
.review-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* no off-screen offset: in Arabic (RTL) a -9999px offset widened the page */
.review-form .btn { justify-self: start; }
.review-note { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.review-status { margin: 0; font-weight: 700; font-size: 0.9rem; }
.review-status:empty { display: none; }
.review-status.ok { color: #4ade80; }
.review-status.error { color: #f87171; }

/* Order tracking page (/track-order) */
.track-order-form { display: grid; gap: 14px; margin-bottom: 1.5rem; }
.track-order-label { display: grid; gap: 6px; font-weight: 600; }
.track-order-input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(227, 20, 28, 0.4);
  background: rgba(20, 20, 22, 0.85);
  color: #f8fafc;
  font: inherit;
}
.track-order-form .btn { justify-self: start; }
.track-order-message { margin: 0; color: #f87171; font-weight: 600; }
.track-order-message:empty { display: none; }
.track-order-result {
  padding: 16px 18px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.06);
  margin-bottom: 1.5rem;
}
.track-order-result[hidden] { display: none; }
.track-order-status { font-size: 1.15rem; margin: 0 0 8px; color: #4ade80; }
.track-order-items { margin: 8px 0; padding-inline-start: 20px; }
.track-order-help { font-size: 0.9rem; color: var(--text-muted); }

/* Utility pages on the info template (/track-order, 404): short hero so the form / search is on the first screen */
/* #hero: beats the shared .hero#hero landing height */
#hero.info-hero.info-hero--compact {
  min-height: 0;
  padding-bottom: 1.5rem;
}

/* Home page flying product pictures (script.js initFlyingProducts) */
.ep-fly-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}
.ep-fly-item {
  position: absolute;
  top: 0;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .ep-fly-layer { display: none; } }

/* First-order discount: cart progress, add-to-cart pop-up, first-visit offer */
.ep-offer-progress { color: #243b30; background: #f1f8f4; border: 1px solid #cfe6d8; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.9rem; }
.ep-offer-progress p { margin: 0 0 6px; font-weight: 600; color: #1b4332; }
.ep-offer-progress small { display: block; margin-top: 6px; color: #5c6b63; font-size: 0.75rem; }
.ep-offer-bar { height: 7px; background: #dde9e2; border-radius: 999px; overflow: hidden; }
.ep-offer-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2d6a4f, #52b788); border-radius: inherit; transition: width .4s ease; }
.ep-offer-toast { color: #243b30; position: fixed; left: 50%; top: 90px; transform: translate(-50%, -260%); width: min(92vw, 380px); background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 14px 16px 12px; z-index: 10050; transition: transform .35s ease; font-size: 0.92rem; }
.ep-offer-toast.show { transform: translate(-50%, 0); }
.ep-offer-toast strong { display: block; margin-bottom: 4px; color: #1b4332; }
.ep-offer-toast p { margin: 0 0 8px; color: #243b30; }
.ep-offer-toast-close { position: absolute; top: 6px; inset-inline-end: 8px; background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: #66756d; }
.ep-offer-modal { position: fixed; inset: 0; background: rgba(10, 25, 18, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10060; animation: epOfferFade .25s ease; }
.ep-offer-box { position: relative; color: #243b30; background: #fff; border-radius: 18px; width: min(100%, 400px); padding: 26px 22px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ep-offer-box h3 { margin: 6px 0 6px; font-size: 1.35rem; color: #1b4332; }
.ep-offer-box > p { margin: 0 0 12px; color: #4a5a52; }
.ep-offer-box ul { list-style: none; margin: 0 0 16px; padding: 0; text-align: start; }
.ep-offer-box li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px dashed #d6e4dc; }
.ep-offer-box li:last-child { border-bottom: 0; background: #f1f8f4; border-radius: 8px; }
.ep-offer-box li strong { color: #2d6a4f; white-space: nowrap; }
.ep-offer-badge { font-size: 2.2rem; }
.ep-offer-cta { display: inline-block; width: 100%; }
.ep-offer-box small { display: block; margin-top: 10px; color: #6b7a72; font-size: 0.75rem; }
.ep-offer-x { position: absolute; top: 8px; inset-inline-end: 12px; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: #66756d; }
@keyframes epOfferFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ep-offer-toast, .ep-offer-modal, .ep-offer-bar span { transition: none; animation: none; } }
.checkout-offer-note { margin: 4px 0 8px; padding: 8px 10px; background: #f1f8f4; border-radius: 8px; font-size: 0.85rem; color: #1b4332; }
/* Checkout: second-order discount code */
.checkout-code { margin: 10px 0 6px; width: 100%; align-self: stretch; }
.checkout-code label { display: block; font-size: 0.85rem; margin-bottom: 6px; color: var(--text-secondary, #a1a1aa); }
.checkout-code-row { display: flex; gap: 8px; }
.checkout-code-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(227, 20, 28,.35); background: rgba(255,255,255,.04); color: inherit; font: inherit; text-transform: uppercase; letter-spacing: .06em; }
.checkout-code-row .btn { flex: 0 0 auto; padding: 10px 18px; }
.checkout-code-msg { margin: 6px 0 0; font-size: 0.85rem; color: #f87171; }
.checkout-code-msg.ok { color: #4ade80; }

/* "Customers also bought" (product page + cart drawer) */
.ep-together { margin: 2rem 0 0; }
.ep-together h2, .ep-together h4 { margin: 0 0 12px; font-size: 1.15rem; }
.ep-together-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ep-together-card { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(227, 20, 28,.18); border-radius: 12px; padding: 10px; }
.ep-together-card a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.ep-together-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 8px; }
.ep-together-card .ep-together-name { font-size: 0.85rem; font-weight: 600; line-height: 1.35; }
.ep-together-card .ep-together-price { color: var(--accent-green, #e3141c); font-weight: 700; font-size: 0.9rem; }
.ep-together-card .ep-together-fit { font-size: 0.72rem; color: #4ade80; }
.ep-together-card .btn { padding: 8px 10px; font-size: 0.82rem; }
.cart-drawer .ep-together { margin: 12px 0 0; padding: 0 0 4px; }
.cart-drawer .ep-together h4 { font-size: 0.95rem; }
.cart-drawer .ep-together-list { grid-template-columns: 1fr; gap: 8px; }
.cart-drawer .ep-together-card { flex-direction: row; align-items: center; }
.cart-drawer .ep-together-card a { flex-direction: row; align-items: center; flex: 1 1 auto; min-width: 0; }
.cart-drawer .ep-together-card img { width: 52px; height: 52px; flex: 0 0 52px; }
.hero-stat-value--text { font-size: 1.3rem; line-height: 1.35; }
@media (max-width: 1050px) { .hero-stat-value--text { font-size: 1.05rem; } }

/* Product photo zoom (script.js initProductZoom) */
.ep-zoom { position: fixed; inset: 0; z-index: 10070; background: rgba(11, 11, 12, .94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 20px; }
.ep-zoom-stage { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pinch-zoom; }
.ep-zoom-stage img { max-width: min(100%, 900px); max-height: 100%; object-fit: contain; background: #fff; border-radius: 12px; cursor: zoom-in; transition: transform .25s ease; user-select: none; -webkit-user-drag: none; }
.ep-zoom.is-zoomed .ep-zoom-stage img { cursor: zoom-out; transition: transform .25s ease, transform-origin .05s linear; }
.ep-zoom-close, .ep-zoom-toggle { position: absolute; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(227, 20, 28,.5); background: rgba(20, 20, 22,.9); color: #f4f4f5; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.ep-zoom-close { right: 12px; }
.ep-zoom-toggle { left: 12px; }
.ep-zoom-hint { margin: 10px 0 0; font-size: .85rem; color: #a1a1aa; text-align: center; }
.ep-zoom.is-zoomed .ep-zoom-hint { visibility: hidden; }
/* Support e-mail (Admin → Settings → E-mail sender) */
.footer-email { margin: 12px 0 0; text-align: center; font-size: 0.9rem; }
.footer-email a { color: var(--accent-green, #e3141c); text-decoration: none; }
.cta-email { margin: 18px 0 0; text-align: center; color: var(--text-secondary, #a1a1aa); font-size: 0.95rem; }
.cta-email a { color: var(--accent-green, #e3141c); font-weight: 600; text-decoration: none; unicode-bidi: isolate; }
/* "Save my cart on WhatsApp" in the cart drawer */
.ep-save-cart { margin-top: 10px; }
.ep-save-cart-open { font-size: 0.88rem; white-space: normal; line-height: 1.4; }
.ep-save-cart-form label { display: block; font-size: 0.82rem; margin-bottom: 6px; color: var(--text-secondary, #a1a1aa); }
.ep-save-cart-row { display: flex; gap: 8px; }
.ep-save-cart-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(227, 20, 28,.35); background: rgba(255,255,255,.05); color: inherit; font: inherit; }
.ep-save-cart-row .btn { flex: 0 0 auto; padding: 10px 16px; }
.ep-save-cart-msg { display: block; margin-top: 6px; font-size: 0.8rem; color: #4ade80; }
/* first-order pop-up: mobile number to keep the discount */
.ep-offer-phone { margin: 0 0 12px; text-align: start; }
.ep-offer-phone label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: #1b4332; }
.ep-offer-phone-row { display: flex; gap: 8px; }
.ep-offer-phone-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #b7d3c3; font: inherit; color: #1f2d27; background: #fff; }
.ep-offer-phone-row .btn { flex: 0 0 auto; padding: 10px 14px; white-space: nowrap; }
.ep-offer-phone-msg { display: block; margin-top: 6px; font-size: 0.8rem; }
.ep-offer-box .ep-offer-cta.btn-secondary { color: #1b4332; border-color: #b7d3c3; }

/* ===================================================================
   PUBLIC COLOR THEME CONTRACT
   The saved visitor choice lives on <html data-theme="light|dark">.
   =================================================================== */
.theme-toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--border-card);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle:hover { background: var(--bg-card-hover); border-color: var(--border-accent); transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0); }
.theme-icon { position: absolute; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.theme-icon-sun { opacity: 1; transform: scale(1) rotate(0); }
.theme-icon-moon { opacity: 0; transform: scale(.65) rotate(-25deg); }
html[data-theme="light"] .theme-icon-sun { opacity: 0; transform: scale(.65) rotate(25deg); }
html[data-theme="light"] .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0); }
.theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html[data-theme="light"] body { background: #fff; color: var(--text-primary); }
html[data-theme="light"] .header.site-header-unified,
html[data-theme="light"] .header.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 0 var(--border-subtle), 0 5px 22px rgba(20, 20, 24, 0.1); }
html[data-theme="light"] .lang-toggle { background: rgba(20, 20, 24, 0.06); }
html[data-theme="light"] .lang-btn.active { color: #fff; }
html[data-theme="light"] .mobile-quick-nav { background: rgba(255, 255, 255, 0.97); border-top-color: var(--border-subtle); }
html[data-theme="light"] .nav-links { background: var(--bg-glass); }

html[data-theme="light"] .site-hero,
html[data-theme="light"] .hero,
html[data-theme="light"] .site-hero-bg,
html[data-theme="light"] .hero-bg,
html[data-theme="light"] .site-hero::before { background-color: #f7f9fc; }
html[data-theme="light"] .site-hero,
html[data-theme="light"] .hero { border-bottom-color: var(--border-subtle); }
html[data-theme="light"] .hero-breadcrumbs,
html[data-theme="light"] .hero-breadcrumb,
html[data-theme="light"] .hub-breadcrumb,
html[data-theme="light"] .category-breadcrumbs { background: rgba(255, 255, 255, 0.72); border-color: var(--border-card); }
html[data-theme="light"] .hero-breadcrumbs a:hover,
html[data-theme="light"] .hero-breadcrumb a:hover,
html[data-theme="light"] .hub-breadcrumb a:hover,
html[data-theme="light"] .category-breadcrumbs a:hover { color: var(--accent-green-dark); }
html[data-theme="light"] .hero-breadcrumbs .sep,
html[data-theme="light"] .hero-breadcrumb .sep,
html[data-theme="light"] .hub-breadcrumb .sep,
html[data-theme="light"] .category-breadcrumbs .sep { color: rgba(22, 22, 25, 0.4); }

html[data-theme="light"] :is(input, textarea, select) { color-scheme: light; }
html[data-theme="light"] :is(.stock-alert-input, .review-input, .track-order-input, .checkout-code-row input, .ep-save-cart-row input) {
  background: #fff;
  color: var(--text-primary);
  border-color: var(--border-card);
}
html[data-theme="light"] :is(.home-search-input-wrapper, .search-input-wrapper) {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--border-accent);
  box-shadow: 0 10px 28px rgba(20, 20, 24, 0.13);
}
html[data-theme="light"] :is(.home-search-input-wrapper, .search-input-wrapper):focus-within { background: #fff; box-shadow: 0 12px 34px rgba(20, 20, 24, 0.16), 0 0 0 3px rgba(196, 16, 26, 0.16); }
html[data-theme="light"] :is(.home-search-input, .search-input) { color: var(--text-primary); }
html[data-theme="light"] :is(.home-search-input, .search-input)::placeholder { color: var(--text-muted); }
html[data-theme="light"] :is(.home-search-autocomplete, .search-autocomplete, .autocomplete-dropdown) { background: #fff !important; border-color: var(--border-accent); box-shadow: 0 20px 45px rgba(20, 20, 24, 0.18); }
html[data-theme="light"] :is(.home-search-item, .search-result-item) { border-bottom-color: var(--border-subtle); }
html[data-theme="light"] :is(.home-search-item-title, .search-result-title) { color: var(--text-primary); }
html[data-theme="light"] :is(.home-search-item-meta, .home-search-tags-label, .home-search-no-results) { color: var(--text-secondary); }
html[data-theme="light"] .home-search-footer-action { background: #f4f4f5; }
html[data-theme="light"] .home-search-tag { background: rgba(255, 255, 255, 0.82); color: var(--text-primary); }

html[data-theme="light"] :is(.product-card, .category-card, .feature-card, .info-card, .knowledge-card, .article-card, .product-detail-card, .cart-drawer, .cart-summary, .checkout-section, .info-content, .policy-content) {
  background-color: var(--bg-card);
  border-color: var(--border-card);
  color: var(--text-primary);
}
html[data-theme="light"] .trust-bar-section { background: #f4f4f5 !important; border-color: var(--border-subtle) !important; }
/* Surfaces with legacy fixed dark colors need both their text and background switched together. */
html[data-theme="light"] :is(.product-tabs, .product-tabs-nav, .custom-select-options, .form-group select option,
  .thankyou-card, .hero-lang-switch, .status-card, .identifiers-box, .identifier-item, .direct-answer-box,
  .governance-block, .monograph-nav-sticky, .hub-filter-bar, .hub-search-input, .knowledge-card-specs,
  .hub-governance-section, .ka-card, .ka-faq details, .briefing-box, .product-payment-trust-box,
  .checkout-payment-options, .payment-method-card, .payment-method-card.active, .store-features-bar,
  .product-card-image, .product-detail-image, .checkout-shipping-clarification) {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .custom-select-option:hover,
html[data-theme="light"] .custom-select-option:focus { background: var(--bg-card-hover); color: var(--text-primary); }
html[data-theme="light"] .custom-select-option.selected,
html[data-theme="light"] .form-group select option:checked { background: var(--accent-blue-dark); color: #fff; }
html[data-theme="light"] :is(.product-description, .product-description .desc-p, .thankyou-title,
  .hub-governance-section h2, .hub-governance-section h3) { color: var(--text-primary); }
html[data-theme="light"] :is(.product-description .desc-intro, .product-description .desc-list li) {
  background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-card); box-shadow: var(--shadow-card);
}
html[data-theme="light"] :is(.product-tab-btn.active, .product-description .desc-heading, .product-description h3,
  .product-description h4:not(.desc-heading)) { color: var(--accent-green-dark); }
html[data-theme="light"] .monograph-title-group h1 {
  background: none; color: var(--text-primary); -webkit-text-fill-color: currentColor;
}
html[data-theme="light"] :is(.status-value, .identifier-val, .identifier-link, .contrast-card h3,
  .qa-question-title, .source-title a, .monograph-nav-link:hover, .scientific-text) { color: var(--text-primary); }
html[data-theme="light"] :is(.product-comparison, .monograph-section, .manufacturer-info, .monograph-links) :is(h2, h3, table, strong),
html[data-theme="light"] details summary { color: var(--text-primary) !important; }
html[data-theme="light"] :is(.payment-trust-title, .payment-method-chip.installment-chip, .payment-method-fee,
  .payment-fee-notes, .product-policy-shipping) { color: var(--accent-green-dark); }
html[data-theme="light"] .checkout-fee-clarification .shipping-clarification-text { color: var(--accent-blue-dark); }
html[data-theme="light"] :is(.warning-text, .warning-title, .status-value.not-approved) { color: #a62535; }
html[data-theme="light"] .trust-bar-section strong { color: var(--text-primary) !important; }
html[data-theme="light"] :is(.autocomplete-item-name, .product-description strong, .product-description .desc-list li strong, .product-tab-btn:hover) { color: var(--text-primary); }
html[data-theme="light"] :is(.autocomplete-item, .product-tab-btn:hover) { background-color: var(--bg-card-hover); }
html[data-theme="light"] :is(.modal-content, .cart-drawer, .cart-panel, .quick-view-modal) { background: #fff; color: var(--text-primary); }
html[data-theme="light"] :is(.footer, footer) { background-color: #eef3f8; border-color: var(--border-subtle); }
html[data-theme="light"] .ep-consent { background: rgba(255, 255, 255, 0.98); border-color: var(--border-accent); color: var(--text-primary); box-shadow: 0 18px 45px rgba(20, 20, 24, 0.18); }
html[data-theme="light"] .ep-consent-title,
html[data-theme="light"] .ep-consent-link { color: var(--accent-green-dark); }
html[data-theme="light"] :is(.ep-consent-text, .ep-consent-tools) { color: var(--text-secondary); }

/* Server-rendered optional sections historically used inline dark surfaces. The theme contract wins over those surfaces. */
html[data-theme="light"] [style*="background: rgba(11, 11, 12"],
html[data-theme="light"] [style*="background:rgba(11, 11, 12"],
html[data-theme="light"] [style*="background: rgba(20, 20, 22"],
html[data-theme="light"] [style*="background:rgba(20, 20, 22"] { background: var(--bg-card) !important; border-color: var(--border-card) !important; color: var(--text-primary); }

@media (max-width: 1050px) {
  .nav { gap: 0.55rem; }
  .theme-toggle { width: 38px; height: 38px; flex-basis: 38px; }
}

@media (max-width: 430px) {
  .lang-btn { padding-inline: 10px; }
  .theme-toggle { width: 36px; height: 36px; flex-basis: 36px; }
}

/* Checkout: blocks hidden by settings (no delivery areas, shipping fee known) */
.form-group[hidden], .checkout-shipping-clarification[hidden], .checkout-total-row[hidden], .total-shipping-note[hidden] { display: none !important; }

/* --- Product options (flavor / size) - lib/product-variants.js --- */
.product-variants { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
.variant-group-label { display: block; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 8px; }
.variant-group-value { color: var(--text-primary); font-weight: 700; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option {
  min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid var(--border-card); background: var(--bg-card); color: var(--text-primary);
  font: inherit; font-size: 0.9rem; font-weight: 600; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.variant-option:hover { border-color: var(--accent-green); }
.variant-option:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.variant-option.is-selected { border-color: var(--accent-green); background: rgba(227, 20, 28, 0.12); }
.variant-option.is-unavailable { opacity: 0.45; text-decoration: line-through; }
.product-detail-price-original { margin-inline-start: 10px; color: var(--text-muted); font-size: 1.05rem; font-weight: 500; }
.cart-item-variant, .summary-item-variant { font-size: 0.8rem; color: var(--text-secondary); }
.store-address { margin: 6px 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.store-address a { color: inherit; text-decoration: none; }
.store-address a:hover { color: var(--accent-green); }
.cta-address { margin-top: 12px; text-align: center; }

/* the wordmark logo already carries the store name: the text next to it is shown only without a logo image */
.logo:has(.logo-img) .logo-text { display: none; }

/* light / dark logo pair (lib/logo-html.js): the dark theme is the default when no theme is set */
.logo-pic-dark { display: none !important; }
html:not([data-theme="light"]) .logo-pic-dark { display: flex !important; }
html:not([data-theme="light"]) .logo-pic-light { display: none !important; }

/* product photos are shot on white: the photo frame is white so the picture blends in (both themes) */
.product-detail-image { background: #ffffff !important; }

/* Home hero as a full banner (Admin: hero image style = banner; lib/page-finalize.js) */
.hero.has-hero-banner { flex-direction: column; min-height: auto; padding-top: var(--site-header-height); }
.hero-banner { position: relative; z-index: 2; width: 100%; max-width: 1920px; margin: 0 auto; }
.hero-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 800; object-fit: cover; }
.hero-banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(180deg, transparent, var(--bg-primary)); pointer-events: none; }
.hero.has-hero-banner .hero-content { padding-top: var(--space-lg); }