/* ═══════ GENERATED FONT LAYER — build with tools/build-fonts.py ═══════
   Self-hosted so exactly one stylesheet blocks rendering. Files are the
   upstream originals, so glyphs and metrics are unchanged; only the origin
   differs. Font Awesome carries just the icons this site references.
   Cormorant Garamond / Inter / Tajawal / Font Awesome webfonts: OFL 1.1.
   Font Awesome CSS: MIT. Font Awesome icons: CC BY 4.0. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-garamond-italic-latin-810fe6.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}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-garamond-italic-latin-ext-50d5ba.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/cormorant-garamond-normal-latin-74db05.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}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/cormorant-garamond-normal-latin-ext-a9e49e.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/inter-normal-latin-f11d72.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}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/inter-normal-latin-ext-cf3eb5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/tajawal-normal-arabic-18fca0.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/tajawal-normal-arabic-668a6e.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/tajawal-normal-arabic-86dcc0.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/tajawal-normal-arabic-bd45ba.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/tajawal-normal-latin-646b8b.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}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/tajawal-normal-latin-a9e8e9.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}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/tajawal-normal-latin-aba40d.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}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/tajawal-normal-latin-abeac1.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}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(assets/fonts/fa-solid-900-subset.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/fa-brands-400-subset.woff2) format("woff2")}
.fa,.fas,.fab,.fa-solid,.fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa,.fas,.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands";font-weight:400}
.fa-fw{text-align:center;width:1.25em}
.fa-arrow-left::before{content:"\f060"}
.fa-arrow-right::before{content:"\f061"}
.fa-arrow-up::before{content:"\f062"}
.fa-award::before{content:"\f559"}
.fa-bag-shopping::before{content:"\f290"}
.fa-bars::before{content:"\f0c9"}
.fa-boxes-stacked::before{content:"\f468"}
.fa-building::before{content:"\f1ad"}
.fa-calendar-days::before{content:"\f073"}
.fa-cc-apple-pay::before{content:"\f416"}
.fa-cc-mastercard::before{content:"\f1f1"}
.fa-cc-visa::before{content:"\f1f0"}
.fa-check::before{content:"\f00c"}
.fa-check-circle::before{content:"\f058"}
.fa-chevron-down::before{content:"\f078"}
.fa-circle-check::before{content:"\f058"}
.fa-circle-exclamation::before{content:"\f06a"}
.fa-circle-question::before{content:"\f059"}
.fa-circle-xmark::before{content:"\f057"}
.fa-clock::before{content:"\f017"}
.fa-envelope::before{content:"\f0e0"}
.fa-handshake::before{content:"\f2b5"}
.fa-location-dot::before{content:"\f3c5"}
.fa-magnifying-glass::before{content:"\f002"}
.fa-money-bill-wave::before{content:"\f53a"}
.fa-paper-plane::before{content:"\f1d8"}
.fa-phone::before{content:"\f095"}
.fa-plus::before{content:"\2b"}
.fa-search::before{content:"\f002"}
.fa-seedling::before{content:"\f4d8"}
.fa-sliders::before{content:"\f1de"}
.fa-store::before{content:"\f54e"}
.fa-tags::before{content:"\f02c"}
.fa-times::before{content:"\f00d"}
.fa-truck-fast::before{content:"\f48b"}
.fa-user::before{content:"\f007"}
.fa-user-tie::before{content:"\f508"}
.fa-utensils::before{content:"\f2e7"}
.fa-wand-magic-sparkles::before{content:"\e2ca"}
.fa-whatsapp::before{content:"\f232"}
/* ═══════ END GENERATED FONT LAYER ═══════ */

/* ═══════════════════════════════════════
   KAIZERA TRADING — STYLESHEET
   Premium Mediterranean Food Distributor
   ═══════════════════════════════════════ */

