/* Yarra Exports - site styles */

:root {
  /* === YARRA EXPORTS BRAND PALETTE === */
  /* Primary: Deep Navy (logo "YARRA" text) */
  --navy:         #1B2D4F;
  --navy-deep:    #111E35;
  --navy-mid:     #243860;
  /* Accent: Rich Gold (logo "EXPORTS" text & globe) */
  --gold:         #B8963E;
  --gold-light:   #D4AF5A;
  --gold-pale:    #F0E4C4;
  /* Secondary: Muted Sage (logo leaf) */
  --sage:         #7A8C6A;
  --sage-light:   #A3B48F;
  --sage-pale:    #EDF0E9;
  /* Neutrals */
  --white:        #FFFFFF;
  --off-white:    #FAFAF8;
  --cream:        #F5F2EB;
  --light-grey:   #F0EEE9;
  --dark:         #1B2D4F;
  --mid:          #5A6B82;
  --muted:        #7A8898;
  --border:       rgba(27,45,79,0.1);
  --gold-border:  rgba(184,150,62,0.25);
  /* Aliases used in old CSS */
  --warm-white:   #FAFAF8;
  --terracotta:   #B8963E;
  --terracotta-dark: #9A7C32;
  --olive:        #7A8C6A;
  --olive-light:  #A3B48F;
  --earth:        #8B7355;
  --earth-dark:   #111E35;
  --sand:         #D4AF5A;
  --sand-light:   #F0E4C4;
  --text:         #1B2D4F;
  --border: rgba(27,45,79,0.1);
  --shadow: 0 8px 32px rgba(27,45,79,0.12);
  --shadow-sm: 0 2px 12px rgba(27,45,79,0.08);
  --shadow-md: 0 8px 32px rgba(27,45,79,0.12);
  --shadow-lg: 0 20px 60px rgba(27,45,79,0.16);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--warm-white);
  color: var(--dark);
  overflow-x: hidden;
}

/* Hide all pages except active */
.page { display: none; }
.page.active { display: block; }

/* ── NOISE TEXTURE OVERLAY ──────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 60px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s;
}

.nav.scrolled {
  height: 60px;
  box-shadow: 0 4px 24px rgba(44,36,24,0.08);
}

.nav-logo {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
}

.nav-logo span { color: var(--terracotta); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}

.nav-links a:hover, .nav-links a.active { color: var(--terracotta); }

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

/* Language switcher */
.lang-switcher {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-width: 160px;
  z-index: 100;
}

.lang-dropdown.open { display: block; }

.lang-option {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}

.lang-option:hover { background: var(--cream); color: var(--terracotta); }
.lang-option.active { color: var(--terracotta); font-weight: 600; }

.nav-cta {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 10px 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-cta:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-1px); }

/* Mobile menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy-deep);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── SHARED SECTION STYLES ──────────────────────────────── */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--terracotta);
}

.section-title {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

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

.section-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--mid);
}

/* ══════════════════════════════════════════════════════════ */
/*  HOME PAGE                                                */
/* ══════════════════════════════════════════════════════════ */

/* ── HERO FULL WIDTH ─────────────────────────────────── */
  .hero-full {
    min-height: 100vh;
    padding-top: 76px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .hero-full-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(27,45,79,0.97) 0%, transparent 70%),
      radial-gradient(ellipse at 80% 20%, rgba(184,150,62,0.08) 0%, transparent 50%),
      linear-gradient(135deg, #0D1828 0%, #1B2D4F 50%, #162340 100%);
  }

  /* Subtle globe ring decoration */
  .hero-full-bg::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 120vw);
    height: min(900px, 120vw);
    border-radius: 50%;
    border: 1px solid rgba(184,150,62,0.06);
  }
  .hero-full-bg::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, 90vw);
    height: min(620px, 90vw);
    border-radius: 50%;
    border: 1px solid rgba(184,150,62,0.09);
  }

  .hero-full-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 860px;
    padding: 60px 40px;
    width: 100%;
  }

  .hero-logo-img {
    height: 220px;
    width: auto;
    display: block;
    margin: 0 auto 36px;
    /* invert to white/gold for dark background */
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.3));
  }

  .hero-full-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(184,150,62,0.3);
    padding: 6px 18px;
    margin-bottom: 28px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(184,150,62,0.8);
  }

  .hero-full-title {
    font-family: var(--display);
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 600;
    line-height: 1.04;
    color: #ffffff;
    letter-spacing: -2px;
    margin-bottom: 24px;
  }

  .hero-title-gold {
    display: block;
    font-style: italic;
    color: var(--gold-light);
  }

  .hero-full-sub {
    font-size: clamp(14px, 1.6vw, 17px);
    line-height: 1.85;
    color: rgba(255,255,255,0.55);
    max-width: 600px;
    margin: 0 auto 40px;
  }

  .hero-full-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 64px;
  }

  .btn-outline-white {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 14px 40px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
  }
  .btn-outline-white:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(184,150,62,0.06);
  }

  .hero-full-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 32px 0 0;
    border-top: 1px solid rgba(184,150,62,0.2);
  }

  .hero-full-stat {
    flex: 1;
    max-width: 200px;
    text-align: center;
  }

  .hero-full-stat-num {
    font-family: var(--display);
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
  }
  .hero-full-stat-num span { font-size: 30px; color: var(--gold); }

  .hero-full-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 6px;
  }

  .hero-full-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(184,150,62,0.2);
    flex-shrink: 0;
  }

  /* Scroll cue - hidden */
  .hero-scroll-cue { display: none !important; }

  /* Remove old hero styles that would conflict */
  .hero { display: none !important; }


  /* ── MARQUEE ──────────────────────────────────────────────── */
