/* ============================================
   ARUMBU CASHEWS — STYLE SYSTEM
   Palette: roasted espresso dark + antique gold
   Type: Cormorant Garamond (display) + Jost (body)
============================================ */

@font-face {
  font-family: "Bahamas";
  src: url("https://db.onlinewebfonts.com/t/0f3623d34ac008c984e5613961df80db.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/0f3623d34ac008c984e5613961df80db.woff") format("woff"),
       url("https://db.onlinewebfonts.com/t/0f3623d34ac008c984e5613961df80db.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --bg-dark: #1c1410;
  --bg-darker: #140d0a;
  --bg-panel: #241a14;
  --bg-panel-2: #2c2019;
  --gold: #c9a227;
  --gold-light: #e8c468;
  --cream: #f5efe3;
  --cream-dim: #d9d0be;
  --maroon: #7a2e3d;
  --text-muted: #b8a98c;
  --border-soft: rgba(201, 162, 39, 0.18);

  /* Warm ivory content palette */
  --ivory: #F7F1E3;
  --ivory-2: #EFE6D0;
  --ink: #1B0E06;
  --ink-muted: rgba(27, 14, 6, 0.68);
  --gold-ink: #8a6a14;
  --border-ink: rgba(27, 14, 6, 0.14);

  /* Rich espresso / dark chocolate brown — blended into the hero scrim
     for a richer, more premium dark tone alongside the existing
     espresso + gold. (Previously a forest green — replaced site-wide
     with the Arumbu dark-brown brand direction.) */
  --forest: #3D2417;
  /* Deep maroon-brown — solid Header background (espresso brown with a
     warm maroon undertone, blended from --forest-deep + --maroon).
     Premium and heritage-toned; deliberately not pure black and not a
     bright/saturated maroon. */
  --forest-deep: #3B211D;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, sans-serif;

  /* Layout */
  --max-width: 1200px;
  --radius: 4px;
  --transition: 0.25s ease;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--cream);
}

p { color: var(--text-muted); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.section { padding: 6rem 1.5rem; }
.section-inner { max-width: var(--max-width); margin: 0 auto; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.9rem;
}
.eyebrow-center { text-align: center; }

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 1rem;
  max-width: 640px;
}
.why-section .section-title,
.products-section .section-title,
.quality-section .section-title,
.testimonial-section .section-title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  font-weight: 500;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--bg-darker);
  box-shadow: 0 8px 24px -8px rgba(201, 162, 39, 0.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(201, 162, 39, 0.7); }

.btn-gold-sm {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--border-soft);
  padding: 0.65rem 1.1rem;
  font-size: 0.82rem;
  width: 100%;
  justify-content: center;
}
.btn-gold-sm:hover { background: rgba(201, 162, 39, 0.1); border-color: var(--gold); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border-soft);
}
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn-outline.btn-light { border-color: rgba(245,239,227,0.4); }
.btn-outline.btn-light:hover { border-color: var(--cream); color: var(--cream); }

/* ============ HEADER / NAV ============
   Solid, premium dark maroon-brown bar — no glass/blur/transparency.
   The header is a normal part of the page's document flow everywhere
   (never fixed, never sticky), so it scrolls away naturally with the
   rest of the content.
   On inner pages (About, Products, Wholesale, Contact) it simply sits
   at the top of the page above the section content.
   On the HOMEPAGE (body.home) this is overridden further down: the
   header is pulled INSIDE the Hero section so it sits directly on top
   of the hero, feeling like one integrated block — Header + Hero
   scroll away together as a single piece. */