:root {
  --olive: #3D4F2C;
  --olive-dark: #2A3520;
  --olive-light: #5A6E40;
  --gold: #C9A961;
  --gold-dark: #A88A4A;
  --gold-light: #D4B97A;
  --cream: #F5F0E6;
  --cream-dark: #EDE5D3;
  --charcoal: #1A1A1A;
  --charcoal-light: #2A2A2A;
  --terracotta: #722C1A;
  --text-light: rgba(245, 240, 230, 0.85);
  --text-muted: rgba(245, 240, 230, 0.6);
  --text-dim: rgba(245, 240, 230, 0.4);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --arabic: 'Tajawal', 'Inter', sans-serif;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Floating-controls stack: WhatsApp (slot 0, primary) → AI launcher (slot 1)
     → back-to-top (slot 2, secondary), bottom-up on the inline-end edge.
     One geometry drives all three, so they cannot drift apart or collide. */
  --fc-edge: 30px;
  --fc-gap: 12px;
  --fc-size: 56px;
  --fc-bottom: calc(var(--fc-edge) + env(safe-area-inset-bottom, 0px));
  --fc-slot: calc(var(--fc-size) + var(--fc-gap));
  /* max() of both physical insets: the stack flips sides with `dir`, and only
     landscape ever makes these non-zero, so one value covers LTR and RTL. */
  --fc-inline: calc(var(--fc-edge) + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ltr-only,
.rtl-only {
  display: none;
}

body:not(.rtl) .ltr-only {
  display: revert;
}

body.rtl .rtl-only {
  display: revert;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.7;
  overflow-x: hidden;
  font-weight: 400;
}

body.rtl {
  font-family: var(--arabic);
  direction: rtl;
}

img { max-width: 100%; display: block; }
.product-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ═══════ TOP BAR ═══════ */
.top-bar {
  background: var(--charcoal);
  color: var(--cream);
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
}

.top-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar i { color: var(--gold); margin-right: 6px; }
body.rtl .top-bar i { margin-right: 0; margin-left: 6px; }

.top-bar-right {
  display: flex;
  gap: 20px;
  align-items: center;
}

.top-bar-right a {
  transition: color 0.3s ease;
}

.top-bar-right a:hover { color: var(--gold); }
.divider { color: var(--gold); opacity: 0.4; }

/* Three-slot utility bar used on the homepage */
.util-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}
.util-item i { margin: 0; }
a.util-item:hover { color: var(--gold); }
.util-center { justify-self: center; }
.util-end { display: inline-flex; align-items: center; gap: 18px; justify-self: end; }
.top-bar-inner:has(.util-center) { display: grid; grid-template-columns: 1fr auto 1fr; }
.util-end .lang-toggle { padding: 4px 12px; font-size: 10px; }

/* ═══════ NAVIGATION ═══════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
  transition: var(--transition);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar.scrolled .nav-inner { padding: 12px 48px; }

.logo {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 6px;
  color: var(--gold);
  cursor: pointer;
  transition: color 0.3s ease;
}

.logo:hover { color: var(--cream); }

.nav-menu {
  display: flex;
  gap: 38px;
}

.nav-menu a {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 400;
  transition: color 0.3s ease;
  position: relative;
  padding: 4px 0;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  /* Wipes on scaleX rather than animating width. The bar is a plain rule with
     nothing inside it, so scaling looks identical while staying composited —
     and the active class is written on scroll, which made the width version
     re-layout the header. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
body.rtl .nav-menu a::after { transform-origin: right center; }

.nav-menu a:hover::after,
.nav-menu a.active::after { transform: scaleX(1); }
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); }

/* CSS-only dropdowns — :focus-within keeps them reachable by keyboard */
.has-dropdown { position: relative; }
.caret { font-size: 8px; margin-left: 4px; opacity: 0.7; }
body.rtl .caret { margin-left: 0; margin-right: 4px; }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin-top: 14px;
  padding: 10px 0;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(201, 169, 97, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1001;
}

body.rtl .dropdown { left: auto; right: 0; }

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-light);
}

.dropdown a::after { display: none; }
.dropdown a:hover { color: var(--gold); background: rgba(201, 169, 97, 0.08); }

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

.nav-actions {
  display: flex;
  gap: 22px;
  align-items: center;
  color: var(--cream);
}

.nav-actions .icon {
  font-size: 17px;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* The header controls are 15-19px glyphs, well under the 24x24 CSS px WCAG
   2.5.8 asks for. An absolutely positioned box centred on each one raises the
   touch target to 44px without occupying any layout space, so the header looks
   exactly as before. */
.nav-actions > a,
.nav-actions > button,
.top-bar .lang-toggle { position: relative; }

.nav-actions > a::before,
.nav-actions > button::before,
.top-bar .lang-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.nav-actions .icon:hover { color: var(--gold); }

.nav-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 500;
  transition: color 0.3s;
  white-space: nowrap;
}
.nav-phone i { color: #25D366; font-size: 16px; }
.nav-phone:hover { color: var(--gold); }
/* Below 900px only the WhatsApp glyph is shown, but `display: none` on the
   number left the link with no accessible name at all. Hiding it visually
   instead keeps the number in the accessibility tree — same layout, same look,
   and it stays bilingual without a hardcoded aria-label. */
@media (max-width: 900px) {
  .nav-phone span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.lang-toggle {
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 7px 14px;
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--cream);
  font-weight: 500;
  transition: var(--transition);
  text-transform: uppercase;
}

.lang-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 169, 97, 0.1);
}

.cart-icon {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

body.rtl .cart-count { right: auto; left: -10px; }

.menu-toggle {
  display: none;
  font-size: 22px;
  color: var(--cream);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ═══════ BUTTONS ═══════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

body.rtl .btn { font-family: var(--arabic); }

.btn-primary, .btn-gold {
  background: var(--gold);
  color: var(--charcoal);
}

.btn-primary:hover, .btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
}

.btn-outline:hover {
  background: var(--cream);
  color: var(--charcoal);
}


/* ═══════ ACCESSIBILITY UTILITIES ═══════ */
/* Hidden by translation rather than a negative offset — an off-canvas
   `left` value would add a horizontal scrollbar in RTL. */
.skip-link {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 2000;
  background: var(--gold);
  color: var(--charcoal);
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }
body.rtl .skip-link { left: auto; right: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn-full { width: 100%; }

/* ═══════ HERO ═══════ */
.hero {
  position: relative;              /* containing block for the full-bleed visual */
  background: var(--charcoal);
  color: var(--cream);
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
}

.hero-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px;
}

.hero-copy {
  position: relative;              /* above the visual layer */
  z-index: 1;
  padding: 72px 56px 72px 48px;
  align-self: center;
  animation: fadeInUp 1s ease-out;
}

body.rtl .hero-copy { padding: 72px 48px 72px 56px; }

/* No `display` here: these elements also carry .ltr-only/.rtl-only, and an
   equal-specificity `display` declared later would defeat the language toggle. */
.hero-tagline,
.overline {
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  font-weight: 500;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
}

body.rtl .hero-title { font-family: var(--serif); }

.hero-title em {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
}

/* Thin rule + sprig echoing the printed-label feel of the packaging */
.hero-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
}
.hero-rule span { width: 120px; height: 1px; background: rgba(201, 169, 97, 0.5); }
.hero-rule i { color: var(--gold); font-size: 13px; opacity: 0.8; }

.hero-subtitle {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-light);
  max-width: 460px;
  margin-bottom: 36px;
  font-weight: 300;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* The hero photograph is composed with dark negative space on one side and the
   still life on the other, so it spans the whole band and the copy column sits
   over the empty side. Escaping .hero-grid's max-width keeps it edge to edge. */
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Arabic puts the copy on the right, so mirror the still life to keep the
   empty side under the text. */
