/* =========================================================
   Olive Samir — Home page
   Vanilla CSS, RTL-first, mobile-first responsive
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --green-900: #2b3417;
  --green-800: #3a4720;
  --green-700: #4a5a29;
  --green-600: #5d7034;
  --gold-600: #a8853c;
  --gold-500: #c2a053;
  --gold-400: #d4b978;
  --gold-100: #efe3c8;

  /* Neutrals */
  --cream-50: #fdfaf4;
  --cream-100: #f8f2e6;
  --cream-200: #f1e8d6;
  --line: #e6dcc7;

  --ink: #26241d;
  --ink-soft: #57534a;
  --ink-muted: #8b8377;
  --on-dark: #f6f1e6;
  --on-dark-soft: #cfc9b6;

  --whatsapp: #25d366;

  /* Type */
  --font-ar: "Cairo", "Segoe UI", system-ui, sans-serif;
  --font-latin: "Cormorant Garamond", "Georgia", serif;

  /* Fluid type scale */
  --fs-h1: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  --fs-h3: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  --fs-body: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  /* Rhythm */
  --shell: 1340px;
  --gutter: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --section-y: clamp(3.25rem, 2rem + 5vw, 6rem);

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43, 52, 23, 0.05), 0 2px 8px rgba(43, 52, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(43, 52, 23, 0.07), 0 12px 28px rgba(43, 52, 23, 0.06);
  --shadow-lg: 0 10px 24px rgba(43, 52, 23, 0.1), 0 28px 60px rgba(43, 52, 23, 0.09);

  --header-h: 92px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-ar);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Reserves the fixed header's space so the hero starts below it */
  padding-top: var(--header-h);
}

img,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 3. Utilities ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A shell that ignores the 1340px cap and runs a flat 80vw — 10vw of air each
   side, at every screen size. The mockup draws its wide bands this way; the
   capped shell would strand them mid-screen on a large monitor. Only kicks in
   once there is width to spare: 80vw of a phone is narrower than the gutters. */
@media (min-width: 900px) {
  .shell--wide {
    max-width: none;
    padding-inline: 0;
    width: 80vw;
  }
}

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

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: -100px;
  z-index: 200;
  translate: 50% 0;
  padding: 0.7rem 1.4rem;
  background: var(--green-800);
  color: var(--on-dark);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  /* Lives here, not as a presentation attribute on each <symbol>, so a
     component can dial the line weight down when it draws icons large. */
  stroke-width: 1.6;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  min-height: 48px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), translate 0.22s var(--ease);
}
.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 0; }

.btn--gold {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  box-shadow: var(--shadow-md);
}

.btn--green {
  background: var(--green-800);
  color: var(--on-dark);
  box-shadow: var(--shadow-sm);
}
.btn--green:hover { background: var(--green-700); box-shadow: var(--shadow-md); }

.btn--whatsapp { background: #128c4a; color: #fff; }
.btn--whatsapp:hover { background: #0f7a40; }

.btn--outline {
  background: rgba(253, 250, 244, 0.9);
  border-color: var(--green-800);
  color: var(--green-800);
  backdrop-filter: blur(6px);
}
.btn--outline:hover { background: var(--green-800); color: var(--on-dark); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
  font-weight: 600;
}
.btn--ghost:hover { border-color: var(--gold-500); color: var(--green-800); background: var(--cream-100); }

.btn--sm { padding: 0.6rem 1rem; min-height: 40px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* ---------- 5. Section heading ---------- */
.section { padding-block: var(--section-y); }

.section-head {
  text-align: center;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.section-head h2 {
  font-size: var(--fs-h2);
  color: var(--green-900);
  letter-spacing: -0.01em;
}

.section-head p {
  margin-top: 0.6rem;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  max-width: 56ch;
  margin-inline: auto;
}

/* Gold rosette divider under headings */
.section-head::after {
  content: "";
  display: block;
  width: 132px;
  height: 12px;
  margin: 0.9rem auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-500) 0 3px, transparent 3.5px),
    linear-gradient(to left, transparent, var(--gold-400) 22%, var(--gold-400) 78%, transparent);
  background-size: 100% 100%, 100% 1px;
  background-position: center, center;
  background-repeat: no-repeat;
  rotate: 0deg;
}

/* Some sections in the mockup carry the heading alone — no deck, no rosette. */
.section-head--plain::after { display: none; }
.section-head--plain { margin-bottom: clamp(1.1rem, 0.8rem + 1.1vw, 1.75rem); }

/* Others carry the heading plus a single small gold mark instead of the full
   rosette rule — a lozenge about a third of the cap height. */
.section-head--mark { margin-bottom: clamp(1.1rem, 0.8rem + 1.1vw, 1.75rem); }
.section-head--mark::after {
  width: clamp(9px, 0.6vw + 5px, 13px);
  height: clamp(9px, 0.6vw + 5px, 13px);
  margin-block-start: 0.7rem;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  background-size: auto;
  rotate: 45deg;
  border-radius: 2px;
}

/* =========================================================
   6. HEADER
   ========================================================= */
/* Fixed, with body padding reserving its space, so the hero begins cleanly
   below it rather than sliding underneath. */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--green-900);
  color: var(--on-dark);
  box-shadow: 0 1px 0 rgba(194, 160, 83, 0.28);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(212, 185, 120, 0.5) 14px 15px),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(212, 185, 120, 0.5) 14px 15px);
  pointer-events: none;
  mask-image: linear-gradient(to left, #000, transparent 45%);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.5rem);
  height: 100%;
}

/* Height stays fixed while scrolling; only the shadow lifts. */
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(43, 52, 23, 0.28); }

/* Logo lockup: emblem + (wordmark over Arabic tagline), matching the mockup.
   Both images are pre-recoloured to gold with transparent ground, so no
   filter hacks are needed to sit them on the dark bar. */
.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.9vw, 0.85rem);
  flex: none;
  /* The lockup is a fixed piece of artwork: emblem then wordmark, left to
     right, regardless of the page's RTL flow. */
  direction: ltr;
}

.brand-mark {
  height: clamp(38px, 3.6vw, 54px);
  width: auto;
  flex: none;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.brand-word {
  height: clamp(15px, 1.5vw, 22px);
  width: auto;
  flex: none;
}

.brand-tag {
  font-size: clamp(0.6rem, 0.55rem + 0.15vw, 0.72rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gold-500);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Desktop nav */
.nav { display: none; }

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.4vw, 1.1rem);
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark-soft);
  border-radius: var(--r-sm);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav a:hover { color: var(--gold-400); background: rgba(255, 255, 255, 0.06); }

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0.85rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
  scale: 0 1;
  transition: scale 0.25s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { scale: 1 1; }
.nav a[aria-current="page"] {
  color: var(--gold-400);
  background: rgba(255, 255, 255, 0.07);
}

.nav .icon { width: 1em; height: 1em; opacity: 0.75; }

/* Header actions — the mockup carries the cart inside the gold button,
   with no separate cart control. */
.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.header-actions .btn--gold { display: none; }

/* Burger */
.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--on-dark);
  border: 1px solid rgba(212, 185, 120, 0.3);
}
.burger .icon { width: 22px; height: 22px; }
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-open { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drawer */
/* Both sit above the sticky header (z 100) so the drawer's own head is not
   clipped by it and the header dims along with the rest of the page. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(38, 36, 29, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 110;
  width: min(340px, 86vw);
  padding: 1.5rem 1.5rem 2.5rem;
  background: var(--green-900);
  color: var(--on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The burger sits on the inline-end side of the header, so the drawer parks
     just past that same edge. In RTL inline-end is the left edge, hence -100%. */
  translate: -100% 0;
  visibility: hidden;
  transition: translate 0.32s var(--ease), visibility 0.32s var(--ease);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.3);
}
[dir="ltr"] .mobile-nav {
  translate: 100% 0;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3);
}
.mobile-nav.is-open { translate: 0 0; visibility: visible; }

.mobile-nav .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(212, 185, 120, 0.22);
}
.mobile-nav .drawer-head img { height: 34px; width: auto; }

.mobile-nav ul { display: grid; gap: 0.25rem; }

.mobile-nav li a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-dark-soft);
  border-radius: var(--r-sm);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mobile-nav li a:hover,
.mobile-nav li a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.07);
  color: var(--gold-400);
}
.mobile-nav li a .icon { width: 18px; height: 18px; color: var(--gold-500); }

.mobile-nav .drawer-cta { display: grid; gap: 0.7rem; margin-top: 1.75rem; }

.mobile-nav .drawer-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(212, 185, 120, 0.22);
  display: grid;
  gap: 0.85rem;
  font-size: var(--fs-sm);
  color: var(--on-dark-soft);
}
.mobile-nav .drawer-contact a { display: flex; align-items: center; gap: 0.6rem; }
.mobile-nav .drawer-contact .icon { width: 17px; height: 17px; color: var(--gold-500); }

