/* =========================================================
   THE REAL 1 — Design System
   Minimal. Premium. Calm. Performance-focused.
   ========================================================= */

/* Self-hosted brand fonts. Drop the licensed files in /assets/fonts/ using these exact
   filenames and they pick up automatically — nothing else to change. Until the files are
   present, browsers silently fall back to the next font in each var(--font-*) stack. */
@font-face {
  font-family: 'Ethnocentric Rg';
  src: url('/assets/fonts/ethnocentric-rg.woff2') format('woff2'),
       url('/assets/fonts/ethnocentric-rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brusio';
  src: url('/assets/fonts/brusio-regular.woff2') format('woff2'),
       url('/assets/fonts/brusio-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brusio';
  src: url('/assets/fonts/brusio-bold.woff2') format('woff2'),
       url('/assets/fonts/brusio-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutrals — light beige base, dark ink text. No black surfaces anywhere on the storefront. */
  --color-bg: #F5EEE1;
  --color-surface: #FFFFFF;
  --color-ink: #14120F;
  --color-ink-soft: #46433D;
  --color-ink-faint: #8A857B;
  --color-border: #E7DFCE;
  --color-border-strong: #D9CDB2;

  /* Brand accent — warm tan/beige, used for buttons and highlighted blocks. Never black. */
  --color-accent: #C9A876;
  --color-accent-contrast: #14120F;
  --color-focus: #8A5C3B;

  /* Soothing muted sage — used for calmer highlighted blocks (e.g. statement cards) that
     shouldn't compete with the tan/gold buttons. */
  --color-calm: #AEBBA0;
  --color-calm-contrast: #14120F;

  /* Flavour background transitions in on product pages */
  --color-flavour-bg: #F5F1EA;

  /* Bebas Neue: main headings. Ethnocentric Rg: techy accent labels (eyebrows, badges, nav).
     Brusio: bold condensed sub-headings/buttons. Inter: body copy — none of the three brand
     display faces are designed for paragraph text, so body reading stays on Inter. */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-accent: 'Ethnocentric Rg', 'Bebas Neue', sans-serif;
  --font-heading-alt: 'Brusio', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 1240px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.4, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  --header-h: 84px;
}

/* The storefront intentionally stays on one warm light-beige palette regardless of the
   visitor's OS/browser theme preference — no dark/black variant. */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-accent); color: var(--color-accent-contrast);
  padding: 12px 20px; z-index: 1000; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.8rem, 6vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
p { margin: 0 0 var(--space-2); color: var(--color-ink-soft); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--font-heading-alt);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn-primary:hover { opacity: 0.88; }
.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-ink); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

/* ---------- Header ---------- */
.site-header {
  /* The navbar is a deliberate black band (independent of the page's light-beige palette)
     so the light-coloured wordmark logo reads clearly against it. */
  --header-bg: #14120F;
  --header-text: #FFFFFF;
  --header-text-soft: #C7C3BA;
  --header-border: #2B2925;
  position: sticky; top: 0; z-index: 500;
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
  height: var(--header-h);
}
.site-header.is-scrolled { border-bottom-color: var(--header-border); }
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  color: var(--header-text);
}
.brand__logo { height: 30px; width: auto; display: block; }
.brand__logo--footer { height: 34px; }
.main-nav { display: flex; gap: var(--space-4); }
.main-nav a {
  font-family: var(--font-accent);
  font-size: 0.85rem; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--header-text-soft);
  position: relative; padding: 6px 0;
  transition: color var(--dur-fast);
}
.main-nav a:hover, .main-nav a.active { color: var(--header-text); }
.main-nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--header-text);
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--header-text-soft); }
.lang-switch a { padding: 4px 6px; }
.lang-switch a.active { color: var(--header-text); font-weight: 700; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--header-text); transition: transform var(--dur-fast), opacity var(--dur-fast); }

@media (max-width: 860px) {
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--header-bg);
    flex-direction: column; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), visibility var(--dur-fast);
  }
  .main-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .main-nav a { font-size: 1.4rem; }
  .nav-toggle { display: flex; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: var(--space-7); }