.marquee-wrap {
  background: var(--terracotta);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.marquee-track:hover { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-item {
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  padding: 0 32px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 32px;
}

.marquee-dot {
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
}

/* ── WHY US SECTION ───────────────────────────────────────── */
.why-section {
  padding: 120px 60px;
  background: var(--warm-white);
}

.why-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.why-left {}

.why-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.why-card {
  background: var(--cream);
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--terracotta), var(--sand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.why-card:hover { background: var(--cream); border-top: 2px solid var(--gold); }
.why-card:hover::before { transform: scaleX(1); }

.why-card-icon { font-size: 28px; margin-bottom: 16px; }

.why-card-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 10px;
}

.why-card-body { font-size: 14px; line-height: 1.7; color: var(--mid); }

.why-desc { font-size: 16px; line-height: 1.8; color: var(--mid); margin: 20px 0 36px; }

/* ── CATEGORIES STRIP ─────────────────────────────────────── */
.categories-section {
  background: var(--cream);
  padding: 100px 60px;
}

.categories-inner { max-width: 1200px; margin: 0 auto; }

.categories-header {
  text-align: center;
  margin-bottom: 64px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cat-card {
  background: var(--warm-white);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196,113,74,0.06), rgba(92,107,58,0.06));
  opacity: 0;
  transition: opacity 0.3s;
}

.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: var(--navy); }
.cat-card:hover .cat-card-title { color: var(--gold-light); }
.cat-card:hover .cat-card-count { color: rgba(255,255,255,0.4); }

.cat-icon { font-size: 44px; margin-bottom: 16px; display: block; }

.cat-card-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
  transition: color 0.2s;
}

.cat-card-count {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── TESTIMONIAL / QUOTE SECTION ──────────────────────────── */
.quote-section {
  background: var(--navy);
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.quote-section::before {
  content: '"';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 300px;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  pointer-events: none;
}

.quote-text {
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 42px);
  font-style: italic;
  font-weight: 300;
  color: var(--sand-light);
  max-width: 800px;
  margin: 0 auto 32px;
  line-height: 1.5;
  position: relative;
}

.quote-source {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── CONTACT CTA SECTION ──────────────────────────────────── */
.home-cta {
  padding: 120px 60px;
  background: var(--warm-white);
}

.home-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: 32px;
  padding: 80px;
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.home-cta-inner::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(196,113,74,0.12), transparent 70%);
  pointer-events: none;
}

.home-cta-inner::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(92,107,58,0.1), transparent 70%);
  pointer-events: none;
}

.home-cta-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 20px;
}

.home-cta-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--mid);
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════ */
/*  ABOUT PAGE                                               */
/* ══════════════════════════════════════════════════════════ */

.page-hero {
  padding: 160px 60px 100px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: attr(data-title);
  position: absolute;
  right: -20px;
  bottom: -60px;
  font-family: var(--display);
  font-size: 200px;
  font-weight: 700;
  color: rgba(139,111,71,0.06);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.page-hero-inner { max-width: 700px; }

.about-story {
  padding: 100px 60px;
  background: var(--warm-white);
}

.about-story-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

.about-sticky { position: sticky; top: 100px; }

.about-image-frame {
  background: var(--earth-dark);
  border-radius: 24px;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.about-image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(196,113,74,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(92,107,58,0.2) 0%, transparent 60%),
    linear-gradient(135deg, #3A2C1C, #5C4A2A);
}

.about-frame-text {
  position: relative;
  text-align: center;
  z-index: 2;
  padding: 40px;
}

.about-frame-big {
  font-family: var(--display);
  font-size: 80px;
  font-weight: 700;
  color: rgba(212,188,148,0.2);
  line-height: 1;
}

.about-frame-sub {
  font-family: var(--display);
  font-size: 22px;
  font-style: italic;
  color: var(--sand);
  margin-top: 16px;
}

.about-right-content {}

.about-lead {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--dark);
  margin-bottom: 32px;
}

.about-body-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--mid);
  margin-bottom: 20px;
}

.about-values {
  padding: 100px 60px;
  background: var(--cream);
}

.about-values-inner { max-width: 1200px; margin: 0 auto; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.value-card {
  background: var(--warm-white);
  border-radius: 20px;
  padding: 40px 32px;
  border: 1px solid var(--border);
}

.value-num {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 700;
  color: rgba(196,113,74,0.12);
  line-height: 1;
  margin-bottom: 16px;
}

.value-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 12px;
}

.value-body { font-size: 14px; line-height: 1.75; color: var(--mid); }

/* ══════════════════════════════════════════════════════════ */
/*  PRODUCTS PAGE                                            */
/* ══════════════════════════════════════════════════════════ */

.products-page { padding-bottom: 100px; }

