/* =============================================================
   MARAME BEAUTY — Main Stylesheet
   Premium Arabic RTL WooCommerce Theme
   Version: 1.0.0
   ============================================================= */

/* === 1. DESIGN TOKENS (CSS Custom Properties) === */
:root {
  --gold:        #C8A96E;
  --gold-light:  #E8D5A3;
  --gold-dark:   #A07840;
  --gold-50:     #FAF5EA;
  --cream:       #FBF8F2;
  --cream-dark:  #F2EBE0;
  --charcoal:    #1C1410;
  --mbrown:      #3D2B1F;
  --star:        #F4C430;
  --white:       #FFFFFF;
  --green-600:   #16a34a;
  --orange-600:  #ea580c;
  --red-600:     #dc2626;

  --font-cairo:   'Cairo', sans-serif;
  --font-tajawal: 'Tajawal', sans-serif;

  --max-w:         80rem;
  --section-py:    3rem;
  --section-py-lg: 5rem;
  --section-px:    1rem;
  --section-px-sm: 1.5rem;
  --section-px-lg: 2rem;

  --shadow-gold:    0 4px 6px -1px rgba(200,169,110,.30), 0 2px 4px -2px rgba(200,169,110,.20);
  --shadow-gold-lg: 0 10px 25px -5px rgba(200,169,110,.40), 0 4px 10px -5px rgba(200,169,110,.30);
  --shadow-card:    0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-xl:      0 20px 40px -10px rgba(0,0,0,.20);

  --radius-sm:   .5rem;
  --radius-md:   .75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  --ease:       cubic-bezier(.4,0,.2,1);
  --trans:      200ms var(--ease);
  --trans-slow: 300ms var(--ease);
}

/* === 2. BASE RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; direction: rtl; font-size: 16px; }
body {
  direction: rtl;
  text-align: right;
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-cairo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-cairo); font-weight: 700; }

/* === 3. LAYOUT UTILITIES === */
.section-container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--section-px);
}
@media (min-width:640px)  { .section-container { padding-inline: var(--section-px-sm); } }
@media (min-width:1024px) { .section-container { padding-inline: var(--section-px-lg); } }

.section-padding { padding-block: var(--section-py); }
@media (min-width:1024px) { .section-padding { padding-block: var(--section-py-lg); } }

/* responsive visibility (Tailwind sm = 640px) */
.sm-only { display:block; }
.sm-hidden { display:none; }
.hidden-xs { display:none; }
@media (min-width:640px) {
  .sm-only { display:none !important; }
  .sm-hidden { display:block; }
  .hidden-xs { display:inline; }
}
.home-trust-grid.sm-hidden { display:none; }
@media (min-width:640px) { .home-trust-grid.sm-hidden { display:grid; } }

/* LTR overrides for numbers & prices */
.price, .count, .number { direction: ltr; display: inline-block; }
.star-rating { direction: ltr; display: inline-flex; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* === 4. TYPOGRAPHY CLASSES === */
.heading-display  { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); line-height:1.2; }
.heading-section  { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); }
.text-body        { font-family:var(--font-tajawal); color:var(--mbrown); line-height:1.75; }
.text-gold-accent { font-family:var(--font-cairo); font-weight:600; color:var(--gold); }
.badge-pill {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .75rem; border-radius:var(--radius-full);
  font-size:.875rem; font-family:var(--font-cairo); font-weight:600;
  border:1px solid var(--gold); background-color:var(--cream); color:var(--charcoal);
}