body.rtl .hero-visual img { transform: scaleX(-1); }

/* Guarantees text contrast over the dark side without dimming the still life */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(26, 26, 26, 0.92) 0%, rgba(26, 26, 26, 0.55) 30%, rgba(26, 26, 26, 0) 58%);
  pointer-events: none;
}

body.rtl .hero-visual::after { background: linear-gradient(to left, rgba(26, 26, 26, 0.92) 0%, rgba(26, 26, 26, 0.55) 30%, rgba(26, 26, 26, 0) 58%); }

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

/* ═══════ TRUST & VALUE STRIP ═══════ */
.trust-strip {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
  padding: 30px 48px;
}

.trust-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream);
  padding-left: 32px;
  border-left: 1px solid rgba(201, 169, 97, 0.15);
}

.trust-item:first-child { border-left: none; padding-left: 0; }

body.rtl .trust-item {
  padding-left: 0;
  padding-right: 32px;
  border-left: none;
  border-right: 1px solid rgba(201, 169, 97, 0.15);
}
body.rtl .trust-item:first-child { border-right: none; padding-right: 0; }

.trust-item i { color: var(--gold); font-size: 22px; flex-shrink: 0; }
.trust-item h2 { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25; }
.trust-item p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ═══════ SECTION BAR (eyebrow + "view all" link) ═══════ */
.section-bar {
  max-width: 1400px;
  margin: 0 auto 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.section-eyebrow {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

.section-link {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.section-link:hover { color: var(--gold); }

/* ═══════ SECTION HEADER ═══════ */
.section-header {
  text-align: center;
  padding: 0 32px;
  margin-bottom: 60px;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.section-title em {
  color: var(--olive);
  font-style: italic;
}

.section-header .overline {
  color: var(--olive);
  margin-bottom: 16px;
}

.divider-gold {
  width: 50px;
  height: 1px;
  background: var(--gold);
  margin: 24px auto 0;
}

/* ═══════ CATEGORIES ═══════ */
.categories {
  padding: 64px 48px;
  background: var(--charcoal);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}

.cat-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.cat-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--charcoal-light);
  border: 1px solid rgba(201, 169, 97, 0.12);
  transition: var(--transition);
}

.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cat-card:hover { border-color: var(--gold); }
.cat-card:hover img { transform: scale(1.06); }

.cat-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  color: var(--cream);
  /* Scrim must stay readable over the pale packshots (tahini, freekeh) as
     well as the dark ones, so it holds near-opaque behind the text block. */
  background: linear-gradient(to top,
    rgba(14, 14, 12, 0.94) 0%,
    rgba(14, 14, 12, 0.82) 38%,
    rgba(14, 14, 12, 0.25) 64%,
    transparent 100%);
}

.cat-body h3 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.cat-body p { font-size: 11px; color: var(--text-muted); line-height: 1.45; }

.cat-arrow {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  margin-top: 12px;
  position: relative;
  transition: width 0.3s ease;
}

.cat-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  border: 3px solid transparent;
  border-left-color: var(--gold);
}

body.rtl .cat-arrow::after { right: auto; left: 0; border-left-color: transparent; border-right-color: var(--gold); }
.cat-card:hover .cat-arrow { width: 34px; }

/* Retained for the catalogue search results on products.html */
.cat-link {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.3s ease;
}

.cat-link:hover { color: var(--gold); }

.product-svg {
  width: 70%;
  height: 70%;
  max-width: 250px;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

/* ═══════ PRODUCTS ═══════ */
.products {
  padding: 64px 48px;
  background: var(--charcoal);
  color: var(--cream);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}

/* Featured row: landscape cards (image beside details). The vertical
   .product-card used on products.html is left untouched. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
}

.products-grid .product-card { display: grid; grid-template-columns: 40% 1fr; }

.products-grid .product-image { padding-bottom: 0; height: 100%; min-height: 175px; }

.products-grid .product-info { padding: 18px 18px 16px; display: flex; flex-direction: column; }

.products-grid .product-cat { margin-bottom: 6px; color: var(--gold); }
.products-grid .product-name { font-size: 17px; margin-bottom: 4px; }
.products-grid .product-tagline { font-size: 11px; font-style: normal; margin-bottom: 12px; }

.products-grid .product-bottom {
  margin-top: auto;
  display: block;
  padding-top: 12px;
}

.products-grid .product-price { font-size: 19px; }

.product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(201, 169, 97, 0.3);
}

.qty-stepper button {
  width: 26px;
  height: 28px;
  color: var(--cream);
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s ease;
}

.qty-stepper button:hover { color: var(--gold); }
.qty-stepper output { min-width: 22px; text-align: center; font-size: 12px; color: var(--cream); }

.products-grid .product-add {
  flex: 1;
  padding: 10px 8px;
  font-size: 10px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.product-card {
  background: var(--charcoal-light);
  border: 1px solid rgba(201, 169, 97, 0.15);
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}

.product-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
}

.product-image {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: var(--charcoal);
}
.product-image .product-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s ease;
}

.product-card:hover .product-image .product-svg {
  transform: translate(-50%, -50%) scale(1.08);
}

.product-badge {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: var(--charcoal);
  padding: 5px 14px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

body.rtl .product-badge { left: auto; right: 16px; }

.product-badge.new { background: var(--olive); color: var(--cream); }
.product-badge.limited { background: var(--terracotta); color: var(--cream); }

.product-info {
  padding: 20px 22px 24px;
}

.product-cat {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.product-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--cream);
  line-height: 1.3;
}

.product-tagline {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 16px;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 169, 97, 0.15);
}

.product-price {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--gold);
}

.product-price-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--sans);
  margin-left: 4px;
}

/* No RTL flip: "400" and "QAR" are both Latin runs, so bidi lays them out
   left-to-right in Arabic too and the gap stays on the unit's left. */

.product-add {
  background: var(--gold);
  color: var(--charcoal);
  border: none;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.product-add:hover {
  background: var(--cream);
}

/* ═══════ WHOLESALE & HORECA ═══════ */
.wholesale {
  display: grid;
  grid-template-columns: 34% 1fr;
  background: var(--charcoal-light);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}

.wholesale-visual { position: relative; overflow: hidden; min-height: 320px; }

.wholesale-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wholesale-body { padding: 56px 48px; color: var(--cream); }
.wholesale-body .overline { margin-bottom: 14px; }

.wholesale-title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 14px;
}

.wholesale-title em { color: var(--gold); font-style: italic; }

.wholesale-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-light);
  max-width: 560px;
  font-weight: 300;
}

