/* ============================================================
   Gahwa — Natural & Organic Coffee
   style.css  (redesign — July 2026 spec)
   Fonts · Tokens · Base · Nav · Brand · Home · About ·
   Products · Contact · Basket · Legal · Responsive
   ============================================================ */

/* ----------------------------- FONTS ----------------------------- */
@font-face{
  font-family:"Gotham";
  src:url("../font/web/Gotham-Book.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("../font/web/Gotham-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("../font/web/Gotham-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("../font/web/Gotham-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
/* Adobe Song Std Light — the serif that echoes the Gahwa logotype */
@font-face{
  font-family:"Song";
  src:url("../font/web/AdobeSongStd-Light.woff2") format("woff2");
  font-weight:300 400; font-style:normal; font-display:swap;
}
/* Arrow glyphs (letters map to arrows — "L" is the down arrow) */
@font-face{
  font-family:"Futura";
  src:url("../font/web/Futura-Medium.woff2") format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Futura";
  src:url("../font/web/Futura-Bold.woff2") format("woff2");
  font-weight:600 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Arrows";
  src:url("../font/web/Arrows.woff2") format("woff2"),
      url("../font/web/Arrows.woff") format("woff");
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ----------------------------- TOKENS ----------------------------- */
:root{
  /* Palette sampled from the final design */
  --beige:      #f0dcd0;  /* page background + light text on dark/photo */
  --cream:      #f0dcd0;  /* legacy alias — same as beige in this design */
  --cream-warm: #f6e3b4;  /* warm cream (Luan's Love tab) */
  --rust:       #b4471f;  /* buttons, home bar, pay-now, basket wordmark */
  --dark-brown: #4e2b15;  /* espresso: brand mark, body copy, dark UI */
  --sage:       #acb09d;  /* about card + products active (Gahwa Beijo) panel */
  --gold:       #91662f;  /* N1 Florianópolis Forte */
  --olive:      #a2a020;  /* N4 Trancoso Tentação */
  --brown:      #8f503d;  /* N5 Valentina Vício */

  --ff-base:"Gotham","Avenir Next","Century Gothic","Segoe UI",system-ui,-apple-system,sans-serif;
  --ff-nav:"Gotham","Avenir Next","Helvetica Neue",Arial,system-ui,sans-serif;
  --ff-serif:"Song",Georgia,"Times New Roman",serif;
  --ff-futura:"Futura","Futura PT","Century Gothic","Avenir Next",system-ui,sans-serif;

  --nav-z:1030;
  --nav-h:66px;

  /* Shared body-copy size. Set on the About story and reused verbatim by the
     product cards, the contact details and the basket so all four read alike.
     This is the original About ramp — clamp(.9rem,1.02vw,1.06rem) — shifted
     down by exactly 1px at every point of the curve (1px = .0625rem):
       min 14.4px -> 13.4px | max 16.96px -> 15.96px | 1440px: 14.688 -> 13.688 */
  --fs-body:clamp(.8375rem, calc(1.02vw - .0625rem), .9975rem);

  /* Shared "statement line" size: the basket's TOTAL row and the contact
     heading are set from the same ramp so they read at identical size. */
  --fs-total:clamp(1rem, 1.3vw, 1.2rem);

  --logo-left:calc(clamp(1.25rem,2vw,1.75rem) + clamp(1.5rem,3.5vw,3.25rem));
}

/* ----------------------------- BASE ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-base);
  font-weight:500;
  color:var(--dark-brown);
  background-color:var(--beige);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
section[id]{ scroll-margin-top:5rem; }

.brand-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.skip-link.visually-hidden-focusable:focus,
.skip-link.visually-hidden-focusable:focus-within{
  position:fixed; top:.75rem; left:.75rem; z-index:2000;
  width:auto; height:auto; padding:.6rem 1rem;
  background:var(--dark-brown); color:var(--beige);
  border-radius:.4rem; font-weight:700; text-decoration:none;
}

/* ----------------------------- NAVBAR ----------------------------- */
.site-nav{
  --bs-navbar-color:var(--dark-brown);
  --bs-navbar-hover-color:var(--dark-brown);
  --bs-navbar-active-color:var(--dark-brown);
  --bs-navbar-brand-color:var(--dark-brown);
  --bs-navbar-brand-hover-color:var(--dark-brown);
  /* transparent at the very top (home) so the rust bar reads to the edge;
     turns into a solid beige bar as soon as the page is scrolled */
  background:transparent;
  padding-block:clamp(.8rem,2vh,1.25rem);
  transition:box-shadow .35s ease, background-color .35s ease;
}
.site-nav .container-fluid{ padding-inline:clamp(1rem,4vw,2.25rem); }

.site-nav__list{
  --bs-nav-link-padding-x:0;
  column-gap:clamp(1.1rem,2.8vw,2.6rem);
  align-items:center;
}
.site-nav .nav-link{
  position:relative;
  padding:.25rem .1rem;
  color:var(--dark-brown);
  font-family:var(--ff-nav);
  font-weight:700;
  font-size:clamp(1.02rem,.7vw+.7rem,1.24rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:opacity .25s ease;
}
.site-nav .nav-link.active{ font-weight:900; color:var(--dark-brown); }
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible{ color:var(--dark-brown); opacity:.7; }

/* mobile-only brand (Bootstrap's .d-lg-none hides it from 992px up):
   the Gahwa logotype, the same artwork that sits under the G on the hero */
.site-nav__brand{
  display:inline-flex; align-items:center;
  color:var(--dark-brown);
  line-height:0;               /* no descender gap around the inline SVG */
  /* the serif wordmark it replaced produced a 51px line box; holding that
     height keeps --nav-h (and every section padding derived from it) put */
  min-height:51px;
}
.site-nav__brand:hover,.site-nav__brand:focus-visible{ color:var(--dark-brown); }
.site-nav__wordmark{
  display:block;
  width:clamp(80px,22vw,104px);
  height:auto;
  fill:currentColor;
}

/* language switch */
.site-nav .lang-switch{
  display:inline-flex; align-items:center; gap:.15rem;
  padding:0 .25rem; margin-left:.25rem; font-family:var(--ff-nav);
}
.lang-switch__btn{
  background:transparent; border:0; padding:.35rem;
  font:inherit; font-family:var(--ff-nav); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; font-size:.78rem;
  line-height:1; cursor:pointer; color:var(--dark-brown);
  opacity:.6; transition:opacity .15s ease;
}
.lang-switch__btn:hover,.lang-switch__btn:focus-visible{ opacity:1; outline:none; }
.lang-switch__btn.is-active{ font-weight:700; opacity:1; }
.lang-switch__sep{ color:var(--dark-brown); opacity:.5; font-weight:500; font-size:.78rem; line-height:1; }

/* hamburger */
.site-nav__toggler{ border:0; padding:.5rem; background:transparent; box-shadow:none!important; line-height:0; }
.site-nav__bars,.site-nav__bars::before,.site-nav__bars::after{
  display:block; width:28px; height:2px; background:var(--dark-brown);
  border-radius:2px; transition:transform .3s ease, opacity .2s ease;
}
.site-nav__bars{ position:relative; }
.site-nav__bars::before{ content:""; position:absolute; left:0; top:-9px; }
.site-nav__bars::after{ content:""; position:absolute; left:0; top:9px; }
.site-nav__toggler[aria-expanded="true"] .site-nav__bars{ background:transparent; }
.site-nav__toggler[aria-expanded="true"] .site-nav__bars::before{ transform:translateY(9px) rotate(45deg); }
.site-nav__toggler[aria-expanded="true"] .site-nav__bars::after{ transform:translateY(-9px) rotate(-45deg); }

/* scrolled: solid beige bar with a soft shadow */
.site-nav.is-scrolled{ background:var(--beige); box-shadow:0 2px 18px rgba(78,43,21,.14); }

/* ----------------------------- BRAND (mark + wordmark + badge) ----------------------------- */
.wordmark{
  display:inline-flex; flex-direction:column; align-items:center;
  line-height:1; text-decoration:none;
}
.wordmark--brown{ color:var(--dark-brown); }
.wordmark--rust{ color:var(--rust); }
.wordmark__word{ display:block; width:100%; height:auto; fill:currentColor; }
.wordmark__sub{
  margin-top:.62em; line-height:1.55;
  font-family:var(--ff-nav); font-weight:700;
  text-transform:uppercase; letter-spacing:.34em;
  color:currentColor;
  font-size:.62em;               /* relative to wordmark font-size set per context */
  padding-left:.34em;            /* balances the trailing letter-spacing */
}

/* big "G" logomark */
.hero__mark{ display:block; height:auto; fill:var(--dark-brown); }

/* circular text badges (inline SVG so the webfont applies) */
.badge{ display:block; width:100%; height:100%; overflow:visible; }
.badge__text{
  font-family:var(--ff-nav); font-weight:700;
  font-size:14px; letter-spacing:1.1px; word-spacing:1.5px;
  text-transform:uppercase; fill:var(--dark-brown);
}

/* shared down-arrow button */
.arrow-icon{ font-family:"Arrows"; line-height:1; }

/* ----------------------------- HOME (page 1) ----------------------------- */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  background:var(--beige);
  overflow:hidden; isolation:isolate;
  /* shared geometry for the rust bar + badge so they always stay locked together */
  --bar-top:0px;
  --bar-left:clamp(1rem,6vw,5.5rem);
  --bar-w:clamp(67px,7.2vw,105px);
  --bar-h:69svh;
  --badge-size:clamp(152px,13vw,192px);
  --logo-w:clamp(153px,19.1vw,275px);
}
.hero__bar{
  position:absolute; z-index:1;
  top:var(--bar-top); left:var(--bar-left);
  width:var(--bar-w); height:var(--bar-h);
  background:var(--rust);
  display:flex; align-items:flex-start; justify-content:center;
  /* reserve the bottom of the bar for the "GAHWA" badge word: the tagline stops
     ~20px above where GAHWA starts (bottom padding scales with the badge) */
  padding:clamp(1.2rem,3vh,2.2rem) 0 calc(var(--badge-size) * 0.34 + 16px);
}
.hero__bar-text{
  writing-mode:vertical-rl;
  margin:0; height:100%;
  color:var(--beige);
  font-family:var(--ff-base); font-weight:500;
  font-size:clamp(.68rem,.86vw,.9rem);
  line-height:1.55; letter-spacing:.015em;
}
/* circular badge, anchored to the bottom of the rust bar so "Gahwa" always sits inside the orange.
   translate(-50%,-30%) keeps ~30% of the ring (the "GAHWA" arc) overlapping the orange at any size. */
.hero__badge{
  position:absolute; z-index:2;
  top:calc(var(--bar-top) + var(--bar-h));
  left:calc(var(--bar-left) + var(--bar-w));
  width:var(--badge-size);
  height:var(--badge-size);
  transform:translate(-50%,-46%);
}
/* rotate the ring so "GAHWA" reads across the top-left (the part that overlaps the orange) */
.hero__badge .badge{ transform:rotate(-50deg); }
.hero__center{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.3rem,1.2vh,.9rem);
  padding:var(--nav-h) 1.25rem 0;
  text-align:center;
}
/* G matches the width of the "Gahwa" wordmark below it (~76% of original) */
.hero__mark{ width:var(--logo-w); }
.hero .wordmark{ font-size:clamp(.77rem,1.15vw,1.07rem); }   /* drives subtitle size */
.hero .wordmark__word{ width:var(--logo-w); }
.hero .wordmark__sub{ width:var(--logo-w); }

/* ----------------------------- ABOUT (page 2) ----------------------------- */
.about{
  position:relative;
  min-height:min(88vh,60rem); min-height:min(88svh,60rem);
  background:var(--beige); color:var(--dark-brown);
  overflow:hidden; isolation:isolate;
}
.about__media{
  position:absolute; top:0; right:0; bottom:0; width:58%; z-index:0;
}
.about__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.about__content{
  position:relative; z-index:2;
  min-height:min(88vh,60rem); min-height:min(88svh,60rem);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:calc(var(--nav-h) + clamp(1rem,3vh,2rem)) clamp(1rem,4vw,3rem) clamp(3.5rem,9vh,5.5rem) 0;
}
.about__badge{
  position:relative; z-index:3; display:block;
  width:clamp(128px,14.5vw,190px); height:clamp(128px,14.5vw,190px);
  margin-left:clamp(1.6rem,4vw,3.5rem); margin-bottom:clamp(-3.25rem,-6vh,-4.25rem);
}
/* card is wider than its text so the sage extends OVER the photo on the right;
   larger left padding pushes the copy further to the right inside the square */
.about__copy{
  position:relative; z-index:2; width:clamp(480px,54vw,860px);
  background:var(--sage); color:var(--dark-brown);
  padding:clamp(4rem,8vh,5.5rem) clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.4rem) clamp(2.75rem,7vw,6.5rem);
  display:flex; flex-direction:column;
  /* keep the card within the shorter section so the founder story scrolls INSIDE it
     (badge still overlaps the top, arrow stays pinned bottom-right).
     cap = section height - nav - badge height - breathing room above/below */
  max-height:calc(min(88svh,60rem) - var(--nav-h) - clamp(128px,14.5vw,190px) - clamp(1.5rem,4vh,3rem));
}
/* the paragraphs live here and scroll when the copy is taller than the card */
.about__scroll{
  min-height:0;               /* let the flex child shrink so overflow can scroll */
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;/* don't chain to the page scroll at the ends */
  padding-right:clamp(.4rem,.8vw,.75rem);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--dark-brown) 42%, transparent) transparent;
}
.about__scroll::-webkit-scrollbar{ width:8px; }
.about__scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--dark-brown) 42%, transparent);
  border-radius:8px;
}
.about__scroll::-webkit-scrollbar-track{ background:transparent; }
.about__copy p{
  margin:0 0 clamp(.85rem,1.7vh,1.15rem); max-width:30rem;
  font-family:var(--ff-base); font-weight:500;
  font-size:var(--fs-body);
  line-height:1.5; letter-spacing:.004em;
}
.about__copy p:last-child{ margin-bottom:0; }

