/* ==========================================================================
   JOUD — Modern Fragrance House (e-commerce)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap');

:root{
  --bg:#faf8f4;
  --surface:#ffffff;
  --ink:#1c1c1a;
  --ink-dim:#6b6a63;
  --ink-faint:#9c9b93;
  --line:#e7e2d6;
  --gold:#c9a13c;
  --gold-dark:#a9812a;
  --teal:#2f5148;
  --radius:6px;
  /* Latin text (JOUD, fragrance names) keeps the original fonts; Arabic falls back to El Messiri / Tajawal */
  --serif:'Cormorant Garamond', 'El Messiri', serif;
  --sans:'Jost', 'Tajawal', sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 10px 30px rgba(28,28,26,.06);
  /* text/icons sitting on an --ink background (buttons, active chips, badges) */
  --on-ink:#ffffff;
  /* blocks that stay dark in both themes (announcement bar, newsletter) */
  --deep:#1c1c1a;
  --header-bg:rgba(250,248,244,.92);
  --glass:rgba(255,255,255,.9);
  --glass-strong:rgba(255,255,255,.97);
  --danger:#b3412f;
  --danger-soft:#fbeeea;
  --finder-tint:#f3ede0;
  color-scheme:light;
}

/* ==================== dark mode ==================== */
:root[data-theme="dark"]{
  --bg:#12110f;
  --surface:#1c1b18;
  --ink:#f1ece2;
  --ink-dim:#b5afa3;
  --ink-faint:#858074;
  --line:#2f2c27;
  --gold:#d4ae4f;
  --gold-dark:#dcb862;
  --teal:#4f8a7b;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --on-ink:#141311;
  --deep:#0a0908;
  --header-bg:rgba(18,17,15,.88);
  --glass:rgba(28,27,24,.9);
  --glass-strong:rgba(28,27,24,.97);
  --danger:#e27a66;
  --danger-soft:rgba(226,122,102,.14);
  --finder-tint:#1a1814;
  color-scheme:dark;
}
body{ transition:background-color .3s, color .3s; }
.theme-toggle .fa-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .fa-sun{ display:inline-block; }
:root[data-theme="dark"] .theme-toggle .fa-moon{ display:none; }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
body.locked{ overflow:hidden; }
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dark); font-weight:500; }

/* ==================== buttons ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius); font-size:13px; letter-spacing:.03em;
  font-weight:500; border:1px solid transparent; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn-primary{ background:var(--ink); color:var(--on-ink); }
.btn-primary:hover{ background:var(--teal); color:#fff; transform:translateY(-2px); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:var(--ink); color:var(--on-ink); }
.btn-block{ width:100%; }

/* ==================== brand ==================== */
.brand-mark{ display:flex; align-items:center; gap:12px; }
.brand-crest{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%; background:#f6f1e6;
  box-shadow:0 0 0 1px var(--line);
  padding:5px; overflow:hidden;
}
.brand-crest img{ width:100%; height:100%; object-fit:contain; }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.06em; }

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce{
  background:var(--deep); color:#f3ede0; text-align:center;
  font-size:11px; letter-spacing:.08em; padding:9px 16px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:200; background:var(--header-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:20px;
  padding:16px clamp(20px,4vw,48px);
}
.main-nav{ display:flex; gap:34px; margin:0 auto; }
.main-nav a{ font-size:13px; letter-spacing:.04em; color:var(--ink-dim); transition:color .25s; position:relative; }
.main-nav a:hover{ color:var(--ink); }
.header-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:40px; height:40px; border:none; background:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink);
  position:relative; transition:background .25s;
}
.icon-btn:hover{ background:var(--line); }
.cart-badge{
  position:absolute; top:2px; right:2px; background:var(--gold); color:#1c1c1a;
  font-size:10px; font-weight:600; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.menu-btn{ display:none; border:none; background:none; font-size:18px; color:var(--ink); }

@media (max-width:1180px){
  .main-nav{ gap:clamp(16px,2vw,28px); }
}
/* below this width the seven links no longer fit next to the logo and icons */
@media (max-width:1080px){
  .header{ gap:12px; }
  .header-actions{ margin-inline-start:auto; }
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:199;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; margin:0; padding:6px clamp(20px,4vw,48px) 14px; box-shadow:var(--shadow);
    max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain;
  }
  .main-nav.open{ display:flex; animation:navDrop .25s var(--ease) both; }
  .main-nav a{ padding:14px 4px; border-bottom:1px solid var(--line); color:var(--ink); }
  .main-nav a:last-child{ border-bottom:none; }
  .menu-btn{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-inline-start:-8px; border-radius:50%; }
  .menu-btn:hover{ background:var(--line); }
}
@keyframes navDrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (max-width:480px){
  .header{ gap:8px; padding:12px 14px; }
  .header-actions{ gap:2px; }
  .icon-btn,.menu-btn{ width:38px; height:38px; font-size:15px; }
  .brand-mark{ gap:8px; }
  .brand-crest{ width:32px; height:32px; }
  .brand-name{ font-size:18px; }
}
@media (max-width:340px){
  .brand-name{ display:none; }
}

/* search panel */
.search-panel{
  position:fixed; top:0; left:0; right:0; z-index:250; background:var(--surface);
  transform:translateY(-100%); transition:transform .4s var(--ease);
  box-shadow:var(--shadow); padding:26px clamp(20px,4vw,48px);
}
.search-panel.open{ transform:translateY(0); }
.search-inner{ display:flex; align-items:center; gap:14px; max-width:700px; margin:0 auto; border-bottom:1px solid var(--line); padding-bottom:16px; }
.search-inner i{ color:var(--ink-faint); }
.search-inner input{ flex:1; border:none; outline:none; font-size:18px; font-family:var(--serif); background:none; color:var(--ink); }
.search-inner button{ border:none; background:none; font-size:16px; color:var(--ink-faint); }
.search-results{ max-width:700px; margin:16px auto 0; display:flex; flex-direction:column; gap:10px; }
.search-hit{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:var(--radius); transition:background .2s; }
.search-hit:hover{ background:var(--bg); }
.search-hit img{ width:44px; height:44px; object-fit:cover; border-radius:4px; }
.search-hit strong{ display:block; font-size:14px; }
.search-hit span{ font-size:12px; color:var(--ink-faint); }

/* ==========================================================================
   HERO
   ========================================================================== */