.products-filter {
  background: var(--cream);
  padding: 24px 60px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 72px;
  z-index: 50;
}

.filter-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 20px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filter-btn.active { background: var(--terracotta); color: white; border-color: var(--terracotta); }

.products-grid {
  max-width: 1300px;
  margin: 60px auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.prod-card {
  background: var(--warm-white);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.prod-img-wrap {
  background: linear-gradient(145deg, var(--cream), var(--sand-light));
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  position: relative;
  overflow: hidden;
}

.prod-img-wrap img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s;
}

.prod-card:hover .prod-img-wrap img { transform: scale(1.05); }

.prod-cat-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(250,247,242,0.9);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--terracotta);
}

.prod-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }

.prod-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.3;
}

.prod-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--mid);
  flex: 1;
  margin-bottom: 16px;
}

.prod-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.prod-pack {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.prod-order-btn {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.prod-order-btn:hover { background: var(--gold); color: var(--navy); }

/* ══════════════════════════════════════════════════════════ */
/*  CONTACT PAGE                                             */
/* ══════════════════════════════════════════════════════════ */

.contact-layout {
  padding: 60px;
  background: var(--warm-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 70vh;
  align-items: start;
}

.contact-left {}

.contact-info-items { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--cream);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.contact-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-item-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.contact-item-value {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
}

.contact-right {}

.contact-form {
  background: var(--cream);
  border-radius: 24px;
  padding: 48px;
  border: 1px solid var(--border);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-group label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--earth);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--dark);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(196,113,74,0.1);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-submit {
  width: 100%;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.form-submit:hover { background: var(--terracotta-dark); transform: translateY(-1px); }

.form-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.form-success.show { display: block; }
.form-success-icon { font-size: 48px; margin-bottom: 16px; }

.form-success-title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}

.form-success-body { font-size: 15px; color: var(--mid); line-height: 1.7; }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  padding: 80px 60px 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand-logo {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--sand-light);
  margin-bottom: 16px;
}

.footer-brand-logo span { color: var(--terracotta); }

.footer-brand-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.35);
  max-width: 280px;
}

.footer-col-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--terracotta); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy { font-size: 13px; color: rgba(255,255,255,0.25); }

.footer-origin {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

/* ── ENQUIRY MODAL ─────────────────────────────────────────── */
.enq-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,36,24,0.75);
  backdrop-filter: blur(8px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.enq-overlay.open { display: flex; }

.enq-modal {
  background: var(--warm-white);
  border-radius: 24px;
  padding: 48px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(44,36,24,0.3);
  position: relative;
  animation: modalSlide 0.3s cubic-bezier(0.34,1.4,0.64,1);
}

@keyframes modalSlide {
  from { opacity:0; transform: scale(0.9) translateY(20px); }
  to { opacity:1; transform: scale(1) translateY(0); }
}

.enq-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--cream);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--mid);
  transition: all 0.2s;
}

.enq-close:hover { background: var(--sand-light); color: var(--dark); }

.enq-title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}

