/* ═══════════════════════════════════════════════════════════════
   Jonooban — shared stylesheet
   Font stack: Gandom (display) · Vazirmatn (UI, self-hosted)
   ═══════════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@font-face {
  font-family: 'Gandom';
  src: url('Gandom.woff2') format('woff2'), url('Gandom.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Vazirmatn v16 — variable font, arabic subset */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Vazirmatn — latin subset */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display (variable, Latin only) — big headings / brand name */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/PlayfairDisplay-var.woff2?v=1787049423') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond (variable, Latin only) — subtitles / emphasis */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/CormorantGaramond-var.woff2?v=1787049423') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('fonts/CormorantGaramond-italic-var.woff2?v=1787049423') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alex Brush';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/AlexBrush-Regular.woff2?v=1787049423') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Patrick Hand -- sand-writing testimonial text (final-scrub.js). Simple, legible,
   unconnected print-style handwriting, picked over Alex Brush specifically because it
   isn't a connected script: Alex Brush's ccmp table silently drops the apostrophe glyph
   mid-word, which broke real testimonial copy ("I've"). */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/PatrickHand-Regular.woff2?v=1788177128') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── TOKENS ── */
:root {
  --cream:       #FBE8C9;
  --cream-dark:  #F0DCB4;
  --cream-light: #FAEEC2;
  --green:       #A2372F;
  --rust:        #A2372F;
  --green-deep:  #7C2A24;
  --green-mid:   #8B4A38;
  --sage:        #A3D3BC;
  --sage-light:  #D8ECE0;
  --gold:        #AE6F49;
  --text:        #5B4A40;
  --muted:       #8A7060;
  --border:      #E8D6B8;
  --white:       #ffffff;
  --pad-x:       120px;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--cream);
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
}
.classic { font-family: 'Gandom', 'Vazirmatn', serif; }
img { display: block; }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; }
.d4 { transition-delay: 0.45s; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
header {
  background: rgba(251,232,201,0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  padding: 0 48px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 110px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200; height: 96px;
  transition: box-shadow 0.3s;
}
header.scrolled { box-shadow: 0 2px 28px rgba(89,12,6,0.07); }

.logo { display: flex; align-items: center; text-decoration: none; justify-self: start; }
.logo-img { height: 66px; width: auto; display: block; }

nav { display: flex; }
nav ul { display: flex; gap: 48px; list-style: none; }
nav a {
  font-size: 18px; font-weight: 500; color: var(--text);
  text-decoration: none; transition: color 0.2s;
  position: relative; padding-bottom: 4px;
}
nav a::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 0; height: 1.5px; background: var(--green); transition: width 0.25s;
}
nav a:hover::after, nav a.active::after { width: 100%; }
nav a:hover, nav a.active { color: var(--green); }

.header-actions { display: flex; gap: 30px; align-items: center; justify-self: end; }

.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); display: flex; align-items: center;
  transition: color 0.2s; padding: 6px;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--green); }
.header-products-btn { display: none; }

.search-wrap { position: relative; display: flex; align-items: center; }
.search-input {
  width: 0; opacity: 0; padding: 0; border: none; margin: 0; height: 34px;
  font-family: 'Vazirmatn', sans-serif; font-size: 13px; color: var(--text);
  background: var(--cream-light); border-radius: 8px; pointer-events: none;
  transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease;
}
.search-wrap.open .search-input {
  width: 190px; opacity: 1; padding: 0 14px; pointer-events: auto;
  border: 1px solid var(--border); margin-inline-end: 8px;
}

.cart-wrap { position: relative; }
.cart-badge {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rust); color: var(--cream);
  font-size: 13px; line-height: 1; display: none; align-items: center;
  justify-content: center; font-weight: 700;
}

