/* ==========================================================================
   Amália — Sabonete Artesanal · Premium Design System
   --------------------------------------------------------------------------
   Editorial layer for a high-end Portuguese artisan brand.
   Only what Tailwind can't cleanly express lives here: design tokens, fluid
   typography, layered shadows, keyframe animation, the interactive hero
   title, bespoke button/card treatments and accessibility helpers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --color-primary:   #8B5E3C;   /* warm clay — the brand's spine        */
  --color-secondary: #F3EADF;   /* soft linen surface                   */
  --color-accent:    #6F4A2E;   /* deep cocoa for hovers                */
  --color-text:      #33302B;   /* warm charcoal body text              */
  --color-bg:        #FCFAF6;   /* paper background                     */

  /* Extended luxury palette */
  --color-ink:    #1F1A15;      /* espresso — editorial contrast        */
  --color-gold:   #C6A15B;      /* antique gold accent                  */
  --color-cream:  #F7F1E8;      /* warm cream surface                   */
  --color-sand:   #E7DACA;      /* hairline divider                     */
  --color-olive:  #6E7A5C;      /* botanical green whisper              */
  --color-mute:   #7A6A5B;      /* muted body text                      */

  /* Layered, soft shadows — the backbone of a premium feel */
  --shadow-xs:   0 1px 2px rgba(31, 26, 21, .05);
  --shadow-soft: 0 2px 6px rgba(31, 26, 21, .04), 0 12px 30px rgba(31, 26, 21, .06);
  --shadow-lift: 0 10px 24px rgba(31, 26, 21, .08), 0 28px 64px rgba(31, 26, 21, .12);
  --shadow-glow: 0 12px 36px rgba(139, 94, 60, .30);

  /* Premium easing curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Rhythm */
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --nav-h: 5rem;
}

/* --------------------------------------------------------------------------
   2. Base typography & rendering
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;      /* offset the fixed navbar on anchor jumps */
}

body {
  font-family: 'Jost', 'Poppins', system-ui, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
  /* Decorative blurred circles sit off-screen; clip the horizontal axis so
     they never create a phantom sideways scrollbar. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.018em;
  font-feature-settings: "liga" 1, "kern" 1;
}

h1, .font-heading.text-4xl, .font-heading.text-5xl { line-height: 1.06; }

/* Fluid display helper — sized so a full hero always fits one screen */
.display-fluid {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.028em;
}
@media (max-height: 720px) {
  .display-fluid { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
}

/* Hero script accent — a large cursive flourish on a hero title's second
   line, echoing the "Amália" brand logotype so headline typography and
   brand identity read as one system. */
.hero-script {
  font-family: 'Alex Brush', 'Playfair Display', cursive;
  font-size: clamp(3.6rem, 9.5vw, 7rem);
  line-height: .95;
  letter-spacing: 0;
}
@media (max-height: 720px) {
  .hero-script { font-size: clamp(3rem, 7.5vw, 5.2rem); }
}

/* Refined eyebrow / kicker label above section titles */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-accent);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}
.eyebrow.eyebrow-center::after {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.eyebrow-light { color: rgba(255, 255, 255, .8); }
.eyebrow-light::before,
.eyebrow-light.eyebrow-center::after { background: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   3. Scrollbar & selection theming
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-secondary); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--color-primary), var(--color-accent));
  border-radius: 6px;
  border: 2px solid var(--color-secondary);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
::selection { background: var(--color-accent); color: #fff; }

/* --------------------------------------------------------------------------
   4. Buttons & micro-interactions
   -------------------------------------------------------------------------- */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease-out-expo);
  z-index: 1;
  pointer-events: none;
}
.btn-shine:hover::after { left: 140%; }

.press { transition: transform 0.18s var(--ease-out-soft); }
.press:active { transform: scale(0.96); }

.link-underline {
  position: relative;
  background-image: linear-gradient(var(--color-gold), var(--color-gold));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s var(--ease-out-expo);
}
.link-underline:hover { background-size: 100% 1.5px; }