body.nav-open { overflow: hidden; }

/* Tagline is the first thing to go when the bar gets genuinely tight */
@media (max-width: 339px) {
  .brand-tag { display: none; }
}

/* A 92px bar eats too much of a phone screen */
@media (max-width: 639px) {
  :root { --header-h: 74px; }
}

@media (min-width: 1024px) {
  .burger { display: none; }
  .nav { display: block; }
  .header-actions .btn--gold { display: inline-flex; }
}

/* =========================================================
   7. HERO
   ========================================================= */
/* The hero box is locked to the artwork's own aspect ratio, so `cover` has
   nothing to crop and the entire image is visible. 941x1672 portrait on
   phones, 1672x941 landscape from 900px up. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  /* Phones: header + hero fill exactly one screen. `svh` is the viewport with
     the browser chrome showing, so nothing is pushed below the fold; plain
     `vh` would overshoot by the height of the URL bar. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  background-image: url("../img/Hero_back_mobile.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Readability wash — top-down on mobile, side wash on desktop */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Backs the copy down to ~73% of the hero, then clears fully so the bottom
     third of the artwork reads unwashed. */
  background: linear-gradient(
    to bottom,
    rgba(250, 244, 232, 0.92) 0%,
    rgba(250, 244, 232, 0.86) 36%,
    rgba(250, 244, 232, 0.66) 56%,
    rgba(250, 244, 232, 0.18) 74%,
    rgba(250, 244, 232, 0) 88%
  );
}

/* Stretches to the hero's aspect-ratio height so the copy can centre in it */
.hero-inner {
  display: flex;
  flex: 1;
  align-items: flex-start;
  padding-block: clamp(2rem, 1.2rem + 3vw, 4rem);
}

/* The mockup centres the whole copy stack inside a narrow column that sits
   over the empty left third of the photography. */
.hero-copy {
  max-width: 680px;
  text-align: center;
}

/* Forced break reproduces the mockup's two-line headline; below the desktop
   breakpoint the headline wraps on its own instead. */
.br-lg { display: none; }
@media (min-width: 900px) {
  .br-lg { display: inline; }
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.28;
  color: var(--green-900);
  letter-spacing: -0.015em;
  text-shadow: 0 1px 2px rgba(253, 250, 244, 0.7);
  /* No forced break at this size, so let the browser even out the lines */
  text-wrap: balance;
}

.hero-lead {
  margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  margin-inline: auto;
  max-width: 33rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--ink-soft);
  line-height: 1.95;
}

/* Plain gold line in the mockup — no pill, no border, no fill. */
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 700;
  color: var(--gold-600);
}
.hero-note .icon { width: 26px; height: 26px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.hero-actions .btn {
  flex: 1 1 auto;
  min-width: 190px;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  min-height: 58px;
  padding-inline: 2rem;
  border-radius: 10px;
}
/* Mockup keeps the WhatsApp glyph brand-green inside the outline button */
.hero-actions .btn--outline .icon { color: #128c4a; }
.hero-actions .btn--outline:hover .icon { color: inherit; }

/* Phone layout: the copy stack is centred in the full-screen hero, with the
   spacing between blocks scaled to viewport height. */
@media (max-width: 899px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-block: clamp(1.5rem, 4vh, 2.5rem);
  }
  /* Leftover height is split 1 : 2.5 between above and below the copy, so the
     stack rides high and the foot of the artwork stays clear of text. A 0
     basis lets both spacers collapse rather than overflow on short screens. */
  .hero-inner::before { content: ""; flex: 1 1 0; }
  .hero-inner::after { content: ""; flex: 2.5 1 0; }

  .hero-copy { max-width: 34rem; width: 100%; flex: none; }
  .hero-lead {
    max-width: 30rem;
    margin-top: clamp(1.25rem, 2.5vh, 1.75rem);
  }
  .hero-note { margin-top: clamp(1.75rem, 3.5vh, 2.5rem); }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: clamp(2rem, 4vh, 3rem);
  }
  .hero-actions .btn { width: 100%; min-width: 0; }
  /* Stacked, the primary action should lead */
  .hero-actions .btn--gold { order: -1; }
}

@media (min-width: 640px) {
  .hero-actions .btn { flex: 0 0 auto; min-width: 268px; }
}

@media (min-width: 900px) {
  .hero {
    /* Desktop goes back to the artwork's own ratio, capped at 75vh */
    min-height: 0;
    aspect-ratio: 1672 / 941;
    max-height: 75vh;
    background-image: url("../img/Hero_back_desktop.png");
    background-position: center;
  }
  /* From here the explicit <br> drives the headline; balancing would fight it */
  .hero h1 { text-wrap: normal; }
  .hero::before {
    /* Copy sits in the left half, so the wash only needs to cover ~half the
       frame — any further and it bleaches the product photography. */
    background: linear-gradient(
      to right,
      rgba(250, 244, 232, 0.86) 0%,
      rgba(250, 244, 232, 0.82) 30%,
      rgba(250, 244, 232, 0.5) 47%,
      rgba(250, 244, 232, 0) 66%
    );
  }
  .hero-inner { align-items: center; }
}

/* On desktop the product photography sits on the right of the art,
   so the copy column is pinned to the left half. */
@media (min-width: 900px) {
  .hero-copy { margin-inline-end: auto; margin-inline-start: 0; }
  [dir="rtl"] .hero-copy { margin-inline-start: auto; margin-inline-end: 0; }
}

/* =========================================================
   7.5 PRODUCTS PAGE HERO
   ========================================================= */
.products-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  background-image: url("../img/Hero_back_mobile.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.products-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(253, 248, 238, 0.94) 0%,
    rgba(253, 248, 238, 0.82) 28%,
    rgba(253, 248, 238, 0.28) 55%,
    transparent 74%
  );
}

.products-hero__inner {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding-top: clamp(2rem, 7vw, 3rem);
}

.products-hero__copy {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.products-hero__copy h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--green-900);
  text-shadow: 0 1px 2px rgba(253, 250, 244, 0.72);
}

.products-hero__copy p {
  margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.95;
  color: var(--ink-soft);
}

.products-breadcrumb {
  background: rgba(255, 253, 248, 0.96);
  border-top: 1px solid rgba(168, 133, 60, 0.18);
  border-bottom: 1px solid rgba(168, 133, 60, 0.22);
}

.products-breadcrumb .shell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  min-height: clamp(52px, 5vw, 62px);
  font-size: clamp(0.82rem, 0.76rem + 0.2vw, 0.95rem);
  color: var(--ink-muted);
}

.products-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}

.products-breadcrumb a:hover { color: var(--gold-600); }
.products-breadcrumb .icon { width: 19px; height: 19px; color: var(--gold-500); }
.products-breadcrumb [aria-current="page"] { color: var(--green-900); font-weight: 600; }

@media (max-width: 899px) {
  .products-hero__copy {
    max-width: 34rem;
    margin-inline: auto;
    padding-inline: 0.5rem;
    text-align: center;
  }
  .products-hero__copy h1 {
    font-size: clamp(2.75rem, 12vw, 3.35rem);
    line-height: 1.2;
  }
  .products-hero__copy p {
    max-width: 32ch;
    margin-top: clamp(1.25rem, 2.5vh, 1.75rem);
    margin-inline: auto;
    font-size: clamp(1.08rem, 4.8vw, 1.3rem);
    line-height: 1.9;
    text-align: center;
  }
  .products-hero__copy br { display: none; }
}

@media (min-width: 900px) {
  .products-hero {
    min-height: 0;
    aspect-ratio: 1672 / 941;
    max-height: 75vh;
    background-image: url("../img/Hero_back_desktop.png");
    background-size: cover;
    background-position: center;
  }
  .products-hero::before {
    background: linear-gradient(
      to right,
      rgba(253, 248, 238, 0.64) 0%,
      rgba(253, 248, 238, 0.46) 34%,
      rgba(253, 248, 238, 0.08) 51%,
      transparent 64%
    );
  }
  .products-hero__inner { align-items: center; padding-top: 0; }
  .products-hero__copy {
    width: min(42%, 520px);
    margin-right: auto;
    margin-left: 0;
  }
}

/* =========================================================
   7.6 PRODUCTS CATALOG FILTERS
   ========================================================= */
.catalog-section {
  padding-block: clamp(1.4rem, 1rem + 1.8vw, 2.5rem) clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
  background:
    radial-gradient(circle at 10% 5%, rgba(194, 160, 83, 0.06), transparent 26rem),
    var(--cream-50);
}

.catalog-toolbar {
  display: grid;
  gap: 0.85rem;
  align-items: stretch;
  margin-bottom: clamp(1rem, 0.7rem + 1.2vw, 1.65rem);
}

.wholesale-note,
.category-tabs,
.catalog-search,
.catalog-sort {
  min-height: 54px;
}