/* arrow lives inside the card, pinned to its bottom-right corner.
   It is a button, not a link: it only ever moves the story inside this
   section — down to the end, then it flips 180deg and walks back up. */
.about__arrow{
  position:absolute; z-index:3;
  right:clamp(2rem,5vw,5rem); bottom:clamp(1.5rem,3vh,2.5rem);
  width:clamp(52px,4.4vw,64px); height:clamp(52px,4.4vw,64px);
  display:inline-flex; align-items:center; justify-content:center;
  border:2.5px solid var(--dark-brown); border-radius:50%;
  color:var(--dark-brown); text-decoration:none;
  background:transparent; padding:0; font:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:transform .25s ease, background-color .25s ease;
}
.about__arrow:hover,.about__arrow:focus-visible{
  color:var(--dark-brown);
  background:color-mix(in srgb,var(--dark-brown) 10%, transparent);
}
.about__arrow .arrow-icon{
  display:block;
  font-size:clamp(2rem,2.6vw,2.5rem);
  -webkit-text-stroke:.7px currentColor; /* thicker arrow line */
  transition:transform .3s ease;
}
/* end of the story reached — point back up */
.about__arrow.is-up .arrow-icon{ transform:rotate(180deg); }
/* nothing to scroll (window tall enough to show the whole story at once) */
.about__arrow.is-idle{ opacity:.35; cursor:default; pointer-events:none; }