.site-header {
  position: relative;
  background: var(--forest-deep);
  border-bottom: 1px solid rgba(212, 163, 44, 0.22);
}
.nav-wrap {
  /* Deliberately wider than the shared --max-width (1200px) used for
     hero/section content — the header's own content (logo + full
     nav + phone/WhatsApp/Admin Login + language switcher + 4 action
     icons) genuinely needs more horizontal room than a text column
     does. Every other section's width is untouched — this only
     widens the header's own container. */
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  padding: 1rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.brand-text em { color: var(--gold-light); font-style: normal; }

/* Header logo + wordmark lockup */
.brand-logo-img {
  height: 46px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.brand-wordmark {
  font-family: "Bahamas", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #D4A32C;
  line-height: 1;
  white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 0;
  background: var(--gold-light);
  transition: width var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--gold-light); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-call {
  display: flex; align-items: center; gap: 0.4rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.86rem;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-call:hover { color: var(--gold-light); }

/* Compact contact/social cluster added to the end of the nav — a
   subtle divider separates it from the nav links so it reads as its
   own element rather than crowding the navigation. */
.header-contact {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-left: 1.3rem;
  border-left: 1px solid var(--border-soft);
}
.header-social { display: flex; align-items: center; gap: 0.5rem; }
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--cream-dim);
  line-height: 0;
  transition: color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.social-icon svg { display: block; }
.social-icon:hover { color: var(--gold-light); border-color: var(--gold); }
/* Icons awaiting a real URL from the client — visually present but
   dimmed, so nothing looks broken before the link is wired up. */
.social-icon-pending { opacity: 0.45; cursor: default; }
.social-icon-pending:hover { color: var(--cream-dim); border-color: var(--border-soft); }

/* Small, subtle utility link — deliberately not styled like a nav
   item or a button, so it reads as a natural but secondary part of
   the header rather than competing with the customer-facing nav. */
.header-admin-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  padding-left: 0.9rem;
  margin-left: 0.1rem;
  border-left: 1px solid var(--border-soft);
  white-space: nowrap;
  transition: color var(--transition);
}
.header-admin-link:hover { color: var(--gold-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--gold-light);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ PRODUCTS DROPDOWN (desktop flyout) ============ */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
}
.nav-dropdown-trigger::-webkit-details-marker { display: none; }
.nav-caret { transition: transform var(--transition); flex-shrink: 0; }
.nav-dropdown[open] .nav-caret { transform: rotate(180deg); }
.nav-dropdown[open] .nav-dropdown-trigger { color: var(--gold-light); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 200px;
  background: var(--bg-darker);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 0.5rem;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
  z-index: 60;
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  border-radius: 3px;
  transition: background var(--transition), color var(--transition);
}
.nav-dropdown-menu a:hover { background: rgba(212, 163, 44, 0.12); color: var(--gold-light); }

/* Drawer-only header (logo + close) — hidden on desktop, shown only
   inside the mobile off-canvas drawer (see the 720px media query). */
.nav-drawer-head { display: none; }

/* ============ LANGUAGE SWITCHER ============
   Two instances exist in the markup: one inline in the header
   (.lang-switch, desktop) and one inside the mobile off-canvas
   drawer (.lang-switch--drawer). Only one is ever visible at a
   given width — see the 720px media query — so the compact mobile
   icon row (search/account/cart/wishlist) never gets crowded. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.6rem;
  padding-right: 0.9rem;
  border-right: 1px solid var(--border-soft);
}
.lang-switch-btn {
  background: none;
  border: none;
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 4px 2px;
  transition: color var(--transition);
}
.lang-switch-btn:hover { color: var(--gold-light); }
.lang-switch-btn.is-active { color: var(--gold-light); }
.lang-switch-divider { color: var(--border-soft); font-size: 0.75rem; }
.lang-switch--drawer { display: none; }

/* ============ HEADER ACTIONS — search / account / cart / wishlist ============ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  position: relative;
}
.action-item { position: relative; }
.action-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  color: #ffffff;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.action-icon svg { width: 19px; height: 19px; }
.action-icon:hover,
.action-icon[aria-expanded="true"] {
  color: var(--gold-light);
  border-color: rgba(212, 163, 44, 0.4);
  background: rgba(212, 163, 44, 0.08);
}
.action-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--bg-darker);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-family: var(--font-body);
  pointer-events: none;
}
.action-badge.is-hidden { display: none; }

/* Small flyout panels for Account / Cart / Wishlist — deliberately a
   light ivory card (not the dark header palette) so it reads as a
   distinct premium popover, same idea on every page including the
   dark homepage header. */
.action-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 270px;
  background: var(--ivory);
  color: var(--ink);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
  padding: 1.3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 400;
}
.action-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.action-panel h4 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.5rem; color: var(--ink); }
.action-panel p { font-size: 0.82rem; line-height: 1.5; color: var(--ink-muted); margin-bottom: 1rem; }
.action-panel-btn { margin-bottom: 0.6rem; }
.action-panel-btn:last-child { margin-bottom: 0; }
.action-panel .btn-gold-sm { color: var(--gold-ink); border-color: var(--border-ink); }
.action-panel .btn-gold-sm:hover { background: rgba(138, 106, 20, 0.08); border-color: var(--gold-ink); }
.action-panel .btn-outline { color: var(--ink); border-color: var(--border-ink); }
.action-panel .btn-outline:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

/* ============ SEARCH PANEL ============
   Full-width panel that drops down from the header, light ivory
   surface, same idea as the account/cart/wishlist popovers. Sits at
   a high z-index so it reads above the hero video on the homepage
   too, since the Header lives inside .hero-wrap there. */
.search-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--ivory);
  border-bottom: 1px solid var(--border-ink);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.25s ease;
  z-index: 400;
}
.search-panel.is-open { max-height: 560px; opacity: 1; overflow-y: auto; }
.search-panel-inner { max-width: var(--max-width); margin: 0 auto; padding: 1.6rem 1.5rem 2rem; }
.search-panel-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-ink);
}
.search-panel-logo { width: 48px; height: 48px; object-fit: contain; }
.search-panel-brand-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.search-field {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--border-ink);
  padding-bottom: 0.9rem;
  color: var(--gold-ink);
}
.search-field input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
}
.search-field input::placeholder { color: rgba(27, 14, 6, 0.4); }
.search-close {
  background: none; border: none;
  color: var(--ink-muted);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.search-close:hover { color: var(--ink); }
.search-results {
  list-style: none;
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.7rem;
}
.search-results a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--transition), color var(--transition);
}
.search-results a:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.search-result-code {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}
.search-result-name {
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.search-results a:hover .search-result-name { color: inherit; opacity: 0.75; }
.search-empty { font-size: 0.85rem; color: var(--ink-muted); margin-top: 1.2rem; }

/* ============ MOBILE DRAWER OVERLAY ============ */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 3, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 290;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ============ HERO SECTION (Header lives inside it) ============
   ONE single connected block: the video sits at the very back, the
   dark-brown scrim sits above it, the Header sits at the top of this
   same container (not fixed, not sticky — just the first thing in
   normal flow), and the Hero copy sits below the nav. Because the
   Header is a normal child of .hero-wrap, it scrolls away with the
   rest of the Hero as a single unit — there is no separate header
   section and no gap between them. */
.hero-wrap {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink); /* fallback while/if video isn't available */
}