/* Soft breathing glow for the one CTA on a page we most want clicked */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 161, 91, .45), 0 12px 30px rgba(139, 94, 60, .28); }
  50%      { box-shadow: 0 0 0 13px rgba(198, 161, 91, 0), 0 12px 30px rgba(139, 94, 60, .28); }
}
.cta-pulse { animation: pulseGlow 2.6s ease-in-out infinite; }
.cta-pulse:hover { animation-play-state: paused; }
.cta-arrow { transition: transform .35s var(--ease-out-expo); }
.cta-pulse:hover .cta-arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Navbar
   --------------------------------------------------------------------------
   NOTE: the navbar is deliberately LINE-FREE. There is no bottom border and
   no scroll-progress bar — on scroll it only gains a soft blurred backdrop.
   -------------------------------------------------------------------------- */
#navbar {
  transition: background-color .45s var(--ease-out-soft),
              backdrop-filter .45s ease,
              box-shadow .45s ease;
  border: 0;                 /* never draw a hairline under the bar */
  box-shadow: none;
}
#navbar.is-scrolled {
  background-color: rgba(252, 250, 246, 0.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: none;          /* keep it clean — no shadow line either */
}
#navbar::after { content: none; }   /* belt & braces: kill any pseudo rule */

/* About page: navbar always has a solid white background, even before scroll. */
body.navbar-solid #navbar {
  background-color: #fff;
}