.wholesale-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--green-900);
  white-space: nowrap;
}

.wholesale-note .icon {
  width: 22px;
  height: 22px;
  color: var(--gold-600);
}

.category-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
}

.category-tab {
  flex: 1 1 auto;
  min-width: max-content;
  padding-inline: clamp(0.9rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 249, 0.86);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.category-tab:hover {
  color: var(--gold-600);
  border-color: rgba(168, 133, 60, 0.48);
}

.category-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border-color: var(--gold-600);
  box-shadow: 0 5px 16px rgba(168, 133, 60, 0.2);
}

.catalog-search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 249, 0.9);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.catalog-search:focus-within {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(194, 160, 83, 0.12);
}

.catalog-search .icon {
  width: 20px;
  height: 20px;
  color: var(--ink-muted);
}

.catalog-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--fs-sm);
}

.catalog-search input::placeholder { color: #aaa196; }
.catalog-search input::-webkit-search-cancel-button { display: none; }

.catalog-sort {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(7.5rem, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding-inline: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 249, 0.9);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.catalog-sort span { color: var(--ink-soft); font-weight: 600; }
.catalog-sort select {
  appearance: none;
  min-width: 0;
  width: 100%;
  padding-inline-end: 1.25rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.catalog-sort::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.9rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--green-900);
  border-bottom: 1.5px solid var(--green-900);
  rotate: 45deg;
  translate: 0 -65%;
  pointer-events: none;
}

.catalog-layout {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.5vw, 1.5rem);
}

.products-results { min-width: 0; }

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.55rem + 0.8vw, 1rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.24);
  border-radius: var(--r-md);
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 3px 14px rgba(43, 52, 23, 0.035);
  transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.product-card:hover {
  translate: 0 -4px;
  border-color: rgba(168, 133, 60, 0.42);
  box-shadow: var(--shadow-md);
}

.product-card[hidden] { display: none; }

.product-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--cream-200);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.45s var(--ease);
}

.product-card:hover .product-card__media img { scale: 1.035; }
.product-card__media--carrot img { object-position: 60% 52%; scale: 1.08; }
.product-card__media--cucumber img { object-position: 38% 48%; scale: 1.12; }
.product-card:hover .product-card__media--carrot img { scale: 1.115; }
.product-card:hover .product-card__media--cucumber img { scale: 1.155; }

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.75rem 0.85rem 0.8rem;
  text-align: center;
}

.product-card__body h3 {
  color: var(--ink);
  font-size: clamp(0.96rem, 0.9rem + 0.25vw, 1.1rem);
  font-weight: 800;
  line-height: 1.45;
}

.product-card__body p {
  min-height: 3.1em;
  margin-top: 0.2rem;
  color: var(--ink-soft);
  font-size: clamp(0.69rem, 0.65rem + 0.15vw, 0.78rem);
  line-height: 1.55;
}

.product-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.48rem;
  direction: rtl;
}

.product-sizes span {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fffdfa;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1;
}

.product-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 40px;
  margin-top: 0.65rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gold-600);
  border-radius: 6px;
  color: var(--green-900);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.product-card__action:hover {
  color: #fff;
  background: var(--gold-600);
  box-shadow: 0 5px 14px rgba(168, 133, 60, 0.18);
}

.product-card__action .icon {
  width: 18px;
  height: 18px;
  color: var(--gold-600);
}

.product-card__action:hover .icon { color: currentColor; }

.products-empty {
  padding: 3.5rem 1rem;
  border: 1px dashed rgba(168, 133, 60, 0.45);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  text-align: center;
}

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
}

.catalog-benefits {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin-top: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  border: 1px solid rgba(168, 133, 60, 0.25);
  border-radius: var(--r-md);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 3px 12px rgba(43, 52, 23, 0.025);
}

.catalog-benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  min-height: 104px;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  text-align: right;
}

.catalog-benefit + .catalog-benefit {
  border-top: 1px solid rgba(168, 133, 60, 0.2);
}

.catalog-benefit .icon {
  width: clamp(38px, 3.5vw, 50px);
  height: clamp(38px, 3.5vw, 50px);
  color: var(--green-800);
  stroke-width: 1.25;
}

.catalog-benefit__copy h3 {
  color: var(--green-900);
  font-size: clamp(0.9rem, 0.84rem + 0.28vw, 1.05rem);
  font-weight: 800;
  line-height: 1.45;
}

.catalog-benefit__copy p {
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: clamp(0.7rem, 0.67rem + 0.12vw, 0.78rem);
  line-height: 1.55;
}

.catalog-pagination[hidden] { display: none; }
.pagination-pages { display: flex; align-items: center; gap: 0.55rem; }

.pagination-control,
.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 253, 249, 0.94);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), translate 0.2s var(--ease);
}

.pagination-control:hover:not(:disabled),
.pagination-page:hover {
  color: var(--gold-600);
  border-color: var(--gold-500);
  translate: 0 -2px;
}

.pagination-page.is-active {
  color: #fff;
  background: var(--gold-600);
  border-color: var(--gold-600);
  box-shadow: 0 4px 12px rgba(168, 133, 60, 0.2);
}

.pagination-control:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.pagination-control--next { gap: 0.4rem; padding-inline: 1rem; }

.products-contact-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(300px, 1.45fr) minmax(100px, 0.65fr);
  grid-template-areas: "badge copy action";
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 96px;
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 1.9rem);
  padding: 0.8rem clamp(1.15rem, 2.7vw, 2.4rem);
  overflow: hidden;
  border: 2px solid var(--gold-600);
  border-radius: var(--r-md);
  color: var(--on-dark);
  direction: ltr;
  background-color: #253412;
  background-image:
    linear-gradient(to right, rgba(29, 43, 13, 0.18), rgba(29, 43, 13, 0.94) 24%, rgba(29, 43, 13, 0.94) 76%, rgba(29, 43, 13, 0.18)),
    url("../img/banner_bg.png");
  background-position: center, center;
  background-size: 100% 100%, auto 240px;
  background-repeat: no-repeat, repeat-x;
  box-shadow: 0 6px 18px rgba(43, 52, 23, 0.12);
}

.products-contact-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.035), rgba(4, 9, 2, 0.13));
}

.products-contact-badge {
  grid-area: badge;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(54px, 5.4vw, 66px);
  height: clamp(54px, 5.4vw, 66px);
  border: 3px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  color: #4d9e46;
  background: #eef7e9;
  box-shadow: 0 4px 14px rgba(8, 20, 4, 0.22);
}

.products-contact-badge .icon { width: 58%; height: 58%; }

.products-contact-copy {
  grid-area: copy;
  direction: rtl;
  text-align: center;
}

.products-contact-copy h2 {
  color: var(--gold-400);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  font-weight: 800;
  line-height: 1.45;
}

.products-contact-copy p {
  margin-top: 0.12rem;
  color: #fff;
  font-size: clamp(0.72rem, 0.67rem + 0.18vw, 0.82rem);
  line-height: 1.65;
}

.products-contact-action {
  grid-area: action;
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gold-500);
  border-radius: 7px;
  color: var(--gold-400);
  background: rgba(19, 31, 8, 0.46);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), translate 0.2s var(--ease);
}

.products-contact-action:hover {
  color: var(--green-900);
  background: var(--gold-400);
  translate: 0 -2px;
}

.products-contact-action .icon { width: 20px; height: 20px; }

@media (max-width: 699px) {
  .products-contact-banner {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "action" "badge";
    gap: 1rem;
    padding: 1.5rem 1.15rem;
    background-size: 100% 100%, auto 320px;
  }
  .products-contact-action { justify-self: center; width: min(100%, 270px); }
  .products-contact-badge { width: 58px; height: 58px; }
}

@media (min-width: 560px) {
  .catalog-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-benefit + .catalog-benefit { border-top: 0; }
  .catalog-benefit:nth-child(n + 3) { border-top: 1px solid rgba(168, 133, 60, 0.2); }
  .catalog-benefit:nth-child(even) { border-inline-start: 1px solid rgba(168, 133, 60, 0.2); }
}

@media (min-width: 900px) {
  .catalog-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-benefit { min-height: 98px; }
  .catalog-benefit:nth-child(n + 3) { border-top: 0; }
  .catalog-benefit + .catalog-benefit { border-inline-start: 1px solid rgba(168, 133, 60, 0.2); }
}

.filter-sidebar {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

@media (max-width: 899px) {
  .filter-sidebar { grid-row: 1; }
  .products-results { grid-row: 2; }
}

.filter-group {
  min-width: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid rgba(168, 133, 60, 0.24);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 249, 0.88);
  box-shadow: 0 3px 12px rgba(43, 52, 23, 0.025);
}

.filter-group h2,
.filter-group legend {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin-bottom: 0.7rem;
  color: var(--green-900);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
}