/* Moving processing-video background — confined strictly to the Hero,
   starts from the very top of the page, behind the Header. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark-brown cinematic glass overlay — translucent espresso brown
   over the moving video, keeping it clearly visible while giving the
   Header and Hero copy enough contrast to read cleanly. Strictly
   scoped to the Hero: it lives inside .hero-wrap (overflow: hidden)
   and ends fully opaque so the Hero has one clean, sharp bottom
   edge — no fade, blur, glow or white overlay of any kind. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(30, 18, 13, 0.62) 0%,
      rgba(61, 36, 23, 0.40) 30%,
      rgba(27, 14, 6, 0.48) 62%,
      rgba(20, 13, 10, 1) 100%);
}

/* Header sits ON TOP of the hero, as the first block inside it —
   solid dark maroon-brown background (no glass, no blur, no
   transparency), so it reads as one premium, intentional bar rather
   than a floating see-through panel over the video. It stays in
   normal document flow (no fixed/sticky position) and simply moves
   up the page with the rest of the Hero on scroll. */
.hero-wrap .site-header {
  position: relative;
  /* Raised from 3 to 350: at z-index:3 this created a stacking
     context that TRAPPED everything nested inside the header — the
     mobile drawer, its Products dropdown, the search panel, the
     account/cart/wishlist popovers — at an effective z-index of "3"
     when compared against elements OUTSIDE the header. .nav-overlay
     (z-index:290, a body-level sibling used to dim the page behind
     the open drawer and close it on an outside tap) was therefore
     painting ON TOP of the drawer on the homepage specifically,
     silently swallowing every tap meant for a menu link — the click
     landed on the overlay, which just closed the menu, instead of
     reaching the <a> underneath. 350 clears every element the header
     needs to sit above (nav-overlay 290, the WhatsApp float/back-to-
     top buttons at 90) while staying below the splash screen (500),
     which must still cover everything during its intro animation. */
  z-index: 350;
  background: var(--forest-deep);
  border-bottom: 1px solid rgba(212, 163, 44, 0.22);
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4.5rem;
  text-align: center;
}
.hero-wrap .eyebrow { color: var(--gold-light); }
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  margin-bottom: 1.4rem;
  color: var(--cream);
}
.hero-title em {
  font-style: italic;
  color: var(--gold-light);
}
.hero-sub {
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 2.4rem;
  color: rgba(245, 239, 227, 0.82);
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.hero-wrap .btn-outline {
  color: var(--cream);
  border-color: rgba(245, 239, 227, 0.32);
}
.hero-wrap .btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(245, 239, 227, 0.18);
  padding-top: 2rem;
}
.hero-stats div { text-align: center; }
.hero-stats dt {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--gold-light);
}
.hero-stats dd {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.62);
  margin-top: 0.25rem;
}

@media (max-width: 720px) {
  .hero-wrap { min-height: 88svh; }
}

/* ============ FOUNDER STORY ============
   Warm, personal section directly after the Hero — light neutral
   background against the dark cinematic hero, deep espresso-brown
   headings, gold accents, a framed portrait and a faint leaf motif.
   No card, no icon grid — deliberately not styled like a corporate
   "About Us" block. */
.founder-section {
  position: relative;
  background: var(--ivory);
  overflow: hidden;
}

/* Very faint leaf-inspired texture in the background — barely
   visible, adds warmth without competing with the content. */
.founder-leaf-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(circle at 8% 12%, var(--forest) 0, transparent 38%),
                     radial-gradient(circle at 94% 82%, var(--forest) 0, transparent 42%);
}

.founder-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
}

.founder-media { position: relative; max-width: 400px; margin: 0 auto; }
.founder-photo-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(15, 59, 46, 0.14);
  box-shadow: 0 24px 54px rgba(15, 59, 46, 0.18);
}
.founder-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Offset gold frame line peeking out behind the portrait — a
   quiet, premium detail rather than a decorative animation */
.founder-frame-border {
  position: absolute;
  top: 14px; left: 14px;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(201, 162, 39, 0.55);
  z-index: 0;
  pointer-events: none;
}

/* Faint cashew-leaf silhouette tucked behind the portrait corner */
.founder-leaf-accent {
  position: absolute;
  top: -26px;
  left: -10px;
  width: 150px;
  height: 150px;
  color: var(--forest);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}
.founder-leaf-accent svg { width: 100%; height: 100%; }

.founder-content { position: relative; z-index: 1; }
.founder-eyebrow { color: var(--gold-ink); }
.founder-heading {
  color: var(--forest);
  max-width: 100%;
}
.founder-heading em { color: var(--gold-ink); font-style: italic; }
.founder-lede {
  font-size: 1.05rem;
  color: var(--ink-muted);
  max-width: 520px;
  margin-bottom: 2rem;
}

.founder-namecard {
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
  margin-bottom: 2rem;
}
.founder-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--forest);
  margin-bottom: 0.2rem;
}
.founder-role {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.5rem;
}
.founder-tags {
  display: block;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
}

