/* ============================================================
   LUXORA — New Design System CSS
   Save as: assets/css/luxora-new.css
   Add <link rel="stylesheet" href="assets/css/luxora-new.css">
   AFTER the existing main.css link in header.php
   ============================================================ */

/* ── TOKENS ── */
:root {
  --lx-bg:        #FAFAF8;
  --lx-surface:   #FFFFFF;
  --lx-border:    #E8E5E0;
  --lx-text:      #1A1A1A;
  --lx-muted:     #6B6860;
  --lx-gold:      #C8A97E;
  --lx-gold-dark: #A8894A;
  --lx-dark:      #1A1A1A;
  --lx-white:     #FFFFFF;
  --lx-radius:    4px;
  --lx-radius-lg: 8px;
  --lx-shadow:    0 2px 20px rgba(0,0,0,.07);
  --lx-shadow-lg: 0 8px 48px rgba(0,0,0,.12);
  --lx-font-serif: 'Cormorant Garamond', Georgia, serif;
  --lx-font-sans:  'Inter', system-ui, sans-serif;
  --lx-transition: .28s cubic-bezier(.4,0,.2,1);
}

/* ── RESET EXISTING DARK BG for new pages ── */
body {
  background: var(--lx-bg);
  color: var(--lx-text);
}

/* ── BUTTONS ── */
.lx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--lx-radius);
  font-family: var(--lx-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--lx-transition);
  white-space: nowrap;
}
.lx-btn--dark {
  background: var(--lx-dark);
  color: var(--lx-white);
}
.lx-btn--dark:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.lx-btn--gold {
  background: var(--lx-gold);
  color: var(--lx-dark);
}
.lx-btn--gold:hover {
  background: var(--lx-gold-dark);
  transform: translateY(-1px);
}
.lx-btn--outline-light {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
}
.lx-btn--outline-light:hover {
  background: rgba(255,255,255,.22);
}
.lx-btn--block {
  width: 100%;
  justify-content: center;
}

/* ── LABELS ── */
.lx-label {
  display: block;
  font-family: var(--lx-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lx-muted);
  margin-bottom: 10px;
}
.lx-label--light { color: rgba(255,255,255,.55); }

.lx-link-arrow {
  font-family: var(--lx-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--lx-text);
  text-decoration: none;
  transition: var(--lx-transition);
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--lx-text);
}
.lx-link-arrow:hover { opacity: .6; }

/* ── HERO ── */
.lx-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.lx-hero__bg {
  position: absolute;
  inset: 0;
}
.lx-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 8s ease;
}
.lx-hero:hover .lx-hero__img {
  transform: scale(1.03);
}
.lx-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,8,6,.85) 0%,
    rgba(10,8,6,.4) 50%,
    rgba(10,8,6,.1) 100%
  );
  z-index: 1;
}
.lx-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 60px 72px;
  max-width: 680px;
}
.lx-hero__eyebrow {
  font-family: var(--lx-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin-bottom: 20px;
}
.lx-hero__title {
  font-family: var(--lx-font-serif);
  font-size: clamp(64px, 9vw, 120px);
  font-weight: 300;
  line-height: .92;
  color: #fff;
  margin: 0 0 28px;
  letter-spacing: -1px;
}
.lx-hero__sub {
  font-family: var(--lx-font-sans);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  margin: 0 0 36px;
  max-width: 420px;
  line-height: 1.7;
}
.lx-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.lx-hero__badge {
  position: absolute;
  bottom: 72px;
  right: 60px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .5px;
}
.lx-badge-icon { display: flex; align-items: center; }

/* ── TRUST BAR ── */
.lx-trust {
  background: var(--lx-dark);
  padding: 20px 0;
}
.lx-trust__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.lx-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px;
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
}
.lx-trust__item svg { color: var(--lx-gold); flex-shrink: 0; }
.lx-trust__sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.15);
}