/* full-bleed cinematic hero: photo fades into warm dark behind the copy, glass cards float over the photo */
.hero{
  --hero-bg:#15110c; --hero-ink:#f6efe2; --hero-dim:rgba(246,239,226,.72);
  position:relative; isolation:isolate; overflow:hidden;
  margin:clamp(10px,1.6vw,20px); border-radius:clamp(18px,2.4vw,32px);
  min-height:min(86vh,780px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  background:var(--hero-bg); color:var(--hero-ink);
}
/* the photo fills the side opposite the copy (left in RTL) and melts into the dark background */
.hero-media{ position:absolute; top:0; bottom:0; left:0; width:60%; z-index:-1; overflow:hidden; }
html[dir="ltr"] .hero-media{ left:auto; right:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 64%;
  animation:heroZoom 16s var(--ease) both;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(270deg, var(--hero-bg) 0%, rgba(21,17,12,.55) 22%, transparent 55%),
    linear-gradient(0deg, rgba(21,17,12,.7), transparent 30%),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(21,17,12,.45));
}
html[dir="ltr"] .hero-media::after{ transform:scaleX(-1); }
/* warm glow behind the copy so the dark side isn't flat */
.hero::before{
  content:""; position:absolute; z-index:-1; width:60%; aspect-ratio:1; top:-20%; right:-15%; border-radius:50%;
  background:radial-gradient(circle, rgba(201,161,60,.22), transparent 65%);
}
html[dir="ltr"] .hero::before{ right:auto; left:-15%; }
@keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } }

.hero-content{ padding:clamp(40px,6vw,90px); max-width:640px; }
.hero-content > *{ animation:heroUp .9s var(--ease) both; }
.hero-content > :nth-child(2){ animation-delay:.1s; }
.hero-content > :nth-child(3){ animation-delay:.2s; }
.hero-content > :nth-child(4){ animation-delay:.3s; }
.hero-content > :nth-child(5){ animation-delay:.4s; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.hero-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:30px; font-size:13px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px);
}
.hero-pill i{ color:var(--gold); }
.hero h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(46px,7vw,96px); line-height:1.15; margin:22px 0 18px;
}
.hero-accent{
  background:linear-gradient(100deg, #f3d37a, #c9a13c 45%, #f7e2a6 70%, #c9a13c);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroShine 6s linear infinite;
}
@keyframes heroShine{ to{ background-position:200% center; } }
.hero-content p{ color:var(--hero-dim); font-size:clamp(15px,1.3vw,17px); max-width:48ch; margin-bottom:32px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-actions .btn{ border-radius:40px; padding:15px 28px; font-size:14px; }
.hero-btn-primary{ background:var(--gold); color:#1c1c1a; }
.hero-btn-primary:hover{ background:#f0cd6c; transform:translateY(-2px); }
.hero-btn-primary i{ font-size:12px; transition:transform .25s var(--ease); }
.hero-btn-primary:hover i{ transform:translateX(-4px); }
.hero-btn-ghost{ color:var(--hero-ink); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); backdrop-filter:blur(8px); }
.hero-btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.hero-stats{ display:flex; gap:clamp(20px,3vw,44px); margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); }
.hero-stats strong{ display:flex; align-items:center; gap:6px; font-family:var(--serif); font-size:clamp(26px,2.6vw,36px); font-weight:600; line-height:1; }
.hero-stats strong i{ font-size:.5em; color:var(--gold); }
.hero-stats span{ display:block; margin-top:6px; font-size:12px; color:var(--hero-dim); }

/* glass cards over the photo */
.hero-floating{ position:relative; align-self:stretch; }
.hero-chip{
  position:absolute; display:flex; align-items:center; gap:12px; color:var(--hero-ink);
  background:rgba(21,17,12,.42); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(16px);
  border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.3); transition:transform .3s var(--ease), background .3s;
  animation:heroFloat 6s ease-in-out infinite;
}
.hero-chip:hover{ background:rgba(21,17,12,.62); transform:translateY(-4px); }
.hero-weather{ top:14%; inset-inline-end:10%; padding:12px 18px; font-size:12px; color:var(--hero-dim); }
.hero-weather i{ font-size:24px; color:#f5b400; }
.hero-weather strong{ display:block; font-size:16px; color:var(--hero-ink); }
.hero-pick{ bottom:9%; inset-inline-start:-2%; padding:10px 18px 10px 10px; animation-delay:-3s; }
html[dir="rtl"] .hero-pick{ padding:10px 10px 10px 18px; }
.hero-pick img{ width:58px; height:58px; border-radius:12px; object-fit:cover; }
.hero-pick small{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--gold); }
.hero-pick strong{ display:block; font-family:var(--serif); font-size:19px; margin:2px 0; }
.hero-pick em{ font-style:normal; font-size:12px; color:var(--hero-dim); }
@keyframes heroFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }

.hero-scroll{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.35); border-radius:20px;
}
.hero-scroll span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px; border-radius:2px;
  background:var(--hero-ink); animation:heroScroll 1.8s ease-in-out infinite;
}
@keyframes heroScroll{ 0%{ opacity:0; transform:translateY(0); } 40%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }

/* scrolling strip of fragrance names under the hero */
.hero-marquee{ overflow:hidden; padding:18px 0; border-bottom:1px solid var(--line); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hero-marquee-track{ display:flex; align-items:center; gap:28px; width:max-content; animation:heroMarquee 50s linear infinite; }
.hero-marquee span{ font-family:var(--serif); font-size:clamp(20px,2vw,26px); font-weight:600; color:var(--ink-faint); white-space:nowrap; }
.hero-marquee i{ font-size:12px; color:var(--gold); }
.hero-marquee:hover .hero-marquee-track{ animation-play-state:paused; }
@keyframes heroMarquee{ to{ transform:translateX(50%); } }
html[dir="ltr"] .hero-marquee-track{ animation-name:heroMarqueeLtr; }
@keyframes heroMarqueeLtr{ to{ transform:translateX(-50%); } }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; align-items:end; min-height:min(92vh,820px); }
  .hero-media{ width:100%; bottom:auto; height:62%; }
  .hero-media img{ object-position:50% 45%; }
  .hero-media::after{ background:linear-gradient(0deg, var(--hero-bg) 0%, rgba(21,17,12,.35) 40%, rgba(21,17,12,.1) 100%); transform:none; }
  .hero-content{ padding:clamp(24px,6vw,48px); padding-top:44vh; text-align:center; margin:0 auto; max-width:100%; }
  .hero-content p{ margin-left:auto; margin-right:auto; }
  .hero-actions,.hero-stats{ justify-content:center; }
  .hero-floating{ position:absolute; inset:0; pointer-events:none; }
  .hero-chip{ pointer-events:auto; }
  .hero-weather{ top:18px; inset-inline-end:18px; }
  .hero-pick,.hero-scroll{ display:none; }
}
@media (max-width:480px){
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; white-space:nowrap; }
  .hero-stats{ gap:18px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-media img,.hero-content > *,.hero-accent,.hero-chip,.hero-scroll span,.hero-marquee-track{ animation:none; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust-item{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:22px 10px; font-size:12px; letter-spacing:.03em; color:var(--ink-dim);
  border-right:1px solid var(--line);
}
.trust-item:last-child{ border-right:none; }
.trust-item i{ color:var(--gold-dark); }
@media (max-width:700px){
  .trust-strip{ grid-template-columns:repeat(2,1fr); }
  .trust-item{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
}

/* ==========================================================================
   SECTION / GRID
   ========================================================================== */
.section{ padding:clamp(60px,10vh,110px) 0; }
.section-head{ text-align:center; margin-bottom:40px; }
.section-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,44px); margin-top:10px; }

.filter-bar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.filter-bar button{
  padding:10px 20px; border:1px solid var(--line); border-radius:30px; background:none;
  font-size:12px; letter-spacing:.04em; color:var(--ink-dim); transition:all .25s;
}
.filter-bar button.active,.filter-bar button:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:960px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .product-grid{ gap:12px; } }