/* Language dropdown */
.lang-wrap { position: relative; margin-inline-start: 34px; }
.lang-btn {
  font-size: 15px; letter-spacing: 2px; color: var(--muted);
  border: 1px solid var(--border); padding: 11px 22px;
  font-family: 'Vazirmatn', sans-serif; background: none;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.lang-btn:hover { border-color: var(--green); color: var(--green); }
.lang-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease; }
.lang-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--cream-light); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0; z-index: 300;
}
.lang-dropdown.open { max-height: 180px; opacity: 1; }
.lang-option {
  display: block; width: 100%; padding: 11px 16px;
  font-size: 13px; text-align: right; background: none; border: none;
  cursor: pointer; color: var(--text); text-decoration: none;
  font-family: 'Vazirmatn', sans-serif;
  transition: background 0.15s, color 0.15s;
}
.lang-option:hover { background: var(--cream-dark); color: var(--green); }
.lang-option.active { color: var(--green); font-weight: 500; }
html[dir="ltr"] .lang-option { text-align: left; }

.nav-lang-item { display: none; }

/* Products nav hover dropdown */
.nav-has-dropdown { position: relative; }
.nav-has-dropdown > a { display: inline-flex; align-items: center; gap: 3px; }
.nav-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease; }
.nav-has-dropdown:hover .nav-arrow, .nav-has-dropdown:focus-within .nav-arrow { transform: rotate(180deg); }
.nav-dropdown {
  display: block; position: absolute; top: 100%; right: 0; min-width: 190px;
  background: var(--cream-light); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  list-style: none; padding: 6px 0; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 300;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown li { list-style: none; }
.nav-dropdown a {
  display: block; padding: 10px 18px; font-size: 14px; font-weight: 400;
  white-space: nowrap; color: var(--text);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--cream-dark); color: var(--green); }
html[dir="ltr"] .nav-dropdown { right: auto; left: 0; }

/* Hamburger (mobile) */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; transition: color 0.2s;
}
.nav-toggle:hover { color: var(--green); }
.nav-toggle svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════
   BUTTONS (shared)
══════════════════════════════════════ */
.btn-primary {
  padding: 16px 36px; background: var(--rust); color: var(--cream);
  font-size: 13px; font-family: 'Vazirmatn', sans-serif;
  font-weight: 500; letter-spacing: 1px;
  border: 2px solid var(--rust); cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); }

.btn-secondary {
  padding: 16px 36px; background: transparent; color: var(--green);
  font-size: 13px; font-family: 'Vazirmatn', sans-serif; letter-spacing: 1px;
  border: 2px solid var(--green); cursor: pointer;
  transition: background 0.25s, color 0.25s;
  text-decoration: none; display: inline-block;
}
.btn-secondary:hover { background: var(--green); color: var(--cream); }