/* ── SECTIONS ── */
.lx-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
}
.lx-section--featured { padding-top: 0; }
.lx-section__head {
  margin-bottom: 48px;
}
.lx-section__head--between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.lx-section__title {
  font-family: var(--lx-font-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  color: var(--lx-text);
  margin: 0;
  line-height: 1.1;
}

/* ── CATEGORY GRID ── */
.lx-cat-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  grid-template-rows: 320px 320px;
  gap: 12px;
}
.lx-cat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--lx-radius-lg);
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.lx-cat-card--large {
  grid-row: 1 / 3;
}
.lx-cat-card--small {
  grid-row: span 1;
}
.lx-cat-card--medium {
  grid-column: span 1;
  grid-row: span 1;
}
.lx-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.lx-cat-card:hover .lx-cat-card__img {
  transform: scale(1.06);
}
.lx-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 60%);
  transition: var(--lx-transition);
}
.lx-cat-card:hover .lx-cat-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%);
}
.lx-cat-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lx-cat-card__name {
  font-family: var(--lx-font-serif);
  font-size: 24px;
  font-weight: 300;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.lx-cat-card--large .lx-cat-card__name {
  font-size: 36px;
}
.lx-cat-card__link {
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lx-gold);
  opacity: 0;
  transform: translateY(6px);
  transition: var(--lx-transition);
}
.lx-cat-card:hover .lx-cat-card__link {
  opacity: 1;
  transform: translateY(0);
}
.lx-cat-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-row: 1 / 3;
}

/* ── PRODUCT GRID ── */
.lx-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.lx-product-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.lx-product-card {
  cursor: pointer;
  position: relative;
}
.lx-product-card__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--lx-radius);
  aspect-ratio: 3/4;
  background: #F0EDE8;
  margin-bottom: 14px;
}
.lx-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.lx-product-card:hover .lx-product-card__img {
  transform: scale(1.05);
}
.lx-quick-add {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: var(--lx-transition);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  color: var(--lx-dark);
}
.lx-product-card:hover .lx-quick-add {
  opacity: 1;
  transform: translateY(0);
}
.lx-quick-add:hover {
  background: var(--lx-dark);
  color: #fff;
}
.lx-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--lx-font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.lx-pill--sale {
  background: #1A1A1A;
  color: #fff;
}
.lx-product-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lx-product-card__cat {
  font-family: var(--lx-font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lx-muted);
}
.lx-product-card__name {
  font-family: var(--lx-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--lx-text);
  margin: 0;
  line-height: 1.4;
}
.lx-product-card__pricing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.lx-product-card__price {
  font-family: var(--lx-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--lx-text);
}
.lx-product-card__compare {
  font-size: 12px;
  color: var(--lx-muted);
  text-decoration: line-through;
}

/* ── MODAL ── */
.lx-modal-wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lx-modal-wrap.open {
  display: flex;
}
.lx-modal {
  background: var(--lx-surface);
  border-radius: var(--lx-radius-lg);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  box-shadow: var(--lx-shadow-lg);
}
.lx-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--lx-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--lx-text);
  transition: var(--lx-transition);
}
.lx-modal__close:hover { background: var(--lx-dark); color: #fff; }
.lx-modal__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--lx-radius-lg) 0 0 var(--lx-radius-lg);
  aspect-ratio: auto;
  min-height: 400px;
}
.lx-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lx-modal__body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.lx-modal__cat {
  font-family: var(--lx-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--lx-muted);
}
.lx-modal__name {
  font-family: var(--lx-font-serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--lx-text);
  margin: 0;
  line-height: 1.2;
}
.lx-modal__pricing {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lx-modal__price {
  font-family: var(--lx-font-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--lx-text);
}
.lx-modal__compare {
  font-size: 16px;
  color: var(--lx-muted);
  text-decoration: line-through;
}
.lx-modal__desc {
  font-family: var(--lx-font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--lx-muted);
  margin: 0;
}
.lx-modal__form { display: flex; flex-direction: column; gap: 16px; }
.lx-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lx-qty-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lx-muted);
}
.lx-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
}
.lx-qty-btn {
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--lx-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--lx-transition);
}
.lx-qty-btn:hover { background: var(--lx-bg); }
.lx-qty-input {
  width: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--lx-border);
  border-right: 1px solid var(--lx-border);
  font-family: var(--lx-font-sans);
  font-size: 14px;
  color: var(--lx-text);
  outline: none;
  background: none;
  padding: 8px 0;
}
.lx-oos {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lx-muted);
  text-align: center;
  padding: 16px 0;
}
.lx-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #25d366;
  border-radius: var(--lx-radius);
  color: #25d366;
  font-family: var(--lx-font-sans);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--lx-transition);
}
.lx-wa-btn:hover { background: rgba(37,211,102,.08); }