.filter-group legend { float: right; }
.filter-group legend + * { clear: both; }
.filter-group h2 .icon,
.filter-group legend .icon {
  width: 21px;
  height: 21px;
  color: var(--gold-600);
}

.category-filter-list { display: grid; gap: 0.22rem; }
.category-filter-list button {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.3rem 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  text-align: right;
  transition: color 0.2s var(--ease);
}

.category-filter-list button:hover,
.category-filter-list button.is-active { color: var(--gold-600); }

.filter-options {
  display: grid;
  gap: 0.48rem;
  font-size: var(--fs-sm);
}

.filter-options label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  cursor: pointer;
}

.filter-options input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid #aaa79c;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.filter-options input::before {
  content: "";
  width: 8px;
  height: 4px;
  border-inline-start: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: -45deg;
  scale: 0;
  translate: 0 -1px;
  transition: scale 0.12s var(--ease);
}

.filter-options input:checked {
  border-color: var(--gold-600);
  background: var(--gold-600);
}

.filter-options input:checked::before { scale: 1; }

.clear-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gold-600);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 249, 0.9);
  color: var(--green-900);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.clear-filters:hover { color: #fff; background: var(--gold-600); }
.clear-filters .icon { width: 19px; height: 19px; color: var(--gold-600); }
.clear-filters:hover .icon { color: currentColor; }

@media (min-width: 680px) and (max-width: 899px) {
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .wholesale-note { justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clear-filters { grid-column: 1 / -1; }
}

@media (max-width: 679px) {
  .catalog-toolbar { gap: 0.7rem; }
  .wholesale-note { justify-content: flex-start; min-height: 34px; }
  .category-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tab { min-height: 48px; }
  .catalog-search,
  .catalog-sort { min-height: 52px; }
}

@media (min-width: 900px) {
  .catalog-toolbar {
    grid-template-columns: minmax(130px, 0.65fr) minmax(310px, 1.45fr) minmax(215px, 1.05fr) minmax(165px, 0.8fr);
  }
  .catalog-layout { grid-template-columns: minmax(0, 1fr) clamp(190px, 19vw, 275px); }
  .filter-sidebar {
    grid-column: 2;
    grid-template-rows: auto 1fr 1fr 1fr auto;
    align-content: stretch;
    height: 100%;
  }
  .products-results { display: flex; grid-column: 1; grid-row: 1; }
  .product-grid {
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .product-card__media { height: clamp(140px, 12vw, 180px); aspect-ratio: auto; }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .category-tabs { gap: 0.4rem; }
  .category-tab { padding-inline: 0.7rem; font-size: 0.8rem; }
}

/* =========================================================
   8. TRUST BAR
   Mockup: a low cream card sitting on the hero's bottom edge,
   four cells, big thin gold line-art to the LEFT of each label,
   separated by short hairlines that stop well short of the edges.
   ========================================================= */
.trust {
  position: relative;
  z-index: 2;
  /* Mobile stands clear of the hero artwork; desktop laps onto it slightly. */
  margin-top: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
}

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fbf8f4;
  border: 1px solid rgba(168, 133, 60, 0.14);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(43, 52, 23, 0.04), 0 12px 32px rgba(43, 52, 23, 0.07);
}

.trust-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 0.55rem + 0.7vw, 1.3rem);
  padding: clamp(1.05rem, 0.85rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
}

/* Stacked, each row is a two-track grid rather than a flex row: the icon takes
   a fixed leading track so the icons line up down the card, and the label fills
   the rest and stays flush against it. Flex could do one or the other -- pinned
   to the far edge the icons aligned but sat across a void on the short labels;
   packed against the text they hugged it but drifted with each label's width. */
.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.3rem);
}
/* Both need an explicit row. The icon is column 1 (the right-hand one under
   RTL) but comes second in the DOM, and sparse auto-placement will not step
   backwards -- it would open a second row for it instead. */
.trust-ico { grid-column: 1; grid-row: 1; }
.trust-text { grid-column: 2; grid-row: 1; }

/* Two dividers per cell, only one of which is ever on: ::before is the
   horizontal rule used while the grid is stacked, ::after the vertical one
   used once cells sit side by side. Both fade out at the ends so they read
   as short inset hairlines rather than full-bleed borders. */
.trust-item::before,
.trust-item::after {
  content: "";
  position: absolute;
  background: linear-gradient(var(--trust-rule-dir, to right),
    transparent, rgba(168, 133, 60, 0.34), transparent);
}
.trust-item::before {
  inset-inline: 10%;
  bottom: 0;
  height: 1px;
}
.trust-item::after {
  --trust-rule-dir: to bottom;
  inset-inline-end: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 56%;
  display: none;
}
.trust-item:last-child::before { display: none; }

.trust-ico {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--gold-600);
}
.trust-ico .icon {
  /* Floor of 3.25rem keeps the icon ~3.4x the label size on a phone; at the
     old 2.6rem it fell to 2.6x and read as an afterthought next to the text,
     where desktop and the mockup both sit near 3.8x. */
  width: clamp(3.25rem, 1.5rem + 2.9vw, 5.5rem);
  height: clamp(3.25rem, 1.5rem + 2.9vw, 5.5rem);
  /* Drawn this large, the default 1.6 would read as a heavy marker stroke. */
  stroke-width: 1.15;
}

/* Deliberately off --fs-h3, which tops out at 21.6px. The mockup's heading
   measures ~104px wide and ~21px of ink, and Cairo bold sets this string at
   6.425x and 1.25x its size — both point at ~17px. At 21.6 the labels were a
   third too big, which is what flattened the icon/text contrast. */
.trust-item h3 {
  font-size: clamp(1rem, 0.92rem + 0.34vw, 1.06rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 0.12rem;
}
.trust-item p {
  font-size: clamp(0.82rem, 0.76rem + 0.24vw, 0.95rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

/* Octagonal gold medallion — a Moroccan motif rendered in CSS */
.medallion {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--gold-600);
  background: linear-gradient(145deg, var(--cream-100), #fff);
  border: 1.5px solid var(--gold-400);
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%, 100% 70%,
    70% 100%, 30% 100%, 0% 70%, 0% 30%
  );
  transition: color 0.25s var(--ease), background 0.25s var(--ease), scale 0.25s var(--ease);
}
.medallion .icon { width: 26px; height: 26px; }

.medallion--lg { width: 68px; height: 68px; }
.medallion--lg .icon { width: 32px; height: 32px; }

.medallion--dark {
  color: var(--gold-400);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 185, 120, 0.45);
}

/* 2 x 2: vertical rule inside each row, horizontal rule under the first row */
@media (min-width: 560px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item {
    display: flex;
    justify-content: center;
  }
  .trust-item:nth-child(odd)::after { display: block; }
  .trust-item:nth-child(n + 3)::before { display: none; }
}

/* The card laps onto the hero's bottom edge once the hero goes wide, and
   spans a flat 80vw — 10vw of air each side. It deliberately ignores the
   1340px --shell cap the rest of the page obeys, otherwise a wide monitor
   would strand it in the middle with huge empty margins. */
@media (min-width: 900px) {
  .trust { margin-top: calc(-1 * clamp(1rem, 0.2rem + 1.6vw, 2rem)); }
  .trust .shell {
    max-width: none;
    padding-inline: 0;
  }
  .trust-grid {
    width: 80vw;
    margin-inline: auto;
  }
}

/* One row. Held back to 1180px: below that a quarter of the shell cannot
   take a 54px icon plus an unwrapped heading, and the labels break apart. */
@media (min-width: 1280px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  /* A cell is 20vw — 256px at the breakpoint — and at 17px the longest
     heading needs only ~127px of it, so the icon no longer has to give way. */
  .trust-item {
    gap: clamp(0.6rem, 1.72vw - 12px, 1.3rem);
    /* Card height tracks the mockup's 9.34% of card width, not the taller
       stacked-layout padding. */
    padding: 0.85rem clamp(1rem, 1.875vw - 8px, 1.75rem);
  }
  .trust-item::before { display: none; }
  .trust-item::after { display: block; }
  .trust-item:last-child::after { display: none; }
}

/* =========================================================
   9. CATEGORIES
   ========================================================= */
/* Mockup: three equal landscape tiles in one row, tight against each other —
   the gutter between them is ~3% of a card, far narrower than the section
   rhythm elsewhere on the page. */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.7rem, 0.5rem + 0.6vw, 1rem);
}

.cat-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  /* Inset lives on the copy, not here: the spacer below sizes off the grid
     track, so any padding on the card would come out of the ratio and leave
     the tile taller than the shape it is meant to hold. */
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--on-dark);
  box-shadow: var(--shadow-md);
}

/* The mockup's shape is expressed as a height floor rather than an
   aspect-ratio. A ratio here reads back the other way as soon as anything
   constrains the height — it starts deriving a *width* and forces the grid
   track open — and a ratio on a spacer child inherits the same problem. This
   is 3:2 of the full-bleed card, and the row still grows past it if the copy
   needs more, so nothing is cropped by the overflow the photo requires. */
