/* ==========================================================================
   BASE STYLES, FONTS, CSS VARIABLES & RESET
   ========================================================================== */

/* ==========================================================================
   HERB & MORE - PURE WHITE EDITORIAL DESIGN SYSTEM
   - Pure White Canvas (#FFFFFF) across Header, Slider, Hero & Content
   - Soft Editorial Serif ('Playfair Display') for Display Titles & Subtitles
   - Clean Soft Sans-Serif ('Inter') for Body, Navigation & UI
   - 4 Signature Category Accent Colors (Spices, Herbs, Seasonings, Salts)
   - Pill-shaped CTA Buttons & Minimalist Editorial Controls
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* 4 Signature Category Colors (Refined Editorial Palette) */
  --c-spices: #CF181B;
  --c-spices-hover: #B01215;
  --c-spices-radial: #FFFFFF;

  --c-herbs: #4C8C2B;
  --c-herbs-hover: #3D7322;
  --c-herbs-radial: #FFFFFF;

  --c-seasonings: #F5C400;
  --c-seasonings-hover: #DFB200;
  --c-seasonings-text: #121316;
  --c-seasonings-radial: #FFFFFF;

  --c-salts: #4FA8E0;
  --c-salts-hover: #3B93CB;
  --c-salts-radial: #FFFFFF;

  /* Editorial Typography Standard: Helvetica Neue / Inter + Playfair Display */
  --font-primary: 'Helvetica Neue', Helvetica, 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-sans: 'Helvetica Neue', Helvetica, 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script: 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Neutral & Accent Tokens */
  --color-bg-white: #FFFFFF;
  --color-text-dark: #141518;
  --color-text-body: #686C73;
  --color-text-muted: #8C9098;
  --color-border-subtle: rgba(20, 21, 24, 0.08);
  --color-accent-yellow: #FFD200;

  --radius-pill: 9999px;
  --transition-fast: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slide: 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
  width: 100%;
  font-family: var(--font-primary);
  background-color: #FFFFFF !important;
  color: var(--color-text-dark);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip;
  overflow-y: visible;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Soft Helvetica / Sans-Serif Default for Subpage UI, Cards, Forms & Labels */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Editorial Serif Display Titles (Hero Slider, Page Breadcrumb Titles & Editorial Headlines) */
.slide-pure-title,
.slide-editorial-subtitle,
.breadcrumb-title,
.pl-title,
.manifest-title,
.home-section-title,
.journal-title,
.plp-hero-title,
.plp-title,
.pdp-title,
.quality-hero-title,
.quality-section-title,
.story-lead-title,
.recipe-detail-title,
.legal-section h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* Soften UI Headings, Cards, Tabs & Labels Across All Subpages (Helvetica Neue / Inter) */
.clean-form-title,
.story-mv-title,
.pillar-title,
.cat-card-title,
.prod-title,
.curated-title,
.home-pillar-name,
.standard-title,
.recipe-card-title,
.recipe-section-title,
.recipe-related-title,
.sidebar-products-title,
.showcase-card-title,
.quality-motto-headline,
.quality-charter-heading,
.cert-card-title,
.protocol-pillar-title,
.facility-card-title,
.catalogue-heading,
.insta-title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.clean-tab-btn,
.filter-pill-btn,
.recipe-tab-btn {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

.clean-tab-btn.is-active,
.filter-pill-btn.is-active,
.recipe-tab-btn.is-active {
  font-weight: 600 !important;
}

/* Soften Eyebrows, Labels & Kickers */
.info-label,
.sharp-label,
.story-kicker,
.plp-eyebrow,
.quality-mono-kicker,
.quality-section-kicker,
.home-mono-eyebrow {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}

/* Soft Pill-Shaped Primary Action Buttons Across Site */
.home-btn-dark,
.plp-btn-dark,
.btn-sharp-submit,
.cert-btn-inspect,
.legal-cookie-btn,
.btn-clear-filters {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: 9999px !important;
  padding: 13px 28px !important;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ==========================================================================
   GLOBAL FRAMELESS PROTOCOL
   Zero borders, zero boxed outlines, pure breathable layouts.
   ========================================================================== */
.catalog-product-card,
.prod-img-box,
.cat-showcase-card,
.mega-menu-card,
.mega-card-icon,
.story-video-card,
.products-toolbar,
.home-pillar-card,
.home-pillar-img-box,
.curated-prod-card,
.curated-img-wrap,
.standard-card,
.journal-split-card,
.journal-media-side {
  border: none !important;
  outline: none !important;
}