.wholesale-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0;
  max-width: 720px;
}

.wholesale-benefits li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.wholesale-benefits i { color: var(--gold); font-size: 18px; }

.wholesale-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.wholesale-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--cream);
  transition: color 0.3s ease;
}

.wholesale-wa i { color: #25D366; font-size: 19px; }
.wholesale-wa:hover { color: var(--gold); }

/* ═══════ BRAND STORY ═══════
   A dark editorial introduction that deepens out of the charcoal-light
   wholesale band above, then a cream values band that lifts before the
   charcoal trust section below. Tokens, rules and icons are the site's own. */
.story { background: var(--charcoal); }

.story-intro { padding: 0 48px; }

.story-lede,
.story-pillars { max-width: 1400px; margin-inline: auto; }

.story-lede {
  display: grid;
  grid-template-columns: 1fr 34%;
  align-items: center;
  gap: 72px;
  padding: 88px 0 68px;
}

.story-copy { color: var(--cream); max-width: 580px; }
.story-copy .overline { color: var(--gold); margin-bottom: 22px; }

.story-title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.3vw, 44px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.story-title em { color: var(--gold); font-style: italic; }

.story-text p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-light);
}

.story-text p + p { margin-top: 14px; }

.story-link {
  display: inline-block;
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 169, 97, 0.45);
  padding-bottom: 5px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.story-link:hover { color: var(--gold-light); border-bottom-color: var(--gold); }

/* The visual is a framed panel rather than a full bleed, so it reads as a
   detail beside the story instead of repeating the hero's composition. */
.story-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, 0.18);
}

.story-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 50%;
}

/* Mirror it in Arabic so the denser side of the frame stays beside the copy. */
body.rtl .story-visual img { transform: scaleX(-1); }

/* Pillars: separators and spacing only — the trust strip above already owns
   the icon-and-label treatment, so repeating it here would flatten both. */
.story-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(201, 169, 97, 0.15);
  padding: 36px 0 52px;
}

.story-pillars li {
  padding-left: 36px;
  border-left: 1px solid rgba(201, 169, 97, 0.15);
}

.story-pillars li:first-child { border-left: none; padding-left: 0; }

body.rtl .story-pillars li {
  padding-left: 0;
  padding-right: 36px;
  border-left: none;
  border-right: 1px solid rgba(201, 169, 97, 0.15);
}

body.rtl .story-pillars li:first-child { border-right: none; padding-right: 0; }

.story-pillars h3 {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 9px;
}

.story-pillars p { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* ── Cream values band ── */
.story-values {
  background: var(--cream);
  color: var(--charcoal);
  padding: 74px 48px 82px;
  border-top: 1px solid rgba(201, 169, 97, 0.3);
}

.story-values-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.story-value-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.story-value-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.story-value-icon i { color: var(--gold); font-size: 16px; }

.story-value h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--charcoal);
}

.story-value-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-dark);
  margin-top: 3px;
}

.story-value > p { font-size: 13.5px; line-height: 1.75; color: rgba(26, 26, 26, 0.72); }

/* The floating WhatsApp / AI stack is fixed to the inline-end edge and owns a
   column --fc-inline + --fc-size wide. Between the tablet breakpoint and the
   width where the 1400px cap already clears it, this band's own content reached
   into that column — measured at up to 38px of the last value column's text.
   Reserve the column on both bands so they keep the same inline edges as each
   other, and use logical padding so Arabic, where the stack flips to the left,
   reserves the correct side. */
@media (min-width: 1025px) and (max-width: 1595px) {
  .story-intro,
  .story-values { padding-inline-end: calc(var(--fc-inline) + var(--fc-size) + 12px); }
}

/* ═══════ TRUST QUOTES ═══════ */
.trust-quotes {
  background: var(--charcoal);
  color: var(--cream);
  padding: 64px 48px;
  text-align: center;
}

.trust-quotes-title {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 44px;
}

.trust-quotes-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.trust-quote {
  padding: 0 24px;
  border-left: 1px solid rgba(201, 169, 97, 0.2);
  text-align: left;
}

.trust-quote:first-child { border-left: none; }

body.rtl .trust-quote {
  text-align: right;
  border-left: none;
  border-right: 1px solid rgba(201, 169, 97, 0.2);
}
body.rtl .trust-quote:first-child { border-right: none; }

.trust-quote p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-light);
  font-style: italic;
  font-weight: 300;
}

.trust-quote p::before { content: '“'; color: var(--gold); font-family: var(--serif); font-size: 26px; line-height: 0; margin-right: 4px; }
body.rtl .trust-quote p::before { margin-right: 0; margin-left: 4px; }

.trust-author {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 1px;
  color: var(--gold);
}