.cat-card { min-height: min(62vw, 30rem); }

.cat-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s var(--ease);
}

/* Two stacked washes: a flat olive tint that unifies three photos shot under
   different light, and a scrim that pools on the right so the copy has a solid
   ground while the left half of the photo stays legible. Physical `to left`,
   not a logical direction — it follows the text block, which is pinned right. */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--cat-scrim-dir, to left),
      rgba(24, 31, 12, 0.9) 0%,
      rgba(26, 33, 14, 0.8) var(--cat-scrim-mid, 46%),
      rgba(34, 43, 19, 0.44) 78%,
      rgba(43, 52, 23, 0.18) 100%),
    linear-gradient(rgba(43, 52, 23, 0.14), rgba(43, 52, 23, 0.14));
}

.cat-card:hover img { scale: 1.06; }

/* Shares the spacer's cell, pinned to the top edge — the mockup sets the copy
   at the top of the tile, not the bottom. */
.cat-card__body {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  padding: clamp(1.1rem, 0.7rem + 1.4vw, 1.9rem);
}

/* cat_3's bowls sit in the right half of the frame, so its copy moves left and
   the scrim follows — which is exactly what the mockup draws for this tile. */
.cat-card--flip { --cat-scrim-dir: to right; }
.cat-card--flip .cat-card__body { justify-self: end; }

.cat-card h3 {
  /* ~8.7% of the card's width in the mockup, which lands near 30px once the
     row is three-up — noticeably larger than the old 21px and the reason the
     tiles read as thumbnails instead of category banners. */
  font-size: clamp(1.35rem, 1rem + 1.15vw, 1.95rem);
  line-height: 1.35;
  color: #fffdf7;
  margin-bottom: 0.35rem;
}

.cat-card p {
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);
  line-height: 1.7;
  /* Warm gold, not the grey-cream used elsewhere on dark. */
  color: var(--gold-400);
  margin-bottom: clamp(0.85rem, 0.6rem + 0.8vw, 1.35rem);
}

/* Not .btn: the mockup's is a bare hairline rectangle — no fill, no lift,
   squarer corners and a lighter weight than the page's outline button. */
.cat-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
  border: 1px solid rgba(246, 241, 230, 0.55);
  border-radius: var(--r-sm);
  font-size: clamp(0.78rem, 0.72rem + 0.22vw, 0.9rem);
  font-weight: 600;
  color: #eae6d6;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.cat-card:hover .cat-card__cta,
.cat-card:focus-visible .cat-card__cta {
  background: rgba(246, 241, 230, 0.95);
  border-color: rgba(246, 241, 230, 0.95);
  color: var(--green-900);
}

@media (min-width: 860px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  /* The mockup's tile is 16:9. Three-up it is also the widest the copy ever
     gets, so it is the only place the copy can share the frame with the photo. */
  /* 16:9 of a third of the 80vw band, written out as a height so the tile can
     still stretch for the copy: card ≈ 26.7vw wide, so 16:9 ≈ 15vw. */
  .cat-card { min-height: clamp(11.5rem, 15vw - 6px, 19rem); }
  /* Wide enough that the copy still wraps to two lines at these tile widths;
     hold it to 66% here and it takes three, and the tile grows out of the
     mockup's letterbox shape to swallow them. */
  .cat-card__body { max-width: 84%; }
}

/* Only past here is a third of the band roomy enough to give the photo back
   the left half and still keep the copy on two lines. */
@media (min-width: 1360px) {
  .cat-card__body { max-width: 66%; }
  /* The copy has pulled back off the photo, so the scrim can pull back with it
     and let more of the left half read — the balance the mockup strikes. */
  .cat-card { --cat-scrim-mid: 30%; }
}

/* Sizes strip */
/* A slim bar sitting tight under the tiles — in the mockup it butts against
   their bottom edge and reads as the group's footer, not a separate block.
   Its run of label + sizes is centred and occupies a little over 40% of the
   bar; the air either side is the point, not something to fill. */
.sizes-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.4rem + 2.2vw, 3.8rem);
  margin-top: clamp(0.7rem, 0.5rem + 0.6vw, 1rem);
  /* Measured off the mockup: the bar is ~5% of its own width tall, so the
     block padding stays far tighter than the page's usual panel inset. */
  padding: clamp(0.55rem, 0.42rem + 0.5vw, 0.85rem) clamp(1rem, 0.8rem + 1vw, 2rem);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.sizes-strip .sizes-label {
  font-weight: 700;
  font-size: clamp(0.82rem, 0.76rem + 0.26vw, 0.98rem);
  color: var(--green-900);
}

.sizes-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Roughly 2.5x the icon-to-label gap inside an item, so each size still
     reads as one unit at a glance. */
  gap: clamp(0.9rem, 0.4rem + 2.2vw, 3.4rem);
}

.sizes-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(0.82rem, 0.76rem + 0.26vw, 0.98rem);
  font-weight: 700;
  color: var(--ink);
}
/* Bigger and thinner than the page default — the mockup draws these as small
   line-art vignettes, closer in weight to the trust-bar icons than to a chip. */
.sizes-strip .icon {
  width: clamp(26px, 1.4vw + 14px, 35px);
  height: clamp(26px, 1.4vw + 14px, 35px);
  stroke-width: 1.3;
  color: var(--gold-600);
}

/* =========================================================
   10. FEATURED PRODUCTS
   ========================================================= */
/* Five equal cards on one row in the mockup. Stacked one per row on a phone —
   a rail the reader has to swipe hides four of the five products behind a
   gesture nothing on the page advertises. */
.product-rail {
  display: grid;
  grid-template-columns: 1fr;
  /* ~10% of a card in the mockup, which is tighter than the page's usual
     grid gutter and is what makes the five read as one shelf. */
  gap: clamp(0.85rem, 0.6rem + 0.9vw, 1.4rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  /* Cream, not white: the mockup's card is barely lifted off the page. */
  background: var(--cream-50);
  /* Sized against the card, not the viewport: the row goes 1 -> 2 -> 3 -> 5
     up, so a 1440px screen holds a 212px card while a 1024px one holds a
     261px card. A vw-based scale cannot serve both, and at 5-up it overshot
     far enough to wrap every heading onto a second line. */
  container-type: inline-size;
  border: 1px solid rgba(168, 133, 60, 0.2);
  border-radius: clamp(10px, 0.5vw + 6px, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), translate 0.25s var(--ease), border-color 0.25s var(--ease);
}
.product-card:hover {
  translate: 0 -4px;
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}

.product-card .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-200);
}
.product-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.45s var(--ease);
}
.product-card:hover .thumb img { scale: 1.05; }

/* Everything under the photo is centred in the mockup, not ranged right. */
.product-card .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  text-align: center;
  gap: clamp(0.55rem, 3.4cqw, 0.9rem);
  padding: clamp(0.8rem, 7cqw, 1.3rem);
}

.product-card h3 {
  /* ~9% of the card's width in the mockup — noticeably larger than the 15.7px
     it was set at, which is why the cards read as thumbnails. */
  font-size: clamp(0.85rem, 7.3cqw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--green-900);
}

/* Hairline outlined boxes, no fill. Equal columns filling the full body width
   so the row squares off against the order button beneath it — in the mockup
   the two share an edge on both sides. `auto-columns` rather than a fixed
   three, so a product listed with two or four sizes still spans the same. */
.size-chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
  gap: clamp(0.3rem, 2.2cqw, 0.6rem);
  margin-top: auto;
}

.size-chips li {
  padding: 0.28rem 0.25rem;
  font-size: clamp(0.72rem, 6.4cqw, 0.92rem);
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  border: 1px solid rgba(168, 133, 60, 0.28);
  border-radius: 6px;
}

/* Same hairline language as the chips, full width, no fill — deliberately not
   .btn, whose ghost variant carries a heavier border and a 40px floor. */
.product-cta {
  display: block;
  width: 100%;
  padding: clamp(0.4rem, 2.6cqw, 0.62rem) 0.75rem;
  border: 1px solid rgba(168, 133, 60, 0.28);
  border-radius: 6px;
  font-size: clamp(0.76rem, 6.6cqw, 0.95rem);
  font-weight: 600;
  color: var(--green-900);
  text-align: center;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.product-cta:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--on-dark);
}

.section-cta { display: flex; justify-content: center; margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }

@media (min-width: 620px) {
  .product-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .product-rail { grid-template-columns: repeat(3, 1fr); }
}
/* Five-up waits for 1200: below it a fifth of the band is under 185px, and the
   longest title ("زيت زيتون بكر ممتاز (تنكة)") cannot hold one line inside it
   even at the smallest size the card is allowed to set. */