/* === 5. BUTTON SYSTEM === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; border-radius: var(--radius-md);
  font-family: var(--font-cairo); font-weight: 700;
  cursor: pointer; border: 2px solid transparent;
  transition: all var(--trans); text-decoration: none;
  white-space: nowrap; line-height: 1.25;
}
.btn:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
/* Sizes */
.btn-sm  { padding: .375rem .875rem; font-size: .875rem; }
.btn-md  { padding: .5rem 1.25rem;   font-size: .9375rem; }
.btn-lg  { padding: .75rem 1.75rem;  font-size: 1rem; border-radius: var(--radius-lg); }
.btn-xl  { padding: .9375rem 2rem;   font-size: 1.125rem; border-radius: var(--radius-lg); width: 100%; }
/* Variants */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  color: #fff; box-shadow: var(--shadow-gold);
  animation: pulse-gold 2.4s ease-in-out infinite;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--mbrown) 100%);
  box-shadow: var(--shadow-gold-lg); transform: translateY(-1px);
  animation: none;
}
.btn-secondary {
  background: var(--white); color: var(--charcoal);
  border-color: var(--cream-dark);
}
.btn-secondary:hover { background:var(--gold-50); border-color:var(--gold); color:var(--gold-dark); }
.btn-ghost { background:transparent; color:var(--mbrown); }
.btn-ghost:hover { background:rgba(200,169,110,.06); color:var(--gold); }
.btn-outline { background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-outline:hover { background:var(--gold); color:#fff; }
.btn-danger { background:#fef2f2; color:var(--red-600); border-color:#fecaca; }
/* Loading state */
.btn-loading { position:relative; pointer-events:none; gap:0; }
.btn-loading::after {
  content:''; width:1.1em; height:1.1em;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite;
  flex-shrink:0;
}

/* === 6. BADGES === */
.badge {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .75rem; border-radius:var(--radius-full);
  font-size:.8125rem; font-family:var(--font-cairo); font-weight:600;
}
.badge-gold  { background:rgba(200,169,110,.10); border:1px solid rgba(200,169,110,.30); color:var(--gold-dark); }
.badge-red   { background:#fef2f2; border:1px solid #fecaca; color:var(--red-600); }
.badge-green { background:#f0fdf4; border:1px solid #bbf7d0; color:var(--green-600); }

/* === 7. ANNOUNCEMENT BAR === */
.announcement-bar {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  padding:.5rem 0; overflow:hidden; direction:ltr; min-height:2.5rem;
}
.announcement-track {
  display:flex; width:max-content;
  animation: scroll-x-third 28s linear infinite;
  will-change: transform;
}
.announcement-track-items { display:flex; }
.announcement-item {
  display:inline-flex; flex-shrink:0; align-items:center; gap:.5rem;
  white-space:nowrap; color:#fff; font-family:var(--font-cairo);
  font-weight:600; font-size:.875rem; padding-inline:1.5rem .5rem;
}
.announcement-sep { color:rgba(255,255,255,.4); margin-inline-start:1rem; }
.announcement-item svg { color:rgba(255,255,255,.95); }
.announcement-bar--static {
  direction: rtl; overflow: visible;
}
.announcement-bar__static {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 2rem; max-width: var(--container-max, 80rem); margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .announcement-bar__static { justify-content: space-evenly; gap: 1rem 2.5rem; }
}

/* === 8. HEADER === */
.site-header {
  position:sticky; top:0; z-index:50;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow 200ms ease;
}
.site-header.scrolled { box-shadow:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06); }
.header-inner {
  max-width:var(--max-w); margin-inline:auto; padding-inline:var(--section-px);
  display:flex; align-items:center; justify-content:space-between;
  height:4rem; /* h-16 = 64px */
}
@media (min-width:640px)  { .header-inner { padding-inline:var(--section-px-sm); } }
@media (min-width:1024px) { .header-inner { padding-inline:var(--section-px-lg); height:4.5rem; /* lg:h-18 = 72px */ } }

.logo-wrap { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.logo-text  { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; gap:.15rem; }
.logo-text-ar { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.125rem; transition:color var(--trans); white-space:nowrap; }
@media (min-width:1024px) { .logo-text-ar { font-size:1.25rem; } }
.logo-text-en { font-family:var(--font-cairo); color:var(--gold); font-size:.6875rem; letter-spacing:.04em; white-space:nowrap; }
.logo-wrap:hover .logo-text-ar { color:var(--gold); }

/* BrandMark — React BrandMark.tsx */
.brand-mark {
  position:relative; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  box-shadow:var(--shadow-gold);
}
.brand-mark-shine {
  pointer-events:none; position:absolute; inset:0;
  background:linear-gradient(to bottom right, rgba(255,255,255,.45), rgba(255,255,255,.10), transparent);
}
.brand-mark-ring {
  pointer-events:none; position:absolute; inset:2px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
}
.brand-mark-letter {
  position:relative; color:#fff; font-family:var(--font-cairo); font-weight:800;
  line-height:1; user-select:none;
}
.brand-mark--xs { width:1.75rem; height:1.75rem; }
.brand-mark--xs .brand-mark-letter { font-size:.875rem; }
.brand-mark--sm { width:2rem; height:2rem; }
.brand-mark--sm .brand-mark-letter { font-size:.875rem; }
@media (min-width:640px) {
  .brand-mark--sm { width:2.5rem; height:2.5rem; }
  .brand-mark--sm .brand-mark-letter { font-size:1.125rem; }
}
.brand-mark--md { width:2.5rem; height:2.5rem; }
.brand-mark--md .brand-mark-letter { font-size:1.125rem; }
@media (min-width:1024px) {
  .brand-mark--md { width:2.75rem; height:2.75rem; }
  .brand-mark--md .brand-mark-letter { font-size:1.25rem; }
}
.brand-mark--lg { width:3.5rem; height:3.5rem; }
.brand-mark--lg .brand-mark-letter { font-size:1.5rem; }
.brand-mark--xl { width:4rem; height:4rem; }
.brand-mark--xl .brand-mark-letter { font-size:1.875rem; }

/* CartIcon — React CartIcon.tsx */
.cart-icon-svg { overflow:visible; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.cart-icon-orbit { opacity:0; transform:scale(.88); transition:opacity .35s ease, transform .35s ease; }
.cart-icon-sparkles { opacity:.35; transform:scale(.85); transform-origin:12px 13px; transition:opacity .22s ease, transform .22s ease; }
.cart-btn:hover .cart-icon-svg--animated { transform:translateY(-2px) scale(1.08); }
.cart-btn:hover .cart-icon-orbit { opacity:.5; transform:scale(1) rotate(24deg); }
.cart-icon-handles { transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.cart-btn:hover .cart-icon-handles { transform:translateY(-.6px); }
.cart-btn:hover .cart-icon-sparkles { opacity:1; transform:scale(1.1); }

/* MenuToggleIcon — React MenuToggleIcon.tsx */
.menu-toggle-svg { overflow:visible; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.menu-toggle-orbit { opacity:0; transition:opacity .3s ease, transform .3s ease; }
.mobile-menu-btn:hover .menu-toggle-orbit { opacity:.4; transform:rotate(20deg); }
.mobile-menu-btn:hover .menu-toggle-svg--animated { transform:scale(1.06); }
.menu-toggle-dot { transition:opacity .2s ease, transform .2s ease; transform-origin:12px 12px; }
.menu-line { transition:transform .26s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.mobile-menu-btn.is-open .menu-toggle-dot { opacity:0; transform:scale(0); }
.mobile-menu-btn.is-open .menu-line-1 { transform:translateY(6px) rotate(45deg); }
.mobile-menu-btn.is-open .menu-line-2 { opacity:0; transform:scaleX(.4); }
.mobile-menu-btn.is-open .menu-line-3 { transform:translateY(-6px) rotate(-45deg); }

.main-nav { display:none; align-items:center; gap:2rem; }
@media (min-width:768px) { .main-nav { display:flex; } }
.nav-link {
  font-family:var(--font-cairo); font-weight:600;
  color:#78614A; /* matches React --mbrown / text-amber-900 */
  font-size:.9375rem; /* 15px */
  text-decoration:none;
  transition:color 200ms ease;
  white-space:nowrap;
}
.nav-link:hover, .nav-link.active { color:var(--gold); }

.cart-btn {
  position:relative; padding:.5rem; border-radius:var(--radius-full);
  color:var(--charcoal); transition:background-color var(--trans); line-height:0;
}
.cart-btn:hover { background:rgba(200,169,110,.06); }
.cart-count-badge {
  position:absolute; top:-.125rem; inset-inline-end:-.125rem;
  min-width:1.25rem; height:1.25rem; padding:0 .25rem;
  background:linear-gradient(135deg, var(--gold-dark), var(--gold));
  color:#fff; font-size:.75rem; border-radius:var(--radius-full);
  display:none; align-items:center; justify-content:center;
  font-family:var(--font-cairo); font-weight:700;
  box-shadow:var(--shadow-gold); outline:2px solid var(--white);
  direction:ltr;
}
.cart-count-badge.visible { display:flex; }

.mobile-menu-btn {
  display:flex; padding:.5rem; border-radius:var(--radius-full);
  color:var(--charcoal); transition:background-color var(--trans); line-height:0;
}
.mobile-menu-btn:hover { background:rgba(200,169,110,.06); }
@media (min-width:768px) { .mobile-menu-btn { display:none; } }

/* Desktop: logo right, nav center, cart left (RTL) */
@media (min-width:768px) {
  .cart-btn        { order:3; }
  .main-nav        { order:2; }
  .logo-wrap       { order:1; }
}

.mobile-nav { display:none; background:var(--white); border-top:1px solid var(--cream-dark); padding:1rem; box-shadow:0 8px 24px rgba(0,0,0,.10); }
.mobile-nav.open { display:block; }
.mobile-nav-link {
  display:block; font-family:var(--font-cairo); font-weight:600; color:var(--mbrown);
  padding:.75rem 0; border-bottom:1px solid var(--cream-dark); font-size:1rem;
  transition:color var(--trans);
}
.mobile-nav-link:last-child { border-bottom:none; }
.mobile-nav-link:hover, .mobile-nav-link.active { color:var(--gold); }

/* === 9. FOOTER === */
.site-footer { background:var(--charcoal); color:var(--white); }
.footer-inner {
  max-width:var(--max-w); margin-inline:auto;
  padding:2.5rem 1rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;
}
@media (min-width:640px)  { .footer-inner { padding:2.5rem 1.5rem; gap:1.5rem; } }
@media (min-width:1024px) { .footer-inner { padding:4rem 2rem; gap:3rem; } }

.footer-brand-head { display:flex; align-items:center; gap:.375rem; margin-bottom:.5rem; min-width:0; }
@media (min-width:640px) { .footer-brand-head { gap:.5rem; margin-bottom:1rem; } }
.footer-brand-text { min-width:0; }

.footer-brand-name { font-family:var(--font-cairo); font-weight:800; color:#fff; font-size:.75rem; line-height:1.25; }
@media (min-width:640px) { .footer-brand-name { font-size:1.125rem; } }
.footer-brand-en { color:var(--gold); font-size:.625rem; }
@media (min-width:640px) { .footer-brand-en { font-size:.75rem; } }
.footer-tagline { color:var(--gold); font-family:var(--font-cairo); font-weight:600; font-size:.6875rem; display:none; }
@media (min-width:640px) { .footer-tagline { display:block; font-size:1rem; margin-block:.75rem; } }
.footer-desc { color:rgba(255,255,255,.7); font-family:var(--font-tajawal); font-size:.875rem; line-height:1.6; display:none; margin-bottom:1rem; }
@media (min-width:1024px) { .footer-desc { display:block; } }

.footer-social { display:flex; align-items:center; gap:.5rem; }
@media (min-width:640px) { .footer-social { gap:.75rem; } }
.footer-social-link {
  width:1.75rem; height:1.75rem; background:rgba(255,255,255,.1); border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center; transition:background-color var(--trans); color:#fff;
}
.footer-social-link:hover { background:var(--gold); }
@media (min-width:640px) { .footer-social-link { width:2rem; height:2rem; } }

.footer-col-title { font-family:var(--font-cairo); font-weight:700; color:#fff; font-size:.75rem; margin-bottom:.5rem; }
@media (min-width:640px) { .footer-col-title { font-size:.875rem; margin-bottom:.75rem; } }
@media (min-width:1024px) { .footer-col-title { font-size:1rem; margin-bottom:1rem; } }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.375rem; }
@media (min-width:640px) { .footer-links li { margin-bottom:.5rem; } }
.footer-link { color:rgba(255,255,255,.7); font-family:var(--font-tajawal); font-size:.6875rem; display:block; transition:color var(--trans); line-height:1.4; }
.footer-link:hover { color:var(--gold); }
@media (min-width:640px) { .footer-link { font-size:.75rem; } }
@media (min-width:1024px) { .footer-link { font-size:.875rem; } }
.footer-hours { display:none; }
@media (min-width:1024px) {
  .footer-hours { display:block; margin-top:1.5rem; }
  .footer-hours-title { color:var(--gold); font-family:var(--font-cairo); font-weight:600; font-size:.875rem; margin-bottom:.25rem; }
  .footer-hours p { color:rgba(255,255,255,.7); font-family:var(--font-tajawal); font-size:.875rem; line-height:1.6; }
}
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.5rem; text-align:center; }
@media (min-width:1024px) { .footer-bottom { margin-top:2.5rem; } }
.footer-copy { color:rgba(255,255,255,.5); font-family:var(--font-tajawal); font-size:.875rem; }

/* === 10. SECTION COMPONENTS === */
.section-header { text-align:center; margin-bottom:2rem; }
@media (min-width:1024px) { .section-header { margin-bottom:3rem; } }
.section-label {
  display:inline-flex; align-items:center; gap:.375rem;
  background:rgba(200,169,110,.10); border:1px solid rgba(200,169,110,.30);
  color:var(--gold-dark); padding:.25rem 1rem; border-radius:var(--radius-full);
  font-family:var(--font-cairo); font-weight:600; font-size:.875rem; margin-bottom:.75rem;
}
.section-title { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.875rem; line-height:1.25; margin-bottom:.75rem; }
@media (min-width:1024px) { .section-title { font-size:2.5rem; } }
.section-subtitle { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1.0625rem; max-width:40rem; margin-inline:auto; line-height:1.7; }

/* === 11. HOMEPAGE — HERO === */
.hero-section { padding-block:2.5rem; background:var(--cream); overflow:hidden; }
@media (min-width:1024px) { .hero-section { padding-block:4rem; } }
.hero-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
.hero-grid--no-media { max-width:40rem; }
@media (min-width:1024px) { .hero-grid { grid-template-columns:repeat(2,1fr); gap:4rem; } .hero-grid--no-media { max-width:48rem; margin-inline:auto; grid-template-columns:1fr; } }
.hero-text  { order:2; display:flex; flex-direction:column; gap:1rem; }
.hero-image { order:1; position:relative; }
@media (min-width:1024px) {
  [dir="rtl"] .hero-text  { order:1; }
  [dir="rtl"] .hero-image { order:2; }
}
.hero-title { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.875rem; line-height:1.25; }
@media (min-width:640px)  { .hero-title { font-size:2.25rem; } }
@media (min-width:1024px) { .hero-title { font-size:3rem; } }
.hero-title-accent { color:var(--gold); }
.hero-desc { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1.125rem; line-height:1.75; max-width:32rem; }
.hero-cta-row { display:flex; flex-direction:column; gap:.75rem; width:100%; }
@media (min-width:640px) { .hero-cta-row { flex-direction:row; width:auto; } }
.hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem .5rem; font-size:.875rem; color:rgba(61,43,31,.7); font-family:var(--font-tajawal); }
.trust-item { display:inline-flex; align-items:center; gap:.25rem; }
.trust-icon { color:var(--gold-dark); flex-shrink:0; }
.hero-img-wrap { position:relative; width:100%; max-width:28rem; margin-inline:auto; }
@media (min-width:1024px) { .hero-img-wrap { max-width:none; } }
.hero-img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-gold-lg); }
.hero-float-badge { position:absolute; background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-gold); padding:.5rem .75rem; display:flex; align-items:center; gap:.5rem; }
.hero-float-top    { top:1rem;    inset-inline-start:1rem; }
.hero-float-bottom { bottom:1rem; inset-inline-end:1rem; }
.hero-products-cluster {
  position: absolute; z-index: 2; width: min(92%, 26rem);
  left: 50%; transform: translateX(-50%);
  bottom: -2.5rem; pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(61, 43, 31, .18));
}
@media (min-width: 1024px) {
  .hero-products-cluster {
    width: min(110%, 32rem); bottom: -4rem;
    left: 8%; transform: none;
  }
}
.hero-section { padding-block-end: 3.5rem; }
@media (min-width: 1024px) { .hero-section { padding-block-end: 5rem; } }

/* Trust feature cards (localhost:3002) */
.home-trust-features {
  padding-block: 0 2.5rem; margin-top: -1rem; position: relative; z-index: 3;
}
.home-trust-features__grid {
  display: grid; grid-template-columns: 1fr; gap: .75rem;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); border: 1px solid rgba(200, 169, 110, .12);
  padding: 1rem;
}
@media (min-width: 640px) {
  .home-trust-features__grid { grid-template-columns: repeat(2, 1fr); padding: 1.25rem 1.5rem; }
}
@media (min-width: 1024px) {
  .home-trust-features__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.home-trust-feature {
  text-align: center; padding: .75rem .5rem;
}
.home-trust-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: .5rem;
  color: var(--gold-dark);
}
.home-trust-feature__icon svg { stroke: currentColor; fill: none; }
.home-trust-feature__title {
  display: block; font-family: var(--font-cairo); font-weight: 700;
  font-size: .9375rem; color: var(--charcoal); margin-bottom: .25rem;
}
.home-trust-feature__desc {
  font-family: var(--font-tajawal); font-size: .8125rem; line-height: 1.55;
  color: var(--mbrown); margin: 0;
}

/* === 12. TRUST BAR (Homepage — React TrustBar) === */
.home-trust-bar { background:var(--cream-dark); border-block:1px solid rgba(200,169,110,.10); padding-block:1rem; }
.home-trust-scroll { display:flex; align-items:center; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem; -ms-overflow-style:none; scrollbar-width:none; }
.home-trust-scroll::-webkit-scrollbar { display:none; }
.home-trust-grid { display:none; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (min-width:640px) {
  .home-trust-scroll { display:none; }
  .home-trust-grid { display:grid; }
}
.home-trust-item { display:flex; align-items:center; gap:.5rem; white-space:nowrap; flex-shrink:0; font-family:var(--font-cairo); font-weight:600; font-size:.875rem; color:var(--charcoal); }
.home-trust-item .trust-icon { color:var(--gold-dark); }
/* legacy trust-bar */
.trust-bar { background:var(--white); border-block:1px solid var(--cream-dark); padding-block:1.25rem; }
.trust-bar-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.25rem 2rem; }
@media (min-width:1024px) { .trust-bar-inner { gap:2rem 3rem; } }
.trust-badge-item { display:flex; align-items:center; gap:.5rem; font-family:var(--font-cairo); font-weight:600; font-size:.875rem; color:var(--mbrown); white-space:nowrap; }

/* === 13. PRODUCT CARDS === */
.product-card {
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); border:1px solid var(--cream-dark);
  transition:all var(--trans-slow); display:block; color:inherit;
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-gold-lg); border-color:rgba(200,169,110,.3); }
.product-card-image      { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.product-card-placeholder { width:100%; aspect-ratio:4/5; }
.product-card-image-wrap  { position:relative; overflow:hidden; }
.product-card-body    { padding:1rem; }
@media (min-width:640px) { .product-card-body { padding:1.25rem; } }
.product-card-category { font-family:var(--font-cairo); font-size:.75rem; color:var(--gold); font-weight:600; margin-bottom:.25rem; }
.product-card-name     { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1rem; line-height:1.4; margin-bottom:.375rem; }
@media (min-width:640px) { .product-card-name { font-size:1.125rem; } }
.product-card-tagline  { font-family:var(--font-tajawal); color:var(--mbrown); font-size:.8125rem; line-height:1.5; margin-bottom:.75rem; }
.product-card-footer   { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.product-card-cta      { font-family:var(--font-cairo); font-weight:600; color:var(--gold); font-size:.875rem; display:flex; align-items:center; gap:.25rem; transition:color var(--trans); }
.product-card:hover .product-card-cta { color:var(--gold-dark); }

/* Product card v2 — matches localhost:3002 ProductCard */
.product-card--v2 { display: block; }
.product-card--v2 .product-card-inner { display: flex; flex-direction: column; height: 100%; }
.product-card--v2 .product-card-media {
  display: block; position: relative; overflow: hidden; background: var(--cream);
}
.product-card--v2 .product-card-image {
  aspect-ratio: 4/5; object-fit: cover; transition: transform var(--trans-slow);
}
.product-card--v2:hover .product-card-image { transform: scale(1.04); }
.product-card-badge {
  position: absolute; top: .75rem; inset-inline-end: .75rem;
  display: inline-flex; align-items: center; gap: .25rem;
  background: #fef2f2; border: 1px solid #fecaca; color: var(--red-600);
  font-family: var(--font-cairo); font-weight: 600; font-size: .6875rem;
  padding: .2rem .5rem; border-radius: var(--radius-full);
}
.product-card--v2 .product-card-body {
  display: flex; flex-direction: column; flex: 1; gap: .75rem; padding: 1rem;
}
.product-card-link-text { display: block; color: inherit; text-decoration: none; }
.product-card-link-text:hover .product-card-name { color: var(--gold); }
.product-card--v2 .product-card-name { margin-bottom: .25rem; }
.product-card--v2 .product-card-tagline { margin-bottom: .5rem; font-size: .875rem; }
.product-card-price {
  font-family: var(--font-cairo); font-weight: 700; color: var(--gold);
  font-size: 1.125rem; margin: 0;
}
.product-card-price span { font-size: .75rem; font-weight: 600; opacity: .85; }
.product-card--v2 .product-card-cta {
  width: 100%; justify-content: center; margin-top: auto;
  color: #fff; background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: none; border-radius: var(--radius-md); padding: .625rem 1rem;
  font-weight: 700; font-size: .875rem;
}
.product-card--v2 .product-card-cta:hover { filter: brightness(1.05); color: #fff; }

/* Section header — decorated title */
.section-header--decorated {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1rem; text-align: center; margin-bottom: 2rem;
}
.section-header--decorated .section-title { margin-bottom: 0; flex: 0 0 auto; }
.section-header--decorated .section-subtitle { flex: 1 0 100%; margin-top: .25rem; }
.section-header__line {
  flex: 1 1 3rem; max-width: 5rem; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.featured-products--bestsellers .section-header__line { max-width: 6rem; }
.featured-products__more { text-align: center; margin-top: 2rem; }

/* 4-column product grid */
.product-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .product-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* === 14. PRODUCT GRID === */
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
@media (min-width:640px)  { .product-grid { gap:1rem; } }
@media (min-width:1024px) { .product-grid { gap:1.5rem; } }

/* === 15. STAR RATING === */
.star-rating-wrap    { display:inline-flex; align-items:center; gap:.375rem; direction:ltr; }
.stars               { display:flex; gap:.125rem; color:var(--star); }
.star-icon-full      { color:var(--star); }
.star-icon-empty     { color:var(--cream-dark); }
.star-count          { font-family:var(--font-cairo); font-size:.75rem; color:var(--mbrown); }
.star-rating-text    { font-family:var(--font-cairo); font-weight:600; font-size:.875rem; color:var(--charcoal); }

/* === 16. FEATURED PRODUCTS === */
.featured-products { background:var(--white); padding-block:3rem; }
@media (min-width:1024px) { .featured-products { padding-block:5rem; } }

/* === 17. BRAND STORY === */
/* matches React source: bg-cream-dark */
.brand-story { background:var(--cream-dark); padding-block:3rem; overflow:hidden; }
@media (min-width:1024px) { .brand-story { padding-block:5rem; } }
.brand-story-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:768px)  { .brand-story-grid { grid-template-columns:repeat(2,1fr); gap:2.5rem; } }
@media (min-width:1024px) { .brand-story-grid { grid-template-columns:repeat(2,1fr); gap:4rem; } }
.brand-story-image       { width:100%; max-width:24rem; margin-inline:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-gold); }
@media (min-width:768px)  { .brand-story-image { max-width:none; } }
.brand-story-badge       { color:var(--gold-dark); font-family:var(--font-cairo); font-weight:600; font-size:.875rem; margin-bottom:1rem; display:inline-flex; align-items:center; gap:.5rem; }
.brand-story-title       { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.875rem; line-height:1.25; margin-bottom:.75rem; }
@media (min-width:1024px) { .brand-story-title { font-size:2.5rem; } }
.brand-story-title-accent { color:var(--gold); }
.brand-story-text        { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; line-height:1.75; margin-bottom:1rem; }
/* feature points (3 bullet style) */
.brand-story-points      { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.brand-story-point       { display:flex; align-items:flex-start; gap:.75rem; }
.brand-story-point-icon  { width:2.5rem; height:2.5rem; flex-shrink:0; background:rgba(200,169,110,.15); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; color:var(--gold-dark); margin-top:.125rem; }
.brand-story-point-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.9375rem; }
.brand-story-point-desc  { font-family:var(--font-tajawal); color:var(--mbrown); font-size:.875rem; margin-top:.125rem; line-height:1.6; }
/* stats (kept for flexibility) */
.brand-story-stats       { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; background:rgba(200,169,110,.08); border:1px solid rgba(200,169,110,.20); border-radius:var(--radius-lg); padding:1.25rem; margin-top:1.5rem; }
.brand-story-stat-value  { font-family:var(--font-cairo); font-weight:800; color:var(--gold-dark); font-size:1.5rem; direction:ltr; display:block; text-align:center; }
.brand-story-stat-label  { font-family:var(--font-tajawal); color:var(--mbrown); font-size:.8125rem; text-align:center; margin-top:.25rem; }

/* === 18. HOW IT WORKS === */
/* matches React HowItWorks: 3-step, horizontal scroll on mobile */
.how-it-works { background:var(--white); padding-block:3rem; }
@media (min-width:1024px) { .how-it-works { padding-block:5rem; } }

/* horizontal scroll container (mobile) */
.hiw-scroll {
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scroll-behavior:smooth;
  padding:0.25rem 1rem 0.75rem; margin-inline:-1rem;
}
@media (min-width:640px)  { .hiw-scroll { padding-inline:1.5rem; margin-inline:-1.5rem; } }
@media (min-width:768px)  { .hiw-scroll { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; overflow:visible; padding:0; margin-inline:0; } }
@media (min-width:1024px) { .hiw-scroll { gap:2rem; } }

.hiw-scroll-item { flex-shrink:0; width:min(calc(100vw - 2.5rem), 340px); scroll-snap-align:center; }
@media (min-width:768px) { .hiw-scroll-item { width:auto; } }

.step-card {
  position:relative; background:var(--cream); border-radius:var(--radius-xl);
  padding:1.5rem; text-align:center; border:1px solid var(--cream-dark);
  transition:all var(--trans-slow); min-height:15rem; overflow:visible;
}
.step-card:hover, .step-card.active { background:var(--cream); border-color:rgba(200,169,110,.4); box-shadow:var(--shadow-gold); }
.step-number {
  width:2.75rem; height:2.75rem; border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  color:#fff; font-family:var(--font-cairo); font-weight:800; font-size:1.125rem;
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 auto .75rem; box-shadow:var(--shadow-gold);
  outline:4px solid var(--white);
}
.hiw-icon-wrap { width:3.5rem; height:3.5rem; background:rgba(200,169,110,.15); border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; }
.hiw-icon { color:var(--gold-dark); }
.step-title  { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1rem; margin-bottom:.5rem; }
@media (min-width:640px) { .step-title { font-size:1.125rem; } }
.step-desc   { font-family:var(--font-tajawal); color:var(--mbrown); font-size:.875rem; line-height:1.65; max-width:17rem; margin-inline:auto; }

/* Arrow connector between steps (desktop) */
.hiw-arrow {
  display:none; position:absolute; top:50%; inset-inline-end:-1.25rem;
  transform:translateY(-50%);
  width:1.5rem; height:1.5rem; background:rgba(200,169,110,.15);
  border-radius:var(--radius-full); align-items:center; justify-content:center;
  color:var(--gold); font-size:.875rem;
}
[dir="rtl"] .hiw-arrow { transform:translateY(-50%) scaleX(-1); }
@media (min-width:768px) { .hiw-arrow { display:flex; } }

/* Dot indicators (mobile) */
.hiw-dots { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.25rem; }
@media (min-width:768px) { .hiw-dots { display:none; } }
.hiw-dot {
  height:.5rem; border-radius:var(--radius-full);
  background:rgba(200,169,110,.3); border:none; cursor:pointer;
  transition:all var(--trans); width:.5rem; padding:0;
}
.hiw-dot.active { width:1.75rem; background:var(--gold); }
.hiw-hint { text-align:center; color:rgba(61,43,31,.5); font-family:var(--font-cairo); font-size:.75rem; margin-top:.75rem; }
@media (min-width:768px) { .hiw-hint { display:none; } }

/* legacy .steps-grid kept for compatibility */
.steps-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2rem; }
@media (min-width:640px)  { .steps-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .steps-grid { grid-template-columns:repeat(3,1fr); } }

/* === 19. INGREDIENT SHOWCASE === */
.ingredient-showcase { background:var(--cream); padding-block:3rem; overflow:hidden; }
@media (min-width:1024px) { .ingredient-showcase { padding-block:5rem; } }
.ingredient-showcase-layout { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
.ingredient-showcase-layout--no-media { max-width:48rem; margin-inline:auto; }
@media (min-width:768px) { .ingredient-showcase-layout { grid-template-columns:repeat(2,1fr); gap:2.5rem; } }
.ingredient-showcase-layout--no-media .ingredient-cards-grid { grid-template-columns:repeat(2,1fr); }
@media (min-width:1024px) {
  .ingredient-showcase-layout { gap:4rem; }
  .ingredient-showcase-layout--no-media { max-width:56rem; }
  .ingredient-showcase-layout--no-media .ingredient-cards-grid { grid-template-columns:repeat(3,1fr); }
}
.ingredient-showcase-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1.875rem; line-height:1.25; margin-bottom:.75rem; }
@media (min-width:1024px) { .ingredient-showcase-title { font-size:2.25rem; } }
.ingredient-showcase-subtitle { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; line-height:1.75; margin-bottom:1.5rem; }
.ingredient-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.ingredient-mini-card { background:var(--white); border-radius:var(--radius-lg); padding:.75rem; display:flex; align-items:flex-start; gap:.75rem; border:1px solid var(--cream-dark); }
.ingredient-mini-icon { width:2.25rem; height:2.25rem; flex-shrink:0; background:rgba(200,169,110,.10); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--gold-dark); }
.ingredient-mini-name { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.875rem; margin:0; }
.ingredient-mini-note { font-family:var(--font-cairo); color:var(--gold-dark); font-size:.75rem; margin:.125rem 0 0; line-height:1.4; }
.ingredient-showcase-image { width:100%; max-width:24rem; margin-inline:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); display:block; }
@media (min-width:768px) { .ingredient-showcase-image { max-width:none; } }
/* legacy ingredient grid */
.ingredients-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:2rem; }
@media (min-width:640px)  { .ingredients-grid { grid-template-columns:repeat(3,1fr); gap:1rem; } }
@media (min-width:1024px) { .ingredients-grid { grid-template-columns:repeat(4,1fr); gap:1.25rem; } }
.ingredient-card { background:var(--white); border-radius:var(--radius-lg); padding:1.25rem; text-align:center; border:1px solid var(--cream-dark); transition:all var(--trans-slow); }
.ingredient-card:hover { border-color:var(--gold); box-shadow:var(--shadow-gold); transform:translateY(-2px); }
.ingredient-icon { width:3rem; height:3rem; margin:0 auto .75rem; color:var(--gold); }
.ingredient-name { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.9375rem; margin-bottom:.25rem; }
.ingredient-desc { font-family:var(--font-tajawal); color:var(--mbrown); font-size:.8125rem; line-height:1.5; }