.trust-author span { display: block; color: var(--text-muted); letter-spacing: 0.5px; }

/* ═══════ NEWSLETTER ═══════ */
.newsletter {
  padding: 100px 48px;
  background: var(--charcoal);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 169, 97, 0.08) 0%, transparent 60%);
}

.newsletter-content {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.newsletter .overline { color: var(--gold); margin-bottom: 16px; }

.newsletter-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 16px;
}

.newsletter-title em { color: var(--gold); font-style: italic; }

.newsletter-text {
  color: var(--text-light);
  margin-bottom: 36px;
  font-weight: 300;
}

/* ── Newsletter expanded form ── */
.nl-form { margin: 36px auto 0; text-align: left; }
body.rtl .nl-form { text-align: right; }
.nl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.nl-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.nl-field > label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-family: var(--sans); }
.nl-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,169,97,0.25);
  color: var(--cream);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.nl-input:focus { border-color: var(--gold); }
.nl-input::placeholder { color: rgba(245,240,230,0.3); }
.nl-type-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-type-btn { cursor: pointer; }
.nl-type-btn input { display: none; }
.nl-type-btn > span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid rgba(201,169,97,0.25);
  font-size: 12px; color: var(--text-muted); transition: all 0.2s; cursor: pointer;
}
.nl-type-btn input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(201,169,97,0.08); }
.nl-type-btn span i { font-size: 11px; }
.nl-interests { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.nl-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-muted); transition: color 0.2s; }
.nl-check:hover { color: var(--cream); }
.nl-check input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; flex-shrink: 0; }
.nl-submit { width: 100%; margin-top: 24px; padding: 14px; font-size: 12px; letter-spacing: 2px; }
.nl-success { text-align: center; padding: 48px 20px; }
.nl-success i { font-size: 2.5rem; color: #25D366; margin-bottom: 16px; display: block; }
.nl-success h3 { font-family: var(--serif); font-size: 1.8rem; color: var(--cream); margin-bottom: 10px; }
.nl-success p { color: var(--text-muted); font-size: 14px; }

@media (max-width: 600px) {
  .nl-row { grid-template-columns: 1fr; }
  .nl-type-btns { flex-direction: column; }
  .nl-interests { grid-template-columns: 1fr 1fr; }
}

/* ═══════ FOOTER ═══════ */
.footer {
  background: var(--olive-dark);
  color: var(--cream);
  padding: 80px 48px 0;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr) 1.4fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
}

.footer-logo {
  font-size: 30px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 280px;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.social-icons a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: var(--transition);
}

.social-icons a:hover {
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold);
}

.footer-col h3 {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  font-weight: 500;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.footer-col a:hover { color: var(--gold); }

.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.contact-list i {
  color: var(--gold);
  width: 16px;
  font-size: 14px;
}

/* Compact footer signup — goes through the same handleNewsletter()
   WhatsApp handoff as the full section above. */
.footer-subscribe { display: flex; margin-top: 16px; }

.footer-subscribe input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.3);
  color: var(--cream);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 12px;
}

.footer-subscribe input::placeholder { color: var(--text-dim); }
.footer-subscribe input:focus { outline: none; border-color: var(--gold); }

.footer-subscribe button {
  background: var(--gold);
  color: var(--charcoal);
  padding: 0 16px;
  font-size: 12px;
  transition: background 0.3s ease;
}

.footer-subscribe button:hover { background: var(--gold-light); }

.footer-sub-success { margin-top: 12px; font-size: 12px; color: var(--gold); }

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copyright {
  font-size: 12px;
  /* --text-dim (alpha .4) composites to #7b806f on the olive footer: 3.16:1,
     below the 4.5:1 WCAG AA needs for 12px body text. --text-muted is the same
     cream at .6 and reaches 5.17:1, and is already the footer's link colour. */
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.payment-methods {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 22px;
}

.payment-text {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-left: 1px solid rgba(201, 169, 97, 0.3);
  padding-left: 14px;
}

body.rtl .payment-text {
  border-left: none;
  border-right: 1px solid rgba(201, 169, 97, 0.3);
  padding-left: 0;
  padding-right: 14px;
}

/* ═══════ CART DRAWER ═══════ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--cream);
  z-index: 2001;
  /* Slides on transform rather than `right`/`left`: same motion and easing, but
     it runs on the compositor instead of re-laying out a full-height panel on
     every frame. */
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
}

body.rtl .cart-drawer {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

.cart-drawer.open,
body.rtl .cart-drawer.open { transform: translateX(0); }

.cart-header {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(61, 79, 44, 0.15);
}

.cart-header h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}

.cart-close {
  font-size: 18px;
  color: var(--charcoal);
  cursor: pointer;
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.cart-empty i {
  font-size: 48px;
  color: var(--gold);
  margin-bottom: 20px;
  opacity: 0.5;
}

.cart-empty p {
  font-size: 14px;
  letter-spacing: 1px;
}

.cart-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(61, 79, 44, 0.1);
}

.cart-item-img {
  width: 70px;
  height: 90px;
  background: var(--charcoal);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-img svg { width: 60%; }

.cart-item-info { flex: 1; }

.cart-item-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.cart-item-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(61, 79, 44, 0.3);
  background: white;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.qty-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.qty-num {
  font-size: 14px;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}

.cart-item-price {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--olive);
}

.cart-item-remove {
  font-size: 11px;
  color: #999;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 6px;
}

.cart-footer {
  padding: 24px 28px;
  background: white;
  border-top: 1px solid rgba(61, 79, 44, 0.15);
}

/* Price-on-request: the serif price face would misread as an amount, so the
   cart line and the footer note both use plain small text. Colours are the
   drawer's own (it sits on --cream); --text-muted is for dark surfaces. */