.site-footer__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--space-3) var(--space-4);
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-4);
}
.footer-col--brand .footer-about { max-width: 320px; }
.brand--footer {
  margin-bottom: var(--space-2);
  background: #14120F;
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 10px;
}
.footer-col h4 { font-family: var(--font-accent); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: var(--space-2); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--color-ink-soft); font-size: 0.92rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--color-ink); }
.site-footer__bottom {
  border-top: 1px solid var(--color-border); padding: var(--space-3);
  display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap;
}
.site-footer__bottom p { margin: 0; font-size: 0.82rem; color: var(--color-ink-faint); }
.footer-socials { display: flex; align-items: center; gap: 10px; margin-top: var(--space-3); }
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  color: var(--color-ink-soft); transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.footer-socials a:hover { background: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-2px); }
.footer-socials svg { width: 17px; height: 17px; }
.dev-credit {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--color-ink-faint); transition: color var(--dur-fast);
}
.dev-credit:hover { color: var(--color-ink); }
.dev-credit svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Scroll reveal utility ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Section rhythm ---------- */
.section { padding: var(--space-6) 0; }
.section-head { max-width: 640px; margin: 0 auto var(--space-5); text-align: center; }
.section-head p { font-size: 1.05rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(20,18,15,0.18); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-3); text-align: left; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-ink);
  font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-focus); }
.field textarea { resize: vertical; min-height: 120px; }
.form-msg { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-size: 0.9rem; }
.form-msg--success { background: #E7F0E4; color: #2E5233; }
.form-msg--error { background: #F5E4E1; color: #7A2E22; }

.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-3); }

.category-filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-pill {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--color-border-strong);
  font-size: 0.85rem; font-weight: 500; color: var(--color-ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.filter-pill:hover { border-color: var(--color-ink); }
.filter-pill.is-active { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: var(--space-5) 0 var(--space-5);
}
.hero__media {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* Matches the source photo's own 3:2 ratio exactly, so object-fit: cover never has to
     crop anything — the full image is always shown. */
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(20,18,15,0.22);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__copy {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-4) var(--space-4) var(--space-6);
  text-align: center;
  /* Only washes the top ~40% of the banner so the product lineup underneath stays clear
     and unobscured — this is a text-legibility aid, not a cover over the whole image. */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--color-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 75%, transparent) 55%,
    transparent 100%);
}
.hero__copy-inner { max-width: 680px; margin: 0 auto; }
.hero__heading {
  white-space: pre-line; margin-bottom: var(--space-2);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.hero__subtitle { font-size: 1rem; max-width: 440px; margin: 0 auto var(--space-3); }
@media (max-width: 900px) {
  .hero { padding-top: var(--space-4); }
  .hero__media { border-radius: var(--radius-md); }
  .hero__copy { padding: var(--space-3) var(--space-3) var(--space-4); }
  .hero__heading { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: var(--space-1); }
  .hero__subtitle { font-size: 0.85rem; margin-bottom: var(--space-2); }
}

/* =========================================================
   Scroll-driven product showcase (homepage + products page)
   ========================================================= */
.scroller {
  position: relative;
  height: calc(var(--count, 5) * 92vh);
}
.scroller__track {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
/* Decorative background layer that drifts as the user scrolls, so the whole backdrop
   feels like it is moving rather than just the product swapping in place. */
.scroller__bg {
  position: absolute; inset: -10%;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--color-accent) 30%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 78% 70%, color-mix(in srgb, var(--color-focus) 22%, transparent) 0%, transparent 50%);
  filter: blur(40px);
  opacity: 0.6;
  transform: translate3d(calc(var(--scroll-progress, 0) * -60px), calc(var(--scroll-progress, 0) * 40px), 0) scale(1.15);
  transition: transform 60ms linear;
  will-change: transform;
  pointer-events: none;
}
.scroller__panel {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-5);
  padding: var(--space-4) 0;
  max-width: var(--container-max); margin: 0 auto; width: 100%; left: 0; right: 0;
  padding-left: var(--space-3); padding-right: var(--space-3);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms linear;
}
.scroller__panel.is-active { opacity: 1; pointer-events: auto; }
.scroller__panel.is-after { opacity: 0; }
.scroller__media {
  display: flex; align-items: center; justify-content: center; height: 100%; position: relative; z-index: 1;
  transform: scale(0.68) rotate(-5deg) translateY(60px);
  filter: blur(9px);
  transition: transform 950ms var(--ease-premium), filter 950ms var(--ease-premium);
}
.scroller__panel.is-active .scroller__media {
  transform: scale(1) rotate(0deg) translateY(0);
  filter: blur(0);
  transition-timing-function: var(--ease-spring);
  transition-duration: 1050ms;
}
.scroller__panel.is-after .scroller__media {
  transform: scale(1.18) rotate(4deg) translateY(-50px);
  filter: blur(6px);
  transition-duration: 550ms;
}
.scroller__media img { max-height: 62vh; width: auto; filter: drop-shadow(0 32px 48px rgba(20,18,15,0.16)); }
.scroller__info {
  position: relative; z-index: 1;
  transform: translateY(34px);
  opacity: 0;
  transition: transform 650ms var(--ease-premium) 90ms, opacity 650ms var(--ease-premium) 90ms;
}
.scroller__panel.is-active .scroller__info { transform: translateY(0); opacity: 1; }
.scroller__panel.is-after .scroller__info { transform: translateY(-22px); opacity: 0; transition-delay: 0ms; }
.scroller__info .eyebrow { margin-bottom: var(--space-1); }
.scroller__info h2 { margin-bottom: var(--space-2); }
.scroller__info p.tagline { font-family: var(--font-heading-alt); font-size: 1.15rem; font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-1); }
.scroller__info p.desc { max-width: 440px; }
.scroller__meta { display: flex; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); font-size: 0.9rem; color: var(--color-ink-faint); }
.scroller__price { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--space-3); }
.scroller__progress { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.scroller__progress button {
  width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--color-border-strong);
  cursor: pointer; padding: 0; transition: background var(--dur-fast), transform var(--dur-fast);
}
.scroller__progress button.is-active { background: var(--color-ink); transform: scale(1.35); }
@media (max-width: 900px) {
  .scroller { height: calc(var(--count, 5) * 105vh); }
  .scroller__panel { grid-template-columns: 1fr; text-align: center; }
  .scroller__media img { max-height: 38vh; }
  .scroller__progress { display: none; }
}