.enq-sub { font-size: 14px; color: var(--mid); margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { min-height: 400px; }
  .hero-left::after { display: none; }
  .why-inner { grid-template-columns: 1fr; gap: 60px; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .about-story-inner { grid-template-columns: 1fr; }
  .about-sticky { position: static; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav { padding: 0 24px; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-left { padding: 60px 24px; }
  .why-section, .categories-section, .about-story, .about-values { padding: 60px 24px; }
  .page-hero { padding: 120px 24px 60px; }
  .products-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .products-filter { padding: 16px 24px; }
  .contact-layout { padding: 40px 24px; }
  .home-cta { padding: 60px 24px; }
  .home-cta-inner { padding: 48px 24px; }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .footer { padding: 60px 24px 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .why-right { grid-template-columns: 1fr; }
}

  /* ── HERO BUTTONS ────────────────────────────────────── */
  .btn-primary {
    background: var(--gold);
    color: #1B2D4F;
    border: 1px solid var(--gold);
    padding: 15px 44px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-block;
    text-decoration: none;
    border-radius: 0;
    -webkit-appearance: none;
  }
  .btn-primary:hover {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
  }

  .btn-outline, .btn-outline-white {
    background: transparent;
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.45);
    padding: 15px 44px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-block;
    border-radius: 0;
    -webkit-appearance: none;
  }
  .btn-outline:hover, .btn-outline-white:hover {
    border-color: var(--gold);
    color: var(--gold);
  }


  /* ── FEATURED PRODUCTS ───────────────────────────────── */
  .featured-section {
    padding: 100px 80px;
    background: var(--white);
  }
  .featured-inner { max-width: 1200px; margin: 0 auto; }
  .featured-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-wrap: wrap;
    gap: 20px;
  }
  .featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .featured-card {
    background: var(--cream);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
  }
  .featured-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-border);
  }
  .featured-card:hover .featured-card-name { color: var(--gold); }
  .featured-img-wrap {
    background: linear-gradient(145deg, #f5f2eb, #ede9e0);
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .featured-img-wrap img {
    max-height: 180px;
    max-width: 85%;
    object-fit: contain;
    transition: transform 0.4s;
  }
  .featured-card:hover .featured-img-wrap img { transform: scale(1.07); }
  .featured-img-emoji {
    font-size: 64px;
  }
  .featured-card-body { padding: 20px; }
  .featured-card-brand {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
  }
  .featured-card-name {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 8px;
    transition: color 0.2s;
  }
  .featured-card-pack {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .featured-card-btn {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--navy);
    color: var(--gold);
    border: none;
    padding: 12px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transform: translateY(100%);
    transition: transform 0.3s;
  }
  .featured-card:hover .featured-card-btn { transform: translateY(0); }
  .featured-card-body { padding-bottom: 28px; }

  @media(max-width:1024px) { .featured-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:600px)  { .featured-grid { grid-template-columns: 1fr; } .featured-section { padding: 60px 24px; } }


  /* ── PRODUCT DETAIL POPUP ───────────────────────────── */
  .pdl-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17,30,53,0.82);
    backdrop-filter: blur(10px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .pdl-overlay.open { display: flex; }

  .pdl-modal {
    background: var(--white);
    max-width: 900px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    animation: pdlIn 0.3s cubic-bezier(0.34,1.4,0.64,1);
    border-top: 3px solid var(--gold);
  }
  @keyframes pdlIn {
    from { opacity:0; transform:scale(0.92) translateY(20px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }

  .pdl-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    background: var(--navy);
    border: none;
    color: var(--gold);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: background 0.2s;
  }
  .pdl-close:hover { background: var(--gold); color: var(--navy); }

  .pdl-image-panel {
    background: linear-gradient(145deg, var(--cream), #e8e4db);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    min-height: 420px;
    position: relative;
    overflow: hidden;
  }
  .pdl-image-panel::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(184,150,62,0.15);
  }

  .pdl-img {
    max-height: 300px;
    max-width: 90%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 32px rgba(27,45,79,0.15));
    transition: transform 0.4s;
  }
  .pdl-img:hover { transform: scale(1.04) translateY(-4px); }
  .pdl-emoji { font-size: 100px; opacity: 0.35; }

  .pdl-info {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid var(--border);
  }

  .pdl-cat-tag {
    display: inline-block;
    background: var(--navy);
    color: var(--gold-light);
    padding: 4px 12px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .pdl-num {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
  }

  .pdl-name {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
  }

  .pdl-divider {
    width: 36px; height: 2px;
    background: var(--gold);
    margin: 14px 0;
  }

  .pdl-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    margin-bottom: 20px;
  }

  .pdl-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }

  .pdl-meta-item {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 12px 14px;
  }
  .pdl-meta-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 3px;
  }
  .pdl-meta-value {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
  }

  .pdl-nutrition {
    background: var(--navy-deep);
    padding: 16px 18px;
    margin-bottom: 20px;
  }
  .pdl-nutrition-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
  }
  .pdl-nutrition-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .pdl-nutrition-row:last-child { border-bottom: none; }
  .pdl-nutrition-row span:last-child { color: rgba(255,255,255,0.88); font-weight: 500; }

  .pdl-actions { display: flex; gap: 10px; }
  .pdl-order-btn {
    flex: 1;
    background: var(--gold);
    color: var(--navy);
    border: none;
    padding: 14px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }
  .pdl-order-btn:hover { background: var(--navy); color: var(--white); }
  .pdl-back-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 14px 20px;
    font-family: var(--sans);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .pdl-back-btn:hover { border-color: var(--navy); color: var(--navy); }

  @media(max-width:680px) {
    .pdl-modal { grid-template-columns: 1fr; }
    .pdl-image-panel { min-height: 260px; border-left: none; }
    .pdl-info { padding: 24px 20px; border-left: none; }
    .pdl-meta-grid { grid-template-columns: 1fr; }
  }

/* ══════════════════════════════════════════════════════════
   PRODUCT FILTERS — range bar, category bar, result count
   Added for the Arkadia catalogue (191 products across 15 categories)
   ══════════════════════════════════════════════════════════ */

/* The range bar is the sticky one; the category bar scrolls with the page
   so the two never stack on top of each other on small screens. */
.products-filter.range-filter {
  padding-bottom: 14px;
  border-bottom: none;
  gap: 10px;
}

.products-filter.cat-filter {
  position: static;
  padding-top: 0;
  padding-bottom: 20px;
  gap: 8px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
}

.filter-btn.range-btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 10px 22px;
  border-color: var(--gold-border);
  color: var(--navy);
}

.filter-btn.range-btn:hover { border-color: var(--gold); color: var(--gold); }
.filter-btn.range-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.filter-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 100px;
  background: rgba(27, 45, 79, 0.07);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.filter-btn.active .filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.products-count {
  max-width: 1300px;
  margin: 0 auto;
  padding: 22px 60px 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Brand + supplier code line on each product card */
.prod-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.prod-brand {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}

.prod-code {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.prod-code::before {
  content: '·';
  margin-right: 8px;
  color: var(--border);
}

@media (max-width: 900px) {
  .products-filter.range-filter,
  .products-filter.cat-filter { padding-left: 24px; padding-right: 24px; }
  .products-count { padding: 18px 24px 0; }
}

/* ══════════════════════════════════════════════════════════
   INSTANT ENQUIRY ASSISTANT
   ══════════════════════════════════════════════════════════ */

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

.chat-launcher {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  border: none;
  border-radius: 100px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(27, 45, 79, 0.28);
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.2s;
}

.chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(27, 45, 79, 0.34);
}

.chat-launcher.hidden { opacity: 0; pointer-events: none; transform: scale(0.9); }
.chat-launcher-icon { font-size: 17px; line-height: 1; }

.chat-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.chat-panel {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 901;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 56px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(17, 30, 53, 0.26);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  overflow: hidden;
}

.chat-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--navy);
  color: var(--white);
}