@media (min-width: 1300px) {
  .product-rail { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   11. SECTORS
   ========================================================= */
/* No tinted band: sampled across the mockup, the section, the gutters between
   the cards and the cards themselves are all the same page cream. What defines
   a card here is a hairline border and nothing else.

   Half the page's usual section rhythm. These are four short, borderless
   cards with no background of their own, so the standard 96px of block
   padding read as a hole in the page rather than as breathing room. */
.sectors {
  --section-y: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
}

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */
.product-detail-section {
  padding-block: clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
  background:
    radial-gradient(circle at 12% 15%, rgba(194, 160, 83, 0.1), transparent 28rem),
    var(--cream-50);
}

.product-detail-layout {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2.5vw, 3.5rem);
  align-items: stretch;
}

.product-detail-media {
  position: relative;
  min-height: clamp(330px, 70vw, 520px);
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.26);
  border-radius: var(--r-lg);
  background: var(--cream-100);
  box-shadow: var(--shadow-md);
}

.product-detail-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(43, 52, 23, 0.18), transparent);
}

.product-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s var(--ease);
}

.product-detail-media:hover img { scale: 1.025; }

.product-detail-badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  inset-inline-start: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-pill);
  color: #fff;
  background: rgba(43, 52, 23, 0.9);
  backdrop-filter: blur(5px);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(20, 27, 7, 0.18);
}

.product-detail-badge .icon { width: 17px; height: 17px; color: var(--gold-400); }

.product-detail-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.25rem, 0.1rem + 1vw, 1rem) 0;
}

.product-detail-category {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.34rem 0.8rem;
  border: 1px solid rgba(168, 133, 60, 0.26);
  border-radius: var(--r-pill);
  color: var(--gold-600);
  background: rgba(239, 227, 200, 0.42);
  font-size: 0.8rem;
  font-weight: 800;
}

.product-detail-content h2 {
  margin-top: 0.75rem;
  color: var(--green-900);
  font-size: clamp(1.8rem, 1.35rem + 1.8vw, 3rem);
  letter-spacing: -0.02em;
}

.product-detail-description {
  max-width: 62ch;
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.95;
}

.product-detail-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.product-detail-highlights span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 36px;
  padding: 0.35rem 0.72rem;
  border: 1px solid rgba(74, 90, 41, 0.16);
  border-radius: var(--r-sm);
  color: var(--green-800);
  background: rgba(248, 242, 230, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
}

.product-detail-highlights .icon { width: 17px; height: 17px; color: var(--gold-600); }

.product-detail-options { margin-top: 1.3rem; }
.product-detail-options h3 { color: var(--green-900); font-size: 0.95rem; }

.product-detail-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.product-detail-sizes li {
  display: grid;
  place-items: center;
  min-width: 78px;
  min-height: 42px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--gold-400);
  border-radius: var(--r-sm);
  color: var(--green-900);
  background: #fffdf9;
  font-size: 0.82rem;
  font-weight: 700;
}

.product-detail-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.23);
  border-radius: var(--r-md);
  background: rgba(255, 253, 249, 0.82);
}

.product-detail-specs div {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid rgba(168, 133, 60, 0.16);
}

.product-detail-specs div:nth-child(odd) { border-inline-end: 1px solid rgba(168, 133, 60, 0.16); }
.product-detail-specs div:nth-last-child(-n + 2) { border-bottom: 0; }
.product-detail-specs dt { color: var(--ink-muted); font-size: 0.72rem; }
.product-detail-specs dd { margin-top: 0.12rem; color: var(--green-900); font-size: 0.84rem; font-weight: 700; }

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.product-detail-order,
.product-detail-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.7rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 800;
  transition: translate 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.product-detail-order {
  flex: 1 1 220px;
  gap: 0.6rem;
  color: #fff;
  background: var(--green-800);
  box-shadow: 0 5px 15px rgba(43, 52, 23, 0.16);
}

.product-detail-order:hover { background: var(--green-700); translate: 0 -2px; }
.product-detail-order .icon { width: 21px; height: 21px; color: var(--gold-400); }

.product-detail-back {
  flex: 0 1 190px;
  border: 1px solid var(--gold-600);
  color: var(--gold-600);
  background: transparent;
}

.product-detail-back:hover { color: #fff; background: var(--gold-600); translate: 0 -2px; }

.product-detail-contact-wrap {
  padding-block: 0 clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  background: var(--cream-50);
}

.product-detail-contact-wrap .products-contact-banner { margin-top: 0; }

@media (min-width: 900px) {
  .product-detail-layout { grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr); }
  .product-detail-media { min-height: 590px; }
}

@media (max-width: 559px) {
  .product-detail-media { min-height: 350px; border-radius: var(--r-md); }
  .product-detail-content { text-align: center; }
  .product-detail-category { align-self: center; }
  .product-detail-description { margin-inline: auto; }
  .product-detail-highlights,
  .product-detail-sizes,
  .product-detail-actions { justify-content: center; }
  .product-detail-specs { grid-template-columns: 1fr; text-align: start; }
  .product-detail-specs div,
  .product-detail-specs div:nth-child(odd),
  .product-detail-specs div:nth-last-child(-n + 2) {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(168, 133, 60, 0.16);
  }
  .product-detail-specs div:last-child { border-bottom: 0; }
  .product-detail-order,
  .product-detail-back { flex-basis: 100%; width: 100%; }
}
.sector-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.4rem);
}
/* Two-up needs ~160px a card to hold the copy on the two lines the mockup
   sets; below that the pair is narrower than that and it breaks to three. */
@media (min-width: 380px) {
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}

.sector-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Same reason as the product cards: the row goes 2-up then 4-up, so the card
     width does not track the viewport and the type has to scale off the card. */
  container-type: inline-size;
  gap: clamp(0.5rem, 3cqw, 0.8rem);
  padding: clamp(1.1rem, 7cqw, 1.9rem) clamp(0.85rem, 5cqw, 1.4rem);
  text-align: center;
  background: transparent;
  border: 1px solid rgba(168, 133, 60, 0.22);
  border-radius: var(--r-md);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), translate 0.25s var(--ease);
}
.sector-card:hover {
  translate: 0 -4px;
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
}

/* Bare line-art in deep green — the mockup has no gold medallion disc behind
   these, and draws them about a quarter of the card wide. */
.sector-ico {
  display: grid;
  place-items: center;
  color: var(--green-900);
  transition: scale 0.25s var(--ease);
}
.sector-ico .icon {
  width: clamp(38px, 26cqw, 66px);
  height: clamp(38px, 26cqw, 66px);
  /* Drawn this large the 1.6 default reads as a marker stroke. */
  stroke-width: 1.4;
}
.sector-card:hover .sector-ico { scale: 1.06; }

.sector-card h3 {
  font-size: clamp(0.98rem, 7.6cqw, 1.32rem);
  line-height: 1.4;
  color: var(--green-900);
}
.sector-card p {
  font-size: clamp(0.78rem, 5.6cqw, 0.95rem);
  line-height: 1.7;
  color: var(--ink-muted);
}

/* Four-up from 1000, not 900: at 900 a quarter of the band is 167px and the
   copy breaks onto a third line. */
@media (min-width: 1000px) {
  .sector-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   12. HOW TO ORDER
   ========================================================= */
.how-order {
  --section-y: clamp(2.4rem, 1.75rem + 1.8vw, 3.6rem);
}

.how-order__head {
  margin-bottom: clamp(1.25rem, 0.95rem + 0.7vw, 1.75rem);
}

.how-order__head h2 {
  font-size: clamp(1.65rem, 1.35rem + 0.75vw, 2.1rem);
  line-height: 1.25;
}

.how-order__head::after { display: none; }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 330px);
  min-height: 92px;
  margin-inline: auto;
  gap: clamp(0.55rem, 0.4rem + 0.3vw, 0.8rem);
  padding: clamp(0.65rem, 0.5rem + 0.35vw, 0.85rem);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.step-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 2.75rem + 0.8vw, 3.8rem);
  height: clamp(3.25rem, 2.75rem + 0.8vw, 3.8rem);
  color: var(--green-800);
}

.step-icon .icon {
  width: 100%;
  height: 100%;
  stroke-width: 1.45;
}

.step-body {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.step h3 {
  margin-bottom: 0.2rem;
  font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.08rem);
  line-height: 1.35;
  white-space: nowrap;
  color: var(--green-900);
}

.step p {
  font-size: clamp(0.72rem, 0.66rem + 0.16vw, 0.82rem);
  line-height: 1.6;
  color: var(--ink-muted);
}

.step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.65rem, 2.35rem + 0.5vw, 3rem);
  height: clamp(2.65rem, 2.35rem + 0.5vw, 3rem);
  font-size: clamp(1.05rem, 0.95rem + 0.22vw, 1.2rem);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 5px var(--cream-50);
}