/* =========================================================
   Category cards
   ========================================================= */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.category-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3); text-align: left;
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.category-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(20,18,15,0.2); }
.category-card .eyebrow { color: var(--color-ink-faint); }
.category-card h3 { margin-bottom: 8px; }
.category-card p { font-size: 0.92rem; margin-bottom: var(--space-2); }
.category-card .cta { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .category-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Knowledge sections
   ========================================================= */
.knowledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.knowledge-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
}
.knowledge-card .eyebrow { color: var(--color-ink-faint); }
@media (max-width: 800px) { .knowledge-grid { grid-template-columns: 1fr; } }

.statement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.statement-card {
  background: var(--color-calm); color: var(--color-calm-contrast);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; justify-content: center; min-height: 260px;
}
.statement-card h3 { color: var(--color-calm-contrast); margin-bottom: var(--space-2); }
.statement-card p { color: color-mix(in srgb, var(--color-calm-contrast) 72%, transparent); margin: 0; }
@media (max-width: 800px) { .statement-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Blog cards
   ========================================================= */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.blog-card { display: block; }
.blog-card__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--color-border); margin-bottom: var(--space-2); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-premium); }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card .eyebrow { margin-bottom: 6px; }
.blog-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.blog-card .meta { font-size: 0.8rem; color: var(--color-ink-faint); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* Shared "uploaded gallery" grid — every image keeps its own natural aspect ratio here
   (square stays square, portrait stays tall, landscape stays wide). No forced cropping,
   no letterboxing. Used for blog post images and product gallery images. */
.natural-gallery, .blog-post-images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-5) 0; align-items: start; }
.natural-gallery img, .blog-post-images img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.natural-gallery img:only-child, .blog-post-images img:only-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .natural-gallery, .blog-post-images { grid-template-columns: 1fr; } }

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta {
  background: var(--color-accent); color: var(--color-accent-contrast);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); text-align: center;
  margin: 0 var(--space-3);
}
.final-cta h2 { color: var(--color-accent-contrast); }
.final-cta p { color: color-mix(in srgb, var(--color-accent-contrast) 74%, transparent); font-size: 1.1rem; margin-bottom: var(--space-3); }
.final-cta .btn-primary { background: var(--color-accent-contrast); color: var(--color-accent); }

/* =========================================================
   Product grid (fallback/simple listing use, e.g. related)
   ========================================================= */
.simple-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.product-tile { display: block; text-align: center; }
.product-tile__media { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); aspect-ratio: 1; display:flex; align-items:center; justify-content:center; }
.product-tile__media img { max-height: 220px; }
.product-tile h3 { font-size: 1.05rem; margin-bottom: 4px; }
.product-tile .price { font-weight: 600; }
@media (max-width: 900px) { .simple-product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .simple-product-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Products page — full-page sections (normal document scroll,
   NOT pinned/stacked — each product gets its own full screen and the
   whole section, background included, scrolls with the page).
   ========================================================= */
.big-showcase { display: flex; flex-direction: column; }
.big-showcase__section { width: 100%; background: var(--color-bg); }
.big-showcase__section--alt { background: var(--color-surface); }
.big-showcase__inner {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--space-6);
  max-width: var(--container-max); margin: 0 auto; width: 100%;
  padding: var(--space-6) var(--space-3);
}
.big-showcase__section.is-reversed .big-showcase__inner { direction: rtl; }
.big-showcase__section.is-reversed .big-showcase__inner > * { direction: ltr; }
.big-showcase__media { display: flex; align-items: center; justify-content: center; }
.big-showcase__media img {
  max-height: 72vh; width: auto; max-width: 100%;
  filter: drop-shadow(0 40px 60px rgba(20,18,15,0.18));
}
/* Stronger, more deliberate scroll-triggered entrance for these full-page sections —
   the image scales/slides up into place first, the copy follows on a short stagger. */