/* ----------------------------- PRODUCTS (page 4) ----------------------------- */
.products{
  position:relative;
  min-height:100vh; min-height:100svh;
  background:var(--beige);              /* flat beige, matching the home page */
  overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  padding:clamp(5.5rem,12vh,8rem) clamp(1rem,4vw,3rem) clamp(2rem,5vh,4rem);
  --p-ink:rgb(138,115,132);
  --p-ink-dark:#111;
  --p-blue:#a8aa9c;
  --p-bg:var(--sage); --p-fg:var(--p-ink); --p-accent:var(--p-ink);
  --card-h:clamp(242px,34.4vh,306px);   /* 15% shorter than the original ramp */
}
/* holds the mobile-only overlay copy; the espresso photo it used to carry is gone */
.products__hero{
  position:absolute; inset:0; z-index:0;
}
/* mobile-only overlay copy (headline + subtitle + CTA); hidden on desktop */
.products__hero-copy{ display:none; }
/* coffee bag sits centered against the card inside the row wrapper.
   Four per-product bags share the same positioning; only the one whose
   [data-product] matches the section's [data-active] is displayed. */
.products__bag{
  display:none;
  position:absolute; z-index:3;
  right:4em;
  top:0; bottom:0;
  height:auto;
  max-height:575px;
  width:auto;
  transform:translateY(-10%);
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));
  pointer-events:none; user-select:none;
}
.products[data-active="1"] .products__bag[data-product="1"],
.products[data-active="2"] .products__bag[data-product="2"],
.products[data-active="3"] .products__bag[data-product="3"],
.products[data-active="4"] .products__bag[data-product="4"]{ display:block; }
/* wraps card + bag. With the espresso photo gone there is nothing to sit below,
   so the group simply centres in the section. */