/* ── PROMISE SECTION ── */
.lx-promise {
  background: var(--lx-dark);
  padding: 100px 40px;
}
.lx-promise__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.lx-promise__title {
  font-family: var(--lx-font-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: #fff;
  margin: 0 0 20px;
  line-height: 1.1;
}
.lx-promise__sub {
  font-family: var(--lx-font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.55);
  margin: 0 0 36px;
}
.lx-promise__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.lx-stat { display: flex; flex-direction: column; gap: 8px; }
.lx-stat__num {
  font-family: var(--lx-font-serif);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 300;
  color: var(--lx-gold);
  line-height: 1;
}
.lx-stat__label {
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ── NEWSLETTER ── */
.lx-newsletter {
  background: #F0EDE8;
  padding: 100px 40px;
  text-align: center;
}
.lx-newsletter__inner {
  max-width: 520px;
  margin: 0 auto;
}
.lx-newsletter__title {
  font-family: var(--lx-font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  color: var(--lx-text);
  margin: 0 0 32px;
  line-height: 1.2;
}
.lx-newsletter__form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.lx-newsletter__input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  font-family: var(--lx-font-sans);
  font-size: 14px;
  color: var(--lx-text);
  background: var(--lx-surface);
  outline: none;
  transition: var(--lx-transition);
}
.lx-newsletter__input:focus {
  border-color: var(--lx-dark);
}
.lx-newsletter__note {
  font-family: var(--lx-font-sans);
  font-size: 11px;
  color: var(--lx-muted);
  letter-spacing: .5px;
}

/* ── OVERRIDE EXISTING HEADER/NAV for white design ── */
.topnav.glass-nav {
  background: rgba(250,250,248,.92) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lx-border);
}
.topnav .brand { color: var(--lx-text) !important; }
.topnav .nav-link { color: var(--lx-text) !important; }
.topnav .icon-btn { color: var(--lx-text) !important; }
.topnav .lang-btn { color: var(--lx-muted) !important; }
.topnav .lang-btn.active { color: var(--lx-text) !important; }
.topnav .cart-badge { background: var(--lx-dark) !important; }

/* Hero page — make nav transparent */
.lx-hero ~ * .topnav,
body:has(.lx-hero) .topnav.glass-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
body:has(.lx-hero) .topnav .brand { color: #fff !important; }
body:has(.lx-hero) .topnav .nav-link { color: rgba(255,255,255,.8) !important; }
body:has(.lx-hero) .topnav .icon-btn { color: #fff !important; }
body:has(.lx-hero) .topnav .lang-btn { color: rgba(255,255,255,.6) !important; }

/* Footer override */
.footer {
  background: var(--lx-dark) !important;
  border-top: none !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .lx-cat-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 260px 260px;
  }
  .lx-cat-card--large { grid-row: 1; grid-column: 1 / 3; }
  .lx-cat-col { flex-direction: row; grid-row: auto; }
  .lx-cat-col .lx-cat-card--small { flex: 1; }
  .lx-product-grid { grid-template-columns: repeat(3, 1fr); }
  .lx-promise__inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .lx-hero__content { padding: 0 24px 64px; }
  .lx-hero__badge { right: 24px; bottom: 64px; }
  .lx-section { padding: 56px 20px; }
  .lx-cat-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 180px;
  }
  .lx-cat-card--large { grid-column: 1 / 3; }
  .lx-cat-col { flex-direction: row; grid-row: auto; grid-column: 1 / 3; }
  .lx-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .lx-trust__inner { gap: 0; flex-direction: column; }
  .lx-trust__sep { width: 40px; height: 1px; }
  .lx-promise__stats { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .lx-modal { grid-template-columns: 1fr; }
  .lx-modal__img-wrap {
    border-radius: var(--lx-radius-lg) var(--lx-radius-lg) 0 0;
    min-height: 280px;
  }
  .lx-newsletter__form { flex-direction: column; }
  .lx-hero__actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .lx-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lx-hero__title { font-size: 52px; }
  .lx-cat-col { flex-direction: column; }
}

/* ── RTL SUPPORT ── */
[dir="rtl"] .lx-hero__content { padding: 0 60px 72px; }
[dir="rtl"] .lx-hero__badge { left: 60px; right: auto; }
[dir="rtl"] .lx-modal__img-wrap { border-radius: 0 var(--lx-radius-lg) var(--lx-radius-lg) 0; }
[dir="rtl"] .lx-modal__close { left: 16px; right: auto; }
[dir="rtl"] .lx-quick-add { left: 12px; right: auto; }

/* ============================================================
   PRODUCTS PAGE + NAV FIXES
   ============================================================ */

/* Nav transparent on hero — JS handles scroll */
body:has(.lx-hero) .topnav.glass-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}
body:has(.lx-hero) .topnav .brand,
body:has(.lx-hero) .topnav .icon-btn { color: #fff !important; }
body:has(.lx-hero) .topnav .nav-link { color: rgba(255,255,255,.85) !important; }

/* Products header */
.lx-products-header {
  background: var(--lx-bg);
  padding: 100px 40px 32px;
  border-bottom: 1px solid var(--lx-border);
}
.lx-products-header__inner {
  max-width: 1280px;
  margin: 0 auto 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.lx-products-header__title {
  font-family: var(--lx-font-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  color: var(--lx-text);
  margin: 0;
  line-height: 1.1;
  text-transform: capitalize;
}
.lx-products-header__count {
  font-family: var(--lx-font-sans);
  font-size: 12px;
  color: var(--lx-muted);
  margin: 6px 0 0;
  letter-spacing: .5px;
}
.lx-sort-select {
  font-family: var(--lx-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--lx-text);
  background: var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  padding: 10px 16px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 140px;
}

/* Category pills */
.lx-cat-pills {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lx-cat-pill {
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lx-muted);
  background: var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: 999px;
  padding: 8px 18px;
  transition: var(--lx-transition);
  white-space: nowrap;
}
.lx-cat-pill:hover {
  border-color: var(--lx-text);
  color: var(--lx-text);
}
.lx-cat-pill--active {
  background: var(--lx-dark);
  border-color: var(--lx-dark);
  color: #fff;
}

/* Products grid wrapper */
.lx-products-grid-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px;
}
.lx-product-grid--products {
  grid-template-columns: repeat(4, 1fr);
}

/* Out of stock pill */
.lx-pill--oos {
  background: rgba(255,255,255,.9);
  color: var(--lx-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  position: absolute;
  top: 12px;
  left: 12px;
}

/* Empty state */
.lx-empty {
  text-align: center;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lx-empty__title {
  font-family: var(--lx-font-serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--lx-text);
}
.lx-empty__sub {
  font-family: var(--lx-font-sans);
  font-size: 13px;
  color: var(--lx-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .lx-products-header { padding: 80px 20px 24px; }
  .lx-products-header__inner { flex-direction: column; align-items: flex-start; }
  .lx-products-grid-wrap { padding: 32px 20px; }
  .lx-product-grid--products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .lx-cat-pills { padding: 0; }
}

/* ── CART PAGE ── */
.lx-page-header { padding: 100px 40px 40px; background: var(--lx-bg); border-bottom: 1px solid var(--lx-border); }
.lx-page-header__inner { max-width: 1280px; margin: 0 auto; }
.lx-page-header__title { font-family: var(--lx-font-serif); font-size: clamp(32px,5vw,56px); font-weight: 300; color: var(--lx-text); margin: 0; }
.lx-cart-layout { max-width: 1280px; margin: 0 auto; padding: 60px 40px; display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: start; }
.lx-cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--lx-border); align-items: start; }
.lx-cart-item__img { width: 100px; height: 130px; object-fit: cover; border-radius: var(--lx-radius); background: #F0EDE8; }
.lx-cart-item__cat { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--lx-muted); }
.lx-cart-item__name { font-family: var(--lx-font-sans); font-size: 14px; font-weight: 400; color: var(--lx-text); margin: 6px 0 4px; }
.lx-cart-item__price { font-size: 13px; color: var(--lx-muted); margin: 0 0 12px; }
.lx-cart-item__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lx-cart-item__remove { font-size: 11px; color: var(--lx-muted); text-decoration: underline; cursor: pointer; }
.lx-cart-item__remove:hover { color: var(--lx-text); }
.lx-cart-item__total { font-family: var(--lx-font-sans); font-size: 16px; font-weight: 600; color: var(--lx-text); white-space: nowrap; }
.lx-coupon-wrap { padding: 24px 0; }
.lx-coupon-form { display: flex; gap: 8px; margin-top: 12px; }
.lx-coupon-input { flex: 1; padding: 12px 16px; border: 1px solid var(--lx-border); border-radius: var(--lx-radius); font-family: var(--lx-font-sans); font-size: 13px; outline: none; background: var(--lx-surface); color: var(--lx-text); }
.lx-coupon-input:focus { border-color: var(--lx-dark); }
.lx-coupon-err { font-size: 12px; color: #e53e3e; }
.lx-coupon-ok { font-size: 12px; color: #38a169; }
.lx-btn--outline-dark { background: none; border: 1px solid var(--lx-dark); color: var(--lx-dark); }
.lx-btn--outline-dark:hover { background: var(--lx-dark); color: #fff; }
.lx-cart-summary { background: var(--lx-surface); border: 1px solid var(--lx-border); border-radius: var(--lx-radius-lg); padding: 32px; position: sticky; top: 100px; }
.lx-cart-summary__title { font-family: var(--lx-font-serif); font-size: 24px; font-weight: 300; color: var(--lx-text); margin: 0 0 24px; }
.lx-summary-rows { border-top: 1px solid var(--lx-border); padding-top: 16px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px; }
.lx-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--lx-muted); }
.lx-summary-row--disc { color: #38a169; }
.lx-summary-row--total { font-size: 16px; font-weight: 600; color: var(--lx-text); padding-top: 12px; border-top: 1px solid var(--lx-border); }
.lx-checkout-form { display: flex; flex-direction: column; gap: 14px; }
.lx-form-group { display: flex; flex-direction: column; gap: 6px; }
.lx-form-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lx-muted); }
.lx-form-input { padding: 12px 16px; border: 1px solid var(--lx-border); border-radius: var(--lx-radius); font-family: var(--lx-font-sans); font-size: 14px; color: var(--lx-text); background: var(--lx-bg); outline: none; transition: var(--lx-transition); }
.lx-form-input:focus { border-color: var(--lx-dark); background: var(--lx-surface); }
.lx-secure-note { text-align: center; font-size: 11px; color: var(--lx-muted); margin-top: 12px; letter-spacing: .5px; }
@media (max-width: 768px) {
  .lx-cart-layout { grid-template-columns: 1fr; padding: 32px 20px; gap: 32px; }
  .lx-cart-summary { position: static; }
  .lx-page-header { padding: 80px 20px 28px; }
}

/* ── ACCOUNT PAGE ── */
.lx-account-wrap { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 40px 20px; }
.lx-account-card { background: var(--lx-surface); border: 1px solid var(--lx-border); border-radius: var(--lx-radius-lg); padding: 48px 40px; max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: var(--lx-shadow); }
.lx-account-title { font-family: var(--lx-font-serif); font-size: 32px; font-weight: 300; color: var(--lx-text); margin: 0; }
.lx-account-sub { font-family: var(--lx-font-sans); font-size: 13px; color: var(--lx-muted); margin: 0; }
.lx-account-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }

/* ── NAV TRANSPARENT ON HERO ── */
body:has(.lx-hero) .topnav.glass-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: none !important;
}
body:has(.lx-hero) .topnav .brand { color: #fff !important; }
body:has(.lx-hero) .topnav .nav-link { color: rgba(255,255,255,.85) !important; }
body:has(.lx-hero) .topnav .icon-btn { color: #fff !important; }
body:has(.lx-hero) .topnav .lang-btn { color: rgba(255,255,255,.6) !important; }

/* ── PRICE FILTER ── */
.lx-products-header__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lx-price-filter { display: flex; align-items: center; gap: 6px; }
.lx-price-input { width: 72px; padding: 10px 10px; border: 1px solid var(--lx-border); border-radius: var(--lx-radius); font-family: var(--lx-font-sans); font-size: 12px; color: var(--lx-text); background: var(--lx-surface); outline: none; }
.lx-price-input:focus { border-color: var(--lx-dark); }

@media (max-width: 768px) {
  .lx-products-header__controls { flex-direction: column; align-items: flex-start; }
  .lx-promo-bar__inner { flex-direction: column; gap: 8px; }
  .lx-promo-sep { display: none; }
  .lx-slider-prev,.lx-slider-next { display: none; }
}

/* ══════════════════════════════════════════
   HERO SLIDER — FIXED
══════════════════════════════════════════ */
.lx-hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 920px;
  overflow: hidden;
}
.lx-hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.lx-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
  display: flex;
  align-items: flex-end;
  z-index: 0;
}
.lx-hero-slide.active {
  opacity: 1;
  z-index: 2;
}
.lx-hero-slide .lx-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
.lx-hero-slide .lx-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,4,2,.88) 0%, rgba(5,4,2,.45) 50%, rgba(5,4,2,.08) 100%);
  z-index: 1;
}
.lx-hero-slide .lx-hero__content {
  position: relative;
  z-index: 3;
  padding: 0 32px 80px;
  max-width: 640px;
  width: 100%;
}
.lx-hero-slide .lx-hero__eyebrow {
  font-family: var(--lx-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--lx-gold);
  margin-bottom: 16px;
  display: block;
}
.lx-hero-slide .lx-hero__title {
  font-family: var(--lx-font-serif);
  font-size: clamp(52px, 12vw, 110px);
  font-weight: 300;
  line-height: .92;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -1px;
}
.lx-hero-slide .lx-hero__sub {
  font-family: var(--lx-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  margin: 0 0 32px;
  line-height: 1.7;
  max-width: 380px;
}
.lx-hero-slide .lx-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lx-hero-slide .lx-hero__badge {
  position: absolute;
  bottom: 80px;
  right: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .5px;
}

/* Slider controls */
.lx-slider-prev,
.lx-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.lx-slider-prev { left: 20px; }
.lx-slider-next { right: 20px; }
.lx-slider-prev:hover,
.lx-slider-next:hover { background: rgba(255,255,255,.28); }

.lx-slider-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}
.lx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  transition: all .25s;
  padding: 0;
  flex-shrink: 0;
}
.lx-dot.active {
  background: #fff;
  width: 26px;
  border-radius: 4px;
}