.shop-more{ display:flex; justify-content:center; margin-top:40px; }

/* home "shop all": 5 per row (2 rows of the 10 shown), a wider container and compact cards */
#shop > .container{ max-width:1440px; }
.shop-grid{ grid-template-columns:repeat(5,1fr); gap:18px; }
.shop-grid .product-media img{ padding:14px; }
.shop-grid .product-body{ padding:14px 14px 16px; }
.shop-grid .product-name{ font-size:18px; }
.shop-grid .product-price{ font-size:16px; }
@media (max-width:1200px){ .shop-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:960px){ .shop-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:600px){ .shop-grid{ gap:12px; } }

.product-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .3s var(--ease), transform .3s var(--ease);
  display:flex; flex-direction:column;
}
.product-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.product-media{ position:relative; aspect-ratio:1/1; background:var(--bg); overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:contain; padding:24px; transition:transform .5s var(--ease); }
.product-card:hover .product-media img{ transform:scale(1.06); }
.product-badge{
  position:absolute; top:14px; left:14px; z-index:3; background:var(--ink); color:var(--on-ink);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:20px;
}
.product-quick{
  position:absolute; bottom:14px; left:14px; right:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px; text-align:center; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s;
}
.product-card:hover .product-quick{ opacity:1; transform:translateY(0); }
.product-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-family{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dark); }
.product-name{ font-family:var(--serif); font-weight:600; font-size:20px; }
.product-rating{ font-size:11px; color:var(--gold-dark); }
.product-rating span{ color:var(--ink-faint); margin-left:6px; }
.product-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:10px; }
.product-price{ font-family:var(--serif); font-size:18px; font-weight:600; }
.product-add{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--ink); background:none;
  display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .25s, color .25s;
}
.product-add:hover{ background:var(--ink); color:var(--on-ink); }

/* ==========================================================================
   BANNER
   ========================================================================== */