.products__row{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:0;
  width:100%;
  margin:0 auto;
}
.products__card{
  position:relative; z-index:2;
  display:flex; align-items:stretch;
  width:min(96vw,1120px); min-height:var(--card-h);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  overflow:visible;
}
.products__tabs{ display:flex; align-items:stretch; flex:0 0 auto; }
.products__tab{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  width:clamp(31.5px,3vw,42px);
  padding:clamp(.75rem,1.5vw,1.2rem) 0 clamp(.55rem,1.05vw,.85rem);
  border:0; cursor:pointer; color:var(--p-ink-dark);
  font-family:var(--ff-nav); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  transition:filter .18s ease;
}
.products__tab:hover{ filter:brightness(1.05); }
.products__tab:focus-visible{ outline:2px solid var(--p-ink); outline-offset:-4px; }
.products__tab[data-product="1"]{ background:var(--p-blue); }
.products__tab[data-product="2"]{ background:var(--rust); }
.products__tab[data-product="3"]{ background:var(--cream-warm); }
.products__tab[data-product="4"]{ background:var(--olive); }
.products__tab[data-product="5"]{ background:var(--brown); }
.products__tab[data-product="6"]{ background:var(--sage); }
/* the active product opens as the panel, so its strip tab is hidden (design shows 5 strips) */
.products__tab.is-active{ display:none; }

.products__tab-title{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:clamp(.72rem,1.05vw,.92rem); white-space:nowrap;
}
.products__tab-num{
  font-family:var(--ff-nav); font-weight:700;
  letter-spacing:.02em; text-transform:none;
  font-size:clamp(.72rem,1vw,.9rem);
}
.products__tab-num sup{ font-size:.7em; top:-.45em; }

.products__panel{
  flex:1 1 auto; position:relative;
  background:var(--p-bg); color:var(--p-fg);
  padding:clamp(.74rem,1.28vw,1.15rem) clamp(1.3rem,2.2vw,2rem);
  transition:background .25s ease, color .25s ease;
}
/* the old panel bleed extended 100vw to the right under the absolute-hero layout;
   with the stacked centered card it would create an asymmetric colored bleed, so keep it off */