.chat-head-id { display: flex; align-items: center; gap: 12px; }

.chat-avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.chat-head-name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
}

.chat-head-status {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.chat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6ECF8E;
  box-shadow: 0 0 0 0 rgba(110, 207, 142, 0.6);
  animation: chatPulse 2.2s infinite;
}

@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(110, 207, 142, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(110, 207, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 207, 142, 0); }
}

.chat-close {
  background: none; border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px; cursor: pointer; padding: 4px;
  transition: color 0.2s;
}
.chat-close:hover { color: var(--white); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--off-white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.62;
}

.chat-bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  color: var(--dark);
}

.chat-user {
  align-self: flex-end;
  background: var(--navy);
  border-bottom-right-radius: 5px;
  color: var(--white);
}

.chat-prod {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 9px 12px;
  text-align: left;
  background: var(--cream);
  border: 1px solid var(--gold-border);
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.2s, border-color 0.2s;
}
.chat-prod:hover { background: var(--gold-pale); border-color: var(--gold); }
.chat-prod strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.chat-prod span   { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.chat-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 9px 16px;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-cta:hover { background: var(--gold-light); }

.chat-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: chatBounce 1.3s infinite;
}
.chat-dots i:nth-child(2) { animation-delay: 0.16s; }
.chat-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes chatBounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 0;
  background: var(--off-white);
}

.chat-sug {
  padding: 7px 13px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.2s;
}
.chat-sug:hover { border-color: var(--gold); color: var(--gold); }

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  background: var(--off-white);
  border-top: 1px solid var(--border);
}

.chat-input-row textarea {
  flex: 1;
  resize: none;
  max-height: 96px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dark);
}
.chat-input-row textarea:focus { outline: none; border-color: var(--gold); }

.chat-send {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-send:hover { background: var(--gold); color: var(--navy-deep); }

.chat-foot {
  margin: 0;
  padding: 0 16px 12px;
  background: var(--off-white);
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 560px) {
  .chat-launcher { right: 16px; bottom: 16px; padding: 13px 18px 13px 15px; }
  .chat-launcher-text { display: none; }
  .chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100vh - 16px); }
}

/* ══════════════════════════════════════════════════════════════════════
   ═══  CORPORATE REFRESH LAYER  ═══
   Everything below overrides the original editorial styling to give the
   site a cleaner, more corporate feel: cooler neutrals, a crisper grid,
   tighter type and calmer decoration. The brand navy, gold and logo are
   untouched.

   This whole block is additive. Delete from here to the end of the file
   to return to the previous look exactly.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Cooler, flatter neutrals — the warm cream read boutique, not trade. */
  --off-white:  #FBFCFD;
  --warm-white: #FBFCFD;
  --cream:      #F3F6F9;
  --light-grey: #EDF1F5;
  --border:     rgba(27, 45, 79, 0.12);
  --hairline:   rgba(27, 45, 79, 0.09);
  --mid:        #55647A;
  --muted:      #7E8B9C;

  /* Tighter, more restrained elevation. */
  --shadow-sm: 0 1px 2px rgba(17, 30, 53, 0.05);
  --shadow-md: 0 6px 20px rgba(17, 30, 53, 0.08);
  --shadow-lg: 0 18px 44px rgba(17, 30, 53, 0.12);
  --shadow:    0 6px 20px rgba(17, 30, 53, 0.08);

  --radius:    12px;
  --radius-sm: 8px;
}

/* The film-grain overlay is a print-design flourish. Corporate sites read
   cleaner without it. */
body::before { display: none; }

/* ── Navigation: solid, hairline-separated, less floaty ───────────── */
.nav {
  background: rgba(251, 252, 253, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.nav.scrolled { box-shadow: var(--shadow-sm); }

.nav-links a {
  font-size: 12px;
  letter-spacing: 1.4px;
  font-weight: 500;
}

/* ── Type: keep the serif for display only, sans everywhere else ──── */
.section-title { letter-spacing: -0.8px; font-weight: 600; }

.section-eyebrow,
.eyebrow {
  font-size: 11px;
  letter-spacing: 2.6px;
  font-weight: 600;
}

.section-body { font-size: 15.5px; line-height: 1.75; }

/* The oversized ghost word behind page headers: keep it as texture,
   but dial it back so it stops competing with the headline. */
.page-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  padding: 148px 60px 76px;
}

.page-hero::after {
  font-size: 150px;
  color: rgba(27, 45, 79, 0.035);
  bottom: -40px;
}

/* ── Buttons: squared corners read more corporate than full pills ─── */
.btn-primary,
.btn-outline-white,
.nav-cta {
  border-radius: var(--radius-sm);
  letter-spacing: 1.2px;
  font-weight: 600;
}

/* ── Product grid: denser, so 191 SKUs stay scannable ─────────────── */
.products-grid {
  max-width: 1460px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
  margin: 40px auto 80px;
}

.prod-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.prod-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-md);
}