/* NAV transparent on hero slider */
body:has(.lx-hero-slider) .topnav.glass-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
body:has(.lx-hero-slider) .topnav .brand { color: #fff !important; }
body:has(.lx-hero-slider) .topnav .nav-link { color: rgba(255,255,255,.82) !important; }
body:has(.lx-hero-slider) .topnav .icon-btn { color: #fff !important; }
body:has(.lx-hero-slider) .topnav .lang-btn { color: rgba(255,255,255,.55) !important; }

/* ══════════════════════════════════════════
   PROMO BAR — FIXED
══════════════════════════════════════════ */
.lx-promo-bar {
  background: #1A1A1A;
  padding: 0;
  overflow: hidden;
}
.lx-promo-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 100%;
  flex-wrap: nowrap;
}
.lx-promo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--lx-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .8px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.08);
  flex: 1;
  justify-content: center;
}
.lx-promo-item:last-child { border-right: none; }
.lx-promo-item svg { color: var(--lx-gold); flex-shrink: 0; }
.lx-promo-sep { display: none; }

/* Bottom nav — fix Search text */
.bnav-item span {
  font-size: 9px !important;
  letter-spacing: .3px;
  line-height: 1.2;
}

/* Price filter */
.lx-products-header__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lx-price-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lx-price-input {
  width: 68px;
  padding: 9px 10px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  font-family: var(--lx-font-sans);
  font-size: 12px;
  color: var(--lx-text);
  background: var(--lx-surface);
  outline: none;
}
.lx-price-input:focus { border-color: var(--lx-dark); }