/* weather picks: live temperature for Cairo / Giza + the fragrances that suit it */
.weather-picks{ --weather-color:var(--gold); }
.weather-hot{ --weather-color:#e08a1e; }
.weather-mild{ --weather-color:#4c9a5b; }
.weather-cold{ --weather-color:#3d8fc4; }
.weather-picks > .container{ max-width:1440px; }
.weather-head{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:36px; }
.weather-intro h2{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,44px); margin-top:10px; }
.weather-intro .fr-intro{ margin:10px 0 0; }
.weather-cities{ display:flex; gap:8px; margin-top:18px; }
.weather-cities a{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--line); border-radius:30px;
  font-size:13px; color:var(--ink-dim); transition:all .2s;
}
.weather-cities a i{ font-size:11px; color:var(--weather-color); }
.weather-cities a:hover{ border-color:var(--ink); color:var(--ink); }
.weather-cities a.active{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.weather-card{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 18px; min-width:280px;
  padding:22px 26px; border-radius:16px; border:1px solid color-mix(in srgb, var(--weather-color) 35%, var(--line));
  background:linear-gradient(135deg, color-mix(in srgb, var(--weather-color) 14%, var(--surface)), var(--surface));
  box-shadow:var(--shadow);
}
.weather-card .weather-icon{ grid-row:span 2; font-size:42px; color:var(--weather-color); }
.weather-now strong{ display:block; font-family:var(--serif); font-size:44px; line-height:1; font-weight:600; }
.weather-now span{ font-size:13px; color:var(--ink-dim); }
.weather-meta{ display:flex; gap:14px; font-size:12px; color:var(--ink-faint); }
.weather-meta i{ font-size:10px; }
.weather-note{ grid-column:1 / -1; font-size:11px; color:var(--ink-faint); }
.weather-grid{ grid-template-columns:repeat(6,1fr); gap:18px; }
.weather-picks .weather-fit{ --tag-color:var(--weather-color); }
@media (max-width:1200px){ .weather-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){
  .weather-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .weather-head{ flex-direction:column; align-items:stretch; }
  .weather-card{ min-width:0; }
}

/* bestsellers: six labelled picks (summer / winter / all seasons / men / women / unisex) */
.bestsellers{ background:linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--gold) 9%, var(--bg))); }
.bestsellers > .container{ max-width:1440px; }
.bestsellers-grid{ grid-template-columns:repeat(6,1fr); gap:18px; }
.bestseller-item{ display:flex; flex-direction:column; gap:12px; }
.bestseller-item .product-card{ flex:1; }
.bestseller-item .product-media img{ padding:14px; }
.bestseller-item .product-body{ padding:14px 14px 16px; }
.bestseller-item .product-name{ font-size:18px; }
.bestseller-item .product-price{ font-size:15px; }
.bestseller-tag{
  --tag-color:var(--gold-dark);
  align-self:center; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:30px;
  font-size:13px; font-weight:600; color:var(--tag-color);
  background:color-mix(in srgb, var(--tag-color) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--tag-color) 30%, transparent);
}
.bestseller-summer{ --tag-color:#d99a00; }
.bestseller-winter{ --tag-color:#3d8fc4; }
.bestseller-all_seasons{ --tag-color:#4c9a5b; }
.bestseller-men{ --tag-color:#2f5f9e; }
.bestseller-women{ --tag-color:#c2457a; }
.bestseller-unisex{ --tag-color:#8a5cc2; }
:root[data-theme="dark"] .bestseller-tag{ filter:brightness(1.35); }
@media (max-width:1200px){ .bestsellers-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .bestsellers-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }


/* ==========================================================================
   STORY
   ========================================================================== */
.story-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.story-visual{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:40px; }
.story-visual img{ width:60%; }
.story-text h2{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,40px); margin:12px 0 16px; }
.story-text p{ color:var(--ink-dim); font-size:14px; margin-bottom:20px; }
.story-list{ display:flex; flex-direction:column; gap:12px; }
.story-list li{ display:flex; gap:10px; font-size:14px; color:var(--ink-dim); }
.story-list i{ color:var(--teal); margin-top:3px; }
.story-list-detailed{ gap:16px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.story-list-detailed li{ line-height:1.8; }
.story-list-detailed i{ width:18px; text-align:center; }
.story-list-detailed strong{ display:block; color:var(--ink); font-size:15px; }
@media (max-width:820px){ .story-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.stars{ color:var(--gold); font-size:14px; margin-bottom:14px; letter-spacing:2px; }
.testi-card p{ font-size:14px; color:var(--ink-dim); margin-bottom:16px; font-style:italic; }
.testi-card span{ font-size:12px; font-weight:500; }
@media (max-width:820px){ .testi-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{ background:var(--deep); color:#fff; text-align:center; padding:clamp(60px,10vh,100px) 20px; }
.newsletter h2{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,40px); }
.newsletter p{ color:rgba(255,255,255,.6); margin:14px 0 30px; }
.newsletter-form{ display:flex; gap:10px; max-width:420px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.newsletter-form input{
  flex:1; min-width:200px; padding:14px 18px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:#fff; font-size:13px; outline:none;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.5); }
.newsletter-form .btn-primary{ background:var(--gold); color:#1c1c1a; }
.newsletter-form .btn-primary:hover{ background:var(--gold-dark); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ padding:70px 0 30px; border-top:1px solid var(--line); }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:50px; }
.footer-name{ font-family:var(--serif); font-weight:600; font-size:18px; display:block; }
.footer-tag{ font-size:11px; color:var(--ink-faint); letter-spacing:.1em; display:block; margin-top:4px; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-dim);
  transition:color .2s, background .2s, border-color .2s, transform .2s;
}
.footer-social a:hover{ color:#fff; transform:translateY(-2px); }
.footer-social .social-facebook:hover{ background:#1877f2; border-color:#1877f2; }
.footer-social .social-instagram:hover{ background:#e1306c; border-color:#e1306c; }
.footer-social .social-tiktok:hover{ background:#111; border-color:#111; }
.footer-social .social-whatsapp:hover{ background:#25d366; border-color:#25d366; }
.footer-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13px; color:var(--ink-dim); transition:color .25s; }
.footer-col a:hover{ color:var(--teal); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; align-items:center;
  font-size:12px; color:var(--ink-faint); padding-top:24px; border-top:1px solid var(--line);
}
.payments{ display:flex; gap:12px; font-size:20px; color:var(--ink-faint); }

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */
.breadcrumb{ padding:22px 0 0; font-size:12px; color:var(--ink-faint); display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--ink-faint); transition:color .2s; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb span:last-child{ color:var(--ink); }

.product-page{ padding:30px 0 clamp(60px,8vh,100px); }
.pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.pp-gallery{ position:sticky; top:100px; }
.pp-main-image{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:50px;
}
.pp-main-image img{ width:65%; filter-blend:normal; filter:drop-shadow(0 30px 45px rgba(28,28,26,.18)); }

.pp-info .eyebrow{ display:block; margin-bottom:8px; }
.pp-info h1{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,4vw,46px); margin-bottom:10px; }
.pp-rating{ font-size:13px; color:var(--gold-dark); margin-bottom:18px; }
.pp-rating span{ color:var(--ink-faint); margin-left:6px; }
.pp-desc{ font-size:14px; color:var(--ink-dim); line-height:1.85; margin-bottom:26px; max-width:52ch; }
.pp-row{ margin-bottom:20px; }
.pp-label{ display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.pp-price-row{ display:flex; align-items:center; justify-content:space-between; }
.pp-price{ font-family:var(--serif); font-size:26px; font-weight:600; }
#ppAdd{ margin-bottom:34px; }

.pp-accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:18px 0; background:none; border:none; font-size:14px; font-weight:500; color:var(--ink);
}
.acc-head i{ font-size:12px; color:var(--ink-faint); transition:transform .3s; }
.acc-item.open .acc-head i{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.acc-item.open .acc-body{ max-height:300px; }
.acc-body > *{ padding-bottom:20px; }
.notes-block{ display:flex; gap:8px; font-size:13px; color:var(--ink-dim); margin-bottom:6px; }
.notes-block b{ color:var(--ink); font-weight:500; min-width:90px; }
.acc-list{ display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink-dim); }
.acc-body p{ font-size:13px; color:var(--ink-dim); line-height:1.7; }

@media (max-width:820px){
  .pp-grid{ grid-template-columns:1fr; }
  .pp-gallery{ position:static; }
}

/* ==================== shared size / qty controls ==================== */
.size-options{ display:flex; gap:10px; flex-wrap:wrap; }
.size-options button{
  padding:9px 18px; border:1px solid var(--line); border-radius:30px; background:none;
  font-size:12px; color:var(--ink-dim); transition:all .2s;
}
.size-options button.active,.size-options button:hover{ border-color:var(--ink); color:var(--ink); background:var(--bg); }
.qty-stepper{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:30px; padding:6px 14px; width:fit-content; }
.qty-stepper button{ border:none; background:none; font-size:16px; width:20px; }

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.bag-overlay{
  position:fixed; inset:0; background:rgba(20,18,14,.5); z-index:410;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.bag-overlay.open{ opacity:1; visibility:visible; }
.bag-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:411;
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column;
}
.bag-drawer.open{ transform:translateX(0); }
.bag-header{ display:flex; justify-content:space-between; align-items:center; padding:24px 26px; border-bottom:1px solid var(--line); }
.bag-header h3{ font-family:var(--serif); font-weight:600; font-size:20px; }
.bag-close{ border:none; background:none; font-size:16px; color:var(--ink-faint); }
.bag-close:hover{ color:var(--ink); }
.bag-items{ flex:1; overflow-y:auto; padding:20px 26px; display:flex; flex-direction:column; gap:18px; }
.bag-empty{ color:var(--ink-faint); font-size:13px; text-align:center; margin-top:60px; }
.bag-item{ display:flex; gap:14px; align-items:center; }
.bag-item img{ width:56px; height:56px; object-fit:contain; background:var(--bg); border-radius:6px; padding:6px; }
.bag-item-info{ flex:1; }
.bag-item-info h5{ font-family:var(--serif); font-weight:600; font-size:15px; margin-bottom:2px; }
.bag-item-info span{ font-size:12px; color:var(--ink-faint); }
.bag-item-remove{ font-size:11px; color:var(--ink-faint); border:none; background:none; }
.bag-item-remove:hover{ color:var(--danger); }
.bag-footer{ padding:22px 26px; border-top:1px solid var(--line); }
.bag-total{ display:flex; justify-content:space-between; margin-bottom:16px; font-size:14px; font-weight:500; }

/* toast */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px);
  background:var(--ink); color:var(--on-ink); padding:14px 24px; border-radius:var(--radius);
  font-size:12px; letter-spacing:.03em; opacity:0; pointer-events:none; z-index:500;
  transition:opacity .35s, transform .35s;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ==========================================================================
   ALL FRAGRANCES PAGE
   ========================================================================== */
.fr-page{ padding-top:clamp(30px,5vh,50px); }
.fr-intro{ color:var(--ink-dim); font-size:14px; max-width:52ch; margin:14px auto 0; }
.fr-page[data-cols="5"] > .container,
.fr-page[data-cols="6"] > .container{ max-width:1440px; }
.fr-gender-bar{ margin-bottom:28px; }
.fr-gender-bar a{
  padding:10px 20px; border:1px solid var(--line); border-radius:30px;
  font-size:12px; letter-spacing:.04em; color:var(--ink-dim); transition:all .25s;
}
.fr-gender-bar a.active,.fr-gender-bar a:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

/* toolbar: result count + cards-per-row picker */
.fr-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:28px;
}
.fr-count{ font-size:13px; color:var(--ink-faint); letter-spacing:.04em; }
.fr-cols{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-faint); }
.fr-cols a{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--line); border-radius:var(--radius); color:var(--ink-dim); transition:all .2s;
}
.fr-cols a:hover{ border-color:var(--ink); color:var(--ink); }
.fr-cols a.active{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.fr-cols-icon{ display:grid; grid-template-columns:repeat(var(--n),1fr); gap:2px; width:22px; height:12px; }
.fr-cols-icon i{ background:currentColor; border-radius:1px; opacity:.8; }

/* the grid follows the chosen columns, then steps down on smaller screens */
.fr-grid{ grid-template-columns:repeat(var(--cols,4),1fr); }
.fr-grid[data-cols="3"]{ --cols:3; }
.fr-grid[data-cols="4"]{ --cols:4; }
.fr-grid[data-cols="5"]{ --cols:5; gap:16px; }
.fr-grid[data-cols="6"]{ --cols:6; gap:16px; }
@media (max-width:1200px){ .fr-grid[data-cols="5"],.fr-grid[data-cols="6"]{ --cols:4; } }
@media (max-width:960px){ .fr-grid[data-cols]{ --cols:2; gap:16px; } }
@media (max-width:600px){ .fr-grid[data-cols]{ --cols:2; gap:12px; } }

/* two compact cards per row on phones */
@media (max-width:600px){
  .product-media img{ padding:10px; }
  .product-body{ padding:12px 12px 14px; gap:4px; }
  .product-name{ font-size:15px !important; line-height:1.45; }
  .product-family{ font-size:10px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .product-price{ font-size:13px !important; }
  .product-rating{ font-size:10px; }
  .product-badge{ top:8px; font-size:9px !important; padding:4px 8px !important; }
  html[dir="rtl"] .product-badge{ right:8px; }
  .product-add{ width:30px; height:30px; font-size:11px; flex-shrink:0; }
  .product-quick{ display:none; }
  .fr-sizes{ gap:6px; margin-top:8px; }
  .fr-sizes button,
  html[dir="rtl"] .fr-sizes button{ padding:6px 4px; border-radius:10px; font-size:11px; line-height:1.4; }
  .fr-card .product-foot{ flex-wrap:wrap; gap:8px; }
  .fr-add,
  html[dir="rtl"] .fr-add{ width:100%; padding:9px 8px; font-size:12px; }
}
@media (max-width:600px){ .fr-cols{ display:none; } }

/* compact cards when 5–6 sit in a row */
.fr-grid[data-cols="5"] .product-media img,
.fr-grid[data-cols="6"] .product-media img{ padding:14px; }
.fr-grid[data-cols="5"] .product-body,
.fr-grid[data-cols="6"] .product-body{ padding:14px 12px 16px; }
.fr-grid[data-cols="5"] .product-name,
.fr-grid[data-cols="6"] .product-name{ font-size:17px; }
.fr-grid[data-cols="5"] .product-foot,
.fr-grid[data-cols="6"] .product-foot{ flex-wrap:wrap; gap:8px; }
.fr-grid[data-cols="5"] .fr-add,
.fr-grid[data-cols="6"] .fr-add{ width:100%; padding:9px 10px; }
.fr-grid[data-cols="6"] .fr-sizes{ gap:6px; }
.fr-grid[data-cols="6"] .fr-sizes button{ padding:7px 4px; font-size:11px; }

/* pagination */
.fr-pagination{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:48px; }
.fr-page-numbers{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.fr-page-num,.fr-page-link,.fr-page-dots{
  min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); border-radius:30px; font-size:13px; color:var(--ink-dim); transition:all .2s;
}
.fr-page-dots{ border-color:transparent; }
.fr-page-num:hover,.fr-page-link:hover{ border-color:var(--ink); color:var(--ink); }
.fr-page-num.active{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.fr-page-link.disabled{ opacity:.4; pointer-events:none; }
.fr-page-link i{ font-size:10px; }
.fr-card .product-media{ display:block; }
.fr-card .product-name a:hover{ color:var(--teal); }
.fr-sizes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.fr-sizes button{
  padding:8px 6px; border:1px solid var(--line); border-radius:30px; background:none;
  font-size:11px; color:var(--ink-dim); transition:all .2s;
}
.fr-sizes button:hover{ border-color:var(--ink); color:var(--ink); }
.fr-sizes button.active{ border-color:var(--ink); background:var(--ink); color:var(--on-ink); }
.fr-add{ padding:10px 18px; font-size:11px; }

/* ==========================================================================
   CHECKOUT MODAL
   ========================================================================== */
.co-overlay{
  position:fixed; inset:0; background:rgba(20,18,14,.5); z-index:420;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.co-overlay.open{ opacity:1; visibility:visible; }
.co-modal{
  position:fixed; top:50%; left:50%; z-index:421;
  width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 40px);
  background:var(--surface); border-radius:10px; box-shadow:0 30px 70px rgba(20,18,14,.25);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translate(-50%,-46%);
  transition:opacity .35s, visibility .35s, transform .4s var(--ease);
}
.co-modal.open{ opacity:1; visibility:visible; transform:translate(-50%,-50%); }
.co-header{ display:flex; justify-content:space-between; align-items:center; padding:20px 26px; border-bottom:1px solid var(--line); }
.co-header h3{ font-family:var(--serif); font-weight:600; font-size:22px; }
.co-form{ overflow-y:auto; padding:22px 26px 26px; }
.co-form fieldset{
  border:none; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:24px;
}
.co-form legend{
  grid-column:1/-1; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:12px;
}
.co-field{ grid-column:span 3; display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-dim); }
.co-full{ grid-column:1/-1; }
.co-third{ grid-column:span 2; }
.co-field input,.co-field select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); font-family:inherit; font-size:14px; color:var(--ink); outline:none;
  transition:border-color .2s, background .2s;
}
.co-field input:focus,.co-field select:focus{ border-color:var(--ink); background:var(--surface); }
.co-field.invalid input,.co-field.invalid select{ border-color:var(--danger); }
.co-error{ font-size:11px; color:var(--danger); min-height:0; }
.co-error:empty{ display:none; }
.co-summary{ border-top:1px solid var(--line); padding-top:16px; margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.co-line{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-dim); }
.co-total{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); padding-top:8px; border-top:1px dashed var(--line); }
@media (max-width:520px){
  .co-field{ grid-column:1/-1; }
  .co-third{ grid-column:span 2; }
  .co-header,.co-form{ padding-left:18px; padding-right:18px; }
}

/* ==========================================================================
   BUNDLES
   ========================================================================== */
/* item bottles side by side when a bundle has no group photo */
.bd-collage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.bd-collage img{ flex:1 1 0; min-width:0; max-height:100%; object-fit:contain; margin:0 -4%; padding:0 !important; }
.product-media .bd-collage img{ transition:transform .5s var(--ease); }
.product-card:hover .product-media .bd-collage img{ transform:none; }
.product-card:hover .product-media .bd-collage{ transform:scale(1.04); transition:transform .5s var(--ease); }
.bd-card-items{ font-size:12px; color:var(--ink-dim); }
.bd-old{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-faint); text-decoration:line-through; margin-left:8px; }
s.bd-old{ text-decoration:line-through; }

/* detail page gallery */
.bd-main{ overflow:hidden; }
.bd-main > img{ width:100%; height:100%; object-fit:contain; }
.bd-main > img:not([style*="filter:none"]){ width:65%; }
.bd-main .bd-collage{ padding:0; }
.bd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.bd-thumbs button{
  width:72px; height:72px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:6px; overflow:hidden; transition:border-color .2s;
}
.bd-thumbs button:hover,.bd-thumbs button.active{ border-color:var(--ink); }
.bd-thumbs img{ width:100%; height:100%; object-fit:contain; }
.bd-thumbs .bd-collage{ padding:0; }

.bd-contents{ display:flex; flex-direction:column; gap:8px; }
.bd-contents li{ font-size:14px; display:flex; gap:10px; align-items:baseline; }
.bd-contents i{ color:var(--teal); font-size:12px; }
.bd-contents span{ color:var(--ink-faint); font-size:12px; }
.bd-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 0; }
.bd-save{ margin-left:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--teal); padding:3px 8px; border-radius:20px; }
.bd-save:empty{ display:none; }
#bdAdd{ margin-bottom:10px; }

/* what's inside */
.bd-inside{ padding-top:0; }
.bd-items{ display:flex; flex-direction:column; gap:24px; }
.bd-item{
  display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:clamp(20px,4vw,50px); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:clamp(18px,3vw,30px);
}
.bd-item-media{ aspect-ratio:1/1; background:var(--bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bd-item-media img{ width:100%; height:100%; object-fit:contain; }
.bd-item-media img:not([style*="filter:none"]){ width:70%; }
.bd-item-body h3{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,30px); margin:6px 0 4px; }
.bd-item-size{ display:inline-block; font-size:11px; letter-spacing:.06em; border:1px solid var(--line); border-radius:20px; padding:4px 12px; color:var(--ink-dim); margin-bottom:14px; }
.bd-item-body p{ font-size:14px; color:var(--ink-dim); line-height:1.8; margin-bottom:16px; max-width:56ch; }
.bd-item-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; font-size:13px; color:var(--ink-dim); }
.bd-item-notes b{ display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-bottom:4px; }
.bd-item-link{ font-size:12px; letter-spacing:.04em; color:var(--teal); }
.bd-item-link i{ font-size:10px; margin-left:4px; }
@media (max-width:700px){
  .bd-item{ grid-template-columns:1fr; }
  .bd-item-notes{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PRODUCT GALLERY + LIGHTBOX
   ========================================================================== */
.pp-main-image{ overflow:hidden; }
.pp-main-image #ppImage{ cursor:zoom-in; }
.pp-main-image #ppImage.is-photo{ width:100%; height:100%; object-fit:contain; filter:none; }
.pp-nav,.pp-zoom{
  position:absolute; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--glass); color:var(--ink); font-size:13px;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, opacity .2s;
}
.pp-nav:hover,.pp-zoom:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.pp-nav{ top:50%; transform:translateY(-50%); opacity:0; }
.pp-prev{ left:14px; }
.pp-next{ right:14px; }
.pp-main-image:hover .pp-nav{ opacity:1; }
.pp-zoom{ top:14px; right:14px; width:36px; height:36px; font-size:12px; }
.pp-counter{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.08em; color:var(--ink-dim); background:var(--glass);
  padding:3px 10px; border-radius:20px;
}
.pp-main-image.single .pp-nav,.pp-main-image.single .pp-counter{ display:none; }
@media (hover:none){ .pp-nav{ opacity:1; } }
.pp-thumbs button{ width:80px; height:80px; }
.pp-thumbs img{ width:100%; height:100%; object-fit:cover; }

.lightbox{
  position:fixed; inset:0; z-index:600; background:rgba(14,13,11,.94);
  display:flex; align-items:center; justify-content:center; padding:60px 70px;
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; }
.lb-close,.lb-nav{
  position:absolute; border:none; background:rgba(255,255,255,.1); color:#fff;
  width:46px; height:46px; border-radius:50%; font-size:16px; transition:background .2s;
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.25); }
.lb-close{ top:18px; right:18px; }
.lb-nav{ top:50%; transform:translateY(-50%); }
.lb-prev{ left:14px; }
.lb-next{ right:14px; }
.lb-counter{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:12px; letter-spacing:.1em; }
.lightbox.single .lb-nav,.lightbox.single .lb-counter{ display:none; }
@media (max-width:600px){
  .lightbox{ padding:60px 12px; }
  .lb-nav{ top:auto; bottom:12px; transform:none; }
  .lb-counter{ bottom:26px; }
}

/* ==========================================================================
   ARABIC / RTL
   Arabic letters must stay joined, so letter-spacing is removed; physical
   left/right positions from the original design are mirrored.
   ========================================================================== */
html[dir="rtl"] body{ line-height:1.7; }
html[dir="rtl"] body *{ letter-spacing:normal !important; }
html[dir="rtl"] .brand-name,
html[dir="rtl"] .footer-name{ letter-spacing:.06em !important; }

/* Arabic reads better slightly larger than the tiny uppercase Latin labels */
html[dir="rtl"] .eyebrow{ font-size:13px; }
html[dir="rtl"] .announce{ font-size:12px; }
@media (max-width:600px){
  html[dir="rtl"] .announce{ font-size:11px; padding:7px 12px; line-height:1.6; }
}
html[dir="rtl"] .product-family{ font-size:12px; }
html[dir="rtl"] .product-badge{ font-size:11px; padding:5px 12px; }
html[dir="rtl"] .product-quick,
html[dir="rtl"] .product-rating,
html[dir="rtl"] .pp-label,
html[dir="rtl"] .co-form legend,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .bd-item-notes b,
html[dir="rtl"] .fr-sizes button,
html[dir="rtl"] .fr-add{ font-size:12px; }
html[dir="rtl"] .main-nav a,
html[dir="rtl"] .filter-bar button,
html[dir="rtl"] .size-options button{ font-size:14px; }
html[dir="rtl"] .testi-card p{ font-style:normal; }

/* header / drawer */
html[dir="rtl"] .cart-badge{ right:auto; left:2px; }
html[dir="rtl"] .bag-drawer{ right:auto; left:0; border-left:none; border-right:1px solid var(--line); transform:translateX(-100%); }
html[dir="rtl"] .bag-drawer.open{ transform:translateX(0); }

/* trust strip dividers */
html[dir="rtl"] .trust-item{ border-right:none; border-left:1px solid var(--line); }
html[dir="rtl"] .trust-item:last-child{ border-left:none; }
@media (max-width:700px){
  html[dir="rtl"] .trust-item{ border-left:1px solid var(--line); }
}

/* cards / prices */
html[dir="rtl"] .product-badge{ left:auto; right:14px; }
html[dir="rtl"] .product-rating span,
html[dir="rtl"] .pp-rating span{ margin-left:0; margin-right:6px; }
html[dir="rtl"] .bd-old{ margin-left:0; margin-right:8px; }
html[dir="rtl"] .bd-save{ margin-left:0; margin-right:10px; }
html[dir="rtl"] .bd-item-link i{ margin-left:0; margin-right:4px; }

/* product gallery + lightbox: "previous" sits on the right in Arabic */
html[dir="rtl"] .pp-prev{ left:auto; right:14px; }
html[dir="rtl"] .pp-next{ right:auto; left:14px; }
html[dir="rtl"] .pp-zoom{ right:auto; left:14px; }
html[dir="rtl"] .lb-close{ right:auto; left:18px; }
html[dir="rtl"] .lb-prev{ left:auto; right:14px; }
html[dir="rtl"] .lb-next{ right:auto; left:14px; }

/* ==========================================================================
   PRODUCT PAGE — extended layout (inspired-by, discount, pyramid, tabs, sticky bar)
   ========================================================================== */
.pp-zoom-hint{ margin-top:10px; font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:6px; }
.pp-sale-badge{
  position:absolute; top:14px; left:64px; z-index:3; background:#b3412f; color:#fff;
  font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px;
}
html[dir="rtl"] .pp-sale-badge{ left:64px; right:auto; }
.pp-sale-badge[hidden]{ display:none; }

.pp-inspired{ font-size:14px; color:var(--ink-dim); margin:-2px 0 10px; }
.pp-inspired strong{ color:var(--ink); font-weight:600; }
a.pp-rating{ display:inline-block; }
a.pp-rating:hover span{ color:var(--ink); text-decoration:underline; }
.pp-tagline{ font-family:var(--serif); font-size:20px; color:var(--teal); margin-bottom:18px; }

.pp-price-block{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-bottom:14px; }
.pp-price-block .pp-price{ font-size:30px; }
.pp-old{ font-size:16px; color:var(--ink-faint); }
.pp-old:empty,.pp-discount:empty{ display:none; }
.pp-discount{ font-size:12px; font-weight:600; color:#fff; background:var(--teal); padding:3px 10px; border-radius:20px; }

.pp-sold{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;
  font-size:13px; color:var(--danger); background:var(--danger-soft); padding:6px 12px; border-radius:20px;
}

.pp-label b{ color:var(--ink); font-weight:600; }
.pp-buy-row{ display:flex; gap:12px; align-items:stretch; margin-bottom:12px; }
.pp-buy-row .qty-stepper{ padding:6px 16px; }
.pp-buy-row .btn{ flex:1; }
#ppAdd{ margin-bottom:0; }
#ppBuyNow{ margin-bottom:22px; }

.pp-trust{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-bottom:26px;
  padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.pp-trust li{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); }
.pp-trust i{ color:var(--gold-dark); width:18px; text-align:center; }
@media (max-width:520px){ .pp-trust{ grid-template-columns:1fr; } }

.acc-head > span{ display:flex; align-items:center; gap:10px; }
.acc-head > span i{ font-size:14px; color:var(--gold-dark); transform:none !important; }
.acc-item.open .acc-body{ max-height:600px; }

/* fragrance pyramid */
.pyramid{ display:flex; flex-direction:column; gap:14px; }
.pyramid-tier b{ display:block; font-size:12px; color:var(--ink-faint); font-weight:500; margin-bottom:8px; }
.note-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.note-chip{
  font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  padding:6px 12px; border-radius:20px;
}

/* longevity / sillage meters */
.perf{ display:flex; flex-direction:column; gap:12px; }
.perf-row{ display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:12px; font-size:13px; }
.perf-label{ color:var(--ink-dim); }
.perf-meter{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.perf-meter i{ height:6px; border-radius:6px; background:var(--line); }
.perf-meter i.on{ background:var(--gold); }
.perf-value{ color:var(--ink); font-weight:500; min-width:60px; }

/* bought together */
.pp-together{ padding-top:0; }

/* tabs */
.pp-tabs-section{ padding-top:0; }
.pp-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:28px; overflow-x:auto; }
.pp-tabs button{
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:14px 18px; font-size:15px; color:var(--ink-dim); white-space:nowrap; transition:color .2s, border-color .2s;
}
.pp-tabs button:hover{ color:var(--ink); }
.pp-tabs button.active{ color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.pp-tab-panel{ display:none; }
.pp-tab-panel.active{ display:block; }
.pp-long-desc{ font-size:15px; color:var(--ink-dim); line-height:2; max-width:75ch; margin-bottom:20px; }
.pp-notes-list{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-dim); }
.pp-notes-list b{ color:var(--ink); }
.pp-info-table{ width:100%; max-width:640px; border-collapse:collapse; font-size:14px; }
.pp-info-table th,.pp-info-table td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:start; }
.pp-info-table th{ width:180px; color:var(--ink-faint); font-weight:500; background:var(--surface); }
.pp-reviews-summary{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; font-size:13px; color:var(--ink-dim); }
.pp-reviews-summary strong{ font-family:var(--serif); font-size:36px; color:var(--ink); }
.pp-reviews-summary .stars{ margin:0; }
.pp-empty{ color:var(--ink-faint); font-size:14px; }

/* sticky add-to-bag bar */
.pp-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; align-items:center; gap:14px; padding:12px clamp(16px,4vw,48px);
  background:var(--glass-strong); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(28,28,26,.08);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.pp-sticky.show{ transform:translateY(0); }
.pp-sticky img{ width:46px; height:46px; object-fit:contain; background:var(--bg); border-radius:6px; padding:4px; }
.pp-sticky-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pp-sticky-info strong{ font-family:var(--serif); font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-sticky-info > span{ font-size:12px; color:var(--ink-dim); }
.pp-sticky .btn{ padding:12px 22px; }

/* ==========================================================================
   ACCORDS (Fragrantica-style bars) + SEASONS / TIME OF DAY
   ========================================================================== */
.accords{ margin-bottom:26px; }
.accords-title{ font-family:var(--serif); font-weight:600; font-size:20px; margin-bottom:12px; }
.accord-bars{ display:flex; flex-direction:column; gap:6px; }
.accord-bar{
  min-height:30px; display:flex; align-items:center; padding:4px 14px;
  font-size:13px; font-weight:500; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  transform-origin:right center; animation:accordGrow .7s var(--ease) both;
}
html[dir="ltr"] .accord-bar{ transform-origin:left center; }
@keyframes accordGrow{ from{ transform:scaleX(.2); opacity:0; } to{ transform:scaleX(1); opacity:1; } }
.accord-bar:nth-child(2){ animation-delay:.05s; }
.accord-bar:nth-child(3){ animation-delay:.1s; }
.accord-bar:nth-child(4){ animation-delay:.15s; }
.accord-bar:nth-child(5){ animation-delay:.2s; }
.accord-bar:nth-child(n+6){ animation-delay:.25s; }
@media (prefers-reduced-motion:reduce){ .accord-bar{ animation:none; } }

.usage-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px; }
.usage-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.usage-item i{ font-size:20px; color:var(--usage-color); opacity:.45; transition:opacity .2s; }
.usage-item.is-strong i{ opacity:1; }
.usage-label{ font-size:12px; color:var(--ink-dim); }
.usage-meter{ width:100%; height:5px; border-radius:5px; background:var(--line); overflow:hidden; }
.usage-meter span{ display:block; height:100%; border-radius:5px; background:var(--usage-color); }
@media (max-width:520px){ .usage-grid{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   FRAGRANCE TYPES (home) + TYPE FILTER
   ========================================================================== */
.types-section{ padding-bottom:0; }
.types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .types-grid{ grid-template-columns:repeat(2,1fr); } }
.type-card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:26px 16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.type-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--type-color);
}
.type-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--type-color); }
.type-visual{
  width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--type-color) 14%, var(--surface)); color:var(--type-color); font-size:26px;
  margin-bottom:6px; overflow:hidden;
}
.type-visual img{ width:100%; height:100%; object-fit:cover; }
.type-name{ font-family:var(--serif); font-weight:600; font-size:20px; }
.type-desc{ font-size:12px; color:var(--ink-dim); line-height:1.6; }
.type-count{ font-size:11px; color:var(--ink-faint); margin-top:2px; }