.cart-item-price.cart-item-por {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--olive);
}
.cart-por-note {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: 10px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cart-total-amount {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--olive);
  letter-spacing: 0;
}

/* ═══════ WHATSAPP FLOAT ═══════ (stack slot 0 — primary, always visible) */
.whatsapp-float {
  position: fixed;
  bottom: var(--fc-bottom);
  inset-inline-end: var(--fc-inline);
  width: var(--fc-size);
  height: var(--fc-size);
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 1500;
  transition: var(--transition);
}

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

/* Whole stack tucks out of the way while scrolling down — see script.js */
body.fc-tucked .whatsapp-float,
body.fc-tucked .ai-fab,
body.fc-tucked .back-to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

/* ═══════ TOAST ═══════ */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--charcoal);
  color: var(--cream);
  padding: 14px 28px;
  font-size: 13px;
  letter-spacing: 1px;
  z-index: 3000;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid var(--gold);
  max-width: 90vw;
  /* Purely a notification. Without this it sits on top of the cart's
     "Order via WhatsApp" button and swallows the tap for its whole 3s life —
     exactly when the customer is reaching for it on a phone. */
  pointer-events: none;
}

body.rtl .toast { border-left: none; border-right: 3px solid var(--gold); }

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════ RESPONSIVE ═══════ */

/* The wholesale header carries the longest nav on the site plus an extra
   "Apply Now" CTA. Below 1400px the two cannot share a row without pushing
   the whole page sideways, so the CTA steps out — the hero and the sticky
   form both still offer it. */
@media (max-width: 1400px) {
  .nav-actions .btn { display: none; }
}

@media (max-width: 1200px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .wholesale-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .top-bar-inner, .nav-inner { padding-left: 20px; padding-right: 20px; }
  /* 20px keeps the 8-link wholesale nav inside a 1024px viewport. */
  .nav-menu { gap: 20px; }
  .nav-menu a { font-size: 11px; letter-spacing: 1.5px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 56px 24px 48px; order: 2; }
  body.rtl .hero-copy { padding: 56px 24px 48px; }
  /* Back into flow: the image sits above the copy rather than behind it, and
     the crop favours the still life over the empty side. */
  .hero-visual { position: static; order: 1; aspect-ratio: 4 / 3; }
  .hero-visual img { object-position: 68% center; }
  .hero-visual::after { background: linear-gradient(to top, var(--charcoal) 0%, rgba(26, 26, 26, 0) 45%); }
  body.rtl .hero-visual::after { background: linear-gradient(to top, var(--charcoal) 0%, rgba(26, 26, 26, 0) 45%); }
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .trust-item:nth-child(3) { border-left: none; padding-left: 0; }
  body.rtl .trust-item:nth-child(3) { border-right: none; padding-right: 0; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .wholesale { grid-template-columns: 1fr; }
  .wholesale-visual { min-height: 240px; }
  .wholesale-body { padding: 44px 24px; }
  .story-intro { padding: 0 32px; }
  .story-lede { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 48px; }
  .story-copy { max-width: none; }
  .story-visual { aspect-ratio: 4 / 3; }
  .story-visual img { object-position: 34% 50%; }
  .story-pillars { grid-template-columns: repeat(2, 1fr); gap: 30px 0; padding: 32px 0 44px; }
  .story-pillars li:nth-child(3) { border-left: none; padding-left: 0; }
  body.rtl .story-pillars li:nth-child(3) { border-right: none; padding-right: 0; }
  .story-values { padding: 56px 32px 62px; }
  .story-values-inner { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .trust-quotes-grid { grid-template-columns: 1fr; gap: 28px; }
  .trust-quote { border-left: none; padding: 0; }
  body.rtl .trust-quote { border-right: none; }
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  .top-bar-inner { font-size: 11px; padding: 0 16px; }
  .top-bar-left span:not(:first-child) { display: none; }
  .top-bar-inner:has(.util-center) { grid-template-columns: 1fr auto; }
  .util-center { display: none; }
  .nav-inner { padding: 14px 16px; }
  .nav-menu { display: none; }
  .menu-toggle { display: block; }
  .logo { font-size: 22px; letter-spacing: 4px; }
  .nav-actions { gap: 14px; }
  .lang-toggle { padding: 5px 10px; font-size: 10px; }
  .hero-visual { aspect-ratio: 1 / 1; }
  .hero-title { font-size: clamp(34px, 9vw, 46px); }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }
  .trust-strip { padding: 24px 20px; }
  .story-intro { padding: 0 24px; }
  .story-lede { gap: 32px; padding: 52px 0 40px; }
  /* Keep the visual present but short — it is atmosphere, not content. */
  .story-visual { aspect-ratio: 3 / 2; }
  .story-pillars { padding: 28px 0 36px; gap: 26px 24px; }
  .story-values { padding: 48px 24px 54px; }
  .story-values-inner { gap: 34px 28px; }
  .categories, .products, .trust-quotes, .newsletter, .footer { padding: 48px 20px; }
  .footer { padding-top: 56px; padding-bottom: 0; }
  .section-eyebrow { font-size: 18px; letter-spacing: 2px; }
  /* Two-up cards are short, so the label needs a squarer card and a heavier
     scrim to stay clear of the packshot. */
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card { aspect-ratio: 1 / 1; }
  .cat-body {
    background: linear-gradient(to top,
      rgba(14, 14, 12, 0.96) 0%,
      rgba(14, 14, 12, 0.9) 48%,
      rgba(14, 14, 12, 0.35) 72%,
      transparent 100%);
  }
  .products-grid { grid-template-columns: 1fr; gap: 12px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; padding: 24px 0; }
  /* Full-bleed on small screens. The off-screen offset now comes from the
     translate on .cart-drawer, so only the width changes here. */
  .cart-drawer { width: 100vw; }
  /* Retune the whole floating stack from one place — every control follows. */
  :root { --fc-edge: 20px; --fc-gap: 10px; --fc-size: 50px; }
  .whatsapp-float { font-size: 24px; }
}

@media (max-width: 480px) {
  .trust-inner { grid-template-columns: 1fr; }
  .story-pillars { grid-template-columns: 1fr; gap: 22px; }
  .story-pillars li,
  body.rtl .story-pillars li { border-left: none; border-right: none; padding-left: 0; padding-right: 0; }
  .story-values-inner { grid-template-columns: 1fr; gap: 30px; }
  .trust-item { border-left: none; padding-left: 0; }
  body.rtl .trust-item { border-right: none; padding-right: 0; }
  .footer-inner { grid-template-columns: 1fr; }
  .wholesale-benefits { grid-template-columns: 1fr; gap: 14px; }
  .wholesale-benefits li { flex-direction: row; align-items: center; gap: 12px; }
}

/* ═══════════════════════════════════════
   VISUAL REFINEMENTS — polish layer
   ═══════════════════════════════════════ */

/* Crisper type rendering across the site */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Branded text selection */
::selection { background: var(--gold); color: var(--charcoal); }

/* Custom scrollbar (desktop only) */
@media (min-width: 769px) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--charcoal); }
  ::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border: 3px solid var(--charcoal);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
}