/* Flat, cool product stage — the pack shots carry the colour. */
.prod-img-wrap {
  background: var(--light-grey);
  height: 186px;
  border-bottom: 1px solid var(--hairline);
}

.prod-cat-tag {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--hairline);
  font-size: 9.5px;
  letter-spacing: 1.3px;
  color: var(--mid);
}

.prod-body { padding: 18px 20px 20px; }

/* Product names in the UI sans: clearer at small sizes, less decorative. */
.prod-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.1px;
  color: var(--navy);
  margin-bottom: 8px;
}

.prod-desc {
  font-size: 12.8px;
  line-height: 1.62;
  color: var(--mid);
}

.prod-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.prod-pack {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: none;
  color: var(--muted);
}

.prod-enquire {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  color: var(--gold);
  border-radius: var(--radius-sm);
}

/* ── Filter bars ──────────────────────────────────────────────────── */
.products-filter {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.products-filter.range-filter { border-bottom: none; padding-top: 22px; }
.products-filter.cat-filter   { border-bottom: 1px solid var(--hairline); }

.filter-btn {
  border-radius: var(--radius-sm);
  border-color: var(--hairline);
  font-size: 11.5px;
  letter-spacing: 0.7px;
}

.filter-btn.range-btn { border-radius: var(--radius-sm); }

.filter-count { border-radius: 4px; }

.products-count {
  max-width: 1460px;
  letter-spacing: 1.4px;
  font-weight: 500;
}

/* ── Detail popup ─────────────────────────────────────────────────── */
.pdl-modal { border-radius: var(--radius); }
.pdl-name { letter-spacing: -0.6px; }
.pdl-meta-item { border-radius: var(--radius-sm); }
.pdl-nutrition { border-radius: var(--radius-sm); }

/* ── Chat widget follows the same geometry ────────────────────────── */
.chat-panel { border-radius: var(--radius); }
.chat-msg   { border-radius: var(--radius-sm); }
.chat-sug,
.chat-launcher,
.chat-cta   { border-radius: var(--radius-sm); }
.chat-prod  { border-radius: var(--radius-sm); }

/* ── Forms ────────────────────────────────────────────────────────── */
input, textarea, select { border-radius: var(--radius-sm) !important; }

@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 900px) {
  .page-hero { padding: 120px 24px 56px; }
  .page-hero::after { font-size: 92px; }
}

/* ── Filter bar layout fix ────────────────────────────────────────────
   Both bars inherited `position: sticky; top: 72px` from .products-filter,
   so they stuck to the same offset and covered each other on scroll.
   The range bar now scrolls away normally; the category bar stays as a
   single compact rail that scrolls sideways instead of wrapping. */

.products-filter.range-filter {
  position: static;
  padding-bottom: 12px;
}

.products-filter.cat-filter {
  position: sticky;
  top: 72px;
  z-index: 50;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 12px;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}

.products-filter.cat-filter::-webkit-scrollbar { height: 4px; }
.products-filter.cat-filter::-webkit-scrollbar-track { background: transparent; }
.products-filter.cat-filter::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.products-filter.cat-filter .filter-btn { flex: 0 0 auto; white-space: nowrap; }

/* Fade hint at the right edge so it is obvious the rail scrolls. */
.cat-filter-wrap { position: relative; }

/* ── Sticky offset + card button polish ───────────────────────────────
   The nav shrinks from 72px to 60px once the page scrolls, which left a
   12px gap above the sticky category rail with page content showing
   through. The rail now docks against the shrunk nav and slides under it
   (the nav sits at z-index 1000, the rail at 50). */

.products-filter.cat-filter { top: 59px; }

/* The "Details" action read as a boxed outline. Make it a quiet text
   button that only picks up a surface on hover. */
.prod-enquire {
  border: none;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.2s, gap 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.prod-enquire:hover { color: var(--navy); gap: 8px; }
.prod-enquire:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════
   EXPORT INFORMATION & FAQ  (products page)
   ══════════════════════════════════════════════════════════ */

.export-info {
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  padding: 80px 60px 96px;
}

.export-info-inner { max-width: 1140px; margin: 0 auto; }

.export-info-lead { max-width: 780px; margin: 20px 0 48px; }

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 76px;
}

.export-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-sm);
}

.export-card h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.export-card p {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
}

.export-faq-heading { margin-bottom: 28px; }

.faq-list {
  border-top: 1px solid var(--border);
  margin-bottom: 48px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.25s;
}

.faq-item[open] summary::after { content: '\2212'; }

.faq-item p {
  padding: 0 44px 22px 0;
  margin-top: -4px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--mid);
}

.export-cta { text-align: center; }

@media (max-width: 900px) {
  .export-info { padding: 56px 24px 68px; }
  .export-grid { margin-bottom: 52px; }
}

/* ── About page panel ─────────────────────────────────────────────────
   The frame behind "2026 / Founded in Melbourne" was an earth-toned brown
   left over from the original palette and clashed with the cooler scheme.
   Re-cut in the brand navy with a gold highlight. */