.founder-copy p {
  color: var(--ink-muted);
  font-size: 0.98rem;
  margin-bottom: 1.1rem;
}
.founder-copy p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
  .founder-media { padding: 0; margin: 0 auto; max-width: 340px; }
  .founder-leaf-accent { top: -18px; left: -8px; width: 110px; height: 110px; }
}
@media (max-width: 720px) {
  .founder-namecard { padding-left: 0.9rem; }
}

/* ============ WARM IVORY CONTENT SECTIONS ============
   Reduces the amount of dark background across the site: the hero
   stays dark/cinematic, most content sections sit on warm ivory,
   and cards keep their premium dark + gold treatment on top of it. */
.why-section.section-light,
.quality-section.section-light { background: var(--ivory); }
.products-section.section-light-alt,
.testimonial-section.section-light-alt { background: var(--ivory-2); }

.section-light .eyebrow,
.section-light-alt .eyebrow { color: var(--gold-ink); }
.section-light .section-title,
.section-light-alt .section-title { color: var(--ink); }
.section-light .section-inner > p,
.section-light-alt .section-inner > p { color: var(--ink-muted); }
.section-light .quality-step,
.section-light-alt .quality-step { border-top-color: var(--gold-ink); }
.section-light .quality-step h3,
.section-light-alt .quality-step h3 { color: var(--ink); }
.section-light .quality-step p,
.section-light-alt .quality-step p { color: var(--ink-muted); }
.section-light .quality-index,
.section-light-alt .quality-index { color: var(--gold-ink); }
.section-light .badge,
.section-light-alt .badge { color: var(--ink-muted); border-color: var(--border-ink); }

/* ============ WHY CHOOSE US ============ */
.why-section { background: var(--bg-dark); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.why-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2.2rem 1.6rem;
  transition: border-color var(--transition), transform var(--transition);
}
.why-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.why-icon { width: 40px; height: 40px; color: var(--gold-light); margin-bottom: 1.2rem; }
.why-icon svg { width: 100%; height: 100%; }
.why-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.why-card p { font-size: 0.9rem; }

/* ============ PRODUCTS ============ */
.products-section { background: var(--bg-darker); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.product-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.product-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.product-media { position: relative; aspect-ratio: 4/3; background: var(--bg-panel-2); overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-tag {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  background: var(--gold);
  color: var(--bg-darker);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  font-weight: 600;
}
.product-body { padding: 1.4rem; }
.product-body h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.product-grade-name { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.7rem; }
.product-desc { font-size: 0.85rem; margin-bottom: 1rem; min-height: 2.6em; }
.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}
.product-weight { font-size: 0.82rem; color: var(--text-muted); }
.product-price { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-light); min-height: 1.3rem; display: inline-block; }
.products-cta { text-align: center; margin-top: 3rem; }

/* Simple neutral placeholder for grades without a supplied photo yet —
   no stock image, no borrowed image from another grade. */
.product-media.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel-2);
}
.product-media.no-image::after {
  content: '';
  width: 52px; height: 52px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
}

/* ============ STORY ============ */
.story-section { padding: 0; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.story-media { background: var(--bg-panel-2); overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem;
  background: var(--bg-dark);
}
.story-content p { margin-bottom: 1.1rem; font-size: 0.98rem; }
.text-link {
  color: var(--gold-light);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  display: inline-block;
  width: fit-content;
  margin-top: 0.5rem;
  transition: opacity var(--transition);
}
.text-link:hover { opacity: 0.75; }

/* ============ QUALITY ============ */
.quality-section { background: var(--bg-darker); }
.quality-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3.5rem 0 3rem;
}
.quality-step {
  border-top: 1px solid var(--gold);
  padding-top: 1.4rem;
}
.quality-index {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.quality-step h3 { font-size: 1.3rem; margin: 0.6rem 0; }
.quality-step p { font-size: 0.92rem; }
.quality-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.badge {
  border: 1px solid var(--border-soft);
  color: var(--cream-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border-radius: 100px;
}

/* ============ TESTIMONIALS ============ */
.testimonial-section { background: var(--bg-dark); }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.testimonial-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2rem;
}
.testimonial-card p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream-dim);
  margin-bottom: 1.2rem;
}
.testimonial-card footer {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--gold-light);
}

/* ============ WHOLESALE CTA ============ */
.wholesale-cta {
  background: linear-gradient(120deg, var(--maroon), #4a1c26);
  padding: 4.5rem 1.5rem;
}
.wholesale-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.wholesale-inner h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0.4rem 0 0.6rem;
}
.wholesale-inner p { color: rgba(245,239,227,0.75); max-width: 480px; }
.wholesale-inner .eyebrow { color: var(--cream); opacity: 0.7; }

/* ============ WHOLESALE ENQUIRY FORM ============ */
.wholesale-form-wrap {
  max-width: 680px;
  margin: 0 auto;
}
.wholesale-intro { text-align: center; margin-bottom: 3rem; }
.wholesale-intro .eyebrow { justify-content: center; }
.wholesale-intro .section-title { margin: 0 auto 0.8rem; }
.wholesale-intro p { max-width: 520px; margin: 0 auto; }

.wholesale-form {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.2rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field.form-field-full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--cream-dim);
}
.form-field label .req { color: var(--gold-light); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--cream);
  background: var(--bg-panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transition);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23c9a227' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}