.fr-type-bar{ margin-bottom:16px; }
.fr-type-bar a{
  padding:8px 16px; border:1px solid var(--line); border-radius:30px; font-size:13px; color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:6px; transition:all .2s;
}
.fr-type-bar a i{ color:var(--type-color); }
.fr-type-bar a:hover,.fr-type-bar a.active{ border-color:var(--ink); color:var(--ink); background:var(--surface); }
.fr-type-bar a.active{ box-shadow:inset 0 -2px 0 var(--type-color, var(--ink)); }

/* ==========================================================================
   FRAGRANCE FINDER QUIZ
   ========================================================================== */
.finder-section{ background:linear-gradient(180deg, var(--bg), var(--finder-tint)); }
.finder{
  max-width:760px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:clamp(22px,4vw,40px); box-shadow:var(--shadow);
}
.finder-progress{ height:4px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:26px; }
.finder-progress span{ display:block; height:100%; width:0; background:var(--gold); transition:width .4s var(--ease); }
.finder:not(.is-stepped) .finder-progress{ display:none; }
.finder-step{ border:none; margin-bottom:26px; }
.finder.is-stepped .finder-step{ display:none; margin-bottom:0; }
.finder.is-stepped .finder-step.active{ display:block; animation:finderIn .35s var(--ease); }
@keyframes finderIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.finder-step legend{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,28px); margin-bottom:18px; }
.finder-step legend small{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-faint); }
.finder-step-count{ display:block; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--gold-dark); margin-bottom:6px; }
.finder-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px; }
.finder-option{ cursor:pointer; position:relative; }
.finder-option input{ position:absolute; opacity:0; pointer-events:none; }
.finder-option-body{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:110px; padding:18px 12px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg);
  font-size:14px; font-weight:500; color:var(--ink-dim); text-align:center;
  transition:border-color .2s, background .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.finder-option .finder-option-icon{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1;
  font-size:20px; color:var(--option-color, var(--gold-dark));
  background:color-mix(in srgb, var(--option-color, var(--gold)) 12%, transparent); transition:transform .2s var(--ease);
}
.finder-option:hover .finder-option-body{ border-color:color-mix(in srgb, var(--option-color, var(--gold)) 55%, var(--line)); color:var(--ink); transform:translateY(-2px); }
.finder-option:hover .finder-option-icon{ transform:scale(1.06); }
.finder-option input:checked + .finder-option-body{
  border-color:var(--option-color, var(--gold)); color:var(--ink); font-weight:600;
  background:color-mix(in srgb, var(--option-color, var(--gold)) 8%, var(--surface));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--option-color, var(--gold)) 20%, transparent);
}
.finder-check{
  position:absolute; top:8px; inset-inline-end:8px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff;
  background:var(--option-color, var(--gold)); opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s var(--ease);
}
.finder-option input:checked + .finder-option-body .finder-check{ opacity:1; transform:scale(1); }
.finder-option input:focus-visible + .finder-option-body{ outline:2px solid var(--ink); outline-offset:2px; }