.products__panel::after{ display:none; }
.products__doc{ display:none; }
.products__doc.is-active{ display:block; }
.products__title{
  margin:0 0 clamp(.24rem,.44vw,.35rem);
  padding-bottom:clamp(.27rem,.49vw,.4rem);
  border-bottom:1px solid color-mix(in srgb,var(--p-fg) 45%, transparent);
  font-family:var(--ff-nav); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  font-size:clamp(1rem,1.55vw,1.32rem); line-height:1.15; color:var(--p-fg);
}
.products__title sup{ font-size:.7em; top:-.45em; }
.products__lede{
  margin:0 0 clamp(.42rem,.77vw,.63rem);
  font-family:var(--ff-base); font-weight:500;
  font-size:var(--fs-body); line-height:1.4; color:var(--p-fg);
}
.products__specs{
  margin:0 0 clamp(.26rem,.49vw,.4rem);
  padding-bottom:clamp(.26rem,.44vw,.38rem);
  border-bottom:1px solid color-mix(in srgb,var(--p-fg) 40%, transparent);
  font-family:var(--ff-nav); color:var(--p-fg);
}
.products__specs dt{
  margin-top:clamp(.27rem,.52vw,.4rem);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  font-size:calc(var(--fs-body) * .9); line-height:1.2; color:var(--p-accent);
}
.products__specs dt:first-child{ margin-top:0; }
.products__specs dd{
  margin:0; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:var(--fs-body); line-height:1.32;
}
.products__cta{
  display:inline-block; background:var(--rust); color:var(--beige);
  font-family:var(--ff-nav); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:var(--fs-body);
  padding:clamp(.85rem,1.4vw,1.1rem) clamp(1.6rem,3vw,2.4rem);
  text-decoration:none; border:0; border-radius:.5rem;
  transition:filter .15s ease;
  cursor:pointer;
}
.products__cta:hover,.products__cta:focus-visible{ filter:brightness(1.05); background:var(--rust); color:var(--beige); }
/* Card 2 (GINGA) sits on a rust panel, so the rust CTA would blend in — give it a white outline */
.products[data-active="2"] .products__cta{ border:2px solid #fff; }

/* per-active-product palette */
.products[data-active="1"]{ --p-bg:var(--p-blue);     --p-fg:var(--p-ink-dark); --p-accent:var(--beige); }
.products[data-active="2"]{ --p-bg:var(--rust);       --p-fg:var(--beige);      --p-accent:var(--p-ink); }
.products[data-active="3"]{ --p-bg:var(--cream-warm); --p-fg:var(--p-ink-dark); --p-accent:var(--rust); }
.products[data-active="4"]{ --p-bg:var(--olive);      --p-fg:var(--p-ink-dark); --p-accent:var(--p-ink-dark); }
.products[data-active="5"]{ --p-bg:var(--brown);      --p-fg:var(--beige);      --p-accent:var(--p-ink); }
.products[data-active="6"]{ --p-bg:var(--sage);       --p-fg:var(--p-ink-dark); --p-accent:var(--p-ink); }
/* readable spec labels on the darker active panels */
.products[data-active="2"] .products__specs dt,
.products[data-active="5"] .products__specs dt{ color:var(--beige); }
/* card 1 sits on a light blue-gray bg, so labels need dark text for contrast */
.products[data-active="1"] .products__specs dt{ color:var(--p-ink-dark); }
.products__arrow{
  display:none;
  position:absolute; left:50%; bottom:clamp(1rem,3vh,2rem);
  transform:translateX(-50%);
  width:clamp(42px,4vw,54px); height:clamp(42px,4vw,54px);
  border-radius:50%; align-items:center; justify-content:center;
  color:var(--dark-brown); border:1.5px solid var(--dark-brown);
  text-decoration:none; z-index:4; background:transparent;
  transition:background .18s ease, color .18s ease;
}
.products__arrow:hover{ background:var(--dark-brown); color:var(--beige); }
.products__arrow .arrow-icon{ font-size:clamp(1.2rem,1.7vw,1.55rem); }

/* ----------------------------- CONTACT (page 5) ----------------------------- */
.contact{
  position:relative; min-height:100vh; min-height:100svh;
  overflow:hidden; isolation:isolate;
  color:var(--beige); background:var(--dark-brown);
}
.contact__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.contact__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,12,6,.55) 0%, rgba(20,12,6,.22) 34%, rgba(20,12,6,.10) 55%, rgba(20,12,6,.42) 100%),
    linear-gradient(0deg, rgba(20,12,6,.45) 0%, rgba(20,12,6,0) 40%);
}
.contact__inner{
  position:relative; z-index:2; min-height:inherit;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);
  padding:calc(var(--nav-h) + clamp(1.5rem,5vh,3rem)) clamp(1.5rem,5vw,5.5rem) clamp(2.5rem,6vh,4rem);
}
.contact__policies-wrap{ align-self:end; }
.contact__policies{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(.6rem,1vw,.9rem);
  font-family:var(--ff-nav); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  font-size:clamp(.78rem,1vw,.92rem);
}
.contact__policy{ color:var(--beige); text-decoration:none; transition:opacity .15s ease; }
.contact__policy:hover,.contact__policy:focus-visible{ color:var(--beige); opacity:.72; }

/* Disabled policy links (Shipping / Returns / Privacy Policy):
   show a small "⊘ coming soon" pill on hover / keyboard focus. Pure CSS,
   no HTML change. On desktop the pill sits to the right of the link (list
   is a vertical stack); on mobile it drops below (list wraps horizontally). */
.contact__policy[aria-disabled="true"]{
  cursor:not-allowed;
  position:relative;
}
/* keep the disabled link fully readable while the tooltip is showing —
   overrides the generic .contact__policy hover fade so the pill (which
   inherits its parent's opacity) doesn't get dimmed to 72% */
.contact__policy[aria-disabled="true"]:hover,
.contact__policy[aria-disabled="true"]:focus-visible{ opacity:1; }
.contact__policy[aria-disabled="true"]::after{
  content:"\2298  coming soon";          /* U+2298 CIRCLED DIVISION SLASH */
  position:absolute;
  left:calc(100% + .75rem); top:50%;
  transform:translateY(-50%);
  padding:.4rem .8rem;
  background:var(--dark-brown); color:var(--beige);
  font-family:var(--ff-nav); font-weight:500;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(240,220,208,.35);
  border-radius:999px;
  opacity:0; visibility:hidden;
  pointer-events:none;
  z-index:5;
  transition:opacity .15s ease, visibility .15s ease;
}
.contact__policy[aria-disabled="true"]:hover::after,
.contact__policy[aria-disabled="true"]:focus-visible::after{
  opacity:1; visibility:visible;
}

.contact__details{
  align-self:center; justify-self:end; text-align:right;
  max-width:42ch; display:flex; flex-direction:column; gap:clamp(.7rem,1.4vw,1.1rem);
}
.contact__heading{
  margin:0 0 clamp(.4rem,1vw,.9rem);
  font-family:var(--ff-nav); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  font-size:var(--fs-total); line-height:1.1; color:var(--beige);
}
.contact__intro{
  margin:0; font-family:var(--ff-base); font-weight:500;
  font-size:var(--fs-body); line-height:1.5; color:var(--beige);
}
.contact__lines{ margin:clamp(.4rem,1vw,.8rem) 0 0; font-family:var(--ff-base); font-size:var(--fs-body); line-height:1.55; }
.contact__line{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; }
.contact__line dt{ font-weight:500; }
.contact__line dd{ margin:0; font-weight:500; }
.contact__line a{ color:var(--beige); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease; }
.contact__line a:hover,.contact__line a:focus-visible{ border-bottom-color:var(--beige); color:var(--beige); }