.form-field select option { background: var(--bg-panel-2); color: var(--cream); }
.form-field textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); }

.wholesale-form .btn-gold {
  grid-column: 1 / -1;
  justify-self: start;
  border: none;
  margin-top: 0.4rem;
}

.form-success {
  display: none;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 3rem 2rem;
}
.form-success.is-visible { display: block; }
.form-success h3 { font-size: 1.4rem; margin-bottom: 0.6rem; color: var(--gold-light); }
.form-success p { color: var(--cream-dim); }

@media (max-width: 640px) {
  .wholesale-form { grid-template-columns: 1fr; padding: 1.6rem; }
}

/* ============ FOOTER ============ */
.site-footer { background: var(--bg-darker); border-top: 1px solid var(--border-soft); }
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
}
.footer-brand p { font-size: 0.88rem; margin-top: 1rem; max-width: 280px; }
.footer-follow-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 1.4rem;
  margin-bottom: 0.7rem;
}
.footer-social { display: flex; align-items: center; gap: 0.7rem; }
/* Larger, filled circular badges for the footer's social row — more
   prominent than the small outlined icons used in the header, so the
   footer reads as its own deliberate "follow us" moment. */
.footer-social .social-icon {
  width: 38px; height: 38px;
  background: rgba(212, 163, 44, 0.1);
  border-color: rgba(212, 163, 44, 0.3);
}
.footer-social .social-icon svg { width: 17px; height: 17px; }
.footer-social .social-icon:hover { background: rgba(212, 163, 44, 0.18); }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: 0.9rem;
  color: var(--cream-dim);
  margin-bottom: 0.7rem;
  transition: color var(--transition);
  width: fit-content;
}
.footer-col a:hover { color: var(--gold-light); }
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  aspect-ratio: 4/3;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 1.5rem;
}
.footer-bottom-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.8rem; color: var(--text-muted); }
.footer-credit {
  font-size: 0.72rem !important;
  color: rgba(217, 208, 190, 0.45) !important;
  margin-top: 0 !important;
  letter-spacing: 0.01em;
}
.footer-credit span { color: var(--gold-light); opacity: 0.75; }
.footer-credit .footer-heart { color: #d64545; opacity: 1; font-size: 0.85em; }

/* Deliberately understated — an internal utility link, not a public
   CTA. Same muted treatment as the credit line, but a step quieter
   still, and separated so it never reads as part of the main footer
   navigation. */
.footer-admin-link {
  text-align: center;
  margin-top: 0.7rem;
}
.footer-admin-link a {
  font-size: 0.68rem;
  color: rgba(217, 208, 190, 0.32);
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.footer-admin-link a:hover { color: var(--gold-light); }
@media (max-width: 640px) {
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 0.4rem; }
}

/* ============ WHATSAPP FLOAT ============ */
.whatsapp-float {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  width: 58px; height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 90;
  transition: transform var(--transition);
  animation: wa-pulse 2.4s infinite;
}
.whatsapp-float:hover { transform: scale(1.08); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 10px rgba(37,211,102,0); }
}