/* Connector arrows between steps */
.step-arrow {
  display: grid;
  place-items: center;
  color: var(--gold-500);
  padding-block: 0.25rem;
}
.step-arrow .icon { width: 28px; height: 28px; rotate: -90deg; stroke-width: 1.5; }

@media (min-width: 900px) {
  .steps {
    grid-template-columns: minmax(0, 1fr) clamp(36px, 3vw, 55px) minmax(0, 1fr) clamp(36px, 3vw, 55px) minmax(0, 1fr);
    max-width: none;
    margin-inline: auto;
    gap: 0;
    align-items: stretch;
  }
  .step { width: 100%; height: 100%; }
  .step-arrow { align-self: stretch; }
  .step-arrow .icon { rotate: 0deg; }
}

/* =========================================================
   13. WHY-US BANNER
   ========================================================= */
.why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  background-color: #293713;
  background-image:
    linear-gradient(to right, rgba(31, 43, 13, 0.06), rgba(31, 43, 13, 0.92) 22%, rgba(31, 43, 13, 0.92) 78%, rgba(31, 43, 13, 0.06)),
    url("../img/banner_bg.png");
  background-position: center, center;
  background-size: 100% 100%, auto 390px;
  background-repeat: no-repeat, repeat-x;
  padding-block: clamp(1.8rem, 1.4rem + 0.95vw, 2.45rem);
}

.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.025), rgba(5, 10, 2, 0.12));
}

.why .shell { max-width: 1120px; }

.why .section-head {
  margin-bottom: clamp(1rem, 0.75rem + 0.55vw, 1.35rem);
}

.why .section-head h2 {
  color: #fff;
  font-size: clamp(1.7rem, 1.4rem + 0.75vw, 2.15rem);
  font-weight: 500;
  line-height: 1.25;
}

.why .section-head .latin {
  font-family: var(--font-latin);
  font-size: 1.12em;
  font-weight: 600;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}

.why-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 0.45rem + 0.45vw, 0.95rem);
  min-width: 0;
  text-align: right;
  padding-inline: clamp(0.8rem, 0.5rem + 0.75vw, 1.35rem);
}

.why-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.9rem, 2.45rem + 0.8vw, 3.45rem);
  height: clamp(2.9rem, 2.45rem + 0.8vw, 3.45rem);
  color: var(--gold-500);
}

.why-icon .icon {
  width: 100%;
  height: 100%;
  stroke-width: 1.35;
}

.why-copy { min-width: 0; }

.why-item h3 {
  color: #fff;
  font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.08rem);
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

.why-item p {
  margin-top: 0.2rem;
  color: var(--on-dark-soft);
  font-size: clamp(0.68rem, 0.62rem + 0.14vw, 0.77rem);
  line-height: 1.7;
  max-width: 21ch;
}

.why-item + .why-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: rgba(212, 185, 120, 0.58);
}

@media (max-width: 700px) {
  .why {
    background-size: 100% 100%, auto 300px;
    padding-block: 2rem;
  }

  .why .shell { max-width: 470px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .why-item { justify-content: flex-start; }
  .why-item:nth-child(3)::after,
  .why-item:nth-child(4)::after {
    content: "";
    position: absolute;
    inset-inline: 12%;
    top: -0.75rem;
    height: 1px;
    background: rgba(212, 185, 120, 0.3);
  }
}

@media (max-width: 400px) {
  .why-item { padding-inline: 0.35rem; gap: 0.45rem; }
  .why-icon { width: 2.45rem; height: 2.45rem; }
  .why-item h3 { font-size: 0.82rem; }
  .why-item p { font-size: 0.61rem; }
}

/* =========================================================
   14. FINAL CTA
   ========================================================= */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.15rem, 0.8rem + 1vw, 1.75rem);
  background: #fffdf8;
  border-top: 1px solid rgba(168, 133, 60, 0.16);
}

.cta .shell { max-width: 1120px; }

.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(320px, 1.35fr) minmax(240px, 1fr);
  grid-template-areas: "action copy media";
  align-items: center;
  min-height: clamp(145px, 13vw, 170px);
  direction: ltr;
  background: transparent;
  overflow: hidden;
}

.cta-copy {
  grid-area: copy;
  direction: rtl;
  padding: 0 clamp(1.2rem, 2.3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  text-align: right;
}

.cta-copy h2 {
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.82rem);
  line-height: 1.35;
  color: var(--green-900);
}

.cta-copy p {
  max-width: 48ch;
  font-size: clamp(0.78rem, 0.7rem + 0.24vw, 0.94rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

.cta-action {
  grid-area: action;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(0.25rem, 1.5vw, 1rem);
}

.cta-action .btn {
  width: min(100%, 230px);
  min-height: 48px;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 7px 18px rgba(20, 88, 48, 0.15);
}

.cta-media {
  grid-area: media;
  position: relative;
  align-self: stretch;
  min-height: 145px;
  direction: rtl;
  overflow: hidden;
}

.cta-media > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.cta-media .cta-box-logo {
  position: absolute;
  z-index: 1;
  top: 51%;
  left: 43%;
  width: clamp(100px, 10.5vw, 136px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0.32) sepia(0.75) hue-rotate(38deg) saturate(1.8);
  opacity: 0.82;
  pointer-events: none;
}

@media (max-width: 799px) {
  .cta { padding-block: 1.5rem; }
  .cta .shell { width: min(100% - 2rem, 620px); }
  .cta-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy"
      "action";
    gap: 1rem;
    padding-bottom: 1.35rem;
    background: var(--cream-100);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }
  .cta-media { min-height: clamp(190px, 54vw, 270px); }
  .cta-copy { padding: 0 1.35rem; text-align: center; align-items: center; }
  .cta-copy p { max-width: 44ch; }
  .cta-action { padding-inline: 1.35rem; }
  .cta-action .btn { width: min(100%, 280px); }
  .cta-media .cta-box-logo { width: clamp(118px, 28vw, 160px); }
}

/* =========================================================
   15. FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--green-900);
  color: var(--on-dark-soft);
  padding-top: clamp(3rem, 2.2rem + 3.5vw, 5rem);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(to left, var(--gold-600), var(--gold-400), var(--gold-600));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

.footer-brand img {
  height: 58px;
  width: auto;
  margin-bottom: 1.25rem;
}
.footer-brand p { font-size: var(--fs-sm); line-height: 1.85; max-width: 40ch; }

.footer-col h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(212, 185, 120, 0.25);
}

.footer-col ul { display: grid; gap: 0.75rem; font-size: var(--fs-sm); }

.footer-col li a,
.footer-col li span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.2s var(--ease), translate 0.2s var(--ease);
}
.footer-col li a:hover { color: var(--gold-400); translate: -3px 0; }
[dir="ltr"] .footer-col li a:hover { translate: 3px 0; }

.footer-col .icon { width: 17px; height: 17px; color: var(--gold-500); flex: none; }

.footer-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  color: var(--on-dark-soft);
  border: 1px solid rgba(212, 185, 120, 0.3);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer-social a:hover { background: var(--gold-500); color: var(--green-900); border-color: var(--gold-500); }
.footer-social .icon { width: 19px; height: 19px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 1px solid rgba(212, 185, 120, 0.2);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.footer-bottom .latin { font-family: var(--font-latin); font-size: 1rem; letter-spacing: 0.03em; color: var(--gold-400); }

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

/* =========================================================
   16. Floating WhatsApp
   ========================================================= */
.wa-float {
  position: fixed;
  z-index: 90;
  inset-block-end: clamp(1rem, 2vw, 1.75rem);
  inset-inline-start: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background: var(--whatsapp);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgba(18, 140, 74, 0.4);
  transition: scale 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wa-float:hover { scale: 1.08; box-shadow: 0 8px 28px rgba(18, 140, 74, 0.5); }
.wa-float .icon { width: 30px; height: 30px; }

/* =========================================================
   17. Scroll reveal
   ========================================================= */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; }
}

/* =========================================================
   PRODUCT DETAIL — MOCKUP LAYOUT OVERRIDES
   ========================================================= */
.product-detail-section {
  padding-block: clamp(2rem, 1.3rem + 2.4vw, 4rem);
  background:
    radial-gradient(circle at 50% 0, rgba(239, 227, 200, 0.22), transparent 34rem),
    #fffdf9;
}

.product-showcase {
  display: grid;
  gap: clamp(1rem, 0.65rem + 1.5vw, 1.8rem);
  align-items: stretch;
}

.product-gallery {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.65rem;
}

.product-gallery__main {
  position: relative;
  flex: 1;
  min-height: clamp(350px, 74vw, 530px);
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.35);
  border-radius: var(--r-md);
  background: var(--cream-100);
  box-shadow: 0 5px 16px rgba(43, 52, 23, 0.08);
}

.product-gallery__main > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s var(--ease), scale 0.4s var(--ease);
}

.product-gallery__main:hover > img { scale: 1.018; }