/* Brand wordmark — text only, no logo mark */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: .02em;
  color: var(--color-ink);
  line-height: 1;
  transition: color .35s ease, letter-spacing .5s var(--ease-out-expo);
}
.brand:hover .brand-script { color: var(--color-primary); letter-spacing: .07em; }
.brand-light { color: #fff; }
.brand-light:hover .brand-script { color: var(--color-gold); }

/* Script + small-caps pairing — the signature "Amália Handmade" logotype */
.brand-script {
  font-family: 'Alex Brush', 'Playfair Display', cursive;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: inherit;
}
.brand-sub {
  font-family: 'Alex Brush', 'Playfair Display', cursive;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: inherit;
}

/* Nav links: a soft gold DOT marks hover/active — no underline rules */
.nav-link {
  position: relative;
  padding-bottom: 2px;
  transition: color .3s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translate(-50%, 6px) scale(0);
  opacity: 0;
  transition: transform .38s var(--ease-out-expo), opacity .38s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: translate(-50%, 0) scale(1); opacity: 1; }
.nav-link.active { color: var(--color-accent); }

/* Pages whose hero is a dark photograph get a transparent, light-on-dark navbar
   until the visitor scrolls (add class="hero-dark" to <body>). */
body.hero-dark #navbar:not(.is-scrolled) .brand { color: #fff; }
body.hero-dark #navbar:not(.is-scrolled) .brand:hover .brand-script { color: var(--color-gold); }
body.hero-dark #navbar:not(.is-scrolled) .nav-link,
body.hero-dark #navbar:not(.is-scrolled) .nav-icon { color: rgba(255, 255, 255, .92); }
body.hero-dark #navbar:not(.is-scrolled) .nav-icon:hover { background-color: rgba(255, 255, 255, .14); }
body.hero-dark #navbar:not(.is-scrolled) .lang-switch { background: rgba(255, 255, 255, .18); }
body.hero-dark #navbar:not(.is-scrolled) .lang-switch button { color: rgba(255, 255, 255, .82); }
body.hero-dark #navbar:not(.is-scrolled) .lang-switch button.is-active { background: #fff; color: var(--color-primary); }

/* Language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(139, 94, 60, .09);
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .3rem .6rem;
  border-radius: 999px;
  color: var(--color-mute);
  transition: background-color .3s ease, color .3s ease;
}
.lang-switch button.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139, 94, 60, .3);
}
.lang-switch button:not(.is-active):hover { color: var(--color-accent); }
/* Light variant for use over dark hero imagery */
.lang-switch-light { background: rgba(255, 255, 255, .16); }
.lang-switch-light button { color: rgba(255, 255, 255, .8); }
.lang-switch-light button.is-active { background: #fff; color: var(--color-primary); }

/* --------------------------------------------------------------------------
   6. Interactive hero title
   --------------------------------------------------------------------------
   JS splits each .split-text into per-letter spans. Letters rise in with a
   stagger, then react individually to the pointer.
   -------------------------------------------------------------------------- */
.split-text { display: inline-block; }
.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.85em) rotate(6deg);
  animation: charRise .9s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--ci, 0) * 0.035s + var(--cd, 0s));
  transition: transform .45s var(--ease-out-expo), color .45s ease, text-shadow .45s ease;
  will-change: transform, opacity;
}
.split-text .char.space { width: .3em; }
@keyframes charRise {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
/* Pointer play: lift + gold glow, letter by letter */
.split-text .char:hover {
  transform: translateY(-0.16em) scale(1.06);
  color: var(--color-gold);
  text-shadow: 0 12px 30px rgba(198, 161, 91, .45);
}

/* --------------------------------------------------------------------------
   Display-line treatments — three weights of the same headline
   --------------------------------------------------------------------------
   .title-hollow    letters drawn as an outline; they FILL IN under the pointer
   .text-gold-sheen a slow gold light travelling across the italic line
   -------------------------------------------------------------------------- */
.title-hollow {
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(255, 255, 255, .78);
}
.title-hollow .char {
  transition: transform .45s var(--ease-out-expo), color .45s ease,
              -webkit-text-stroke-color .45s ease;
}
.title-hollow .char:hover {
  color: rgba(198, 161, 91, .22);
  -webkit-text-stroke-color: var(--color-gold);
  text-shadow: none;
}

/* Gold display line with a slow breathing glow.
   NOTE: deliberately NOT background-clip:text — the headline is split into
   per-letter <span>s and gradient-clipped text renders blank through them. */
.text-gold-glow {
  color: var(--color-gold);
  animation: goldGlow 7s ease-in-out infinite;
}
@keyframes goldGlow {
  0%, 100% { text-shadow: 0 0 26px rgba(198, 161, 91, .28); }
  50%      { text-shadow: 0 0 46px rgba(240, 220, 174, .55); }
}

/* A short gold hairline used to open the headline */
.tick-gold {
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  vertical-align: middle;
}

/* Rotating word (Puro / Suave / Honesto…) */
.rotator {
  display: inline-block;
  position: relative;
  color: var(--color-gold);
  font-style: italic;
}
.rotator .rot-word {
  display: inline-block;
  animation: rotIn .55s var(--ease-out-expo) both;
}
.rotator .rot-word.is-out { animation: rotOut .4s var(--ease-out-soft) both; }
@keyframes rotIn  { from { opacity: 0; transform: translateY(.55em) skewY(3deg); } to { opacity: 1; transform: none; } }
@keyframes rotOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.55em) skewY(-3deg); } }

.hero-media {
  object-position: center;
}

/* Phones stack the headline over three lines so it stays legible; from md up
   it collapses to the single-line lockup the layout was designed around. */
.hero-title {
  font-size: clamp(2.15rem, 9vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.015em;
}
.hero-title > span[data-split] { display: block; }
@media (min-width: 768px) {
  .hero-title {
    white-space: nowrap;
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  }
  .hero-title > span[data-split] { display: inline; }
}

/* Hero staggered fade-in for everything that is not the title */
.hero-fade {
  opacity: 0;
  transform: translateY(26px);
  animation: heroFadeUp 0.95s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--hi, 0) * 0.12s + 0.35s);
}
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   7. Cards & surfaces
   -------------------------------------------------------------------------- */
.product-card {
  transition: transform .55s var(--ease-out-expo),
              box-shadow .55s var(--ease-out-expo),
              border-color .55s ease;
}
.product-card:hover {
  transform: translateY(-9px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-sand);
}
.product-card .card-media img { transition: transform .95s var(--ease-out-expo); }
.product-card:hover .card-media img { transform: scale(1.08); }