.btn-ghost-light {
  display: inline-block; padding: 14px 32px;
  background: transparent; color: var(--cream);
  font-size: 12px; font-family: 'Vazirmatn', sans-serif;
  letter-spacing: 2px; border: 1.5px solid rgba(251,232,201,0.4);
  cursor: pointer; transition: all 0.25s; text-decoration: none;
}
.btn-ghost-light:hover { border-color: var(--cream); background: rgba(251,232,201,0.08); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  background: var(--cream);
  padding: 72px var(--pad-x) 32px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 52px; margin-bottom: 52px;
}
.footer-logo-name { margin-bottom: 14px; display: block; }
.footer-logo-name img, .footer-logo img { height: 44px; width: auto; }
.social-row, .social-icons { display: flex; gap: 12px; margin-top: 18px; }
.soc, .social-icon {
  width: 44px; height: 44px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--green);
  text-decoration: none; transition: all 0.22s;
}
.soc svg { width: 22px; height: 22px; }
.soc:hover, .social-icon:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.footer-col h4, .footer-col h5 {
  font-size: 10px; letter-spacing: 3px; color: var(--muted);
  margin-bottom: 20px; font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col ul li { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.footer-col ul li a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 24px;
  font-size: 11px; color: var(--muted);
  display: flex; justify-content: space-between;
}

/* ══════════════════════════════════════
   WHY DATES (infographic, injected by why-dates.js)
══════════════════════════════════════ */
.why-dates-section { padding: 64px var(--pad-x); text-align: center; background: #A3D3BC; }
.why-dates-wrap {
  width: 100%; max-width: 1000px; margin: 0 auto; direction: ltr;
  aspect-ratio: 1536 / 1024; container-type: size; overflow: hidden;
  border-radius: 12px;
}
.why-dates-canvas {
  position: relative; width: 1536px; height: 1024px; background: #A3D3BC;
  font-family: 'Vazirmatn', sans-serif; direction: ltr;
  /* Independent X/Y scale (not a single scale()) -- positionWhyDatesRing() (final-scrub.js)
     can size the wrap wider than its height-derived 1536:1024 ratio on a short/wide canvas,
     spreading the ring's icons further from the basket using otherwise-unused side space.
     container-type:size (not just inline-size) is what makes cqb available so height can
     drive its own axis instead of both axes following the width. Each .wd-item then
     counter-scales itself on X (see final-scrub.js) so icons/text/cards stay uniform even
     when cqi/cqb diverge -- this transform only spreads their POSITION apart. */
  transform: scaleX(calc(100cqi / 1536px)) scaleY(calc(100cqb / 1024px)); transform-origin: top left;
}
/* ── WHY DATES ring items (onImage overlay only -- gold icon + label, with a frosted
   glass card that opens on hover. All sizes are in the ring's own authored 1536x1024
   space; .why-dates-canvas scales the whole thing down to the real canvas. */
.wd-item {
  position: absolute; color: #F3D9A4; pointer-events: auto; /* the wrap sets pointer-events:none -- only these items take the mouse */
  font-family: 'Vazirmatn', sans-serif;
}
#wd-heading { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1); }
.why-dates-overlay.is-interactive #wd-heading { opacity: 1; transform: translateY(0); }
/* back-out easing (slight overshoot) reads as a small "pop" instead of a flat fade --
   staggered per item via --wd-delay (set inline by why-dates-discovery.js). Animated on
   the icon/label children, not .wd-item itself, since positionWhyDatesRing() (final-scrub.js)
   sets .wd-item's own inline transform (counter-scale) directly -- animating a second
   transform there would fight that. */
.wd-item .wd-icon, .wd-item .wd-label, .wd-item .wd-title-mobile {
  opacity: 0; transition: opacity 0.55s cubic-bezier(.34,1.56,.64,1) var(--wd-delay, 0s), transform 0.55s cubic-bezier(.34,1.56,.64,1) var(--wd-delay, 0s);
}
.wd-item .wd-icon { transform: scale(0.7); }
.wd-item .wd-label { transform: translateY(-50%) translateY(10px); } /* translateY(-50%) is .wd-label's own resting centering, kept alongside the entrance offset */
.wd-item .wd-title-mobile { transform: translateY(10px); }
.why-dates-overlay.is-interactive .wd-item .wd-icon { opacity: 1; transform: scale(1); }
.why-dates-overlay.is-interactive .wd-item .wd-label { opacity: 1; transform: translateY(-50%) translateY(0); }
.why-dates-overlay.is-interactive .wd-item .wd-title-mobile { opacity: 1; transform: translateY(0); }
.why-dates-stack .stack-item { opacity: 0; transform: translateY(10px) scale(0.94); transition: opacity 0.5s cubic-bezier(.34,1.56,.64,1) var(--wd-delay, 0s), transform 0.5s cubic-bezier(.34,1.56,.64,1) var(--wd-delay, 0s); }
.why-dates-overlay.is-interactive .why-dates-stack .stack-item { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  #wd-heading, .wd-item .wd-icon, .why-dates-stack .stack-item { transition: none; opacity: 1; transform: none; }
  .wd-item .wd-label { transition: none; opacity: 1; transform: translateY(-50%); }
}
.wd-item:hover { z-index: 20; } /* the open card must sit over its neighbours, not under them */
.wd-icon { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(243,217,164,0.45)); }
.wd-icon svg { width: 100%; height: 100%; display: block; }
.wd-label {
  position: absolute; top: 50%;
  display: flex; flex-direction: column; gap: 5px;
  text-shadow: 0 2px 12px rgba(10,30,25,0.65);
}
.wd-title { font-size: 29px; font-weight: 500; line-height: 1.15; letter-spacing: 0.5px; color: #FBF1DC; }
.wd-learn { font-size: 22px; font-weight: 400; color: #E8B45F; white-space: nowrap; }
.wd-card {
  position: absolute; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 32px; border-radius: 22px; text-align: left;
  background: rgba(60,40,24,0.34); border: 1px solid rgba(251,241,220,0.28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(20,10,6,0.45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.wd-item:hover .wd-card, .wd-item:focus-within .wd-card { opacity: 1; visibility: visible; transform: translateY(0); }
.wd-card-title {
  font-family: 'Cormorant Garamond', 'Gandom', serif; font-size: 30px; font-weight: 500;
  letter-spacing: 1px; color: #FBF1DC;
}
.wd-card-body { font-size: 21px; line-height: 1.65; color: rgba(251,241,220,0.9); }
@media (prefers-reduced-motion: reduce) {
  .wd-card { transition: none; }
}
/* Mobile's reduced-point row (why-dates-discovery.js, MOBILE branch) -- icon + short
   label stacked in normal flow, no side-hung .wd-label and no .wd-card: there's no room
   to hang a label sideways in a tight row, and hover cards don't work on touch anyway
   (same reasoning as the floating-contact fix). */
.wd-item-mobile { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wd-item-mobile .wd-icon { filter: drop-shadow(0 0 8px rgba(243,217,164,0.4)); }
.wd-mobile-arc { pointer-events: none; }
.wd-title-mobile {
  /* width:100% -- .wd-item-mobile's align-items:center (needed to center the icon, which
     IS meant to shrink to its own square) otherwise leaves this span at its shrink-to-fit
     content width too, i.e. unwrapped and free to run past its column into its neighbours'. */
  width: 100%; font-size: 24px; font-weight: 600; line-height: 1.25; text-align: center;
  color: #FBF1DC; text-shadow: 0 2px 10px rgba(10,30,25,0.65);
}

.why-dates-section .btn-ghost-light {
  display: inline-block; margin: 40px 0 0; color: var(--green); border-color: var(--green);
  font-size: 15px; font-weight: 700; padding: 16px 38px;
}
.why-dates-section .btn-ghost-light:hover { background: var(--rust); color: var(--cream); }

/* ══════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1300px) {
  header { column-gap: 28px; }
}

@media (max-width: 1100px) {
  :root { --pad-x: 64px; }
  nav ul { gap: 28px; }
  header { column-gap: 16px; }
  .hero-title { font-size: 60px; }
  .hero-italic { font-size: 52px; }
}

@media (max-width: 1000px) {
  :root { --pad-x: 32px; }

  /* Header — collapse nav */
  header { height: 72px !important; display: flex !important; justify-content: space-between !important; column-gap: 12px !important; padding: 0 20px !important; }
  nav { display: none; position: fixed; top: 72px; right: 0; bottom: 0; left: 0; height: calc(100vh - 72px); z-index: 199; overflow-y: auto; }
  nav.open {
    display: flex; flex-direction: column;
    background: var(--cream-light); border-top: 1px solid var(--border);
    padding: 24px 32px; gap: 0;
  }
  nav.open ul { flex-direction: column; gap: 0; }
  nav a {
    display: block; padding: 16px 0;
    font-size: 18px; border-bottom: 1px solid var(--border);
  }
  nav a::after { display: none; }
  /* Products/Language sub-dropdowns: desktop reveals .nav-dropdown on :hover, which never
     fires on touch -- on mobile it's an explicit is-open toggle instead (see layout.js),
     and shown inline/indented rather than desktop's floating absolute box, since it needs
     to sit in normal flow inside the vertical mobile menu. */
  .nav-has-dropdown > a, .nav-has-dropdown > button.nav-lang-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
    padding: 16px 0; font-size: 18px; font-family: 'Vazirmatn', sans-serif; color: var(--text);
    cursor: pointer; text-align: inherit;
  }
  .nav-dropdown { display: none; position: static; list-style: none; opacity: 1; visibility: visible; transform: none; background: none; border: none; box-shadow: none; padding: 0; margin: 0; }
  .nav-has-dropdown.is-open > .nav-dropdown { display: block; }
  .nav-has-dropdown.is-open .nav-arrow { transform: rotate(180deg); }
  .nav-dropdown a {
    display: block; padding: 12px 0 12px 20px; font-size: 15px; color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .nav-toggle { display: flex; }
  .lang-wrap { display: none; }
  .nav-lang-item { display: block; }
  /* Globe icon's size comes from SVG_GLOBE's own width/height attributes (layout.js),
     shared unchanged between desktop and mobile -- 15px reads fine next to desktop's small
     text-only trigger, but on mobile it sits beside the 19px nav-arrow chevron as one of two
     peer icons on the same row, where it visibly loses the comparison. Only sized up here,
     not in the shared constant, so desktop is untouched; a CSS rule beats the SVG's own
     presentation attributes on specificity, no !important needed. */
  .nav-has-dropdown > button.nav-lang-toggle > svg { width: 22px; height: 22px; }
  .header-products-btn { display: flex; }
  .logo-img { height: 40px !important; }
  /* "Date Products" duplicates the parent Products link/label right above it in this same
     dropdown -- confusing on mobile where the whole submenu is only one thumb-scroll away
     from itself; desktop keeps it since it sits further from its own parent link there. */
  .nav-cat-products { display: none !important; }

  /* Hero */
  .hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .hero-visual { min-height: 300px !important; }
  .hero-text { padding: 48px 32px !important; }
  .hero-title { font-size: 48px !important; }
  .hero-italic { font-size: 38px !important; white-space: normal !important; }
  .float-card { display: none !important; }

  /* Contact */
  .contact-section { min-height: 480px !important; padding: 32px 20px !important; }
  .contact-text { margin: 0 !important; max-width: none !important; }

  /* Products grid */
  .products-section { padding: 56px 32px !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Brand def */
  .brand-def { padding: 64px 32px !important; }
  .brand-def h2 { font-size: 22px !important; }

  /* Standards */
  .standards { padding: 56px 32px !important; }
  .cert-logos { gap: 32px !important; }

  /* Testimonials */
  .testimonial { padding: 64px 0 72px !important; }
  .coverflow { height: 190px !important; }
  .cf-card { width: 150px !important; height: 150px !important; }

  /* Products page */
  .page-hero { padding: 48px 32px 40px !important; grid-template-columns: 1fr !important; }
  .page-hero-count { display: none !important; }
  .filter-bar { padding: 0 32px !important; overflow-x: auto !important; }
  .cat-section { padding: 48px 32px 36px !important; }

  /* Product detail */
  .product-main { grid-template-columns: 1fr !important; }
  .info-side { border-right: none !important; border-left: none !important; border-top: 1px solid var(--border) !important; padding: 40px 32px !important; }
  .image-side { padding: 32px 32px 0 !important; }
  .trust-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-item:nth-child(2) { border-left: none !important; border-right: none !important; }
  .product-tabs { padding: 0 32px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: 16px 18px !important; font-size: 13px !important; white-space: nowrap !important; }
  .thumb { width: 64px !important; height: 64px !important; }
  .desc-inner { grid-template-columns: 1fr !important; padding: 40px 32px !important; }
  .desc-aside { display: none !important; }
  .nutrition-inner { grid-template-columns: 1fr !important; padding: 40px 32px !important; gap: 40px !important; }
  .reviews-inner { padding: 40px 32px !important; }
  .related-section { padding: 40px 32px !important; }
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 540px) {
  :root { --pad-x: 16px; }

  header { height: 64px !important; padding: 0 12px !important; column-gap: 8px !important; }
  .header-actions { gap: 8px !important; }
  .icon-btn { padding: 4px !important; }
  .search-wrap.open .search-input { width: 120px !important; }
  nav { top: 64px; height: calc(100vh - 64px); }
  .logo-img { height: 36px !important; }

  .hero-title { font-size: 38px !important; }
  .hero-italic { font-size: 30px !important; }
  .hero-text { padding: 36px 16px !important; }

  .products-grid { grid-template-columns: 1fr !important; }

  .section-title { font-size: 28px !important; }
  .page-hero-title { font-size: 34px !important; }

  /* 2-up instead of a single stacked column -- 4 full-width blocks (logo, Shop, Company,
     Get in Touch) each with a heading made the phone footer scroll on far longer than the
     content needed; logo and Get in Touch (the two with the least list items) span both
     columns, Shop/Company sit side by side, so it's 3 short rows instead of 4 tall ones.
     Everything below (logo/social size, type scale, spacing) is also shrunk from the
     desktop-authored values -- unscaled, the same footer that reads as a normal-weight
     closing block on a 1400px screen comes out oversized and heavy on a 390px one. */
  footer { padding: 32px 16px 16px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; margin-bottom: 20px !important; }
  .footer-grid > div:first-child, .footer-grid > .footer-col:last-of-type { grid-column: 1 / -1 !important; }
  .footer-logo-name img, .footer-logo img { height: 32px !important; }
  .footer-logo-name { margin-bottom: 8px !important; }
  .social-row, .social-icons { gap: 8px !important; margin-top: 8px !important; }
  .soc, .social-icon { width: 34px !important; height: 34px !important; }
  .soc svg { width: 16px !important; height: 16px !important; }
  .footer-col h5 { font-size: 9px !important; letter-spacing: 2px !important; margin-bottom: 8px !important; }
  .footer-col ul li { font-size: 12px !important; margin-bottom: 6px !important; }
  /* Stacked and centered instead of flush left/right (justify-content:space-between) --
     that leaves whichever span (legal links on fa/ar, copyright on en) lands on the left
     sitting directly behind the floating-contact button's own visible icon (bottom:16px/
     left:16px, 50px wide) at the page's natural bottom-scroll rest position. Centering both
     lines keeps them clear of that corner without a manual padding offset. */
  .footer-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; padding-top: 16px !important; font-size: 10px !important; }

  .trust-strip { grid-template-columns: 1fr 1fr !important; }

  .related-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .floating-contact { width: 50px !important; height: 236px !important; bottom: 16px !important; left: 16px !important; }
  .floating-contact .fc-btn { width: 50px !important; height: 50px !important; }
  /* -54px = 50px button + 4px gap (mobile equivalent of the desktop rule's -62px/4px). */
  .floating-contact .fc-close { transform: translateY(-54px) !important; }
  /* NOT .force-closed here -- that variant needs to win against the base (desktop) force-
     closed rule below, which also carries !important (needed there to beat the hover
     reveal); two equally-specific !important rules resolve by SOURCE ORDER, and this media
     block sits ahead of that base rule in the file, so it would lose the tie. See the
     force-closed override placed right after that base rule instead. */
  .floating-contact:hover .fc-phone, .floating-contact:focus-within .fc-phone, .floating-contact.is-open .fc-phone { transform: translateY(-62px) !important; }
  .floating-contact:hover .fc-email, .floating-contact:focus-within .fc-email, .floating-contact.is-open .fc-email { transform: translateY(-124px) !important; }
  .floating-contact:hover .fc-close, .floating-contact:focus-within .fc-close, .floating-contact.is-open .fc-close { transform: translateY(-186px) !important; }
}

/* ── FLOATING CONTACT STACK (WhatsApp trigger; hover reveals phone + email
   stacked upward) -- same bordered-icon look as the footer's .soc row,
   not a solid WhatsApp-brand-green circle. ── */
/* height spans the full expanded stack (4 buttons + 3 gaps: trigger, phone, email, close),
   not just the trigger's own 58px -- .fc-extra is positioned via transform, which doesn't
   grow the box it's in, so a too-short container only counts as "hovered" while the mouse
   sits directly over the trigger; the instant it moves up toward the now-revealed buttons
   it's outside the hoverable box and everything snaps shut before you can reach them. */
/* pointer-events:none on the container -- it's a plain positioned box, and without this its
   full inset0-ish footprint (58x268, mostly empty space above the visible icons before
   everything's revealed) silently ate taps meant for whatever sits underneath it, the
   trigger's own click-to-reveal notwithstanding. pointer-events:auto below puts it back on
   each actual button. */
.floating-contact { position: fixed; bottom: 28px; left: 28px; z-index: 300; width: 58px; height: 268px; pointer-events: none; }
.floating-contact .fc-btn {
  position: absolute; bottom: 0; left: 0; width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid var(--border); background: rgba(251,232,201,0.72); color: var(--green);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 8px 24px rgba(20,10,6,0.18); cursor: pointer; font: inherit;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
}
/* Explicit stacking order, topmost first -- see style.css's copy of this rule for the full
   reasoning (fc-trigger, last in the markup, otherwise paints over the others at their
   shared pre-reveal rect). */
.floating-contact .fc-close { z-index: 4; }
.floating-contact .fc-email { z-index: 3; }
.floating-contact .fc-phone { z-index: 2; }
.floating-contact .fc-trigger { z-index: 1; }
.floating-contact .fc-btn:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.floating-contact .fc-trigger:hover { transform: scale(1.06); }
.floating-contact .fc-extra { opacity: 0; transform: translateY(0) scale(0.85); pointer-events: none; }
.floating-contact:hover .fc-extra, .floating-contact:focus-within .fc-extra, .floating-contact.is-open .fc-extra { opacity: 1; pointer-events: auto; }
/* Overrides the reveal above even while still genuinely :hover'd -- see layout.js's
   fc-close click handler for why this needs its own !important rule rather than just
   toggling is-open (which the hover rule would otherwise still win against). */
.floating-contact.force-closed .fc-extra { opacity: 0 !important; pointer-events: none !important; }
.floating-contact:hover .fc-phone, .floating-contact:focus-within .fc-phone, .floating-contact.is-open .fc-phone { transform: translateY(-70px); }
.floating-contact:hover .fc-email, .floating-contact:focus-within .fc-email, .floating-contact.is-open .fc-email { transform: translateY(-140px); }
/* fc-close is NOT .fc-extra (see layout.js) -- it has to stay visible and tappable before
   the stack ever opens, since it's the widget's only expand/collapse affordance now (a
   second, mobile-only arrow badge used to cover for this one vanishing on close -- removed,
   one arrow that just moves instead). Its default/closed position is the same slot fc-phone
   uses when open (nothing else occupies that spot while closed); opening slides it up to
   the top of the stack same as before. force-closed needs its own !important here for the
   same reason as fc-extra above -- overriding the hover reveal while genuinely still
   hovered, which toggling is-open alone can't do.
   The chevron rotates to say which way it acts: pointing up (default) means "expand
   upward", rotated to point down (open) means "collapse". Plain icon, no boxed backdrop
   like the other 3 buttons -- explicitly requested; drop-shadow keeps it legible over
   whatever photo/canvas happens to be behind it instead. */
.floating-contact .fc-close {
  /* -62px = 58px button + 4px gap, snug above WhatsApp (was -70px/12px gap -- read as sitting
     noticeably further away than the icon-size bump above deserved). */
  transform: translateY(-62px); background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.floating-contact .fc-close:hover { background: none; color: var(--gold); border-color: transparent; }
.floating-contact.force-closed .fc-close { transform: translateY(-62px) !important; }
.floating-contact:hover .fc-close, .floating-contact:focus-within .fc-close, .floating-contact.is-open .fc-close { transform: translateY(-210px); }
.floating-contact .fc-close svg {
  filter: drop-shadow(0 2px 4px rgba(20,10,6,0.35));
  transition: transform 0.2s ease; transform: rotate(180deg);
}
.floating-contact:hover .fc-close svg, .floating-contact:focus-within .fc-close svg, .floating-contact.is-open .fc-close svg { transform: rotate(0deg); }
/* Same !important-vs-still-hovered override the position rule above needs -- without it the
   arrow would keep pointing down (open) right after clicking Close while the mouse is still
   sitting on the widget, since plain :hover still matches. */
.floating-contact.force-closed .fc-close svg { transform: rotate(180deg) !important; }
/* Placed here, after the base force-closed rule above, specifically to WIN the source-order
   tiebreak against it at narrow widths -- see the comment on the equivalent (deliberately
   absent) rule in the max-width:540px block earlier in this file. */
@media (max-width: 540px) {
  .floating-contact.force-closed .fc-close { transform: translateY(-54px) !important; }
}