.contact__social{ margin:clamp(.5rem,1vw,.9rem) 0 0; font-family:var(--ff-base); font-size:var(--fs-body); line-height:1.6; }
.contact__social-label{ font-weight:700; margin-right:.35rem; }
.contact__social a{ color:var(--beige); text-decoration:none; transition:opacity .15s ease; margin:0 .15rem; }
.contact__social a:hover,.contact__social a:focus-visible{ color:var(--beige); opacity:.72; }
.contact__social span[aria-hidden="true"]{ margin:0 .1rem; opacity:.55; }

/* ----------------------------- BASKET (page 6) ----------------------------- */
.basket{
  position:relative; min-height:100vh; min-height:100svh;
  background:var(--beige); color:var(--dark-brown);
  overflow:hidden; isolation:isolate;
}
.basket .visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.basket__hero{
  position:absolute; top:0; right:0; bottom:0; width:42%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
.basket__inner{
  position:relative; z-index:1; width:58%; min-height:inherit;
  padding:calc(var(--nav-h) + clamp(1rem,4vh,2.5rem)) clamp(1.5rem,3.5vw,4rem) clamp(3rem,6vh,5rem);
  display:flex; flex-direction:column; gap:clamp(1.5rem,3.5vh,2.75rem);
}
.basket__logo{ align-self:center; text-decoration:none; }
.basket .wordmark{ font-size:clamp(.95rem,1.4vw,1.3rem); }
.basket .wordmark__word{ width:clamp(180px,22vw,300px); }

.basket__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.5vw,2.5rem); align-items:start;
}
.basket__head{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.25rem;
  margin-bottom:clamp(1.25rem,2.5vh,2rem);
  font-family:var(--ff-nav); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:var(--fs-body);
}
.basket__count{ color:var(--dark-brown); white-space:nowrap; }
.basket__continue{
  display:inline-block; padding:clamp(.5rem,.9vw,.7rem) clamp(.75rem,1.2vw,1.1rem);
  border:1.5px solid var(--dark-brown); color:var(--dark-brown); text-decoration:none;
  border-radius:2px; letter-spacing:.1em; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.basket__continue:hover,.basket__continue:focus-visible{ background:var(--dark-brown); color:var(--beige); }

.basket__items{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 2rem);
}
.basket__item{
  display:flex; flex-direction:column;
  gap:clamp(.5rem, 1vw, .85rem);
  padding:clamp(.5rem, 1vw, .85rem) 0;
  min-width:0;
}
.basket__item.is-removed{ display:none; }
.basket__item-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
}
.basket__item-name{
  margin:0;
  font-family:var(--ff-nav); font-weight:700;
  color:var(--dark-brown);
  font-size:var(--fs-body);
  letter-spacing:.08em; text-transform:uppercase;
  line-height:1.3;
  min-width:0;
}
.basket__item-img{
  display:block; margin:0 auto;
  width:100%; height:auto;
  max-width:clamp(140px, 22vw, 200px);
  object-fit:contain;
}
.basket__empty{ margin:0; padding:clamp(1rem,2vh,1.5rem) 0; font-family:var(--ff-nav); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--dark-brown); opacity:.75; font-size:var(--fs-body); }
.basket__remove-btn{
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--rust); color:var(--beige);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer;
  font-family:var(--ff-nav); font-weight:700; font-size:1rem; line-height:1;
  transition:filter .15s ease;
  flex:0 0 auto;
}
.basket__remove-btn:hover,.basket__remove-btn:focus-visible{ filter:brightness(1.05); background:var(--rust); color:var(--beige); }

.basket__summary{
  font-family:var(--ff-nav); color:var(--dark-brown);
  font-size:var(--fs-body); letter-spacing:.06em; text-transform:uppercase;
  display:flex; flex-direction:column; gap:clamp(1rem,2vh,1.4rem);
  padding-top:clamp(2.5rem,6vh,4rem);
}

.basket__cta{
  display:inline-block; align-self:flex-start; margin-top:clamp(.6rem,1.2vw,1rem);
  background:var(--rust); color:var(--beige);
  font-family:var(--ff-nav); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:clamp(.85rem,1.05vw,1rem);
  padding:clamp(.8rem,1.3vw,1rem) clamp(1.6rem,2.6vw,2.4rem);
  text-decoration:none; border:0; border-radius:4px; transition:filter .15s ease;
}
.basket__cta:hover,.basket__cta:focus-visible{ filter:brightness(1.08); color:var(--beige); }
.basket__cta.is-disabled,.basket__cta[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ----------------------------- LEGAL (terms.html — page 3) ----------------------------- */
.legal{
  position:relative; min-height:100vh; min-height:100svh;
  background:var(--beige); color:var(--dark-brown);
  overflow:hidden; isolation:isolate;
}
.legal__title{
  position:relative; z-index:2;
  margin:0; padding:calc(var(--nav-h) + clamp(1.25rem,4vh,2.5rem)) 1.5rem clamp(1.5rem,3vh,2.25rem);
  text-align:center;
  font-family:var(--ff-nav); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,2.15rem); color:var(--dark-brown);
}
.legal__media{
  position:absolute; top:calc(var(--nav-h) + clamp(4.5rem,10vh,7rem)); right:0; bottom:0;
  width:52%; z-index:0;
}
.legal__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.legal__content{
  position:relative; z-index:2;
  width:min(44%,572px);
  padding:0 clamp(1.5rem,3vw,2.5rem) clamp(4.5rem,9vh,6rem) clamp(1.25rem,3vw,3rem);
  text-transform:uppercase;
}
.legal__body{
  margin:0 0 clamp(2.5rem,7vh,5rem); text-align:justify;
  font-family:var(--ff-futura); font-weight:400;
  font-size:clamp(.74rem,.92vw,.92rem); line-height:1.5; letter-spacing:.01em;
}
.legal__run{ font-family:var(--ff-futura); font-weight:700; letter-spacing:.02em; scroll-margin-top:6rem; }
.legal__content a{ color:var(--dark-brown); text-decoration:underline; text-underline-offset:2px; }
.legal__content a:hover,.legal__content a:focus-visible{ opacity:.7; color:var(--dark-brown); }
.legal__arrow{
  position:absolute; z-index:3;
  right:calc(52% + clamp(0.75rem,1.5vw,1.5rem)); bottom:clamp(1.5rem,3.5vh,2.5rem);
  width:clamp(52px,4.4vw,64px); height:clamp(52px,4.4vw,64px);
  display:inline-flex; align-items:center; justify-content:center;
  border:2.5px solid var(--dark-brown); border-radius:50%;
  color:var(--dark-brown); text-decoration:none; transition:transform .25s ease;
}
.legal__arrow:hover,.legal__arrow:focus-visible{ transform:translateY(3px); color:var(--dark-brown); }
.legal__arrow .arrow-icon{ font-size:clamp(2rem,2.6vw,2.5rem); -webkit-text-stroke:.7px currentColor; }