/* === 20. REVIEWS === */
/* matches React source: bg-charcoal (dark) */
.reviews-section { background:var(--charcoal); padding-block:3rem; }
@media (min-width:1024px) { .reviews-section { padding-block:5rem; } }
/* heading overrides for dark bg */
.reviews-section .section-title   { color:#fff; }
.reviews-section .section-subtitle { color:rgba(255,255,255,.7); }
.reviews-section .section-label   { background:rgba(200,169,110,.15); border-color:rgba(200,169,110,.4); color:var(--gold-light); }
/* stats row */
.reviews-stats { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:1rem; flex-wrap:wrap; }
.reviews-stat { text-align:center; }
.reviews-stat-value { font-family:var(--font-cairo); font-weight:800; color:var(--gold); font-size:1.5rem; direction:ltr; display:inline-flex; align-items:center; gap:.375rem; }
.reviews-stat-label { color:rgba(255,255,255,.6); font-family:var(--font-tajawal); font-size:.75rem; display:block; margin-top:.25rem; }
.reviews-stat-divider { width:1px; height:2.5rem; background:rgba(255,255,255,.2); }
/* mobile horizontal scroll + desktop grid */
.reviews-scroll { display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; }
@media (min-width:768px) { .reviews-scroll { display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; padding-bottom:0; } }
.reviews-scroll-item { flex-shrink:0; width:85vw; scroll-snap-align:start; }
@media (min-width:640px) { .reviews-scroll-item { width:75vw; } }
@media (min-width:768px) { .reviews-scroll-item { width:auto; } }
.reviews-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem; }
@media (min-width:640px)  { .reviews-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; } }
@media (min-width:1024px) { .reviews-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
/* ReviewCard — white cards on charcoal section (Next.js parity) */
.review-card {
  background:var(--white); border:1px solid var(--cream-dark); border-radius:1rem;
  padding:1.5rem; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:.75rem;
}
.review-card-stars    { margin-bottom:0; }
.review-card-text     {
  font-family:var(--font-tajawal); color:var(--mbrown); font-size:.9375rem;
  line-height:1.65; flex:1; margin:0;
}
.review-card-footer   {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding-top:.5rem; border-top:1px solid var(--cream-dark); margin-top:auto;
}
.review-card-author   { display:flex; align-items:center; gap:.5rem; min-width:0; }
.review-card-avatar   {
  width:2rem; height:2rem; border-radius:var(--radius-full);
  background:rgba(200,169,110,.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-cairo); font-weight:700; color:var(--gold); font-size:.75rem; flex-shrink:0;
}
.review-card-name     { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.875rem; margin:0; }
.review-card-meta     { font-family:var(--font-tajawal); color:rgba(61,43,31,.6); font-size:.75rem; margin:.125rem 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; }
.review-card-verified { color:#16a34a; font-size:.75rem; display:inline-flex; align-items:center; gap:.25rem; }
.review-card-product  {
  flex-shrink:0; font-family:var(--font-cairo); font-size:.75rem; font-weight:600;
  padding:.25rem .5rem; border-radius:var(--radius-full);
  background:rgba(200,169,110,.1); color:var(--gold-dark); white-space:nowrap;
}
.review-card-date     { font-family:var(--font-tajawal); color:rgba(61,43,31,.5); font-size:.75rem; margin:0; }

/* === 21. BEFORE/AFTER === */
.before-after-section { background:var(--cream-dark); padding-block:3rem; overflow:hidden; }
@media (min-width:1024px) { .before-after-section { padding-block:5rem; } }
.before-after-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px) { .before-after-grid { grid-template-columns:repeat(3,1fr); } }
.before-after-card { background:var(--white); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card); }
.before-after-split { display:grid; grid-template-columns:repeat(2,1fr); }
.before-after-col { padding:1rem; }
.before-after-col-before { background:rgba(254,242,242,.5); border-inline-end:1px solid var(--cream-dark); }
.before-after-col-after { background:rgba(240,253,244,.5); }
.before-after-label { font-family:var(--font-cairo); font-weight:700; font-size:.75rem; margin:0 0 .5rem; display:inline-flex; align-items:center; gap:.25rem; }
.before-after-label-before { color:#dc2626; }
.before-after-label-after { color:#16a34a; }
.before-after-text { font-family:var(--font-tajawal); color:var(--charcoal); font-size:.875rem; line-height:1.65; margin:0; }
.before-after-footer { padding:1rem; border-top:1px solid var(--cream-dark); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.before-after-name { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.875rem; margin:0; }
.before-after-product { font-family:var(--font-cairo); color:var(--gold); font-size:.875rem; margin:.125rem 0 0; }

/* === 22. FINAL CTA === */
/* matches React source: bg-gold-gradient + image overlay */
.final-cta { background:linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%); color:#fff; padding-block:3.5rem; text-align:center; position:relative; overflow:hidden; }
@media (min-width:1024px) { .final-cta { padding-block:6rem; } }
.final-cta-bg { position:absolute; inset:0; opacity:.2; mix-blend-mode:overlay; pointer-events:none; }
.final-cta-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.final-cta-inner { position:relative; z-index:1; max-width:48rem; margin-inline:auto; }
.final-cta-trust-item { display:inline-flex; align-items:center; gap:.375rem; }
.final-cta-title        { font-family:var(--font-cairo); font-weight:800; color:#fff; font-size:1.875rem; line-height:1.25; margin-bottom:1rem; }
@media (min-width:1024px) { .final-cta-title { font-size:3rem; } }
.final-cta-title-accent { color:var(--charcoal); }
.final-cta-subtitle     { font-family:var(--font-tajawal); color:rgba(255,255,255,.9); font-size:1.0625rem; max-width:36rem; margin:0 auto 2rem; line-height:1.7; }
.final-cta-trust        { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; margin-top:1.5rem; font-size:.875rem; color:rgba(255,255,255,.85); font-family:var(--font-cairo); }
/* button on gold bg needs to be secondary (white) */
.final-cta .btn-secondary { background:var(--white); color:var(--charcoal); border-color:transparent; box-shadow:0 4px 20px rgba(0,0,0,.15); }
.final-cta .btn-secondary:hover { background:var(--cream); }

/* === 23. PRODUCT PAGE === */
.product-hero { padding-block:2rem; background:var(--cream); }
@media (min-width:1024px) { .product-hero { padding-block:3rem; } }
.breadcrumb { font-family:var(--font-cairo); font-size:.875rem; color:rgba(61,43,31,.7); margin-bottom:1.5rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a { color:rgba(61,43,31,.7); transition:color var(--trans); }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb-sep { transform:scaleX(-1); }

.product-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:start;
}
@media (min-width:1024px) {
  .product-layout {
    grid-template-columns:repeat(2,1fr);
    gap:3.5rem;
    grid-template-areas:
      "gallery details"
      "trust   trust";
  }
  .product-gallery   { grid-area:gallery; }
  .product-details   { grid-area:details; }
  .product-trust-bar { grid-area:trust; }
}

/* Gallery */
.product-gallery         { position:relative; }
@media (min-width:1024px) { .product-gallery-sticky { position:sticky; top:5rem; } }
.product-main-image      { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); display:block; }
.product-gallery-badge   { position:absolute; top:1rem; inset-inline-start:1rem; background:var(--white); border-radius:.75rem; box-shadow:var(--shadow-card); padding:.375rem .75rem; font-family:var(--font-cairo); font-weight:700; font-size:.8125rem; color:var(--green-600); display:flex; align-items:center; gap:.375rem; }
.product-thumbnails      { display:grid; gap:.5rem; margin-top:.75rem; grid-template-columns:repeat(var(--thumb-cols, 4), minmax(0, 1fr)); }
.product-thumbnail       { border-radius:1rem; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border-color var(--trans), box-shadow var(--trans); background:none; padding:0; }
.product-thumbnail.active { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.product-thumbnail:hover:not(.active) { border-color:rgba(200,169,110,.6); }
.product-thumbnail img   { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; pointer-events:none; }
.product-trust-band-text { font-family:var(--font-cairo); font-weight:600; font-size:.875rem; color:var(--charcoal); }

/* Product Details */
.product-details { display:flex; flex-direction:column; gap:1.25rem; }
.product-promo-banner { font-family:var(--font-cairo); font-size:.875rem; font-weight:600; color:var(--gold-dark); background:rgba(200,169,110,.10); border:1px solid rgba(200,169,110,.20); border-radius:var(--radius-full); padding:.5rem 1rem; text-align:center; }
.product-stat-highlight { display:flex; align-items:center; gap:1rem; background:var(--white); padding:1rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); border:1px solid rgba(200,169,110,.1); }
.product-stat-value     { font-size:1.875rem; font-weight:800; color:var(--gold-dark); font-family:var(--font-cairo); direction:ltr; }
.product-stat-label     { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.875rem; }
.product-stat-sublabel  { font-family:var(--font-tajawal); color:rgba(61,43,31,.7); font-size:.75rem; }
.product-title { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.5rem; line-height:1.3; white-space:pre-line; }
@media (min-width:1024px) { .product-title { font-size:1.875rem; } }
.product-desc  { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; line-height:1.75; }

/* Countdown / Scarcity */
.countdown-box { display:flex; align-items:center; justify-content:space-between; background:#fff7ed; padding:.75rem 1rem; border-radius:.75rem; border:1px solid #fed7aa; }
.countdown-timer { font-family:var(--font-cairo); font-weight:700; color:#c2410c; font-size:1.125rem; direction:ltr; display:inline-block; }
.scarcity-badge { display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; border-radius:var(--radius-full); font-size:.875rem; font-family:var(--font-cairo); font-weight:600; background:#fff7ed; color:var(--orange-600); white-space:pre-line; }
.scarcity-badge.critical { background:#fef2f2; color:var(--red-600); }
.live-viewers { display:inline-flex; align-items:center; gap:.375rem; font-family:var(--font-cairo); font-size:.875rem; color:var(--mbrown); }
.live-dot      { position:relative; width:.5rem; height:.5rem; }
.live-dot-ping { position:absolute; inset:0; border-radius:var(--radius-full); background:#f97316; opacity:.75; animation:ping 1.2s ease-in-out infinite; }
.live-dot-core { position:relative; width:.5rem; height:.5rem; border-radius:var(--radius-full); background:#f97316; }

/* Quantity / Tier Selector — matches React QuantitySelector */
.quantity-selector-card {
  border-radius:1rem;
  border:1px solid var(--cream-dark);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(4px);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  scroll-margin-top:6rem;
  scroll-margin-bottom:7rem;
}
.quantity-selector-header {
  padding:1rem 1rem .75rem;
  border-bottom:1px solid rgba(242,235,224,.8);
}
.quantity-selector-header-row {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.5rem;
}
.quantity-selector-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1rem; margin:0; }
.quantity-selector-save-badge {
  font-family:var(--font-cairo); font-weight:600; font-size:.6875rem; color:var(--gold-dark);
  background:rgba(200,169,110,.1); padding:.25rem .625rem; border-radius:999px; white-space:nowrap;
}
.quantity-selector-progress {
  display:flex; gap:.25rem; height:.375rem; border-radius:999px; overflow:hidden; background:var(--cream-dark);
}
.quantity-selector-progress-seg { height:100%; border-radius:999px; background:transparent; transition:background .3s ease; }
.quantity-selector-progress-seg.is-filled { background:var(--gold); }
.quantity-selector-tiers { display:flex; flex-direction:column; gap:.625rem; padding:.75rem; }

/* Tier Selector */
.tier-selector { display:flex; flex-direction:column; gap:.5rem; }
.tier-option {
  position:relative;
  width:100%; display:flex; align-items:flex-start; gap:.75rem;
  padding:.875rem; border-radius:.75rem; border:2px solid var(--cream-dark);
  cursor:pointer; transition:all var(--trans); background:rgba(251,248,242,.6); text-align:start;
}
.tier-option:hover  { border-color:rgba(200,169,110,.4); background:var(--white); }
.tier-option.selected { border-color:var(--gold); background:linear-gradient(to left, rgba(200,169,110,.1), rgba(200,169,110,.05), #fff); box-shadow:var(--shadow-gold); }
.tier-option.highlighted:not(.selected) { box-shadow:0 0 0 1px rgba(200,169,110,.2); }
.tier-option-body { flex:1; min-width:0; }
.tier-option-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.tier-option-meta { flex:1; min-width:0; }
.tier-option-pricing { text-align:end; flex-shrink:0; }
.tier-option-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.625rem; padding-top:.625rem; border-top:1px solid rgba(242,235,224,.6); }
.tier-perk { font-family:var(--font-tajawal); font-size:.6875rem; color:rgba(61,43,31,.7); }
.tier-unit-price { font-family:var(--font-cairo); font-size:.625rem; color:rgba(61,43,31,.6); margin-top:.25rem; direction:ltr; }
.tier-radio { width:1.25rem; height:1.25rem; border-radius:var(--radius-full); border:2px solid #d1d5db; transition:all var(--trans); position:relative; flex-shrink:0; margin-top:.125rem; background:#fff; }
.tier-option.selected .tier-radio { border-color:var(--gold); background:var(--gold); }
.tier-option.selected .tier-radio::after { content:''; position:absolute; inset:.3125rem; border-radius:var(--radius-full); background:#fff; }
.tier-label-main { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.9375rem; line-height:1.35; }
.tier-label-sub  { font-family:var(--font-tajawal); color:rgba(61,43,31,.8); font-size:.75rem; display:block; margin-top:.125rem; line-height:1.5; }
.tier-badge      { position:absolute; top:-.625rem; inset-inline-end:.75rem; display:inline-flex; align-items:center; padding:.125rem .625rem; border-radius:999px; font-size:.625rem; font-family:var(--font-cairo); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tier-badge-gold  { background:var(--gold); color:#fff; }
.tier-badge-green { background:#16a34a; color:#fff; }
.tier-price    { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.125rem; direction:ltr; white-space:nowrap; line-height:1; }
.tier-option.selected .tier-price { color:var(--gold-dark); }
.tier-savings  { font-family:var(--font-cairo); font-weight:700; font-size:.6875rem; color:#15803d; background:#f0fdf4; padding:.125rem .5rem; border-radius:999px; white-space:nowrap; }

/* Product Trust Bar */
.product-trust-bar { padding-block:.75rem; background:var(--cream-dark); border-block:1px solid rgba(200,169,110,.1); margin-inline:-1rem; }
@media (min-width:640px)  { .product-trust-bar { margin-inline:-1.5rem; } }
@media (min-width:1024px) { .product-trust-bar { margin-inline:0; border-radius:.75rem; border:1px solid rgba(200,169,110,.1); } }
.product-trust-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.75rem 1.5rem; padding-inline:1rem; }
.trust-item-product  { display:flex; align-items:center; gap:.375rem; font-family:var(--font-cairo); font-weight:600; font-size:.8125rem; color:var(--mbrown); }
.product-trust-row   { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.product-trust-item  { display:flex; align-items:center; gap:.375rem; font-family:var(--font-cairo); font-size:.75rem; font-weight:600; color:var(--mbrown); }

/* Sticky CTA — shows when #quantity-selector scrolls out of view */
.sticky-add-to-cart {
  position:fixed; bottom:0; inset-inline:0; z-index:40;
  background:var(--white); border-top:1px solid rgba(200,169,110,.15);
  padding:1rem; box-shadow:0 -4px 20px rgba(0,0,0,.08);
  transform:translateY(100%); transition:transform .3s var(--ease);
}
@media (min-width:1024px) {
  .sticky-add-to-cart { padding:1rem 1.5rem; }
  .sticky-add-to-cart .sticky-cta-full { max-width:36rem; }
}
.sticky-add-to-cart.visible { transform:translateY(0); }
.sticky-cta-full {
  display:block; width:100%; max-width:28rem; margin-inline:auto;
  background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold) 100%);
  color:#fff; border:none; padding:.875rem 1.5rem; border-radius:.75rem;
  font-family:var(--font-cairo); font-weight:700; font-size:1rem;
  cursor:pointer; text-align:center;
  box-shadow:var(--shadow-gold); transition:opacity .2s ease, transform .15s ease;
}
.sticky-cta-full:hover { opacity:.92; transform:scale(1.01); }

/* Science Section — matches React (white + cream doctor block) */
.science-section { padding-block:3rem; overflow:hidden; }
.science-section-light { background:var(--white); color:var(--charcoal); }
@media (min-width:1024px) { .science-section { padding-block:5rem; } }
.science-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:768px) { .science-grid-main { grid-template-columns:1fr 1fr; gap:2.5rem 4rem; } }
.science-content { order:2; }
@media (min-width:768px) { .science-content { order:1; } }
.science-images { order:1; display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
@media (min-width:768px) { .science-images { order:2; } }
.science-img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.science-badge-text { font-family:var(--font-cairo); font-weight:600; color:var(--gold-dark); font-size:.875rem; margin-bottom:.5rem; }
.science-title { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.75rem; line-height:1.25; margin:0 0 .5rem; }
@media (min-width:1024px) { .science-title { font-size:1.875rem; } }
.science-title-accent { display:block; color:var(--gold-dark); margin-top:.25rem; }
.science-sub, .science-pain { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; line-height:1.75; margin-bottom:1rem; }
.science-claim-box { border:2px solid rgba(200,169,110,.4); background:rgba(200,169,110,.05); border-radius:var(--radius-lg); padding:1rem; margin-bottom:1.25rem; }
.science-claim-label { display:flex; align-items:center; gap:.375rem; font-family:var(--font-cairo); font-weight:700; color:var(--gold-dark); font-size:.875rem; margin-bottom:.375rem; }
.science-claim-text { font-family:var(--font-tajawal); color:var(--charcoal); font-size:.875rem; line-height:1.65; }
.science-claim-source { font-family:var(--font-cairo); font-size:.75rem; color:rgba(61,43,31,.6); font-style:italic; margin-top:.5rem; }
.science-benefits-list { display:flex; flex-direction:column; gap:.75rem; }
.science-benefit-item { display:flex; align-items:flex-start; gap:.75rem; }
.science-benefit-icon { width:2.25rem; height:2.25rem; border-radius:var(--radius-full); background:rgba(200,169,110,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold-dark); }
.science-benefit-title { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.875rem; }
.science-benefit-desc { font-family:var(--font-tajawal); color:var(--mbrown); font-size:.75rem; line-height:1.5; margin-top:.125rem; }
.science-doctor-section { background:var(--cream-dark); padding-block:3rem; }
@media (min-width:1024px) { .science-doctor-section { padding-block:4rem; } }
.science-doctor-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:768px) { .science-doctor-grid { grid-template-columns:1fr 1fr; } }
.science-doctor-img { width:100%; max-width:24rem; margin-inline:auto; display:block; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.science-doctor-content { display:flex; flex-direction:column; gap:1rem; }
.science-doctor-badge-line { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1.125rem; line-height:1.5; }
.science-highlight-badge { color:#fff; padding:.125rem .5rem; border-radius:.25rem; display:inline-block; margin-inline:.25rem; }
.science-highlight-red { background:#b91c1c; }
.science-highlight-green { background:#15803d; }
.science-highlight-blue { background:#1d4ed8; }
.science-doctor-pill { display:inline-block; align-self:flex-start; border:1px solid rgba(61,43,31,.2); border-radius:var(--radius-full); padding:.375rem 1rem; font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.875rem; }
.science-doctor-quote { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; line-height:1.75; }
.science-trust-badges { display:flex; flex-wrap:wrap; gap:.75rem; }
.science-trust-badge { display:inline-flex; padding:.375rem .75rem; border-radius:var(--radius-full); background:var(--white); border:1px solid rgba(200,169,110,.3); font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.8125rem; }

/* Ingredients Section (product) — cream-dark + image cards */
.product-ingredients { padding-block:3rem; }
.product-ingredients-v2 { background:var(--cream-dark); }
@media (min-width:1024px) { .product-ingredients { padding-block:5rem; } }
.ingredients-ba-row { display:flex; flex-direction:column; gap:.75rem; max-width:48rem; margin:0 auto 2.5rem; }
.ingredients-ba-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.ingredients-featured-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px) { .ingredients-featured-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .ingredients-featured-grid { grid-template-columns:repeat(3,1fr); } }
.ingredient-card-v2 { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border-inline-end:4px solid var(--gold); box-shadow:var(--shadow-card); }
.ingredient-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.ingredient-card-body { padding:1.25rem; }
.ingredient-icon-v2 { width:2.75rem; height:2.75rem; border-radius:var(--radius-lg); background:rgba(200,169,110,.1); display:flex; align-items:center; justify-content:center; color:var(--gold-dark); margin-bottom:.75rem; }
.ingredient-name-en { font-family:var(--font-cairo); color:rgba(61,43,31,.5); font-size:.75rem; margin-bottom:.375rem; }
.ingredient-note { display:flex; align-items:flex-start; gap:.375rem; font-family:var(--font-cairo); font-size:.75rem; color:var(--gold-dark); font-style:italic; margin-top:.5rem; }
.ingredients-extra-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem; }
@media (min-width:640px) { .ingredients-extra-grid { grid-template-columns:repeat(2,1fr); } }
.ingredient-card-simple { background:var(--white); border-radius:var(--radius-lg); padding:1.25rem; border-inline-end:4px solid var(--gold); box-shadow:var(--shadow-card); }
.ingredients-safety { margin-top:2rem; padding:1rem; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--radius-lg); text-align:center; display:flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-cairo); font-weight:600; color:#15803d; font-size:.875rem; }

/* Comparison Section */
.comparison-section { background:var(--white); padding-block:3rem; }
@media (min-width:1024px) { .comparison-section { padding-block:5rem; } }
.comparison-images { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:32rem; margin:0 auto 2.5rem; }
.comparison-img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-lg); }
.comparison-img-ours { box-shadow:0 0 0 2px #4ade80; }
.comparison-img-theirs { box-shadow:0 0 0 2px #fca5a5; opacity:.85; }
.comparison-columns { display:grid; grid-template-columns:1fr; gap:1rem; max-width:56rem; margin-inline:auto; }
@media (min-width:768px) { .comparison-columns { grid-template-columns:repeat(2,1fr); } }
.comparison-col { border-radius:var(--radius-lg); overflow:hidden; border:2px solid; }
.comparison-col-ours { border-color:#bbf7d0; background:#f0fdf4; }
.comparison-col-theirs { border-color:#fecaca; background:#fef2f2; }
.comparison-col-header { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; font-family:var(--font-cairo); font-weight:700; font-size:.875rem; color:#fff; }
.comparison-col-ours .comparison-col-header { background:#16a34a; }
.comparison-col-theirs .comparison-col-header { background:#dc2626; }
.comparison-list { list-style:none; margin:0; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.comparison-list li { display:flex; align-items:flex-start; gap:.5rem; font-family:var(--font-tajawal); font-size:.875rem; line-height:1.5; }
.comparison-col-ours .comparison-list li { color:var(--charcoal); }
.comparison-col-theirs .comparison-list li { color:var(--mbrown); }
.comparison-col-ours .comparison-list svg { color:#16a34a; flex-shrink:0; margin-top:.125rem; }
.comparison-x { color:#ef4444; flex-shrink:0; margin-top:.125rem; }

/* How To Use (product) */
.how-to-use { background:var(--white); padding-block:3rem; }
@media (min-width:1024px) { .how-to-use { padding-block:5rem; } }
.how-to-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:768px) { .how-to-grid { grid-template-columns:repeat(2,1fr); gap:4rem; } }
.how-to-title { margin-bottom:1.25rem; }
.how-to-steps-v2 { display:flex; flex-direction:column; gap:1rem; }
.how-to-step-v2 { display:flex; align-items:flex-start; gap:1rem; }
.how-to-step-num { width:2rem; height:2rem; border-radius:var(--radius-full); background:var(--gold); color:#fff; font-family:var(--font-cairo); font-weight:700; font-size:.875rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.125rem; box-shadow:var(--shadow-gold); }
.how-to-step-text { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; line-height:1.65; padding-top:.125rem; }
.how-to-tip { margin-top:1.25rem; background:rgba(200,169,110,.1); border:1px solid rgba(200,169,110,.2); border-radius:var(--radius-lg); padding:1rem; }
.how-to-tip-label { display:flex; align-items:center; gap:.375rem; font-family:var(--font-cairo); font-weight:700; color:var(--gold-dark); font-size:.875rem; margin-bottom:.375rem; }
.how-to-tip-text { font-family:var(--font-tajawal); color:var(--charcoal); font-size:.875rem; line-height:1.65; }
.how-to-images { display:flex; flex-direction:column; gap:.75rem; }
.how-to-img-main { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.how-to-img-product { width:100%; max-width:20rem; margin-inline:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.how-to-use-steps { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.how-to-use-step  { display:flex; align-items:flex-start; gap:1rem; padding:1rem; background:var(--cream); border-radius:.875rem; }
.step-num  { width:2.5rem; height:2.5rem; border-radius:var(--radius-full); background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#fff; font-family:var(--font-cairo); font-weight:800; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-text { font-family:var(--font-tajawal); color:var(--charcoal); font-size:1rem; line-height:1.6; padding-top:.375rem; }

/* FAQ */
.faq-section { padding-block:3rem; }
.faq-section-light { background:var(--white); }
@media (min-width:1024px) { .faq-section { padding-block:5rem; } }
.faq-main-title { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.75rem; text-align:center; margin-bottom:2rem; }
.faq-layout { display:grid; gap:2.5rem; align-items:start; }
.faq-layout-single { max-width:48rem; margin-inline:auto; }
@media (min-width:1024px) { .faq-layout-with-image { grid-template-columns:1fr 1fr; } }
.faq-sidebar { display:none; }
@media (min-width:1024px) { .faq-sidebar { display:block; position:sticky; top:6rem; } }
.faq-sidebar-img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
.faq-item { background:var(--cream); border-radius:var(--radius-lg); border:1px solid var(--cream-dark); overflow:hidden; }
.faq-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:none; border:none; cursor:pointer; text-align:start; gap:1rem; transition:background .2s; }
.faq-trigger:hover { background:var(--cream-dark); }
.faq-trigger-text { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:1rem; }
.faq-chevron       { flex-shrink:0; transition:transform .2s; color:var(--gold); }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-answer        { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-answer { max-height:500px; }
.faq-answer-inner  { padding:0 1.25rem 1rem; font-family:var(--font-tajawal); color:var(--mbrown); font-size:.9375rem; line-height:1.75; }

/* Reviews extras */
.reviews-social-grid { display:grid; grid-template-columns:1fr; gap:1rem; max-width:48rem; margin:0 auto 2.5rem; }
@media (min-width:640px) { .reviews-social-grid { grid-template-columns:repeat(2,1fr); } }
.reviews-social-img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.reviews-social-product { aspect-ratio:1/1; max-width:20rem; margin-inline:auto; }
.reviews-grid-item { display:flex; flex-direction:column; gap:.75rem; }
.review-ba-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); }

/* === 24. COLLECTIONS PAGE — pixel-perfect match with React ============== */

/* Hero */
.collections-hero {
  background:var(--cream-dark);
  border-bottom:1px solid rgba(200,155,94,.1);
  padding:2.5rem var(--section-px) 2rem;
  text-align:center;
}
@media (min-width:640px) { .collections-hero { padding-inline:var(--section-px-sm); } }
@media (min-width:1024px){ .collections-hero { padding:3.5rem var(--section-px-lg) 2.5rem; } }
.collections-hero-inner { max-width:var(--max-w); margin-inline:auto; }
.collections-hero-title {
  font-family:var(--font-cairo); font-weight:800; color:var(--charcoal);
  font-size:clamp(1.375rem,5vw,2.25rem); line-height:1.3; margin-bottom:.75rem;
}
.collections-hero-accent { color:var(--gold-dark); }
.collections-hero-sub {
  font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem;
}

/* Body wrapper */
.collections-body { background:var(--cream); padding-bottom:4rem; }
.collections-body-inner { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--section-px); }
@media (min-width:640px) { .collections-body-inner { padding-inline:var(--section-px-sm); } }
@media (min-width:1024px){ .collections-body-inner { padding-inline:var(--section-px-lg); } }

/* Category filter chips — horizontal scroll on mobile */
.cat-filter-wrap {
  display:flex; gap:.5rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:.25rem;
  margin-bottom:1.5rem; flex-wrap:wrap;
}
@media (max-width:639px) {
  .cat-filter-wrap { flex-wrap:nowrap; padding-bottom:.5rem; }
}
.cat-filter-wrap::-webkit-scrollbar { display:none; }
.cat-chip {
  flex-shrink:0; white-space:nowrap;
  padding:.4rem 1.125rem; border-radius:var(--radius-full);
  font-family:var(--font-cairo); font-weight:600; font-size:.875rem;
  border:1.5px solid var(--cream-dark); background:#fff;
  color:var(--mbrown); text-decoration:none;
  transition:all 180ms ease; cursor:pointer;
}
.cat-chip:hover   { border-color:var(--gold); color:var(--gold-dark); }
.cat-chip.active  {
  background:var(--gold); border-color:var(--gold);
  color:#fff;
  box-shadow:var(--shadow-gold);
}

/* Product grid */
.coll-product-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.5rem;
}
@media (min-width:640px)  { .coll-product-grid { gap:.875rem; } }
@media (min-width:1024px) { .coll-product-grid { gap:1.5rem; } }

/* Product card */
.coll-card {
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform 250ms ease, box-shadow 250ms ease;
}
.coll-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(200,169,110,.25); }

.coll-card-img-wrap { position:relative; overflow:hidden; }
.coll-card-img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform 400ms ease;
}
.coll-card:hover .coll-card-img { transform:scale(1.04); }

.coll-card-badge {
  position:absolute; bottom:.5rem; right:.5rem;
  background:var(--gold); color:var(--charcoal);
  font-family:var(--font-cairo); font-weight:700;
  font-size:.625rem; padding:.2rem .5rem; border-radius:var(--radius-full);
}

.coll-card-body { padding:.625rem .625rem .75rem; display:flex; flex-direction:column; flex:1; }
@media (min-width:640px) { .coll-card-body { padding:.875rem .875rem 1rem; } }

/* Rating row */
.coll-card-rating { display:flex; align-items:center; gap:.25rem; margin-bottom:.375rem; }
.coll-card-rating-num {
  font-family:var(--font-cairo); font-weight:700;
  font-size:.8125rem; color:var(--charcoal);
}
.coll-card-stars { display:flex; gap:.1rem; }

/* Product name */
.coll-card-name {
  font-family:var(--font-cairo); font-weight:700;
  color:var(--charcoal); font-size:.875rem; line-height:1.4;
  margin-bottom:.375rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (min-width:640px) { .coll-card-name { font-size:.9375rem; } }

/* Price */
.coll-card-price {
  font-family:var(--font-cairo); font-weight:700;
  color:var(--gold-dark); font-size:.875rem;
  margin-bottom:.625rem; margin-top:auto;
}
.coll-card-price-from { font-weight:400; font-size:.75rem; color:var(--mbrown); }
.coll-card-price-sar  { font-size:.75rem; color:var(--mbrown); }

/* CTA button */
.coll-card-btn {
  display:block; width:100%;
  background:var(--gold); color:var(--charcoal);
  font-family:var(--font-cairo); font-weight:700; font-size:.875rem;
  text-align:center; border-radius:.625rem;
  padding:.5rem .25rem;
  transition:background 180ms ease, transform 150ms ease;
}
.coll-card:hover .coll-card-btn { background:var(--gold-dark); }

/* Empty state */
.coll-empty {
  text-align:center; padding:4rem 1rem; background:#fff;
  border-radius:1rem; border:1px dashed var(--gold);
  font-family:var(--font-tajawal); color:var(--mbrown);
}

/* Collections trust footer */
.collections-trust {
  padding:2rem var(--section-px);
  background:var(--charcoal);
}
@media (min-width:640px) { .collections-trust { padding-inline:var(--section-px-sm); } }
@media (min-width:1024px){ .collections-trust { padding-inline:var(--section-px-lg); } }
.collections-trust-inner {
  max-width:var(--max-w); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem;
}
.collections-trust-item {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-cairo); font-weight:600; font-size:.875rem; color:#fff;
}
.collections-trust-item svg { color:var(--gold); flex-shrink:0; }

/* Legacy aliases (keep old classes working) */
.category-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.category-chip { padding:.375rem 1rem; border-radius:var(--radius-full); font-family:var(--font-cairo); font-weight:600; font-size:.875rem; cursor:pointer; border:1.5px solid var(--cream-dark); background:var(--white); color:var(--mbrown); transition:all var(--trans); text-decoration:none; }
.category-chip:hover  { border-color:var(--gold); color:var(--gold-dark); }
.category-chip.active { background:var(--gold); border-color:var(--gold); color:var(--charcoal); }

/* === 25. CART OVERLAY === */
.cart-overlay { position:fixed; inset:0; background:rgba(28,20,16,.6); z-index:55; opacity:0; pointer-events:none; transition:opacity var(--trans-slow); backdrop-filter:blur(2px); }
.cart-overlay.active { opacity:1; pointer-events:auto; }

/* === 26. CART DRAWER === */
.cart-drawer {
  position:fixed; top:0; bottom:0; inset-inline-end:0;
  width:100%; max-width:26rem; background:var(--white); z-index:60;
  display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.15);
  transform:translateX(-100%); transition:transform var(--trans-slow);
}
[dir="rtl"] .cart-drawer { transform:translateX(-100%); }
.cart-drawer.open { transform:translateX(0); }
.cart-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--cream-dark); flex-shrink:0; }
.cart-drawer-title  { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1.0625rem; }
.cart-drawer-close  { width:2rem; height:2rem; border-radius:var(--radius-full); background:var(--cream); display:flex; align-items:center; justify-content:center; color:var(--charcoal); transition:all var(--trans); flex-shrink:0; }
.cart-drawer-close:hover { background:var(--cream-dark); color:var(--gold); }
.cart-items { flex:1; overflow-y:auto; padding:1rem 1.25rem; }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; min-height:16rem; text-align:center; color:var(--mbrown); }
.cart-empty p { font-family:var(--font-cairo); font-weight:600; font-size:1rem; }
.cart-item { display:flex; align-items:center; gap:.75rem; padding-block:.875rem; border-bottom:1px solid var(--cream-dark); }
.cart-item:last-child { border-bottom:none; }
.cart-item-image     { width:3.5rem; height:3.5rem; border-radius:.625rem; overflow:hidden; flex-shrink:0; background:var(--cream-dark); }
.cart-item-image img { width:100%; height:100%; object-fit:cover; }
.cart-item-details   { flex:1; min-width:0; }
.cart-item-name      { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item-qty       { font-family:var(--font-tajawal); color:rgba(61,43,31,.6); font-size:.75rem; margin-top:.125rem; }
.cart-item-price     { font-family:var(--font-cairo); font-weight:700; color:var(--gold); font-size:.9375rem; direction:ltr; flex-shrink:0; }
.cart-item-remove    { width:1.5rem; height:1.5rem; border-radius:var(--radius-full); background:var(--cream); display:flex; align-items:center; justify-content:center; color:var(--mbrown); font-size:1rem; transition:all var(--trans); flex-shrink:0; border:none; cursor:pointer; }
.cart-item-remove:hover { background:#fef2f2; color:var(--red-600); }
.cart-footer         { padding:1rem 1.25rem; border-top:1px solid var(--cream-dark); background:var(--cream); flex-shrink:0; }
.cart-total-row      { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.cart-total-label    { font-family:var(--font-cairo); font-size:.875rem; color:var(--mbrown); }
.cart-total-value    { font-family:var(--font-cairo); font-weight:800; color:var(--charcoal); font-size:1.125rem; direction:ltr; }
.cart-shipping-row   { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; font-size:.8125rem; color:var(--mbrown); font-family:var(--font-cairo); }
.cart-shipping-free  { color:var(--green-600); font-weight:600; display:flex; align-items:center; gap:.25rem; }

/* === 27. CHECKOUT MODAL === */
.checkout-modal {
  position:fixed; inset:1rem; top:2%; bottom:2%;
  background:var(--white); z-index:70; display:flex;
  flex-direction:column; border-radius:var(--radius-xl);
  box-shadow:0 25px 50px rgba(0,0,0,.3); overflow:hidden;
  opacity:0; transform:scale(.95) translateY(20px);
  pointer-events:none; transition:all .25s ease;
}
@media (min-width:640px) {
  .checkout-modal { inset:auto; left:50%; transform:translateX(-50%) scale(.95) translateY(20px); width:100%; max-width:32rem; top:2%; bottom:2%; }
}
.checkout-modal.open { opacity:1; pointer-events:auto; transform:scale(1) translateY(0); }
@media (min-width:640px) { .checkout-modal.open { transform:translateX(-50%) scale(1) translateY(0); } }
.checkout-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--cream-dark); flex-shrink:0; }
.checkout-modal-title  { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1.0625rem; }
.checkout-timer-bar    { padding:.625rem 1.25rem; background:#fff7ed; border-bottom:1px solid #fed7aa; display:flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-cairo); font-weight:600; font-size:.875rem; color:#c2410c; flex-shrink:0; }
.checkout-body         { flex:1; overflow-y:auto; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:1rem; }
.checkout-section-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:.875rem; margin-bottom:.75rem; }
.checkout-order-summary { background:var(--cream-dark); border-radius:.875rem; padding:.875rem; display:flex; flex-direction:column; gap:.5rem; }
.checkout-item         { display:flex; align-items:center; gap:.5rem; }
.checkout-item-img     { width:2.5rem; height:2.5rem; border-radius:.5rem; background:var(--cream); flex-shrink:0; overflow:hidden; }
.checkout-item-name    { flex:1; min-width:0; font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkout-item-qty-text { font-family:var(--font-tajawal); color:rgba(61,43,31,.7); font-size:.75rem; }
.checkout-item-price   { font-family:var(--font-cairo); font-weight:700; color:var(--gold); font-size:.875rem; direction:ltr; white-space:nowrap; }
.checkout-divider      { border:none; border-top:1px solid rgba(200,169,110,.2); margin-block:.5rem .25rem; }
.checkout-total-row    { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; font-family:var(--font-cairo); color:var(--mbrown); }
.checkout-review       { background:rgba(200,169,110,.05); border:1px solid rgba(200,169,110,.2); border-radius:.875rem; padding:.875rem; }
.checkout-review-text  { font-family:var(--font-tajawal); color:var(--charcoal); font-size:.8125rem; line-height:1.6; margin-block:.375rem .5rem; }
.checkout-review-author { font-size:.75rem; color:var(--mbrown); font-family:var(--font-cairo); display:inline-flex; align-items:center; gap:.25rem; }
/* Forms */
.checkout-form  { display:flex; flex-direction:column; gap:1rem; }
.form-group     { display:flex; flex-direction:column; gap:.375rem; }
.form-label     { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.875rem; }
.form-label-required { color:var(--red-600); }
.form-input {
  width:100%; border:2px solid var(--cream-dark); border-radius:.875rem;
  padding:.75rem 1rem; font-family:var(--font-cairo); font-size:1rem;
  color:var(--charcoal); background:var(--cream); transition:border-color var(--trans); outline:none;
}
.form-input::placeholder { color:rgba(61,43,31,.4); }
.form-input:focus { border-color:var(--gold); }
.form-input.error { border-color:#f87171; }
.form-input.valid { border-color:#4ade80; }
.form-error   { font-family:var(--font-cairo); color:var(--red-600); font-size:.75rem; }
.form-hint    { font-family:var(--font-cairo); color:rgba(61,43,31,.6); font-size:.75rem; }
.form-input-wrap { position:relative; }
.form-valid-icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#22c55e; }
.alert-error   { background:#fef2f2; border:1px solid #fecaca; border-radius:.875rem; padding:.75rem; text-align:center; }
.alert-error-text { font-family:var(--font-cairo); color:var(--red-600); font-size:.875rem; display:inline-flex; align-items:center; gap:.375rem; }
.alert-dismiss { font-size:.75rem; color:#ef4444; background:none; border:none; cursor:pointer; text-decoration:underline; margin-top:.25rem; display:block; margin-inline:auto; }
.checkout-trust-row  { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem .75rem; font-size:.75rem; color:rgba(61,43,31,.7); font-family:var(--font-cairo); }
.checkout-trust-item { display:inline-flex; align-items:center; gap:.25rem; }
.sep-dot { color:rgba(61,43,31,.3); }

/* === 28. THANK YOU / NOT FOUND / GENERAL === */
.thank-you-page {
  padding:2rem 1rem 2.5rem;
  background:var(--cream);
  min-height:100vh;
}
@media (min-width:640px) { .thank-you-page { padding:3rem 1.5rem; } }
.thank-you-inner { max-width:42rem; margin-inline:auto; }

/* Success hero */
.ty-success-hero {
  position:relative; overflow:hidden;
  border-radius:1.5rem;
  background:linear-gradient(135deg, #f0fdf4 0%, var(--cream) 45%, rgba(200,169,110,.12) 100%);
  border:1px solid rgba(34,197,94,.25);
  box-shadow:var(--shadow-gold-lg);
  margin-bottom:1.5rem;
}
.ty-confetti { pointer-events:none; position:absolute; inset:0; overflow:hidden; }
.ty-confetti-piece {
  position:absolute; top:1rem; border-radius:999px;
  animation:tyConfetti 2.2s ease-out forwards;
}
@keyframes tyConfetti {
  0%   { transform:translateY(-10px) scale(0) rotate(0deg); opacity:0; }
  20%  { opacity:1; transform:translateY(0) scale(1) rotate(90deg); }
  100% { transform:translateY(90px) scale(.6) rotate(360deg); opacity:0; }
}
.ty-success-inner { position:relative; padding:2.5rem 1.25rem 2rem; text-align:center; }
@media (min-width:640px) { .ty-success-inner { padding:3rem 1.5rem 2.5rem; } }

.ty-illustration-wrap {
  position:relative; width:9rem; height:9rem; margin:0 auto 1.5rem;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:640px) { .ty-illustration-wrap { width:10rem; height:10rem; } }
.ty-illustration-glow {
  position:absolute; inset:.75rem; border-radius:999px;
  background:linear-gradient(135deg, rgba(74,222,128,.25), rgba(200,169,110,.35), rgba(134,239,172,.2));
  filter:blur(18px);
}
.ty-illustration-ring {
  position:absolute; inset:1.25rem; border-radius:999px; padding:2px;
  background:conic-gradient(from 0deg, #22c55e, #C8A96E, #E8D5A3, #86efac, #C8A96E, #22c55e);
  animation:tyRingSpin 5s linear infinite;
}
.ty-illustration-ring::after {
  content:''; display:block; width:100%; height:100%; border-radius:999px;
  background:linear-gradient(135deg, #f0fdf4, var(--cream), rgba(200,169,110,.1));
}
@keyframes tyRingSpin { to { transform:rotate(360deg); } }
.ty-illustration-badge {
  position:relative; z-index:2;
  width:6rem; height:6rem; border-radius:999px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(4px);
  box-shadow:var(--shadow-gold);
  display:flex; align-items:center; justify-content:center; padding:.375rem;
}
@media (min-width:640px) { .ty-illustration-badge { width:7rem; height:7rem; } }
.ty-illustration { width:100%; height:100%; }
.ty-check-badge { animation:tyBadgePop .6s ease .35s both; }
@keyframes tyBadgePop {
  from { transform:scale(0); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}
.ty-sparkle { animation:tySparkle .5s ease .6s both; }
.ty-sparkle-2 { animation-delay:.75s; }
.ty-sparkle-3 { animation-delay:.85s; }
@keyframes tySparkle {
  from { transform:scale(0); opacity:0; }
  50%  { transform:scale(1.2); opacity:1; }
  to   { transform:scale(1); opacity:.7; }
}

.ty-success-pill {
  display:inline-flex; align-items:center; gap:.375rem;
  background:#22c55e; color:#fff;
  font-family:var(--font-cairo); font-weight:700; font-size:.75rem;
  padding:.25rem .75rem; border-radius:999px; margin-bottom:.75rem;
}
.ty-success-pill svg { color:#fff; }
.ty-success-title {
  font-family:var(--font-cairo); font-weight:800; color:var(--charcoal);
  font-size:1.5rem; line-height:1.35; margin-bottom:.5rem;
}
@media (min-width:640px) { .ty-success-title { font-size:1.875rem; } }
.ty-success-desc {
  font-family:var(--font-tajawal); color:var(--mbrown);
  font-size:.875rem; line-height:1.7; max-width:20rem; margin:0 auto 1.25rem;
}
@media (min-width:640px) { .ty-success-desc { font-size:1rem; } }

.ty-order-id-card {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  border:1px solid rgba(200,169,110,.3); border-radius:.75rem;
  padding:.625rem 1rem; box-shadow:0 1px 4px rgba(0,0,0,.06);
  margin-bottom:1.5rem;
}
.ty-order-id-card svg { color:var(--gold); flex-shrink:0; }
.ty-order-id-label { font-family:var(--font-cairo); font-size:.6875rem; color:rgba(61,43,31,.7); text-align:start; }
.ty-order-id-value { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); direction:ltr; text-align:start; }

.ty-progress-card {
  background:rgba(255,255,255,.72); backdrop-filter:blur(4px);
  border:1px solid var(--cream-dark); border-radius:1rem; padding:1rem;
}
.ty-progress-title { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.75rem; margin-bottom:.75rem; }
.ty-progress-track {
  display:flex; align-items:flex-start; justify-content:space-between; gap:.25rem; position:relative;
}
.ty-progress-line,
.ty-progress-line-active {
  position:absolute; top:1rem; height:2px; border-radius:999px;
}
.ty-progress-line { inset-inline:12%; background:var(--cream-dark); z-index:0; }
.ty-progress-line-active { inset-inline-start:12%; width:12%; background:#22c55e; z-index:0; animation:tyProgressFill .6s ease .9s both; }
@keyframes tyProgressFill { from { width:0; } to { width:12%; } }
.ty-progress-step { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.375rem; z-index:1; }
.ty-progress-icon {
  width:2rem; height:2rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream-dark);
}
.ty-progress-icon svg { color:rgba(61,43,31,.5); }
.ty-progress-icon.is-done { background:#22c55e; box-shadow:0 2px 8px rgba(34,197,94,.35), 0 0 0 2px #bbf7d0; }
.ty-progress-icon.is-done svg { color:#fff; }
.ty-progress-label { font-family:var(--font-cairo); font-size:.625rem; line-height:1.3; text-align:center; color:rgba(61,43,31,.6); }
@media (min-width:640px) { .ty-progress-label { font-size:.6875rem; } }
.ty-progress-label.is-done { font-weight:700; color:#15803d; }

/* Order summary */
.ty-summary-card {
  background:#fff; border-radius:1rem; box-shadow:var(--shadow-card);
  padding:1.25rem; margin-bottom:1.5rem;
}
.ty-summary-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1rem; margin-bottom:1rem; }
.ty-summary-items { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.ty-summary-item { display:flex; align-items:center; gap:.75rem; }
.ty-summary-item-icon {
  width:2.5rem; height:2.5rem; border-radius:.5rem;
  background:rgba(200,169,110,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ty-summary-item-icon span { font-family:var(--font-cairo); font-weight:700; color:var(--gold); }
.ty-summary-item-name { font-family:var(--font-cairo); font-weight:600; color:var(--charcoal); font-size:.875rem; flex:1; }
.ty-summary-total,
.ty-summary-payment {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-cairo); color:var(--mbrown); font-size:.875rem;
}
.ty-summary-total { border-top:1px solid var(--cream-dark); padding-top:.75rem; margin-bottom:.25rem; }
.ty-summary-total-value { font-weight:700; color:var(--gold); font-size:1.125rem; }
.ty-summary-payment-value {
  display:inline-flex; align-items:center; gap:.375rem;
  font-weight:600; color:var(--charcoal);
}
.ty-summary-payment-value svg { color:var(--gold-dark); }

/* What's next */
.ty-whats-next {
  background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:1rem; padding:1.25rem; margin-bottom:1.5rem;
}
.ty-whats-next-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1rem; margin-bottom:.75rem; }
.ty-whats-next-list { display:flex; flex-direction:column; gap:.75rem; }
.ty-whats-next-item { display:flex; align-items:center; gap:.75rem; }
.ty-whats-next-icon { color:#2563eb; flex-shrink:0; }
.ty-whats-next-item p { font-family:var(--font-tajawal); color:var(--charcoal); font-size:.875rem; line-height:1.6; margin:0; }

/* Cross-sell */
.ty-cross-sell { margin-bottom:1.5rem; }
.ty-cross-sell-title {
  font-family:var(--font-cairo); font-weight:700; color:var(--charcoal);
  font-size:1rem; text-align:center; margin-bottom:1rem;
}
.ty-cross-sell-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
}
@media (min-width:640px) { .ty-cross-sell-grid { gap:1rem; } }
.ty-cross-card { text-decoration:none; color:inherit; }

.ty-footer-cta { text-align:center; margin-top:2rem; }
.ty-footer-cta .btn { display:inline-flex; width:auto; }

.not-found-page { min-height:80vh; display:flex; align-items:center; justify-content:center; background:var(--cream); text-align:center; }
.not-found-num  { font-family:var(--font-cairo); font-weight:800; font-size:6rem; color:rgba(200,169,110,.15); line-height:1; margin-bottom:1rem; }
@media (min-width:1024px) { .not-found-num { font-size:8rem; } }
.not-found-title { font-family:var(--font-cairo); font-weight:700; color:var(--charcoal); font-size:1.5rem; margin-bottom:.75rem; }
.not-found-desc  { font-family:var(--font-tajawal); color:var(--mbrown); font-size:1rem; max-width:28rem; margin-inline:auto; line-height:1.7; margin-bottom:2rem; }

/* === 29. IMAGE PLACEHOLDER === */
.img-placeholder {
  background:linear-gradient(135deg, var(--cream-dark) 0%, var(--cream) 50%, var(--cream-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  color:rgba(200,169,110,.3); font-size:2.5rem; position:relative; overflow:hidden;
}
.img-placeholder::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%); animation:shimmer 1.8s ease infinite; }
.img-placeholder--fallback.is-visible { display:flex !important; position:absolute; inset:0; z-index:1; font-size:.875rem; color:var(--mbrown); }
.product-card-link > div { position:relative; }

/* === 30. REVEAL ANIMATIONS (IntersectionObserver) === */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* === 31. KEYFRAME ANIMATIONS === */
@keyframes fadeUp  { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes pulse-gold {
  0%, 100% { box-shadow:0 4px 6px -1px rgba(200,169,110,.30), 0 2px 4px -2px rgba(200,169,110,.20); }
  50%       { box-shadow:0 10px 25px -5px rgba(200,169,110,.50), 0 8px 10px -6px rgba(200,169,110,.40); }
}
@keyframes scroll-x-third { from { transform:translateX(0); } to { transform:translateX(-33.333%); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes ping { 75%, 100% { transform:scale(2); opacity:0; } }
@keyframes shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

/* === 32. A11Y FOCUS === */
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:.25rem; }

/* === 33. SCROLLBAR === */
::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dark); }

/* === 34. INPUT OVERRIDES === */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; }
input[type="number"] { -moz-appearance:textfield; }
input[type="tel"] { direction:ltr; text-align:right; }

/* === 35. REDUCED MOTION === */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}