.hover-lift { transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

/* Collection tile — full-bleed image with a caption that slides up */
.collection-card { position: relative; overflow: hidden; display: block; }
.collection-card img { transition: transform 1.05s var(--ease-out-expo); }
.collection-card:hover img { transform: scale(1.09); }
.collection-card .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 26, 21, .82) 0%, rgba(31, 26, 21, .28) 45%, transparent 75%);
  transition: background .55s ease;
}
.collection-card:hover .veil {
  background: linear-gradient(to top, rgba(31, 26, 21, .88) 0%, rgba(31, 26, 21, .42) 55%, rgba(31,26,21,.12) 100%);
}
.collection-card .cc-more {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s var(--ease-out-expo);
}
.collection-card:hover .cc-more { opacity: 1; transform: translateY(0); }

/* Soft gradient hairline frame for premium surfaces */
.frame-luxe { position: relative; }
.frame-luxe::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(198, 161, 91, .5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Image hover zoom — wrap image in .zoom-wrap */
.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform .85s var(--ease-out-expo); will-change: transform; }
.zoom-wrap:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   8. Text & surface utilities
   -------------------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(100deg, var(--color-primary), var(--color-gold) 58%, var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gold { color: var(--color-gold); }

.divider-gold {
  width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-primary));
}

/* Subtle grain/paper texture surface (pure CSS, no asset) */
.surface-paper {
  background-color: var(--color-cream);
  background-image: radial-gradient(circle at 1px 1px, rgba(31, 26, 21, .035) 1px, transparent 0);
  background-size: 22px 22px;
}

/* A hairline gold rule with a diamond in the middle — section divider */
.rule-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  color: var(--color-gold);
}
.rule-diamond::before,
.rule-diamond::after {
  content: '';
  height: 1px;
  width: clamp(2rem, 12vw, 6rem);
  background: linear-gradient(90deg, transparent, currentColor);
}
.rule-diamond::after { background: linear-gradient(90deg, currentColor, transparent); }

/* --------------------------------------------------------------------------
   9. Marquee trust strip
   -------------------------------------------------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-mask { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-mask:hover .marquee-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   10. Scroll-reveal animations
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s var(--ease-out-expo), transform .85s var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.slide-left, .slide-right {
  opacity: 0;
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}
.slide-left  { transform: translateX(-46px); }
.slide-right { transform: translateX(46px); }
.slide-left.is-visible, .slide-right.is-visible { opacity: 1; transform: translateX(0); }

.scale-in {
  opacity: 0;
  transform: scale(.94) translateY(14px);
  transition: opacity .75s var(--ease-out-expo), transform .75s var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}
.scale-in.is-visible { opacity: 1; transform: scale(1) translateY(0); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp .8s var(--ease-out-expo) forwards; }

@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.animate-float { animation: floatY 6s ease-in-out infinite; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 26s linear infinite; }

@keyframes cartBump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.cart-bump { animation: cartBump .45s var(--ease-out-soft); }

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(7px); opacity: 1; }
}
.animate-scroll-hint { animation: scrollBounce 2s ease-in-out infinite; }

#toast { transition: opacity .4s var(--ease-out-soft), transform .4s var(--ease-out-soft); }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
input, textarea, select {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

/* --------------------------------------------------------------------------
   12b. Portuguese azulejo motifs (contact page)
   --------------------------------------------------------------------------
   A thin tiled "frieze" echoing the ceramic azulejo borders found on Lisbon
   shopfronts — a deliberate, contained cultural accent in classic tile blue,
   kept separate from the warm clay/gold brand palette it sits inside.
   -------------------------------------------------------------------------- */
/* Soft radial wash behind the contact hero — replaces the old giant
   watermark word with quiet depth instead of literal background text. */
.hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(139, 94, 60, .09), transparent 70%);
  pointer-events: none;
}

/* Small azulejo tile motifs anchored to the hero's corners — a contained
   nod to Lisbon tilework, replacing the removed watermark text. */