.about-image-frame {
  background: var(--navy-deep);
  border-radius: var(--radius);
}

.about-image-frame::before {
  background:
    radial-gradient(ellipse at 28% 26%, rgba(184, 150, 62, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse at 74% 76%, rgba(122, 140, 106, 0.16) 0%, transparent 60%),
    linear-gradient(140deg, #16263F 0%, #1B2D4F 55%, #24365B 100%);
}

.about-frame-big { color: rgba(212, 175, 90, 0.26); }

/* ── Home page featured cards ─────────────────────────────────────────
   Brought in line with the product grid: white surface, hairline border,
   the same radius and the UI sans for names. They were still using the
   warm cream and a hard-coded beige gradient. */

.featured-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.featured-img-wrap {
  background: var(--light-grey);
  border-bottom: 1px solid var(--hairline);
  height: 210px;
}

.featured-card-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

.featured-card-btn { border-radius: var(--radius-sm); }

/* ── Form status messages ─────────────────────────────────────────────
   Replaces the alert() calls and gives honest feedback about whether an
   enquiry actually went anywhere. */

.form-status {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  min-height: 0;
}

.form-status:empty { margin: 0; }
.form-status-error { color: #B3261E; }
.form-status-info  { color: var(--mid); }

.enq-modal .form-success { display: none; }
.enq-modal .form-success.show { display: block; }

/* ══════════════════════════════════════════════════════════
   PRODUCT LANDING PAGES  (products/*.html)
   Generated by tools/build-product-pages.py
   ══════════════════════════════════════════════════════════ */

body.product-page { background: var(--off-white); }
body.product-page .nav { position: sticky; }
body.product-page .nav-cta { display: inline-flex; align-items: center; text-decoration: none; }
body.product-page .nav-links a { cursor: pointer; text-decoration: none; }

.pp-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 40px 80px;
}

.pp-crumbs {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 34px;
}
.pp-crumbs a { color: var(--mid); text-decoration: none; }
.pp-crumbs a:hover { color: var(--gold); }
.pp-crumbs span { margin: 0 6px; }
.pp-crumbs span[aria-current] { margin: 0; color: var(--navy); }

.pp-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.pp-hero-media {
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 40px;
  background: var(--light-grey);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.pp-hero-media img { max-width: 100%; max-height: 380px; object-fit: contain; }
.pp-hero-emoji { font-size: 110px; line-height: 1; }

.pp-cat {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mid);
}

.pp-brand {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.pp-hero-info h1 {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--navy);
  margin: 8px 0 16px;
}

.pp-desc {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
  margin-bottom: 30px;
}

.pp-spec {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  margin-bottom: 30px;
}

.pp-spec th,
.pp-spec td {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
  text-align: left;
}
.pp-spec th { font-weight: 400; color: var(--muted); width: 46%; }
.pp-spec td { font-weight: 500; color: var(--navy); }

.pp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 26px;
}
.pp-actions .btn-primary { text-decoration: none; display: inline-flex; align-items: center; }

.pp-back {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  text-decoration: none;
}
.pp-back:hover { color: var(--gold); }

.pp-note {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

/* ── Related products ─────────────────────────────────────────────── */
.pp-related {
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  padding: 64px 40px;
}
.pp-related-inner { max-width: 1180px; margin: 0 auto; }
.pp-related h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 26px;
}

.pp-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.pp-rel-card {
  display: block;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pp-rel-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-md);
}

.pp-rel-img {
  display: grid;
  place-items: center;
  height: 116px;
  margin-bottom: 12px;
}
.pp-rel-img img { max-height: 116px; max-width: 100%; object-fit: contain; }
.pp-rel-emoji { font-size: 44px; }

.pp-rel-name {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.pp-rel-pack {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
}

/* ── Product index page ───────────────────────────────────────────── */
.pp-index-head { max-width: 720px; margin-bottom: 52px; }
.pp-index-head h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--navy);
  margin: 10px 0 16px;
}
.pp-index-head p {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
  margin-bottom: 18px;
}
.pp-index-head .btn-primary { text-decoration: none; display: inline-flex; }

.pp-index-group { margin-bottom: 44px; }
.pp-index-group h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.pp-index-count {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(27, 45, 79, 0.07);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.4px;
}

.pp-index-list { list-style: none; columns: 2; column-gap: 40px; }
.pp-index-list li {
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 13.5px;
}
.pp-index-list a { color: var(--navy); text-decoration: none; }
.pp-index-list a:hover { color: var(--gold); text-decoration: underline; }
.pp-index-list span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Footer on the generated pages ────────────────────────────────── */
.pp-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 60px 40px 0;
}
.pp-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.pp-footer p, .pp-footer a, .pp-footer span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  display: block;
}
.pp-footer p { max-width: 340px; margin-top: 16px; }
.pp-footer a:hover { color: var(--gold-light); }
.pp-footer-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.pp-footer-base {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.45);
}

/* Link from the main catalogue through to the generated pages */
.products-index-link {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 60px 64px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mid);
}
.products-index-link a { color: var(--gold); font-weight: 500; }

.pdl-fullpage {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--gold-light);
}
.pdl-fullpage:hover { color: var(--white); }