/* Responsive */
@media (max-width: 768px) {
  .lx-hero-slide .lx-hero__content { padding: 0 20px 72px; }
  .lx-hero-slide .lx-hero__badge { right: 20px; bottom: 72px; }
  .lx-slider-prev, .lx-slider-next { display: none; }
  .lx-promo-bar__inner { flex-wrap: wrap; }
  .lx-promo-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 10px; padding: 10px 12px; }
  .lx-products-header__controls { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .lx-promo-item { flex: 0 0 100%; }
}

/* ── RTL FIXES ── */
[dir="rtl"] .topnav .nav-inner {
  flex-direction: row-reverse;
}
[dir="rtl"] .lx-hero-slide .lx-hero__content {
  padding: 0 28px 80px;
  text-align: right;
}
[dir="rtl"] .lx-hero-slide .lx-hero__actions {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
[dir="rtl"] .lx-hero-slide .lx-hero__badge {
  left: 24px;
  right: auto;
}
[dir="rtl"] .lx-hero-slide h1 {
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] .lx-hero-slide p {
  line-height: 1.8 !important;
}
[dir="rtl"] .lx-section__head--between {
  flex-direction: row-reverse;
}
[dir="rtl"] .lx-cat-card__body {
  text-align: right;
}
[dir="rtl"] .lx-product-card__info {
  text-align: right;
}
[dir="rtl"] .lx-modal__body {
  text-align: right;
}
[dir="rtl"] .lx-promise__inner {
  direction: rtl;
}
[dir="rtl"] .lx-cart-layout {
  direction: rtl;
}
[dir="rtl"] .lx-checkout-form {
  text-align: right;
}
[dir="rtl"] .lx-form-label {
  text-align: right;
}
[dir="rtl"] .lx-summary-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .bottom-nav {
  direction: rtl;
}
[dir="rtl"] .lx-products-header__inner {
  flex-direction: row-reverse;
}
[dir="rtl"] .lx-cat-pills {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
[dir="rtl"] .lx-products-header__controls {
  flex-direction: row-reverse;
}
[dir="rtl"] .lx-section__head {
  text-align: right;
}
[dir="rtl"] .lx-newsletter__form {
  flex-direction: row-reverse;
}
/* Arabic font size boost */
[dir="rtl"] .lx-hero-slide h1 {
  font-size: clamp(44px, 10vw, 90px) !important;
}
[dir="rtl"] .lx-product-card__name,
[dir="rtl"] .lx-modal__name,
[dir="rtl"] .lx-section__title,
[dir="rtl"] .lx-promise__title {
  font-family: 'Cairo', sans-serif !important;
}

/* ══════════════════════════════
   ARABIC FONT COMPREHENSIVE FIX
══════════════════════════════ */

/* Force Arabic font everywhere */
[dir="rtl"] * {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* Hero title Arabic - bigger and clear */
[dir="rtl"] #heroSlider h1 {
  font-family: 'Cairo', sans-serif !important;
  font-size: clamp(40px, 10vw, 80px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  text-align: right !important;
}

/* Hero sub Arabic */
[dir="rtl"] #heroSlider p {
  font-family: 'Cairo', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  text-align: right !important;
}

/* Hero eyebrow Arabic */
[dir="rtl"] #heroSlider div[style*="letter-spacing:4px"] {
  font-family: 'Cairo', sans-serif !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Hero content RTL alignment */
[dir="rtl"] #heroSlider > div > div[style*="position:absolute;bottom:0"] {
  text-align: right !important;
  direction: rtl !important;
}

/* Buttons RTL */
[dir="rtl"] #heroSlider a {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Section titles Arabic */
[dir="rtl"] .lx-section__title,
[dir="rtl"] .lx-promise__title,
[dir="rtl"] .lx-newsletter__title,
[dir="rtl"] .lx-page-header__title,
[dir="rtl"] .lx-cart-summary__title,
[dir="rtl"] .lx-account-title {
  font-family: 'Cairo', sans-serif !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

/* Product names Arabic */
[dir="rtl"] .lx-product-card__name,
[dir="rtl"] .lx-modal__name,
[dir="rtl"] .lx-cat-card__name {
  font-family: 'Cairo', sans-serif !important;
  line-height: 1.5 !important;
}

/* Labels Arabic */
[dir="rtl"] .lx-label,
[dir="rtl"] .lx-product-card__cat,
[dir="rtl"] .lx-modal__cat {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Slider arrow - fix for RTL (right arrow = go back) */
[dir="rtl"] #heroSlider button[onclick="slideMove(-1)"] {
  right: auto !important;
  left: 16px !important;
}
[dir="rtl"] #heroSlider button[onclick="slideMove(1)"] {
  left: auto !important;
  right: 16px !important;
}

/* Remove gray arrow tab on side */
.lx-slider-tab { display: none !important; }

/* ══════════════════════════════
   CAIRO FONT — ARABIC COMPLETE FIX
══════════════════════════════ */
[dir="rtl"] * {
  font-family: 'Cairo', sans-serif !important;
  line-height: 1.7 !important;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] #heroSlider h1 {
  font-family: 'Cairo', sans-serif !important;
  font-size: clamp(36px, 9vw, 72px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] #heroSlider p {
  font-family: 'Cairo', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
}
[dir="rtl"] .lx-section__title,
[dir="rtl"] .lx-promise__title,
[dir="rtl"] .lx-newsletter__title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] .lx-product-card__name {
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
[dir="rtl"] .lx-btn {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
[dir="rtl"] .lx-label,
[dir="rtl"] .lx-product-card__cat,
[dir="rtl"] .lx-cat-pill,
[dir="rtl"] .lx-trust__item {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
}
/* Stats numbers stay serif/latin */
[dir="rtl"] .lx-stat__num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
}