.big-showcase__media.reveal {
  opacity: 0; transform: translateY(70px) scale(0.86);
  transition: opacity 900ms var(--ease-premium), transform 900ms var(--ease-spring);
}
.big-showcase__media.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.big-showcase__info.reveal {
  opacity: 0; transform: translateY(46px);
  transition: opacity 750ms var(--ease-premium) 180ms, transform 750ms var(--ease-premium) 180ms;
}
.big-showcase__info.reveal.is-visible { opacity: 1; transform: translateY(0); }
.big-showcase__info .tagline { font-family: var(--font-heading-alt); font-weight: 700; font-size: 1.2rem; color: var(--color-ink); margin-bottom: var(--space-1); }
.big-showcase__info .desc { max-width: 480px; }
@media (max-width: 900px) {
  .big-showcase__inner {
    grid-template-columns: 1fr; text-align: center; min-height: auto;
    padding: var(--space-5) var(--space-3);
  }
  .big-showcase__section.is-reversed .big-showcase__inner { direction: ltr; }
  .big-showcase__media img { max-height: 42vh; }
  .big-showcase__info .desc { margin-left: auto; margin-right: auto; }
  .scroller__meta { justify-content: center; }
}

/* =========================================================
   Product detail — flavour / cap / background system
   ========================================================= */
.product-detail {
  --flavour-bg: #F5F1EA;
  /* The flavour palette is always a light pastel, so this stage stays a light "studio"
     backdrop with dark ink even when the rest of the site is in dark mode. */
  --pd-ink: #14120F;
  --pd-ink-soft: #46433D;
  --pd-ink-faint: #7A756A;
  --pd-border: rgba(20,18,15,0.14);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center;
  margin-top: var(--space-4); padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--flavour-bg);
  color: var(--pd-ink);
  transition: background var(--dur-slow) var(--ease-premium);
}
.product-detail .eyebrow { color: var(--pd-ink-faint); }
.product-detail h1, .product-detail .price-row .price { color: var(--pd-ink); }
.product-detail p, .product-detail .desc, .product-detail .flavour-desc { color: var(--pd-ink-soft); }
.product-detail .spec-label { color: var(--pd-ink-faint); }
.product-detail .spec-row > div, .product-detail .tagline { color: var(--pd-ink); }
.product-detail .mrp { color: var(--pd-ink-faint); }
.product-detail .benefits-block ul { color: var(--pd-ink-soft); }
.product-detail .benefits-block h4 { color: var(--pd-ink); }
.product-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.product-stage__body img { max-height: 440px; width: auto; margin: 0 auto; filter: drop-shadow(0 30px 50px rgba(20,18,15,0.18)); }

.product-info .tagline { font-family: var(--font-heading-alt); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); }
.price-row { display: flex; align-items: baseline; gap: 12px; margin: var(--space-2) 0; }
.price-row .price { font-family: var(--font-display); font-size: 1.9rem; }
.price-row .mrp { text-decoration: line-through; color: var(--color-ink-faint); font-size: 1rem; }
.spec-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-3); }
.spec-row > div { font-size: 0.92rem; }
.spec-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-ink-faint); margin-bottom: 2px; }

.flavour-picker { margin: var(--space-3) 0; }
.swatches { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.swatch-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  background: var(--swatch, #ccc); cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform var(--dur-fast) var(--ease-premium), border-color var(--dur-fast);
}
.swatch-btn:hover { transform: scale(1.1); }
.swatch-btn.is-active { border-color: var(--color-ink); transform: scale(1.14); }
.flavour-desc { font-size: 0.9rem; margin: 0; }

.benefits-block { margin-top: var(--space-4); }
.benefits-block ul { padding-left: 1.1em; color: var(--color-ink-soft); }
.benefits-block li { margin-bottom: 6px; }

.section-narrow-top { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.nutrition-table { width: 100%; max-width: 480px; border-collapse: collapse; }
.nutrition-table td { padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
.nutrition-table td:last-child { text-align: right; font-weight: 600; }

@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; text-align: center; padding: var(--space-4); }
  .product-stage { min-height: 320px; }
  .swatches { justify-content: center; }
  .spec-row { justify-content: center; }
}