/* ============ BACK TO TOP ============ */
.back-to-top {
  position: fixed;
  right: 1.6rem;
  bottom: calc(1.6rem + 58px + 14px);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #121212;
  border: 1px solid #D4A32C;
  color: #D4A32C;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease, background 250ms ease, color 250ms ease, visibility 250ms;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #D4A32C; color: #121212; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1500px) {
  /* Free up room in the nav in the "desktop but not huge" zone —
     now that the mobile/hamburger threshold is 1300px, this only
     needs to cover 1300–1500px: keep the call button, WhatsApp and
     Admin Login, just drop the spelled-out phone number. */
  .nav-call span { display: none; }
  .header-contact { padding-left: 0.9rem; gap: 0.6rem; }
}
@media (max-width: 980px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .story-media { min-height: 320px; }
  .story-content { padding: 3.5rem 2rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1300px) {
  /* On mobile/tablet the desktop gap (meant to separate brand from
     the full nav) is too wide between the hamburger and the logo —
     they should sit close together on the left; the action icons
     still get pushed to the right via .header-actions's own auto
     margin. Threshold raised to 1300px: even with the header's own
     wider 1360px container (see .nav-wrap above) and tightened nav
     gaps, the full desktop header (logo + 5 nav links + phone +
     WhatsApp + Admin Login + language switcher + 4 action icons)
     needs roughly 1250–1300px of real content width. Below that,
     the previous fixes (raising this from 720px, then 1024px) still
     wasn't enough headroom — collapsing to the compact, proven-safe
     mobile header below 1300px is what actually guarantees the
     Wishlist icon is never clipped, on any screen narrower than
     that, rather than trying to fit desktop nav into too little
     space. */
  .nav-wrap { gap: 0.6rem; }

  /* The full inline switcher lives in the header on desktop; on
     mobile it moves inside the off-canvas drawer instead, so the
     compact icon row (search/account/cart/wishlist + hamburger)
     never gets crowded. */
  .header-actions > .lang-switch { display: none; }
  .lang-switch--drawer {
    display: flex;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-right: none;
    border-top: 1px solid var(--border-soft);
    justify-content: flex-start;
  }

  .search-panel.is-open { max-height: 80vh; }
  .search-panel-logo { width: 40px; height: 40px; }
  .search-panel-brand { padding-bottom: 1.1rem; margin-bottom: 1.1rem; }

  /* Off-canvas drawer sliding in from the RIGHT. Fixed to the
     viewport regardless of whether .site-header itself is in normal
     flow (homepage) or not (inner pages), so it always opens from
     the true right edge of the screen. The hamburger BUTTON stays on
     the left of the header (unchanged) — only the drawer panel's
     edge/slide-direction is right, per the latest explicit
     instruction (this reverses an earlier request that had it
     opening from the left). */
  .main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(84vw, 320px);
    height: 100vh;
    background: var(--bg-darker);
    border-left: 2px solid var(--gold); /* the single subtle gold accent line along the panel's left edge */
    border-bottom: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 1.5rem 2rem;
    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.32s ease;
    overflow-y: auto;
    z-index: 300;
  }
  .main-nav.is-open { transform: translateX(0); }

  /* Defensive hardening: guarantee the closed drawer can never
     intercept a click meant for anything else underneath it (the
     hamburger button, action icons, etc.), regardless of transform
     timing or any other edge case — explicit and unambiguous rather
     than relying on the off-screen transform alone. */
  .main-nav { pointer-events: none; }
  .main-nav.is-open { pointer-events: auto; }

  /* The homepage's .hero-wrap used to force the dropdown into
     absolute positioning under the nav bar — no longer needed now
     that the drawer is always fixed to the viewport itself. */
  .hero-wrap .main-nav { position: fixed; top: 0; right: 0; }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 0 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-drawer-logo { height: 34px; width: auto; }
  .nav-drawer-close {
    background: none; border: none; color: var(--cream-dim);
    cursor: pointer; padding: 6px;
    transition: color var(--transition);
  }
  .nav-drawer-close:hover { color: var(--gold-light); }

  .nav-link { padding: 0.9rem 0; border-bottom: 1px solid var(--border-soft); }
  .nav-call { justify-content: flex-start; }
  .nav-call span { display: inline; } /* full number reads fine once stacked */
  .nav-toggle { display: flex; order: 1; } /* moved to the right — sorts after brand/header-actions (both default order:0) */

  /* Inside the drawer there's no neighbouring nav-link to divide
     from, so the contact cluster becomes its own block — left-
     aligned like every other item in the menu, not centered. */
  .header-contact {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 1rem 0 0;
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
  .header-social { justify-content: flex-start; }
  .header-admin-link { border-left: none; margin-left: 0; padding-left: 0; }

  /* Products dropdown becomes a plain inline expansion inside the
     drawer rather than a floating flyout. */
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0 0.9rem;
    margin-top: 0.2rem;
  }
  .nav-dropdown-menu a { padding: 0.6rem 0; border-bottom: none; font-size: 0.85rem; }

  .header-actions { gap: 0.2rem; }
  .action-panel { right: -0.5rem; width: min(78vw, 280px); }
  .brand-wordmark { display: none; } /* logo mark alone keeps the mobile bar from crowding against 4 action icons + hamburger */
  .action-icon { width: 34px; height: 34px; }
  .action-icon svg { width: 17px; height: 17px; }
  .action-badge { top: 0; right: 0; }
}

@media (max-width: 720px) {
  .why-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; padding-top: 3rem; }
  .wholesale-inner { flex-direction: column; align-items: flex-start; }
  .hero-stats { gap: 2rem; }

  .whatsapp-float { width: 52px; height: 52px; right: 1rem; bottom: 1rem; }
  .back-to-top { width: 40px; height: 40px; right: 1rem; bottom: calc(1rem + 52px + 12px); }
}

/* ============ INNER PAGES — LIGHT THEME ============
   The Home page keeps its dark, cinematic identity. About, Products,
   Wholesale and Contact use the warm ivory/ink palette already
   established for "light" sections on the homepage (--ivory, --ink,
   --gold-ink, --border-ink) so the two feel like the same brand, not
   two different sites. The Header and Footer are untouched — both
   already have their own explicit dark background and are unaffected
   by these body-level overrides. */
body.page-light { background: var(--ivory); }
body.page-light .section { background: transparent; }
body.page-light .section-light-alt,
body.page-light .section-light { background: var(--ivory-2); }
body.page-light h1, body.page-light h2, body.page-light h3 { color: var(--ink); }
body.page-light p { color: var(--ink-muted); }
body.page-light .eyebrow { color: var(--gold-ink); }
body.page-light .section-title { color: var(--ink); }