.azulejo-corner {
  position: absolute;
  width: 132px;
  height: 132px;
  opacity: .1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='none'/%3E%3Cg fill='none' stroke='%23285A82' stroke-width='2'%3E%3Cpath d='M28 3 L53 28 L28 53 L3 28 Z'/%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3Cpath d='M28 6 L28 17 M28 39 L28 50 M6 28 L17 28 M39 28 L50 28'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='2.5' fill='%23285A82'/%3E%3C/svg%3E");
  background-size: 44px 44px;
}
.azulejo-corner-tl { top: -18px; left: -18px; transform: rotate(-4deg); }
.azulejo-corner-br { bottom: -18px; right: -18px; transform: rotate(4deg); }
@media (max-width: 640px) {
  .azulejo-corner { width: 84px; height: 84px; opacity: .08; }
}

/* Small pill badges used for the EU trust-signal row */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--color-mute);
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  padding: .5rem .9rem;
  border-radius: 999px;
}
.badge-pill svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   12c. Contact page — detail rows, FAQ, form fields
   --------------------------------------------------------------------------
   Every icon on this page uses the brand clay tone, WhatsApp included: inside
   an editorial layout one foreign green swatch reads as a pasted-in logo.
   -------------------------------------------------------------------------- */
.contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem .85rem;
  margin: 0 -.85rem;
  border-radius: 1.1rem;
  transition: background-color .35s ease, transform .35s var(--ease-out-soft);
}
.contact-row.is-link:hover { background: rgba(255, 255, 255, .75); transform: translateX(3px); }
.contact-row.is-link:hover .contact-ico { background: var(--color-primary); color: #fff; }
.contact-row.is-link:hover .contact-value { color: var(--color-accent); }
.contact-row.is-link:hover .contact-chev { opacity: 1; transform: translateX(0); }

.contact-ico {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 94, 60, .1);
  color: var(--color-primary);
  transition: background-color .35s ease, color .35s ease;
}
.contact-label { font-weight: 500; color: var(--color-ink); font-size: .95rem; }
.contact-value {
  font-size: .875rem;
  color: var(--color-mute);
  margin-top: .1rem;
  line-height: 1.5;
  transition: color .3s ease;
}
.contact-chev {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .35s ease, transform .35s var(--ease-out-expo);
}

/* FAQ accordion — native <details>, no JS needed */
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  cursor: pointer;
  list-style: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--color-ink);
  transition: color .3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-primary); }
.faq-chev {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform .4s var(--ease-out-expo);
}
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item p {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--color-mute);
  padding-bottom: 1.05rem;
  animation: fadeInUp .45s var(--ease-out-expo) both;
}

/* Form fields — one class instead of a long utility chain per input */
.field-label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: .45rem;
}
.field {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: .9rem;
  border: 1px solid var(--color-sand);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: .92rem;
  font-family: inherit;
}
.field::placeholder { color: #B3A697; }
.field:hover { border-color: rgba(139, 94, 60, .35); }
.field:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, .22);
}
/* Two classes deep so it beats Tailwind's .border-red-500 whatever the order */
.field.border-red-500 { border-color: #EF4444; }
.field.border-red-500:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }

.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238B5E3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.field-select:invalid, .field-select option[value=""] { color: #B3A697; }

.field-error {
  font-size: .72rem;
  line-height: 1.4;
  color: #EF4444;
  min-height: .95rem;
  margin-top: .3rem;
}

/* --------------------------------------------------------------------------
   13. Mobile menu — off-canvas drawer
   --------------------------------------------------------------------------
   Sits outside <header> so it can layer above the fixed bar, and slides in
   from the left. Hidden outright from md up, where the inline menu takes over.
   -------------------------------------------------------------------------- */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 90;
  width: min(20rem, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: 0 0 60px rgba(31, 26, 21, .22);
  transform: translateX(-100%);
  visibility: hidden;
  overscroll-behavior: contain;
  transition: transform .5s var(--ease-out-expo), visibility .5s;
}
.mobile-drawer.is-open { transform: translateX(0); visibility: visible; }
/* min-height:0 lets the link list scroll instead of pushing the contact
   block off the bottom of short screens. */
.mobile-drawer nav { min-height: 0; }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(31, 26, 21, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer-link {
  display: block;
  padding: .8rem .9rem;
  border-radius: .9rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background-color .3s ease, color .3s ease, transform .3s var(--ease-out-soft);
}
.drawer-link:hover { background: var(--color-secondary); transform: translateX(3px); }
.drawer-link.active { background: rgba(139, 94, 60, .1); color: var(--color-accent); }

@media (min-width: 768px) {
  .mobile-drawer, .menu-overlay { display: none; }
}

/* --------------------------------------------------------------------------
   13b. Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --nav-h: 4.25rem; }
  .eyebrow { letter-spacing: .2em; font-size: .66rem; }
  .split-text .char:hover { transform: none; color: inherit; text-shadow: none; }

  /* The centre wordmark is wide enough to push the cart button off-screen on
     narrow phones; let its column shrink and scale the script down with it. */
  #navbar nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; }
  #navbar .brand { min-width: 0; gap: .2rem; }
  #navbar .brand-script,
  #navbar .brand-sub { font-size: clamp(1.35rem, 6.4vw, 1.85rem); }
  #navbar .lang-switch button { padding: .28rem .45rem; font-size: .64rem; }
  #cart-toggle { flex-shrink: 0; padding: .5rem; }
}

/* Very small screens: drop the second half of the wordmark rather than let
   anything in the bar overlap. */
@media (max-width: 380px) {
  #navbar .brand-sub { display: none; }
}

/* --------------------------------------------------------------------------
   13c. Footer — light editorial, European retail conventions
   --------------------------------------------------------------------------
   No dark slab, no icon chips, no pill CTA. A cream sheet separated from the
   page by a single hairline, typographic link columns under small-caps
   labels, one underlined newsletter field and a legal/VAT strip of the kind
   EU shoppers expect to find at the bottom of a store.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-cream);
  border-top: 1px solid var(--color-sand);
  color: var(--color-mute);
  font-size: .875rem;
  line-height: 1.65;
}

/* Hairline that separates the footer's horizontal bands */
.footer-rule { border-top: 1px solid rgba(231, 218, 202, .8); }

/* Small-caps column label */
.footer-title {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--color-ink);
}

.footer-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}

/* Links underline from the left on hover — quiet, no colour flash */
.footer-link {
  position: relative;
  display: inline-block;
  color: var(--color-mute);
  transition: color .3s ease;
}
.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out-expo);
}
.footer-link:hover { color: var(--color-ink); }
.footer-link:hover::after { transform: scaleX(1); transform-origin: left; }

.footer-lede {
  margin-top: 1.6rem;
  max-width: 26ch;
  color: var(--color-mute);
}

.footer-address {
  margin-top: 1.4rem;
  font-style: normal;
  font-size: .8125rem;
  color: var(--color-mute);
}

.footer-meta {
  font-size: .72rem;
  letter-spacing: .06em;
  color: #9A8B7C;
}

/* Newsletter — a single hairline field, arrow instead of a button block */
.footer-nl {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--color-sand);
  transition: border-color .35s ease;
}
.footer-nl:focus-within { border-color: var(--color-primary); }
.footer-nl input {
  flex: 1;
  min-width: 0;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  font-size: .875rem;
  color: var(--color-text);
}
.footer-nl input::placeholder { color: #A8998A; }
.footer-nl input:focus { outline: none; }
.footer-nl button {
  flex-shrink: 0;
  padding: .35rem;
  color: var(--color-ink);
  transition: transform .4s var(--ease-out-expo), color .3s ease;
}
.footer-nl button:hover { color: var(--color-primary); transform: translateX(4px); }

/* Accepted payment methods, rendered as text with middot separators */
.footer-pay {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-pay span + span::before {
  content: '·';
  margin-right: .5rem;
  color: var(--color-sand);
}

/* --------------------------------------------------------------------------
   14. Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .slide-left, .slide-right, .scale-in, .hero-fade, .split-text .char {
    opacity: 1 !important;
    transform: none !important;
  }
}

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

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