/* Accessible keyboard focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible,
.lang-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Gold buttons: gradient depth + sweeping sheen ── */
.btn-primary, .btn-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.25);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover, .btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-light) 55%, var(--gold) 100%);
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.4);
  transform: translateY(-3px);
}
.btn-primary::after, .btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  /* Travels on transform instead of `left` so the sweep is composited; the
     translate percentages reproduce the old -120% .. 140% path exactly. */
  transform: translateX(-200%) skewX(-20deg);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-gold:hover::after { transform: translateX(233.333%) skewX(-20deg); }

/* ── Product cards: deeper lift + cinematic image zoom ── */
.products .product-card:hover {
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.4);
}
.product-image {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.product-card:hover .product-image { transform: scale(1.06); }

/* ── Section gold divider: end dots ── */
.divider-gold {
  position: relative;
  width: 60px;
}
.divider-gold::before,
.divider-gold::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateY(-50%);
}
.divider-gold::before { left: -11px; }
.divider-gold::after { right: -11px; }

/* ── WhatsApp float: gentle pulse ring ── */
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* ── Cart drawer: soft depth shadow ── */
.cart-drawer { box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3); }
body.rtl .cart-drawer { box-shadow: 20px 0 60px rgba(0, 0, 0, 0.3); }

/* ── Navbar: smoother elevated state when scrolled ── */
.navbar.scrolled {
  background: rgba(20, 20, 20, 0.97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* ── Honour users who prefer reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════
   FEATURE LAYER — mobile menu, FAQ,
   back-to-top, free-delivery bar, search
   ═══════════════════════════════════════ */

/* ── Mobile dropdown menu (class-driven, replaces inline styles) ── */
@media (max-width: 768px) {
  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(12px);
    padding: 22px 24px;
    gap: 18px;
    border-bottom: 1px solid rgba(201, 169, 97, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    animation: menuDrop 0.25s ease-out;
  }

  /* Sub-links sit inline in the mobile sheet rather than as hover flyouts */
  .nav-menu.open .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 10px 0 0;
    padding: 0 0 0 16px;
    background: none;
    border: none;
    border-left: 1px solid rgba(201, 169, 97, 0.25);
  }
  body.rtl .nav-menu.open .dropdown {
    padding: 0 16px 0 0;
    border-left: none;
    border-right: 1px solid rgba(201, 169, 97, 0.25);
  }
  .nav-menu.open .dropdown a { padding: 7px 0; }
  .nav-menu.open .caret { display: none; }
  .nav-menu.open .nav-mobile-lang { display: block; }
}
@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FAQ accordion ── */
.faq {
  padding: 100px 48px;
  background: var(--cream);
}
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid rgba(61, 79, 44, 0.15);
  margin-bottom: 12px;
  transition: border-color 0.3s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--gold); }
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
body.rtl .faq-item summary { font-family: var(--arabic); font-size: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  color: var(--gold);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-a {
  padding: 0 24px 22px;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}
.faq-a a { color: var(--olive); text-decoration: underline; }
@media (max-width: 768px) {
  .faq { padding: 60px 20px; }
  .faq-item summary { padding: 16px 18px; font-size: 16px; }
  .faq-a { padding: 0 18px 18px; }
}

/* ── Back-to-top button ── (stack slot 2 — secondary, appears past 600px) */
.back-to-top {
  position: fixed;
  bottom: calc(var(--fc-bottom) + var(--fc-slot) * 2);
  inset-inline-end: var(--fc-inline);
  width: var(--fc-size);
  height: var(--fc-size);
  background: var(--charcoal);
  color: var(--gold);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all 0.35s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.back-to-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); color: var(--charcoal); }

/* A touch-sized control and a full-width card action cannot share a row on a
   phone, and the back-to-top is the one that loses: flick-scrolling already
   does the job there. Desktop and tablet keep it. */
@media (max-width: 768px) {
  .back-to-top { display: none; }
}