@media (max-width: 900px) {
  .pp-main { padding: 28px 22px 60px; }
  .pp-hero { grid-template-columns: 1fr; gap: 28px; }
  .pp-hero-media { min-height: 260px; padding: 24px; }
  .pp-hero-media img { max-height: 260px; }
  .pp-related { padding: 44px 22px; }
  .pp-index-list { columns: 1; }
  .pp-footer { padding: 44px 22px 0; }
  .pp-footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .products-index-link { padding: 0 24px 48px; }
}

/* The generated pages have no hamburger menu, so the nav links must stay
   visible when the main site's mobile breakpoint hides them. They wrap onto
   their own row instead. */
@media (max-width: 900px) {
  body.product-page .nav {
    height: auto;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 22px;
  }
  body.product-page .nav-links {
    display: flex !important;
    order: 3;
    width: 100%;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--hairline);
    padding-top: 10px;
  }
  body.product-page .nav-links a { font-size: 11px; letter-spacing: 1px; }
  body.product-page .nav-logo img { height: 40px !important; }
  body.product-page .nav-cta { padding: 10px 18px; font-size: 11px; }
}

/* The panel used to pair a large "2026" with this line. With the founding
   year removed, the caption carries the panel on its own. */
.about-frame-sub {
  font-size: 30px;
  margin-top: 0;
  letter-spacing: 0.4px;
}

/* ══════════════════════════════════════════════════════════
   CATEGORY TILES  (home page)
   Rebuilt with real product photography instead of emoji, and
   generated from the catalogue so the counts stay correct.
   ══════════════════════════════════════════════════════════ */

.categories-section {
  background: var(--white);
  border-top: 1px solid var(--hairline);
  padding: 88px 60px 96px;
}

.categories-header { margin-bottom: 48px; }

.categories-grid {
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: 14px;
}

/* The tile is a real <button> now, so reset the browser defaults. */
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0 22px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-md);
}

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

/* The old decorative sweep sat on top of the photo. */
.cat-card::after { display: none; }

/* Photo panel: a soft tinted stage so the transparent pack shots sit on
   something, with a subtle warm wash that lifts on hover. */
.cat-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 158px;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(184, 150, 62, 0.10) 0%, transparent 62%),
    var(--light-grey);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.28s ease;
}

.cat-card:hover .cat-media {
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(184, 150, 62, 0.20) 0%, transparent 66%),
    var(--light-grey);
}

.cat-media img {
  max-height: 122px;
  max-width: 72%;
  object-fit: contain;
  transition: transform 0.32s ease;
}

.cat-card:hover .cat-media img { transform: scale(1.06); }

/* Line-art fallback for categories with no photograph. */
.cat-svg {
  width: 52px;
  height: 52px;
  color: var(--gold);
  opacity: 0.85;
}

.cat-media-fallback::before {
  content: '';
  width: 52px;
  height: 52px;
  border: 2.4px solid var(--gold);
  border-radius: 6px;
  opacity: 0.55;
}

.cat-card-title {
  display: block;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 5px;
  transition: color 0.2s;
}

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

.cat-card-count {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Custom sourcing tile: same geometry, dashed, no photograph. */
.cat-card-custom {
  border-style: dashed;
  border-color: var(--gold-border);
  background: var(--off-white);
}

.cat-card-custom .cat-media {
  background: transparent;
  border-bottom: 1px dashed var(--gold-border);
}

@media (max-width: 900px) {
  .categories-section { padding: 60px 24px 68px; }
  .categories-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cat-media { height: 122px; }
  .cat-media img { max-height: 92px; }
}

/* The original tiles flipped to a solid navy on hover, which worked when they
   were just an emoji and a label. Now that the top half is a photo panel, only
   the lower half changed colour and the count dropped to 40% white on navy -
   effectively unreadable. Keep the surface light and let the lift, the gold
   border and the title colour carry the hover instead. */
.cat-card:hover {
  background: var(--white);
  transform: translateY(-3px);
}

.cat-card:hover .cat-card-count { color: var(--muted); }
.cat-card-custom:hover { background: var(--off-white); }

/* ── Category tile headers ────────────────────────────────────────────
   The tiles now use custom gold-on-navy line-art headers (Canva-generated,
   normalised onto one shared canvas) instead of product pack shots. The
   panel background matches the artwork's navy so the eight images and the
   six drawn SVG icons sit on one continuous surface. */

.cat-media {
  background: #1B2D4F;
  height: 150px;
  margin-bottom: 16px;
  border-bottom: none;
}

.cat-card:hover .cat-media { background: #1B2D4F; }

/* The images already carry their own margin, so let them fill the panel. */
.cat-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

.cat-card:hover .cat-media img { transform: scale(1.05); }

/* Drawn icons are sized to sit at the same optical weight as the artwork. */
.cat-svg {
  width: 84px;
  height: 84px;
  color: #C9A961;
  opacity: 1;
  stroke-width: 2;
}

.cat-card-custom .cat-media {
  background: var(--off-white);
  border-bottom: 1px dashed var(--gold-border);
}
.cat-card-custom .cat-svg { color: var(--gold); }
.cat-card-custom:hover .cat-media { background: var(--off-white); }