/* step navigation: quiet "back" link on one side, pill action on the other */
.finder-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
}
.finder:not(.is-stepped) .finder-nav{ display:none; }
.finder-back{
  display:inline-flex; align-items:center; gap:8px; padding:10px 4px; border:none; background:none;
  font-size:14px; color:var(--ink-dim); transition:color .2s, gap .2s;
}
.finder-back:hover{ color:var(--ink); gap:12px; }
.finder-back i{ font-size:12px; }
.finder-next{ margin-inline-start:auto; border-radius:30px; padding:12px 26px; font-size:14px; }
.finder-next i{ font-size:12px; transition:transform .2s var(--ease); }
.finder-next:hover i{ transform:translateX(-3px); }
.btn-ghost.finder-next{ border-color:var(--line); color:var(--ink-dim); }
.btn-ghost.finder-next:hover{ border-color:var(--ink); background:var(--ink); color:var(--on-ink); }
.finder-submit{ text-align:center; margin-top:10px; }
.finder.is-stepped .finder-submit{ display:none; }
.finder-submit .btn{ min-width:260px; border-radius:30px; }
@media (max-width:520px){
  .finder-options{ grid-template-columns:repeat(2, 1fr); }
  .finder-next{ padding:12px 20px; }
}

/* results */
.finder-summary{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.finder-result{ display:flex; flex-direction:column; gap:10px; }
.finder-match{ display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:28px; }
.finder-best{ font-size:12px; font-weight:600; color:var(--gold-dark); display:flex; align-items:center; gap:6px; }
.finder-percent{ margin-inline-start:auto; font-size:13px; font-weight:600; color:#fff; background:var(--teal); padding:4px 12px; border-radius:20px; }
.finder-result.is-top .product-card{ border-color:var(--gold); box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.finder-reasons{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-dim); padding:0 4px; }
.finder-reasons i{ color:var(--teal); font-size:11px; margin-inline-end:4px; }
.finder-again{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:40px; }