body.page-light .product-card { background: #ffffff; border-color: var(--border-ink); }
body.page-light .product-card:hover { border-color: var(--gold-ink); }
body.page-light .product-media { background: #efe6d0; }
body.page-light .product-media.no-image::after { border-color: var(--border-ink); }
body.page-light .product-body h3 { color: var(--ink); }
body.page-light .product-meta { border-bottom-color: var(--border-ink); }
body.page-light .product-price { color: var(--gold-ink); }
body.page-light .product-grade-name { color: var(--ink-muted); }
body.page-light .btn-gold-sm { color: var(--gold-ink); border-color: var(--border-ink); }
body.page-light .btn-gold-sm:hover { background: rgba(138, 106, 20, 0.08); }
body.page-light .btn-outline { color: var(--ink); border-color: var(--border-ink); }
body.page-light .btn-outline:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

body.page-light .wholesale-form-wrap .eyebrow,
body.page-light .wholesale-form { }
body.page-light .wholesale-form {
  background: #ffffff;
  border-color: var(--border-ink);
}
body.page-light .form-field label { color: var(--ink-muted); }
body.page-light .form-field input,
body.page-light .form-field select,
body.page-light .form-field textarea {
  background: #fbf7ee;
  color: var(--ink);
  border-color: var(--border-ink);
}
body.page-light .form-field input::placeholder,
body.page-light .form-field textarea::placeholder { color: #a99c86; }
body.page-light .form-field input:focus,
body.page-light .form-field select:focus,
body.page-light .form-field textarea:focus { border-color: var(--gold-ink); }
body.page-light .form-success {
  background: #ffffff;
  border-color: var(--border-ink);
}
body.page-light .form-success h3 { color: var(--gold-ink); }
body.page-light .form-success p { color: var(--ink-muted); }

/* ============ ABOUT PAGE ============ */
.page-hero {
  background: var(--ivory-2);
  padding: 6.5rem 1.5rem 5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-ink);
}
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  max-width: 760px;
  margin: 0 auto 1.1rem;
}
.page-hero p { max-width: 560px; margin: 0 auto; font-size: 1.02rem; }

.about-block { max-width: 720px; margin: 0 auto; }
.about-block p { margin-bottom: 1.1rem; font-size: 1rem; }
.about-block p:last-child { margin-bottom: 0; }

.journey-timeline {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.journey-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--border-ink);
}
.journey-step:last-child { border-bottom: none; padding-bottom: 0; }
.journey-index {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-ink);
  opacity: 0.6;
}
.journey-step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--ink); }
.journey-step p { margin: 0; }

.people-grid {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.people-card {
  background: #ffffff;
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.people-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--ink); }
.people-card p { margin: 0; font-size: 0.94rem; }
.people-card.people-card-full { grid-column: 1 / -1; }

.about-cta {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--ivory-2);
  border-top: 1px solid var(--border-ink);
}
.about-cta h2 { margin-bottom: 1.3rem; }

@media (max-width: 640px) {
  .people-grid { grid-template-columns: 1fr; }
  .journey-step { grid-template-columns: 44px 1fr; }
}

/* ============ CONTACT PAGE ============ */
.contact-grid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
}
.contact-methods { display: flex; flex-direction: column; gap: 1rem; }
.contact-method {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #ffffff;
  border: 1px solid var(--border-ink);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  transition: border-color var(--transition);
}
.contact-method:hover { border-color: var(--gold-ink); }
.contact-method-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ivory-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-ink);
}
.contact-method-text { display: flex; flex-direction: column; }
.contact-method-text span:first-child { font-size: 0.76rem; color: var(--ink-muted); }
.contact-method-text strong { font-size: 0.98rem; color: var(--ink); font-weight: 500; }

@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ============ OPENING / SPLASH SCREEN ============
   Cashew -> Fruit -> Sprout -> Arumbu Cashews logo, then fades into
   the homepage. Homepage content underneath is real DOM the whole
   time (nothing is hidden from crawlers) — this is a decorative
   overlay only, and JS unmounts it (display:none + aria-hidden) once
   it finishes or the visitor clicks Skip.

   .no-js (before the inline <script> in <head> swaps it to .js)
   hides the splash immediately, so a JS-disabled visitor never sees
   a stuck overlay. prefers-reduced-motion collapses the whole
   sequence to a near-instant fade for the same reason. */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  overflow: hidden;
  animation: splashDismiss 0.5s ease 2.3s forwards;
}
body.no-js .splash-screen,
body.splash-done .splash-screen { display: none; }

.splash-pattern {
  position: absolute;
  inset: -10%;
  opacity: 0.16;
  color: var(--gold-ink);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 118px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%238a6a14' stroke-width='1.4'%3E%3Cpath d='M30 26c7 2 11 9 11 16 0 9-8 15-17 15S7 51 7 42c0-5 2-8 6-11'/%3E%3Cpath d='M108 92c0-7-5-11-12-11 0 7 5 12 12 12Z'/%3E%3Cpath d='M108 92v18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
  background-repeat: repeat;
  animation: splashPatternDrift 12s linear infinite;
}

.splash-stage {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold-ink);
  opacity: 0;
}
.splash-shape-cashew { animation: splashStageFade 2.3s ease 0s 1 forwards; }
.splash-shape-fruit  { animation: splashStageFade 2.3s ease 0.55s 1 forwards; }
.splash-shape-sprout { animation: splashStageFade 2.3s ease 1.1s 1 forwards; }

.splash-logo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  opacity: 0;
  transform: scale(0.85);
  animation: splashLogoReveal 0.7s ease 1.55s forwards;
}
.splash-logo img { width: 56px; height: 56px; object-fit: contain; }
.splash-logo span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  white-space: nowrap;
}

.splash-skip {
  position: absolute;
  bottom: 1.8rem;
  right: 1.8rem;
  background: none;
  border: 1px solid var(--border-ink);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  animation: splashSkipReveal 0.4s ease 0.5s forwards;
  transition: border-color var(--transition), color var(--transition);
}
.splash-skip:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