/* ── Free-delivery progress bar (cart drawer) ── */
.ship-progress { margin-bottom: 16px; }
.ship-msg {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.ship-msg b { color: var(--olive); }
.ship-msg.done { color: #1d9e54; font-weight: 600; }
.ship-msg i { margin-right: 4px; }
body.rtl .ship-msg i { margin-right: 0; margin-left: 4px; }
.ship-bar {
  height: 6px;
  background: rgba(61, 79, 44, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.ship-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 4px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Catalogue live search (products page) ── */
.catalog-search {
  max-width: 520px;
  margin: 32px auto 0;
  position: relative;
}
.catalog-search i {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 14px;
  pointer-events: none;
}
body.rtl .catalog-search i { left: auto; right: 18px; }
.catalog-search input {
  width: 100%;
  padding: 14px 20px 14px 46px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 30px;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
body.rtl .catalog-search input { padding: 14px 46px 14px 20px; font-family: var(--arabic); }
.catalog-search input::placeholder { color: rgba(245, 240, 230, 0.4); }
.catalog-search input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}
.search-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  padding: 40px 0;
  font-size: 15px;
}

/* ═══════════════════════════════════════
   KAIZERA SMART ADVISOR (AI assistant)
   ═══════════════════════════════════════ */

/* ── Floating button ── (stack slot 1 — directly above WhatsApp) */
.ai-fab {
  position: fixed;
  bottom: calc(var(--fc-bottom) + var(--fc-slot));
  inset-inline-end: var(--fc-inline);
  width: var(--fc-size);
  height: var(--fc-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--charcoal);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1600;
  box-shadow: 0 6px 24px rgba(201, 169, 97, 0.45);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ai-fab:hover { transform: scale(1.08); }
.ai-fab.hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }

.ai-fab-badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  background: var(--charcoal);
  color: var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid var(--gold);
  animation: aiBadgePulse 2.6s ease-in-out infinite;
}
@keyframes aiBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ── Chat panel ── */
.ai-panel {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  width: 390px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 100px);
  background: var(--charcoal);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1900;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.ai-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.16), rgba(201, 169, 97, 0.04));
  border-bottom: 1px solid rgba(201, 169, 97, 0.25);
}
.ai-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--charcoal);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-head-txt { flex: 1; line-height: 1.35; }
.ai-head-txt strong { color: var(--cream); font-size: 14px; letter-spacing: 0.5px; display: block; }
.ai-head-txt small { color: var(--text-muted); font-size: 11px; display: flex; align-items: center; gap: 6px; }
.ai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  animation: aiBadgePulse 2s infinite;
}
.ai-close {
  color: var(--text-muted);
  font-size: 16px;
  padding: 6px;
  transition: color 0.2s;
}
.ai-close:hover { color: var(--gold); }

.ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

/* ── Messages ── */
.ai-msg {
  max-width: 88%;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.7;
  border-radius: 14px;
  animation: aiMsgIn 0.3s ease;
}
@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-bot {
  align-self: flex-start;
  background: var(--charcoal-light);
  color: var(--text-light);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-bottom-left-radius: 4px;
}
body.rtl .ai-bot { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.ai-bot b { color: var(--gold-light); font-weight: 600; }
.ai-user {
  align-self: flex-end;
  background: var(--gold);
  color: var(--charcoal);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
body.rtl .ai-user { align-self: flex-start; border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
body.rtl .ai-bot { align-self: flex-end; }

.ai-typing { display: flex; gap: 5px; padding: 14px 16px; }
.ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: aiBlink 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiBlink {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* ── Product rows inside chat ── */
.ai-bundle { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ai-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 169, 97, 0.15);
  border-radius: 10px;
  padding: 8px;
}
.ai-prod-img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background-color: #111;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
}
.ai-prod-txt { flex: 1; min-width: 0; line-height: 1.45; }
.ai-prod-txt b { display: block; font-size: 12.5px; color: var(--cream); }
.ai-prod-txt small { font-size: 11px; color: var(--text-muted); display: block; }
.ai-prod-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ai-prod-price { font-size: 12px; color: var(--gold); white-space: nowrap; }
.ai-prod-price small { font-size: 9px; color: var(--text-muted); }
.ai-ask { color: var(--text-muted); font-style: italic; }
.ai-prod-add {
  background: var(--gold);
  color: var(--charcoal);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.ai-prod-add:hover { background: var(--gold-light); transform: scale(1.1); }

.ai-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(201, 169, 97, 0.3);
  font-size: 13px;
  color: var(--cream);
}
.ai-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

/* ── Quick-reply chips ── */
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid rgba(201, 169, 97, 0.15);
  max-height: 130px;
  overflow-y: auto;
}
.ai-chips:empty { display: none; }
.ai-chip {
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.35);
  color: var(--gold-light);
  font-size: 12px;
  padding: 7px 13px;
  border-radius: 20px;
  transition: all 0.2s;
  font-family: inherit;
}
.ai-chip:hover {
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold);
}

/* ── Input row ── */
.ai-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(201, 169, 97, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.ai-input-row input {
  flex: 1;
  background: var(--charcoal-light);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 22px;
  color: var(--cream);
  font-size: 13px;
  padding: 10px 16px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.ai-input-row input:focus { border-color: var(--gold); }
.ai-input-row input::placeholder { color: rgba(245, 240, 230, 0.35); }
.ai-input-row button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.ai-input-row button:hover { background: var(--gold-light); transform: scale(1.06); }
body.rtl .ai-input-row button i { transform: scaleX(-1); }

/* ── Mobile: bottom sheet ── */
@media (max-width: 600px) {
  /* Only this narrow is the paragraph wide enough to run under the floating
     stack. Reserve the stack's column, derived from the same --fc-* tokens so
     it tracks any change to them; .hero-copy already gives 24px of it.
     Subtitle only — the headline and CTAs are short enough to clear it. */
  .hero-subtitle { padding-inline-end: calc(var(--fc-inline) + var(--fc-size) + 8px - 24px); }
  .ai-fab { font-size: 20px; }
  .ai-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 86vh;
    max-height: 86vh;
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}