/* ----------------------------- RESPONSIVE ----------------------------- */
@media (max-width:991.98px){
  /* the shared body size follows About's mobile ramp — clamp(.95rem,3vw,1.12rem)
     shifted down 1px — so cards, contact and basket keep matching it here too */
  :root{
    --fs-body:clamp(.8875rem, calc(3vw - .0625rem), 1.0575rem);
    --fs-total:clamp(1.18rem, 3.7vw, 1.35rem);
  }

  /* nav: themed dropdown */
  .site-nav .navbar-collapse{
    margin-top:.85rem; padding:.75rem .5rem 1rem;
    background:color-mix(in srgb,var(--beige) 96%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-radius:.75rem; box-shadow:0 18px 40px rgba(78,43,21,.18);
  }
  .site-nav__list{ row-gap:.35rem; text-align:center; }
  .site-nav .nav-link{ padding:.65rem .5rem; font-size:1.05rem; }
  .site-nav .lang-switch{ display:flex; justify-content:center; align-items:center; margin:.15rem 0 0; padding:.45rem .5rem; gap:.55rem; }
  .lang-switch__btn{ font-size:1rem; padding:.35rem .55rem; }
  .lang-switch__sep{ font-size:1rem; }

  /* HOME: bar starts below the nav (clears the mobile wordmark); badge stays anchored to it */
  .hero{ --bar-top:calc(var(--nav-h) + .25rem); --bar-h:clamp(240px,44vh,430px); --bar-w:clamp(60px,15vw,84px); --badge-size:clamp(98px,25vw,124px); --logo-w:min(36.7vw,176px); }
  .hero__bar-text{ font-size:clamp(.56rem,1.45vw,.7rem); }
  /* G matches the wordmark width on mobile too, but sized to clear the badge (~76%) */
  .hero__mark{ width:var(--logo-w); }
  .hero .wordmark__word{ width:var(--logo-w); }
  .hero__badge{ left:calc(var(--bar-left) + var(--bar-w) * .5); }

  /* ABOUT: stack card over text, image below */
  .about__media{ position:static; width:100%; height:clamp(300px,52vh,460px); margin-top:clamp(1.5rem,5vw,2.5rem); }
  /* the photo sits above the copy here, so the nav-clearing gap is halved —
     it was leaving the badge and card starting far too low */
  .about__content{ min-height:0; justify-content:flex-start; padding:calc((var(--nav-h) + clamp(1.5rem,6vh,3rem)) * .5) clamp(1.1rem,5vw,2rem) 0; }
  .about__copy{ width:100%; display:block; max-height:none; }
  /* on mobile the section stacks and the page scrolls, so let the copy flow (no nested scrollbar) */
  .about__scroll{ overflow:visible; max-height:none; min-height:0; padding-right:0; }
  .about__copy p{ font-size:var(--fs-body); }
  /* desktop-only control: here the section stacks and the page scrolls
     normally, so the arrow has no job to do */
  .about__arrow{ display:none; }

  /* PRODUCTS: stacked vertical flow — espresso photo on top (with overlay copy),
     then the tab + panel card below. Desktop keeps the overlaid card look. */
  .products{
    min-height:0;
    /* card sits flush against the basket photo below — no bottom gap on mobile */
    padding:0;
    overflow:visible;
    display:flex; flex-direction:column; align-items:stretch;
  }
  /* the espresso photo is gone, so the intro copy is a normal in-flow block
     sitting on the beige background */
  .products__hero{
    position:relative; inset:auto; width:100%;
    padding:calc(var(--nav-h) + clamp(1.5rem,6vh,3rem)) clamp(1rem,5vw,2rem) clamp(1.5rem,5vw,2.25rem);
  }
  /* headline + subtitle + pill are dormant on mobile too (kept in DOM for future use) */
  .products__hero-copy{ display:none; }
  .products__hero-title{
    margin:0;
    font-family:var(--ff-serif); font-weight:400;
    font-size:clamp(1.9rem,7.5vw,2.6rem);
    line-height:1.05;
    letter-spacing:.005em;
  }
  .products__hero-sub{
    margin:clamp(1rem,4vw,1.5rem) 0 clamp(1.25rem,5vw,1.75rem);
    font-family:var(--ff-nav); font-weight:500;
    font-size:clamp(.85rem,3vw,1rem);
    line-height:1.35; letter-spacing:.01em;
  }
  /* a label, not a control — it carries the pill styling but does nothing */
  .products__hero-cta{
    display:inline-block; cursor:default;
    background:var(--dark-brown); color:var(--beige);
    padding:.7rem 1.1rem;
    border-radius:9999px;
    font-family:var(--ff-nav); font-weight:700;
    letter-spacing:.14em;
    font-size:clamp(.72rem,2.6vw,.82rem);
    text-transform:uppercase; text-decoration:none;
    box-shadow:0 6px 20px rgba(78,43,21,.22);
  }

  /* mobile hide: match the show rule's chain shape at (0,4,0) so it beats the
     desktop `.products[data-active="N"] .products__bag[data-product="N"]`
     show rule (0,3,0). No !important needed — pure specificity. */
  .products[data-active] .products__bag[data-product]{ display:none; }
  .products__row{ display:block; margin:0; }
  .products__panel::after{ display:none; }

  /* card sits directly beneath the hero image, full-width */
  .products__card{ width:100%; margin:0; min-height:clamp(357px,51vh,459px); }
  .products__tab{ width:clamp(30px,8vw,46px); padding:clamp(.8rem,2vw,1.2rem) 0 clamp(.5rem,1.2vw,.85rem); }
  .products__tab-title{ font-size:clamp(.62rem,1.9vw,.78rem); letter-spacing:.12em; }
  .products__tab-num{ font-size:clamp(.7rem,2vw,.82rem); }
  .products__panel{ padding:clamp(.9rem,3vw,1.3rem) clamp(1rem,3.5vw,1.4rem); }
  /* shopping-part text scaled to 85% of the About-matched body size on mobile —
     shrinks title/lede/spec labels/qty/CTA text without touching padding or tabs */
  .products__title{ font-size:clamp(0.978rem,3.06vw,1.148rem); }
  .products__lede{ font-size:calc(var(--fs-body) * 0.85); }
  .products__specs dd{ font-size:calc(var(--fs-body) * 0.85); letter-spacing:.06em; }
  .products__specs dt{ font-size:calc(var(--fs-body) * 0.765); letter-spacing:.06em; }
  /* CTA keeps its base clamp-based padding on mobile so it stays generous and touch-friendly */

  /* CONTACT: stack, left-align */
  /* align-content:end stops the grid stretching its rows over the full
     viewport height — the block sits together at the foot of the section */
  .contact__inner{
    grid-template-columns:1fr; align-content:end;
    gap:clamp(1.4rem,3.5vh,2.25rem);
    padding:calc(var(--nav-h) + clamp(1.5rem,6vh,3rem)) clamp(1.25rem,5vw,2rem) clamp(2.25rem,6vh,3.25rem);
  }
  .contact__policies-wrap{ order:2; align-self:start; }
  .contact__policies{ flex-direction:row; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:clamp(.78rem,2.6vw,.9rem); }
  /* On the horizontal wrap-row layout, drop the "coming soon" pill BELOW
     the link so it doesn't collide with the next policy on the same row. */
  .contact__policy[aria-disabled="true"]::after{
    left:0; top:100%;
    margin-top:.5rem;
    transform:none;
  }
  .contact__details{ order:1; justify-self:start; text-align:left; max-width:none; }
  .contact__line{ justify-content:flex-start; }
  .contact__intro,.contact__lines,.contact__social{ font-size:var(--fs-body); }

  /* BASKET: banner up top, single column */
  .basket__hero{ position:static; width:100%; height:clamp(220px,32vh,360px); }
  .basket__inner{ width:100%; padding:clamp(2rem,5vh,3rem) clamp(1.25rem,5vw,2rem) clamp(2.5rem,6vh,4rem); }
  .basket__logo{ align-self:center; }
  .basket .wordmark__word{ width:min(56vw,280px); }
  .basket__grid{ grid-template-columns:1fr; gap:clamp(2rem,4vh,3rem); }
  .basket__summary{ padding-top:0; }
  .basket__cta{ font-size:clamp(1rem,3.1vw,1.12rem); }
  .basket__items{ grid-template-columns:1fr; }
  /* line item on mobile: keep the header (name + rust ✕) and drop the bag image.
     `.basket__item` gap/padding intentionally untouched — gap is inert with a
     single visible flex child, and the vertical padding still frames the card. */
  .basket__item-img{ display:none; }

  /* LEGAL: image below, full-width text */
  .legal__media{ position:static; width:100%; height:clamp(260px,40vh,380px); margin-top:clamp(1.25rem,4vw,2rem); }
  .legal__content{ width:100%; padding:0 clamp(1.1rem,5vw,2rem) clamp(3.5rem,8vh,5rem); }
  .legal__body{ font-size:clamp(.82rem,2.9vw,.98rem); }
  .legal__arrow{ position:static; display:flex; margin:clamp(1.25rem,4vw,2rem) clamp(1.1rem,5vw,2rem) clamp(1rem,4vw,2rem) auto; color:var(--dark-brown); border-color:var(--dark-brown); filter:none; }
}

@media (max-width:575.98px){
  .hero__center{ align-items:center; }
  .hero__bar{ left:clamp(.75rem,4vw,1.5rem); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none!important; }
}