@keyframes splashPatternDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-70px, -70px); }
}
@keyframes splashStageFade {
  0%   { opacity: 0; transform: scale(0.8); }
  18%  { opacity: 1; transform: scale(1); }
  32%  { opacity: 1; transform: scale(1); }
  46%  { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; }
}
@keyframes splashLogoReveal {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splashSkipReveal {
  from { opacity: 0; }
  to   { opacity: 0.8; }
}
@keyframes splashDismiss {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* One clean, fast fade for anyone who's asked the OS for reduced
   motion — no staged shape sequence, just a quick, calm transition. */
@media (prefers-reduced-motion: reduce) {
  .splash-screen { animation: splashDismiss 0.35s ease 0.4s forwards; }
  .splash-pattern { animation: none; }
  .splash-shape, .splash-logo, .splash-skip { animation: none !important; opacity: 0 !important; }
  .splash-logo { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 480px) {
  .splash-stage { width: 78px; height: 78px; }
  .splash-logo img { width: 46px; height: 46px; }
  .splash-logo span { font-size: 0.7rem; letter-spacing: 0.14em; }
}

/* ============ TAMIL TYPOGRAPHY ADJUSTMENTS ============
   Tamil script runs wider per word than English at the same
   font-size and has no natural mid-word break points, so the same
   sizes that work for English nav/heading text cause awkward
   wrapping or vertical stacking once the page is switched to
   தமிழ். Scoped entirely to html[lang="ta"] (set by js/i18n.js on
   every language switch) — English typography is completely
   untouched. Sizes below are proportionate reductions of each
   element's own English size, not arbitrary numbers. */

html[lang="ta"] .nav-link,
html[lang="ta"] .nav-dropdown-trigger {
  font-size: 0.76rem;
  white-space: nowrap;
}
html[lang="ta"] .nav-call { font-size: 0.74rem; }
html[lang="ta"] .nav-dropdown-menu a { font-size: 0.76rem; }
html[lang="ta"] .brand-wordmark { font-size: 1.3rem; letter-spacing: 0.02em; }
html[lang="ta"] .lang-switch-btn { font-size: 0.72rem; }

html[lang="ta"] .hero-title { font-size: clamp(1.9rem, 4.8vw, 3.3rem); }
html[lang="ta"] .hero-sub { font-size: 0.96rem; }
html[lang="ta"] .hero-stats dd { font-size: 0.66rem; letter-spacing: 0.02em; }

html[lang="ta"] .section-title { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
html[lang="ta"] .page-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
html[lang="ta"] .founder-lede { font-size: 0.96rem; }

html[lang="ta"] .why-card h3,
html[lang="ta"] .journey-step h3 { font-size: 1rem; }
html[lang="ta"] .quality-step h3 { font-size: 1.12rem; }
html[lang="ta"] .people-card h3 { font-size: 0.98rem; }
html[lang="ta"] .action-panel h4 { font-size: 0.9rem; }

html[lang="ta"] .footer-col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none; /* Tamil script has no uppercase form */
}
html[lang="ta"] .footer-follow-label { font-size: 0.7rem; }
html[lang="ta"] .footer-admin-link a { font-size: 0.64rem; }

html[lang="ta"] .form-field label { font-size: 0.74rem; }
html[lang="ta"] .contact-method-text span:first-child { font-size: 0.7rem; }
html[lang="ta"] .btn { font-size: 0.84rem; }
html[lang="ta"] .wholesale-form .btn-gold,
html[lang="ta"] #contactForm .btn-gold { white-space: normal; text-align: center; }

@media (max-width: 1300px) {
  html[lang="ta"] .lang-switch--drawer .lang-switch-btn { font-size: 0.76rem; }
}

/* ============ HOMEPAGE: LIGHT CARD OVERRIDES ============
   Scoped specifically to the homepage's "Why buyers trust the
   Arumbu mark" (#why) and "OUR CASHEW RANGE" (#products) sections.
   Their outer section background is already light ivory/ivory-2 —
   only the individual cards on top were still using the site's dark
   panel treatment, which is what actually reads as a big dark block.
   Nothing else is touched: the About page's own "Why Arumbu Cashews"
   section (different section, no #why id) and the Products page's
   own catalogue cards (already white via body.page-light) are
   unaffected by these rules. */

/* REVERTED per the latest explicit instruction: the card background
   must stay as the site's existing dark panel treatment — only the
   TEXT inside needs to be brighter/more readable. (An earlier pass
   had switched these cards to a white background; that is undone
   here since the current instruction explicitly says not to change
   the card background, only the text visibility.) */
#why .why-card h3 { color: #ffffff; }
#why .why-card p { color: var(--cream); }
#why .why-icon { color: var(--gold-light); }

/* "OUR CASHEW RANGE" — same situation as #why above: the product
   cards keep their original dark-panel background (never changed to
   white), but the grade-name heading gets an explicit bright white
   so it's unambiguous rather than relying on the slightly warm
   default --cream tone. The price/accent text already uses the
   site's existing gold treatment (--gold-light) and is left as-is,
   per "keep the existing gold/accent text where it already exists". */
#products .product-body h3 { color: #ffffff; }

/* REVERTED per the latest explicit instruction: "Keep the existing
   product cards... Do NOT redesign anything." The white-card
   treatment from an earlier pass is undone — product cards return to
   the site's original dark-panel styling. Only the section heading
   text (title/eyebrow) gets a contrast check below, since that's the
   only "text hard to read" complaint that survives this instruction
   once the cards themselves are off the table. */