.product-gallery__zoom {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  inset-inline-end: 0.85rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(43, 52, 23, 0.78);
  font-size: 1.35rem;
  line-height: 1;
  backdrop-filter: blur(5px);
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.product-gallery__thumbs button {
  height: clamp(68px, 14vw, 105px);
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.3);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.product-gallery__thumbs button.is-active {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 2px rgba(194, 160, 83, 0.25);
}

.product-gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.product-order-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.2rem, 0.9rem + 1vw, 1.8rem);
  border: 1px solid rgba(168, 133, 60, 0.28);
  border-radius: var(--r-md);
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 4px 14px rgba(43, 52, 23, 0.045);
}

.product-order-card .product-detail-category {
  align-self: flex-start;
  margin: 0;
  padding: 0.38rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
}

.product-order-card h2 {
  margin-top: 0.6rem;
  color: var(--green-900);
  font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.3rem);
}

.product-order-card .product-detail-description {
  margin-top: 0.45rem;
  color: var(--ink-soft);
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.94rem);
  line-height: 1.9;
}

.product-wholesale-only {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  color: #c13b2d;
  font-size: clamp(0.88rem, 0.82rem + 0.2vw, 1rem);
  font-weight: 800;
}

.product-wholesale-only .icon { width: 20px; height: 20px; }

.product-minimum {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.product-minimum .icon { width: 18px; height: 18px; color: var(--gold-600); }

.product-choice-group {
  min-width: 0;
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
}

.product-choice-group legend {
  width: 100%;
  margin-bottom: 0.5rem;
  color: var(--green-900);
  font-size: 0.86rem;
  font-weight: 800;
}

.product-choice-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.product-choice-list li {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
}

.product-choice-list button,
.product-packaging-options button {
  width: 100%;
  min-height: 38px;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(168, 133, 60, 0.35);
  border-radius: 6px;
  color: var(--ink-soft);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.product-choice-list button.is-active,
.product-packaging-options button.is-active {
  color: #fff;
  border-color: var(--green-800);
  background: var(--green-800);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.product-packaging-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 72%;
}

.product-quantity-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
}

.product-quantity-row > div:first-child {
  display: grid;
  gap: 0.15rem;
}

.product-quantity-row strong { color: var(--green-900); font-size: 0.86rem; }
.product-quantity-row small { color: var(--ink-muted); font-size: 0.67rem; }

.product-quantity {
  display: grid;
  grid-template-columns: 38px 70px 38px;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.28);
  border-radius: 6px;
  direction: ltr;
}

.product-quantity button {
  color: var(--green-900);
  background: var(--cream-100);
  font-size: 1.05rem;
}

.product-quantity output {
  display: grid;
  place-items: center;
  border-inline: 1px solid rgba(168, 133, 60, 0.2);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.product-order-actions {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.product-order-primary,
.product-order-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 47px;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 800;
  transition: translate 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.product-order-primary {
  color: #fff;
  background: linear-gradient(90deg, #b98933, #d3a951, #b98933);
  box-shadow: 0 4px 12px rgba(168, 133, 60, 0.2);
}

.product-order-primary:hover { translate: 0 -2px; filter: brightness(1.04); }
.product-order-whatsapp { border: 1px solid var(--green-800); color: var(--green-800); background: #fff; }
.product-order-whatsapp:hover { color: #fff; background: var(--green-800); translate: 0 -2px; }
.product-order-primary .icon,
.product-order-whatsapp .icon { width: 20px; height: 20px; }

.product-order-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(168, 133, 60, 0.2);
}

.product-order-benefits article {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding-inline: 0.5rem;
}

.product-order-benefits article + article { border-inline-start: 1px solid rgba(168, 133, 60, 0.18); }
.product-order-benefits .icon { width: 22px; height: 22px; color: var(--gold-600); }
.product-order-benefits span { display: grid; }
.product-order-benefits strong { color: var(--green-900); font-size: 0.7rem; }
.product-order-benefits small { color: var(--ink-muted); font-size: 0.58rem; line-height: 1.5; }

.product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1rem, 0.7rem + 1vw, 1.6rem);
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.27);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 249, 0.96);
}

.product-facts article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 82px;
  padding: 0.7rem;
  border-bottom: 1px solid rgba(168, 133, 60, 0.18);
}

.product-facts article:nth-child(odd) { border-inline-end: 1px solid rgba(168, 133, 60, 0.18); }
.product-facts article:nth-last-child(-n + 2) { border-bottom: 0; }
.product-facts .icon { width: 25px; height: 25px; color: var(--gold-600); }
.product-facts span { display: grid; gap: 0.1rem; }
.product-facts strong { color: var(--green-900); font-size: 0.72rem; }
.product-facts small { color: var(--ink-muted); font-size: 0.62rem; line-height: 1.45; }

.product-info-panel {
  margin-top: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgba(168, 133, 60, 0.25);
  border-radius: var(--r-sm);
  background: #fff;
}

.product-info-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgba(168, 133, 60, 0.2);
}

.product-info-tabs button {
  position: relative;
  min-height: 48px;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-info-tabs button + button { border-inline-start: 1px solid rgba(168, 133, 60, 0.14); }
.product-info-tabs button.is-active { color: var(--green-900); }
.product-info-tabs button.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 10%;
  bottom: 0;
  height: 3px;
  background: var(--green-800);
}

.product-info-content {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  color: var(--ink-soft);
  font-size: clamp(0.76rem, 0.72rem + 0.12vw, 0.86rem);
  line-height: 1.9;
}

.product-info-content ul { display: grid; gap: 0.35rem; }
.product-info-content li { position: relative; padding-inline-start: 1rem; color: var(--green-900); }
.product-info-content li::before { content: ""; position: absolute; top: 0.73em; inset-inline-start: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--green-700); }
.product-info-content > div { display: grid; gap: 0.35rem; }

.related-products { margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.related-products__head { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.related-products__head h2 {
  position: relative;
  padding-bottom: 0.55rem;
  color: var(--green-900);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
}
.related-products__head h2::after { content: ""; position: absolute; width: 70%; height: 2px; bottom: 0; right: 15%; background: linear-gradient(to left, transparent, var(--gold-500), transparent); }

.related-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.related-products__grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.55rem;
  border: 1px solid rgba(168, 133, 60, 0.23);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 3px 10px rgba(43, 52, 23, 0.035);
}

.related-products__grid img { width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover; border-radius: 6px; }
.related-products__grid h3 { margin-top: 0.55rem; color: var(--green-900); font-size: 0.84rem; text-align: center; }
.related-products__grid ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  gap: 0.3rem;
  margin-top: 0.5rem;
  direction: ltr;
}
.related-products__grid li { padding: 0.18rem; border: 1px solid rgba(168, 133, 60, 0.3); border-radius: 4px; color: var(--ink-muted); font-size: 0.56rem; text-align: center; }
.related-products__grid a { display: grid; place-items: center; min-height: 35px; margin-top: 0.45rem; border: 1px solid var(--green-700); border-radius: 5px; color: var(--green-900); font-size: 0.7rem; font-weight: 700; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.related-products__grid a:hover { color: #fff; background: var(--green-700); }

@media (min-width: 700px) {
  .product-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-facts article:nth-child(odd) { border-inline-end: 0; }
  .product-facts article:not(:nth-child(3n)) { border-inline-end: 1px solid rgba(168, 133, 60, 0.18); }
  .product-facts article:nth-last-child(-n + 3) { border-bottom: 0; }
  .product-info-content { grid-template-columns: minmax(250px, 0.8fr) minmax(0, 2.2fr); }
  .related-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .product-showcase { grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); }
  .product-gallery__main { min-height: 540px; }
  .product-gallery__thumbs button { height: 105px; }
  .product-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-facts article,
  .product-facts article:nth-last-child(-n + 3) { border-bottom: 0; }
  .product-facts article:not(:nth-child(3n)) { border-inline-end: 0; }
  .product-facts article:not(:last-child) { border-inline-end: 1px solid rgba(168, 133, 60, 0.18); }
}

@media (max-width: 699px) {
  .product-order-card { text-align: right; }
  .product-order-card .product-detail-category { align-self: flex-start; }
  .product-packaging-options { max-width: none; }
  .product-order-benefits { grid-template-columns: 1fr; gap: 0.6rem; }
  .product-order-benefits article { padding: 0; }
  .product-order-benefits article + article { padding-top: 0.6rem; border-inline-start: 0; border-top: 1px solid rgba(168, 133, 60, 0.16); }
  .product-info-tabs button { font-size: 0.72rem; }
}

@media (max-width: 430px) {
  .product-gallery__main { min-height: 330px; }
  .product-gallery__thumbs button { height: 72px; }
  .product-choice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-quantity-row { align-items: stretch; flex-direction: column; }
  .product-quantity { align-self: stretch; grid-template-columns: 42px 1fr 42px; }
  .related-products__grid { grid-template-columns: 1fr; }
}